Design reference

Every type face, size, and weight the site uses — on one page.

Two type faces and one set of named sizes. Every sample below is drawn live from the real settings in public/tokens.css and public/styles.css, so it matches just what the site draws, right down to the size steps and the light and dark switch.

  1. 01 Typefaces
  2. 02 Type ramp
  3. 03 Size ladder
  4. 04 Weights
  5. 05 Line heights
  6. 06 Where it's defined

Typefaces

Headings use the display face. Text and buttons stay on the plain face. The site downloads just one font file.

Display · headings

Space Grotesk

--font-display

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 & @ $ % — →

Stack
"Space Grotesk", var(--project-font-sans)
Weights
500–700 (variable)
Delivery
Self-hosted woff2 — /assets/fonts/space-grotesk-latin.woff2 (latin subset, v22)

Carried by every heading (h1–h3) and the form / panel / card titles via --font-display. Vendored locally so the site makes no runtime call to Google Fonts — consistent with the cookieless posture. font-display: swap means headings paint immediately in the Inter fallback, then swap in when the face loads; if the font is blocked they simply stay on Inter.

Body · UI

Inter

--typography-font-family-sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 & @ $ % — →

Stack
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Weights
400 / 500 / 600 / 700
Delivery
Uses a face already on your device. Nothing to download. Falls back to the built-in one if Inter is missing

The main face for text and buttons, set by --project-font-sans (= --typography-font-family-sans). Everything that is not a heading. Words, labels, buttons, and the big numbers all use Inter. It falls back to a face already on your device, so text never waits on a download.

Type ramp

Each text role, biggest to smallest, drawn at its real size. The size and family columns name the token, so you can trace any one back to the source. Sizes that change at ≤1024px and ≤640px are noted; resize the window to watch them step.

  • Run acquisition as one system.

    Display h1

    • Size--lead-type-display · Fluid 36 → 72px
    • Valueclamp(2.25rem, 1.3rem + 4vw, 4.5rem)
    • FaceSpace Grotesk
    • Weight700
    • Line height1.04
    • Tracking-0.02em
    • Used forPage & hero headlines
  • Run acquisition as one system.

    Section h2

    • Size--lead-type-section · 36px · ↓ 32px ≤1024 · ↓ 27.2px ≤640
    • Value2.25rem
    • FaceSpace Grotesk
    • Weight700
    • Line height1.12
    • Tracking-0.015em
    • Used forSection headings
  • Create your account

    Form title h2

    • Size--lead-type-form-title · 25.6px · ↓ 22.4px ≤640
    • Value1.6rem
    • FaceSpace Grotesk
    • Weight700
    • Line height1.1
    • Used forLogin / account / checkout card titles
  • Tell us about your funnel

    Panel title h2

    • Size--lead-type-panel-title · 23.2px · ↓ 20.48px ≤640
    • Value1.45rem
    • FaceSpace Grotesk
    • Weight700
    • Line height1.15
    • Used forBooking & lead-form panel titles
  • Campaign operations

    Card title h3

    • Size--lead-type-card-title · 19.2px
    • Value1.2rem
    • FaceSpace Grotesk
    • Weight700
    • Line height1.5
    • Tracking-0.01em
    • Used forService / plan / feature card titles
  • 1,284

    Metric strong

    • Size--project-type-metric · 48px · = --typography-font-size-display-sm
    • Value3rem
    • FaceInter
    • Weight700
    • Line height1
    • Used forBig stat / metric numbers
  • One connected system instead of scattered tools.

    Subheadline h2.subheadline

    • Size--lead-type-subheadline · 18px · ↓ 17px ≤1024 · ↓ 16px ≤640
    • Value1.125rem
    • FaceSpace Grotesk
    • Weight700
    • Line height1.45
    • Used forHero subheadlines under the h1
  • Getting leads, running ads, following up, and reports all link into one set-up. That turns scattered looks into real sales talks.

    Body large p.hero-text

    • Size--lead-type-body-large · 17px · ↓ 16px ≤640
    • Value1.0625rem
    • FaceInter
    • Weight400
    • Line height1.75
    • Used forLead paragraphs & hero body copy
  • Getting leads, running ads, following up, and reports all link into one set-up. That turns scattered looks into real sales talks.

    Body body

    • Size--typography-font-size-base · 16px
    • Value1rem
    • FaceInter
    • Weight400
    • Line height1.5
    • Used forDefault body copy
  • Secondary text, captions, and supporting meta.

    Small —

    • Size--typography-font-size-sm · 14px
    • Value0.875rem
    • FaceInter
    • Weight400
    • Line height1.5
    • Used forSecondary text, captions, meta
  • Typography

    Eyebrow p.eyebrow

    • Size--project-type-eyebrow · ≈13.1px · = --typography-font-size-rem-082
    • Value0.82rem
    • FaceInter
    • Weight700
    • Line height1.75
    • Tracking0.08em
    • Used forSection eyebrows / kickers (accent color)
  • Fine print, labels, and badges.

    Extra small —

    • Size--typography-font-size-xs · 12px
    • Value0.75rem
    • FaceInter
    • Weight400
    • Line height1.4
    • Used forFine print, labels, badges

Size ladder

The raw sizes the named steps are built from. Two have their own names, the small label and the big number, marked below.

  • --typography-font-size-xs 0.75rem · 12px
  • --typography-font-size-rem-082 0.82rem · ≈13.1px alias --project-type-eyebrow
  • --typography-font-size-sm 0.875rem · 14px
  • --typography-font-size-base 1rem · 16px
  • --typography-font-size-xl 1.25rem · 20px
  • --typography-font-size-display-sm 3rem · 48px alias --project-type-metric

Weights

Three weights carry the whole site. Space Grotesk bends from 500 to 700. Inter uses the weights already on your device. --project-weight-strong aliases bold and is what most emphasis reaches for.

Aa

Aa

Medium · 500

--typography-font-weight-medium

Aa

Aa

Semibold · 600

--typography-font-weight-semibold

Aa

Aa

Bold · 700

--typography-font-weight-bold --project-weight-strong

Each pair shows the weight in Space Grotesk (top) and Inter (bottom).

Line heights

Vertical rhythm, tight for display down to relaxed for long-form body copy.

  • 1 Metric numbers
  • 1.04 – 1.15 Headings with their own rule (display, section, panel, form)
  • 1.45 Hero subheadline
  • 1.5 Base body — --typography-line-height-base. Card titles (h3) inherit this too: no rule of their own overrides it. --typography-line-height-base
  • 1.75 Relaxed body copy — --project-type-body-line. Eyebrows inherit this from their .section-heading / .cta-copy wrapper, not from .eyebrow itself. --typography-line-height-extra-relaxed

Where it's defined

  • public/tokens.css — the primitive ladder (--typography-font-size-*), the sans stack, the weight tokens, and the semantic aliases (--project-type-eyebrow, --project-type-metric, --project-type-body-line).
  • public/styles.css — the @font-face for Space Grotesk, --font-display, the --lead-type-* role ramp with its ≤64rem / ≤40rem steps, and the h1–h3 / .eyebrow / .subheadline rules.
  • src/layouts/BaseLayout.astro — preloads the display woff2 and links the stylesheets in the document head.