Shape 01
Download brand package
The working brand system behind The Street Food Company, reconciled against the live site, not reconstructed from memory.
The crest is the full mark and it needs room. Where there is no room, the short form does the same job in a fraction of the space.
Core logo.
The mono variants are for monotone output: black-and-white print, a single-colour stencil, engraving or embossing, or anywhere the full-colour logo cannot be reproduced.
Clear space.
Half the cap-height of the mark on every side.
The logo always appears on solid backgrounds. Never over imagery. Mark and wordmark stay on the same baseline whenever they are paired. Mono variants are used when the surface forbids the color treatment.
Four colours, no spares. Yellow carries the brand, near-black holds the page, cream and white do the reading. Every swatch is copy-on-click.
Visual balance.
Each part of the circle represents how much of this colour should roughly be used in the system. Creativity is encouraged for special use-cases (promo, posters, etc.) but clean branded work should respect it.
- Secondary43%
- Primary31%
- Blacks21%
- Accent6%
Three typefaces, three jobs. Barlow does the shouting: regular width, black, all-caps on every headline and button. Prompt does the talking, Light 300 and cased, for body copy and labels. Patua One is the slab that sets section headings. Headlines stay uppercase; body copy stays cased and light.
Hero / Display
Barlow
Hero typeface — display/headline.
Regular400
SemiBold600
ExtraBold800
Black900
Body
Prompt
Body typeface.
275275
Light300
Medium500
Accent
Patua One
Alt typeface — monospace or alternative.
Regular400
Scale
Every step in the system.
Desktop sizes
Headings
- H1Display heading set in the hero face.68px
- Font
- Barlow Black 900
- Desktop
- 68 / 75 px
- Tracking
- 0.0%
- Case
- All caps
- H2Section title built from the same hierarchy.58px
- Font
- Barlow SemiBold 600
- Desktop
- 58 / 58 px
- Tracking
- 0.0%
- Case
- All caps
- H3Body face at the largest editorial step. Use it for opening passages and emphatic statements.35px
- Font
- Barlow Regular 400
- Desktop
- 35 / 35 px
- Tracking
- 0.0%
- Case
- All caps
- H4Body face at the mid-editorial step. Used for sub-headings and lede paragraphs.28px
- Font
- Barlow Regular 400
- Desktop
- 28 / 32 px
- Tracking
- 0.0%
- Case
- All caps
- H5Caption-style heading25px
- Font
- Patua One Regular 400
- Desktop
- 25 / 28 px
- Tracking
- 0.0%
- Case
- All caps
- H6Smallest heading20px
- Font
- Prompt Medium 500
- Desktop
- 20 / 20 px
- Tracking
- 7.5%
- Case
- All caps
Body
- Body BaseBody face at the running text scale. Comfortable for paragraphs of up to 70 characters per line.16px
- Font
- Prompt Light 300
- Desktop
- 16 / 24 px
- Tracking
- 0.0%
- Case
- Normal case
- Body SmallBody face at the small annotation scale. Captions, footnotes, table cells.14px
- Font
- Prompt Light 300
- Desktop
- 14 / 21 px
- Tracking
- 0.0%
- Case
- Normal case
Labels / Accent
- CaptionBrand guide / Version 1.014px
- Font
- Prompt Thin 100
- Desktop
- 14 / 21 px
- Tracking
- 0.0%
- Case
- Title case
- Usage
- Live site renders this italic (Prompt 100 italic); tokens.json has no fontStyle field.
- ButtonTake action18px
- Font
- Barlow ExtraBold 800
- Desktop
- 18 / 20 px
- Tracking
- 1.1%
- Case
- All caps
- Usage
- Typography pointers for button text.
- LabelSection label14px
- Font
- Prompt Medium 500
- Desktop
- 14 / 14 px
- Tracking
- 10.7%
- Case
- All caps
StyleDesktopTrackingCase
H1Barlow Black 900
Display heading set in the hero face.
Desktop · px / line height68/75Tracking0.0%CaseAll capsH2Barlow SemiBold 600
Section title built from the same hierarchy.
Desktop · px / line height58/58Tracking0.0%CaseAll capsH3Barlow Regular 400
Body face at the largest editorial step. Use it for opening passages and emphatic statements.
Desktop · px / line height35/35Tracking0.0%CaseAll capsH4Barlow Regular 400
Body face at the mid-editorial step. Used for sub-headings and lede paragraphs.
Desktop · px / line height28/32Tracking0.0%CaseAll capsH5Patua One Regular 400
Caption-style heading
Desktop · px / line height25/28Tracking0.0%CaseAll capsH6Prompt Medium 500
Smallest heading
Desktop · px / line height20/20Tracking7.5%CaseAll capsBody BasePrompt Light 300
Body face at the running text scale. Comfortable for paragraphs of up to 70 characters per line.
Desktop · px / line height16/24Tracking0.0%CaseNormal caseBody SmallPrompt Light 300
Body face at the small annotation scale. Captions, footnotes, table cells.
Desktop · px / line height14/21Tracking0.0%CaseNormal caseCaptionPrompt Thin 100Live site renders this italic (Prompt 100 italic); tokens.json has no fontStyle field.
Brand guide / Version 1.0
Desktop · px / line height14/21Tracking0.0%CaseTitle caseButtonBarlow ExtraBold 800Typography pointers for button text.
Take action
Desktop · px / line height18/20Tracking1.1%CaseAll capsLabelPrompt Medium 500
Section label
Desktop · px / line height14/14Tracking10.7%CaseAll capsThe graphic shapes that sit alongside the The Street Food Company logo. Use them as drawn, in their own colours, by the rules beside each one.
Every button on every colour of the palette. Each background gets its own set, so contrast holds wherever a button lands. Hover and press to try them live.
Secondary#F9F8F4
Primary#F9BE08
Blacks#1A1A19
Accent#FFFFFF
Two sets. Marketing icons carry the brand's message; functional icons do the everyday work. Both come in three colours, each matched to its surface.
Functional
For interfaces and labels, use the brand’s functional icons.
- Stroke1.5 px
- Grid24 × 24
- Caps & joinsRound
- 162440SizesS · M · L px
Need help implementing this brand?
