YBYouth Buddy
Brand system

Youth Buddy style guide

A single reference for typography, colour and spacing so every new page feels calm, credible and unmistakably Youth Buddy. Use these tokens instead of one-off values.

01 — Typography

Two typefaces, one voice

Sora carries every heading — geometric, confident, slightly tightened. Manrope carries body copy — open and easy to read at length. Nothing else is used.

Display / H1

The guidance you needed, without judgement

One per page. Sora, tracking -0.032em.

Section / H2

The guidance you needed, without judgement

Section openers, paired with an eyebrow.

Subsection / H3

The guidance you needed, without judgement

Card titles and grouped content.

Body

The guidance you needed, without judgement

Manrope, 1.65 line-height, capped with .measure (68ch).

Small / caption

The guidance you needed, without judgement

Helper text, meta rows, form hints.

Do

  • Use one H1 per page, always above the fold.
  • Introduce sections with an uppercase eyebrow label.
  • Keep paragraphs inside measure.

Don't

  • Introduce a third typeface or decorative script.
  • Set body copy in Sora, or headings in Manrope.
  • Use all-caps for anything longer than a short label.
02 — Colour

Calm navy, quiet neutrals

The palette is deliberately restrained: a trustworthy navy-blue primary on near-white surfaces. Colour signals action or status — never decoration. Always reference the token, never a raw hex value.

Primary

var(--primary)

Primary buttons, links, eyebrow labels, focus rings

Brand deep

var(--brand-deep)

Dark navy panels, hero blocks, footers

Brand soft

var(--brand-soft)

Tinted section backgrounds behind cards

Background

var(--background)

Page canvas

Card

var(--card)

Panels, cards, form surfaces

Muted

var(--muted)

Quiet fills, badges, table stripes

Accent

var(--accent)

Hover states, subtle highlights

Border

var(--border)

Hairlines, dividers, input outlines

Destructive

var(--destructive)

Reject, delete, error messaging only

Foreground

var(--foreground)

Headings and body copy

Muted foreground

var(--muted-foreground)

Secondary copy, captions, helper text

Primary

var(--primary)

Links and emphasis, never full paragraphs

Accessibility: body text keeps at least 4.5:1 contrast against its surface. Never place muted-foreground on a primary or brand-deep fill — use primary-foreground instead.

03 — Spacing & layout

A predictable rhythm

Spacing follows a 4px base scale. Pages are built from full-width sections inside a centred container; generous vertical space is what makes the site read as professional.

section-y72px → 96px (md)Vertical padding on every full-width page section.
section-gap72px → 96px (md)Top margin between stacked sections inside a page.
max-w-6xl1152pxStandard content container width, with px-5 gutters.
measure68chMaximum width for readable paragraphs.
gap-6 / gap-824px / 32pxCard grids: gap-6 for tight, gap-8 for feature grids.
space-y-416pxRhythm between paragraphs and form fields.

Radius

Base radius 0.75rem. Cards use rounded-xl, buttons rounded-lg, pills rounded-full.

Elevation

One soft shadow only, via the surface-panel utility. No stacked or coloured shadows.

Imagery

Documentary-style photography, never stock clichés. 21/9 for hero bands, 4/3 inside cards.

04 — In practice

A section, assembled

Every page section follows the same pattern: eyebrow, heading, supporting paragraph, then content in a card grid.

Example

Where we help

Short, plain-language supporting line that sets up the cards below.

Education

One or two supporting sentences.

Career

One or two supporting sentences.

Work culture

One or two supporting sentences.