Brand

Identity

Typography

The type system: which face does which job, at what size.

Four faces, each with one job. The discipline is not in the choice of typefaces — it is in refusing to let them drift into each other’s roles.

The faces

  • Clash Display

    Hero only

    Build in public

    One appearance per site. It exists for the opening statement and nothing else.

    Self-hosted via next/font/localFont as --font-clash

  • Poppins

    Display and headings

    Ship the thing

    Geometric, confident, slightly warm. Carries every heading below the hero.

    next/font/google as --font-display

  • Manrope

    Body and UI

    Everything you actually read sits here.

    The reading face. Wide apertures hold up at 15–16px on a dark ground.

    next/font/google as --font-body

  • Playfair Display Italic

    One phrase

    with intention

    Italic only — no roman weights are loaded. It marks a single phrase inside a heading.

    next/font/google as --font-italic

The scale

Seven roles. If a piece of text is not one of these, it is body.

RoleSpecFace and use
Heroclamp, up to 12vw · 600 · -0.04emClash Display — One per site. The massive statement at the top of the home page.
Displayclamp(2.5rem, 6vw, 5rem) · 600 · -0.03emPoppins — Page-opening headline. One per page.
H1 / H22.5rem / 1.75rem · 600 · -0.02emPoppins — Section headings inside a page.
Eyebrow0.6875rem · 700 · 0.2em · uppercaseManrope — The small label above a heading. Never more than four words.
Body1rem · 400 · 1.7 line heightManrope — Everything you actually read.
Italic phraseinherits size · 400 · italicPlayfair Display Italic — One highlighted phrase inside a heading. Never a whole sentence, never a paragraph.
Mono0.75–0.8125rem · 400JetBrains Mono — Numbers, hex values, timestamps, anything that should read as instrument data.

Never

Playfair is loaded in italic only. Setting it upright falls back to Georgia and quietly changes the brand. If a design calls for an upright serif, the answer is that it does not.

Rules

Do: One display-size heading per page. Everything under it steps down.

Do: Keep the eyebrow to four words or fewer — it is a label, not a sentence.

Do: Set numbers, hex values and timestamps in JetBrains Mono.

Do: Let body text breathe at 1.7 line height and stop lines around 70 characters.

Do not: Do not italicise a whole sentence in Playfair. One phrase, inside a heading.

Do not: Do not use Poppins for body copy — it reads tight and tires quickly.

Do not: Do not add a fifth typeface, including for a single asset.

Do not: Do not put Clash Display anywhere except the one hero moment.

Typography — Shareefico Brand