00Brand Kit
The Froth brand kit
Everything below renders from the live design tokens and components — it can't drift from production. Froth is a surf-condition reporting app with two co-equal pillars: Community reports shared with everyone, and Private Group sharing with just your crew. The marketing surface is dark-only by deliberate choice.
01Logo & Wordmark
Do
- Always ship the wordmark with its "powered by Orphanboards" tagline.
- Keep the wordmark white (foreground) on dark surfaces.
- Link the mark to home (/); never nest it inside another link.
Don't
- Don't recolor or tint the wordmark yellow or green.
- Don't re-add the Skate icon column — the marketing site is Surf-only.
- Don't stretch, rotate, or add effects to the mark.
02Color Palette
Intent-based tokens from globals.css. Click any swatch to copy its token name.
03Name-Color Rules
The one rule that must always hold: location names are yellow, group names are green. No other yellow or green, and never swap the two.
Location names → text-accent (#FACC15)
Group names → text-group-accent (#4ADE80)
Community / surf content → text-surf (#0DCDE8)
04Typography
Typeface is Poppins (Google Fonts), weights 400–800.
Froth
400 · Regular
Froth
500 · Medium
Froth
600 · SemiBold
Froth
700 · Bold
Froth
800 · ExtraBold
05Components
Live Button — every variant × size, rendered from the real component.
primary
accent
outline
ghost
06Voice & Tone
Live anchor lines
- "Know before you go."
- "Share Reports with the Froth Community or just your Crew."
- "Select a location. Post a report. Get out there!"
- "Download the Froth Surf app."
Short, active, surfer-native. Buttons are 1–2 words.
Corporate or wordy. No filler.
"Froth" with a capital F. Verb play welcome ("Get Frothing").
Lowercase "froth" as the brand name.
Coach analysis is "$20" and ends with "Beta." in red.
Describing Coach as "free".
Example reports render italic, in quotes, with a yellow MapPin.
Plain-text example reports with no location color.
07Iconography
lucide-react at standard sizes (10 / 12 / 14 / 16 / 20px). Custom activity glyphs use a 2.5px stroke.
Lucide
Custom glyphs
08Downloads
Brand assets for partners and press.
