Brand Assets
Logos, Colours & Usage
A papercut ray, warm sun, and rolling wave give Mission Bay a shared visual language. Find the logo family, colour palette, typography, and artwork here, with practical guidance for keeping our communications consistent.
Our visual identity
Four shapes, one visual language
Angular cuts and fluid contours give the ray its distinctive silhouette. The sun and wave share that handmade character: uneven edges, simple shapes, and a coastal palette. These forms repeat across the full-colour mark, one-colour mark, and badge.
The papercut family leads our visual identity. The illustrated mascot adds a separate, playful expression for school spirit.
Ray
A lifted fin and curled tail suggest curiosity and momentum.
Full sun
Uneven facets bring Mission Bay sunshine into the identity.
Half sun
A new day, with a flat horizon and the same irregular contour.
Wave
A rolling band connects the shapes with a sense of water in motion.
Colours
Palette
Coastal ocean tones, bay daylight, and warm cut-paper colour. Use these five values consistently across digital and printed materials.
Sea Forest
Dark ground
The deep background that anchors light type and layered marks.
Use Warm Sand or Seafoam Mint text on Sea Forest.
Ocean Teal
Primary accent
The papercut ray and focal elements carry the coastal colour.
Use for graphic accents. Teal on Warm Sand is about 3.05:1: unsuitable for small text.
Coral Sunrise
Sun accent
The full sun and half sun bring warmth to the logo family.
Use Sea Forest text on Coral Sunrise.
Seafoam Mint
Wave accent
Water details, light wordmarks, and the secondary ray mark.
Use Sea Forest text on Seafoam Mint.
Warm Sand
Base neutral
The light paper background for everyday materials.
Use Sea Forest text on Warm Sand.
Readable colour combinations
For web copy, Sea Forest on Warm Sand, Seafoam Mint, or Coral Sunrise meets the WCAG AA contrast minimum for normal text. Use Warm Sand or Seafoam Mint text on Sea Forest for dark sections. Reserve Ocean Teal for accents rather than small text on a light background.
Welcome, Mission Bay.
Sea Forest on Coral Sunrise
Welcome, Mission Bay.
Sea Forest on Seafoam Mint
Welcome, Mission Bay.
Sea Forest on Warm Sand
RGB values are for screens. CMYK values are unmanaged estimates, not approved print specifications. Work with your printer on a colour-managed proof before a production run.
Files
Logos & Lockups
These SVGs stay sharp at any scale. The light lettering and wave details are designed for a dark ground, shown here in Sea Forest. Choose a supplied variant and preserve its proportions. For usage or production questions, contact the PTA.
The papercut logo family
Primary full-colour mark
The layered ray, sun, and wave beside the school name.
The main signature for website headers, stationery, signage, and presentation covers. Use this light-lettered artwork on Sea Forest.
Download SVG
Secondary one-colour mark
The ray silhouette and school name in Seafoam Mint.
A simpler option for one-colour printing, embroidery, and smaller applications. Check the finished size with your printer or vendor.
Download SVG
Badge mark
An arched school name frames the ray, half sun, and wave, with San Francisco below.
For apparel, tote bags, stickers, and other compact placements. The open ray silhouette needs a dark background.
Download SVGShapes & supporting graphics
Web icon
The single Seafoam Mint papercut ray on a Sea Forest background.
For browser and app icons. PNG favicon and Apple touch icon sizes are also included in the brand kit.
Download SVG
Papercut emblem
The ray, full sun, and wave without the wordmark.
A compact graphic companion where the school name is already present.
Download SVGRay
A lifted fin and curled tail, cut in Ocean Teal.
Use the silhouette as a focal graphic or a small accent. Keep its distinctive proportions.
Download SVG
Ray in mint
The same papercut silhouette in Seafoam Mint.
For dark backgrounds where the light silhouette can read clearly.
Download SVGFull sun
An irregular Coral Sunrise shape with uneven, expressive facets.
A warm accent for layouts. Preserve the hand-cut edge rather than replacing it with a perfect circle.
Download SVGHalf sun
The full sun cropped to form a horizon.
Use as a supporting accent with the same proportions as the supplied artwork.
Download SVGWave
A Seafoam Mint band with rolling, uneven contours.
A quiet accent or divider. Scale proportionally to retain the cut-paper rhythm.
Download SVGSpirit mascot
Spirit mascot
The illustrated ray mascot by Kyle Mirro.
A supporting spirit mark for playful school moments. Lead everyday communications with the papercut logo family.
Download SVGGive the artwork room
As a practical layout recommendation, leave clear breathing room around each logo and check it at its final display or print size. The school name, wave, and ray silhouette should remain easy to read. In very small spaces, use a simple ray or emblem where the school name is already identified. Confirm embroidery and print detail with your vendor.
Practical guidance
What Not To Do
These layout recommendations help preserve the character and legibility of the supplied artwork.
Don'tDon't stretch
Scale proportionally to preserve the lifted fin and sweeping tail.
Don'tDon't recolour
Choose the supplied full-colour or mint artwork to keep the palette consistent.
Don'tDon't add effects
Keep the papercut shapes flat, without shadows, glows, or outlines.
Don'tDon't rotate the logo
Keep the complete lockup in its supplied orientation.
FAMILIESDon't crowd it
Leave breathing room between the mark and nearby text or borders.
Don'tDon't lose contrast
Place light wordmarks on a plain dark ground so every part stays visible.
Type
Typography
Display and headlines
OSWALD
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
Bold (700) for display headings, signage, and prominent titles.
Get Oswald on Google Fonts ↗Body and communications
Nunito Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
Regular (400) for body copy; Bold (700) for labels and emphasis.
Get Nunito Sans on Google Fonts ↗Use the supplied logo files to keep the wordmark intact. Installing these fonts is for creating companion text; there is no need to recreate the logo lettering.
Imagery
Photography & Illustration
Photography
Recommended for the website: natural light, real school spaces, and a clear focus. Let photographs sit alongside the papercut shapes with enough space for both to read. Put light logos on a solid Sea Forest panel when a photograph is too busy behind them.
Illustration
Lead with the papercut ray, sun, and wave. Keep their flat colours and irregular edges. The illustrated ray mascot by Kyle Mirro is a supporting spirit mark, best used selectively so the papercut family remains the consistent thread.
Reference
Naming & Permissions
Naming
- Write the school name in full: Mission Bay School.
- “MBS” is fine informally, inside the community.
- Identify the PTA as Mission Bay School PTA.
- The district is San Francisco Unified School District. This website is operated by the PTA.
Credits & usage questions
Papercut identity: Lauren Loui and RJ Andrews. Illustrated ray mascot: Kyle Mirro.
For permission to use these assets, merchandise, or questions about school and district endorsement, contact the PTA.
Download everything
The papercut logo family, supporting shapes, spirit mascot, web icons, and reference notes in one zip.
There is no community store yet. Questions about using these files go via Contact.