Brand
Story To Earn brand style guide
Everything you need to represent the brand correctly — logo usage, colour tokens, typography and spacing. Written for partners, press and contributors.
Logo
Use the supplied blue and gold wordmark as the official brand signature.
“Story” in blue, “To” in bright blue and “Earn” in gold. Never split, stretch, or recolour it.
Minimum sizes: 20px for the mark, 96px width for the lockup. On hover and while loading the logo uses a subtle sheen, lift and orbit animation — leave these intact and never add extra motion of your own.
Colour
All colours are semantic tokens — use the token, never a hex value.
Royal blue
--primaryPrimary actions, links, active states
Warm gold
--accentRewards, highlights and secondary emphasis
Paper
--backgroundPage background
Card surface
--cardCards, panels, popovers
Ink
--foregroundHeadings and body copy
Muted
--mutedSubtle fills, table stripes
Muted ink
--muted-foregroundSecondary text, captions
Warning red
--destructiveErrors, destructive actions
--gradient-brand
Brand mark, premium buttons, badges.
--shadow-soft / --shadow-hover / --shadow-glow
Soft for resting cards, hover for lift, glow for brand emphasis only.
Typography
Display face for headings, sans for interface copy.
Whispers in the dark
Page titles — one per page
Whispers in the dark
Section headings
Whispers in the dark
Card and block titles
Whispers in the dark
Default paragraph copy
Whispers in the dark
Meta, helper text, timestamps
Whispers in the dark
Above titles and in the logo tagline
Spacing
A 4px base scale keeps rhythm consistent.
gap-1Icon-to-label, inline chipsgap-2Logo mark to wordmarkp-4Card padding on mobilep-6 / gap-6Card padding, grid gutterspy-14Section rhythm on public pagespy-24Hero and landing sectionsUse the full lockup wherever space allows; the mark alone only below 32px.
Keep clear space of at least half the mark's height on every side.
Place the logo on a clean light surface; use its protected light panel on dark surfaces.
Use the responsive scale presets (header, footer, sidebar, hero).
Don't recolour the official blue and gold artwork or add outlines.
Don't stretch, rotate, or add decorative shadows.
Don't set the wordmark in another typeface or letter-space it manually.
Don't place the logo over busy imagery without a scrim.
Press & partners
Need vector assets or a custom lockup? Reach out through the contact page and mention "brand assets" — we usually reply within two business days.