Brand Assets
Logos, Colours & Usage
These marks were made by the families who run this site. They are not the school's official identity and neither Mission Bay School nor San Francisco Unified School District has adopted them. Use them for community things: flyers, class lists, a welcome table. Download what you need, or take the set as a zip.
Where they come from
Our colours are the building
Every colour below was sampled from these two photographs rather than chosen in the abstract. The school already made its visual decisions in paint and tile: a cool panel field, one green, one marigold, a cobalt mural, and red-orange window frames. The palette follows the building so that the website and the walk up to the front door feel like the same place.
Colours
Palette
Mural Cobalt
Primary
The entrance tile mural, darkened for interface use.
White text. 9.4:1, clears AAA.
Facade Green
Secondary
The green cladding on the entry wall and canopy.
Icons and shapes only. Use Green Ink #486C2C for text.
Canopy Marigold
Accent
The soffit under the entrance canopy.
Dark text only. Use Marigold Ink #7A4E06 for text.
Coral Cove
Energy
The red-orange window frames.
Icons and shapes only. Never white text: 3.8:1 fails for copy.
Panel
Ground
The white panel cladding that covers most of the building.
Any of the ink shades.
Silver
Ground
The cladding in shade, and the concrete plaza.
Any of the ink shades.
Night
Text
The mural's linework. Never pure black.
White or Panel.
Text shades
The accents above are bright enough to work as fills and too bright to work as small text. When you need a coloured word rather than a coloured shape, use these instead. Each one clears the 4.5:1 contrast minimum on white.
Green Ink
Text
Facade Green, darkened until it clears AA.
6.1:1 on white.
Marigold Ink
Text
Canopy Marigold, darkened until it clears AA.
7.2:1 on white.
Coral Ink
Text
Coral Cove, darkened until it clears AA.
6.5:1 on white.
CMYK values are unmanaged conversions for reference. For anything printed at volume, ask your printer to match the hex on a proof rather than trusting the conversion.
Files
Logos & Lockups
Please don't use these marks in a way that implies they are the school's own, or that SFUSD endorses them, and don't alter their colours or proportions. For anything beyond informal community use, ask the school office first. If the school adopts an identity of its own, that one wins and these files come down.
Everyday use
Markmin 16px
The entrance, reduced: panel volume, green fascia, three colour-blocked windows, marigold sill.
The default logo. Works down to 16px, so it doubles as the favicon and the app icon.
Download SVG
Horizontal lockupmin 180px wide
Mark plus the school name, side by side.
The first choice for letterhead, flyers, banners, and email signatures. Keep clear space equal to the height of the green fascia band on all four sides.
Download SVG
Stacked lockupmin 120px wide
Mark above the school name, centred.
For narrow or square spaces: tote bags, shirt fronts, social avatars.
Download SVG
Mark (reversed)min 16px
The mark knocked out in white, for dark or photographic backgrounds.
Use on cobalt, on a dark photo, or anywhere the standard mark would lose contrast.
Download SVG
App icon
1024px rounded square, flat cobalt.
Favicons, touch icons, and social profile photos. The rounded corners are already in the file, so do not add your own.
Download SVGFormal use
Emblemmin 64px
Circular badge: school name on the top arc, San Francisco and Est. 2026 below.
Formal contexts only. Letterhead, certificates, official documents. Not for spirit wear.
Download SVG
Emblem (reversed)min 64px
The emblem in white, for dark backgrounds.
Same formal-context rule as the standard emblem.
Download SVGOne colour, for print and embroidery
Mark (one colour)min 20px
A single flat cobalt, with the building knocked out.
For embroidery, screen printing with one screen, stamps, engraving, and faxable forms. Recolour this file freely to whatever single colour a process requires.
Download SVGPattern
Facade band
A row of panel volumes with colour-blocked windows, drawn from the building's elevation.
Use as a full-width horizontal band, 80 to 120px tall: a section divider, a footer topper, or the bottom edge of a hero. Do not tile it as a background.
Download SVGClear space and minimum size
Leave a margin on all four sides at least as tall as the green band in the mark. Nothing else goes inside that margin: no text, no borders, no other logos. The mark itself is drawn to survive down to 16px, which is why it is also the favicon. The lockups need more room, so their minimums are listed on each card.
Limits
What Not To Do
Don'tDon't stretch
Scale proportionally. The windows are square for a reason.
Don'tDon't recolour
The palette is sampled from the building. Recolouring breaks the link.
Don'tDon't add effects
No drop shadows, glows, bevels, or outlines.
Don'tDon't rotate
The mark is a building. Buildings sit level.
NOWDon't crowd it
Leave clear space on all four sides, at least the height of the green band.
Don'tDon't place on busy photos
Use the reversed mark on a plain area, or on a solid colour.
Type
Typography
Headings and wordmark
Nunito
700 and 800 for headings and the wordmark
SIL Open Font License. Free to install and use for flyers, merch and print. Download ↗
Body and interface
Inter
400, 500, 600 for body copy and interface text
SIL Open Font License. Free to install and use for flyers, merch and print. Download ↗
If a vendor cannot install fonts, ask for the lockup with the text converted to outlines and we will send one. Never substitute a different typeface in the wordmark.
Imagery
Photography & Illustration
Photography
Natural light, real spaces, no filters that shift the building's colours. The cladding should read cool and the canopy warm, the way they do in person. Wide shots that include the colour-blocked windows carry the identity better than close crops.
Illustration
Flat, warm, hand-drawn rather than vector-perfect, in the palette above. The direction follows the bay and estuary wildlife already in the school's own entrance mural. The mural artwork itself is a commissioned piece and must not be reproduced or traced.
Rules
Naming & Permissions
Naming
- Write the name in full: Mission Bay School.
- “MBS” is fine informally, inside the community.
- The district is San Francisco Unified School District. This site is not the school and not part of the district.
Permissions
- Family and community use: go ahead, no request needed.
- Anything commercial, or anything implying school or district endorsement: ask the office first.
- These are community-made marks, not the school's official identity.
Download everything
Every mark, lockup, emblem, icon and pattern, plus the palette notes, in one zip.
There is no community store yet. Questions about using these files go via Contact.