Typography

Type scale, font families, and weights that keep the design consistent from a marketing hero down to a two-word chip. Built on Inter for UI text and JetBrains Mono for code.

Type scale

Seven levels — every one has a size, a weight, and a job to do.

Display

36–48pxweight 700Marketing headlines

30–36pxweight 700Page title

24pxweight 600Section heading

18pxweight 600Sub-heading

16pxweight 600Card / label heading

Body

15pxweight 400Body prose

Small

12pxweight 400Caption, help text

Font families

Three CSS variables — body, display, mono — resolve to concrete stacks in your global stylesheet.

The quick brown fox jumps over the lazy dog

Body--font-body

StackInter, ui-sans-serif, system-ui

Default UI font. Every paragraph, label, and form field.

Aidash Components

Display--font-display

StackInter, ui-sans-serif, system-ui

Headings. Currently the same family as body — swap it here to give headings their own typeface. Heading tracking comes from the prose styles, not from this token.

const x = { key: "value" };

Mono--font-mono

StackJetBrains Mono, ui-monospace, monospace

Code blocks, inline code, kbd chips, terminals.

Weights

When to reach for each weight.

Regular

400·font-normal

Body prose

Medium

500·font-medium

Labels, nav items, buttons

Semibold

600·font-semibold

H2 / H3 / card titles

Bold

700·font-bold

H1 / page titles

Tokens

The CSS variables. Override in your @theme block to change every component at once.

app/globals.css

css

@theme {
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

Custom stack

Swap Inter for whatever your brand uses. As long as the CSS variable resolves to a valid font stack, every component picks it up on the next paint.

Type scale

Font families

Weights

Tokens

Also see