AM

Typography & colour

The type scale and the complete OKLCh token set. Flip to dark mode to see both halves of every token.

Type scale

Inter Variable, self-hosted via @fontsource-variable/inter

Display

text-4xl font-bold tracking-tight

Heading 1

text-3xl font-bold tracking-tight

Page title

text-2xl font-bold tracking-tight

Section heading

text-lg font-semibold

Card heading

text-base font-semibold

Body — the default size for almost everything in the template.

text-sm

Secondary body — descriptions and help text.

text-sm text-muted-foreground

Caption — metadata, timestamps, and hints.

text-xs text-muted-foreground

Eyebrow label

text-[10px] font-semibold uppercase tracking-widest

8,942

font-mono tabular-nums

Inline elements

Body copy sits at 14px with comfortable line height. You can emphasise, link, mark something notable, show inline code, note a removed value, or press ⌘K.

Least privilege is not a setting you switch on. It is the accumulated result of every grant you decided not to make.
  • —An unordered list item
  • —A second item
  1. 1.An ordered list item
  2. 2.A second item

Numerals

Every figure in the template uses font-mono tabular-nums so columns of numbers align and values do not jitter as they update.

Tabular1,014 / 1,200
Currency$30,678.54
Percentage84.5%
Positive+4.9%
Negative−9.8%
Identifierusr_8f21c04b

Border radius

sm

md

lg

xl

full

Design tokens

Declared once in src/styles/main.css under :root and .dark.

Surfaces

--background

Page canvas

--foreground

Body text

--card

Card and panel surface

--card-foreground

Text on cards

--popover

Menus and dialogs

--muted

Subtle fills, table stripes

--muted-foreground

Secondary text

--accent

Hover fills

--border

Hairlines

--input

Field borders

Brand & feedback

--primary

Brand accent, primary buttons

--primary-foreground

Text on the accent

--ring

Focus outline

--success

Positive outcome

--warning

Needs attention

--destructive

Danger, failure

--info

Neutral information

Status

--status-active

Signed in within 90 days

--status-invited

Awaiting first sign-in

--status-inactive

Dormant

--status-suspended

Access revoked

Charts

--chart-1

Primary series

--chart-2

Second series

--chart-3

Third series

--chart-4

Fourth series

--chart-5

Fifth series

Sidebar

--sidebar

Sidebar surface

--sidebar-foreground

Sidebar text

--sidebar-accent

Active nav item

--sidebar-primary

Sidebar accent

--sidebar-border

Sidebar hairline