Foundations

Typography

Two families, one rhythm. Plus Jakarta Sans covers display and UI; DM Sans handles body. Sizes, weights, and line-heights live as tokens in packages/ui/tokens.css.

Wordmark

The Sidelay wordmark is a fixed SVG lockup designed in Figma, not rendered from a font. This keeps the brand mark consistent across every surface (web, extension, marketing assets, OG images) and stops it from drifting as the type stack evolves. Wherever the wordmark appears in code today as text, treat it as a placeholder rendered in Plus Jakarta Sans 800, to be replaced by the SVG asset once it ships.

SidelayPlaceholder — SVG asset pending

Font families

Each family owns a clear role. Mix is intentional and limited so the product reads as one brand.

Display + UI

Plus Jakarta Sans

--font-ui

Friendly humanist sans, neutral at small sizes and lively at scale. Covers both the display headlines (weight 800) and the entire product UI (400-700): navigation, labels, buttons, section headings.

The quick brown fox jumps over the lazy dog.

  • Sidelay400
  • Sidelay500
  • Sidelay600
  • Sidelay700
  • Sidelay800

Body

DM Sans

--font-body

Compact body sans, optimized for sustained reading. Used for paragraph text and long-form content.

The quick brown fox jumps over the lazy dog.

  • Sidelay300
  • Sidelay400
  • Sidelay500

Type scale

Each row shows the token rendered at its native size, family, weight, line-height, and letter-spacing.

Display XL

Hero headlines

--text-display-xl

clamp(3rem, 6vw, 4.5rem) — 48 to 72px

The quick brown fox jumps

Display LG

Large H1

--text-display-lg

clamp(2.25rem, 4vw, 3rem) — 36 to 48px

The quick brown fox jumps

Display MD

Standard H1

--text-display-md

2.25rem (36px)

The quick brown fox jumps

Heading LG

H2

--text-heading-lg

1.75rem (28px)

The quick brown fox jumps

Heading MD

H3

--text-heading-md

1.375rem (22px)

The quick brown fox jumps

Heading SM

H4

--text-heading-sm

1.125rem (18px)

The quick brown fox jumps

Body LG

Lead body

--text-body-lg

1.0625rem (17px)

The quick brown fox jumps

Body

Default body

--text-body

0.9375rem (15px)

The quick brown fox jumps

Body SM

Secondary body

--text-body-sm

0.875rem (14px)

The quick brown fox jumps

Caption

Captions, meta

--text-caption

0.75rem (12px)

EYEBROW LABEL

Micro

Eyebrows, uppercase labels

--text-micro

0.6875rem (11px)

EYEBROW LABEL

Line heights

Five steps from tight (display) to relaxed (long-form reading). Pair with the type scale above for natural rhythm.

Display

--leading-display1.05

Tight, for hero text where each line is short and bold.

A web that forgets no one. Sidelay turns scattered feedback into a single source of truth, so your team always knows where the conversation is.

Heading

--leading-heading1.2

Section headings — comfortable for 1 to 3 lines.

A web that forgets no one. Sidelay turns scattered feedback into a single source of truth, so your team always knows where the conversation is.

Snug

--leading-snug1.4

Short paragraphs, descriptions, condensed lists.

A web that forgets no one. Sidelay turns scattered feedback into a single source of truth, so your team always knows where the conversation is.

Body

--leading-body1.55

Default for paragraphs across the product.

A web that forgets no one. Sidelay turns scattered feedback into a single source of truth, so your team always knows where the conversation is.

Relaxed

--leading-relaxed1.75

Long-form reading, articles, documentation.

A web that forgets no one. Sidelay turns scattered feedback into a single source of truth, so your team always knows where the conversation is.

Letter spacing

Tighten display sizes; loosen uppercase labels. Body text stays at zero.

  • Display

    --tracking-display-0.03em

    Designed for teams

  • Tight

    --tracking-tight-0.02em

    Designed for teams

  • UI

    --tracking-ui-0.01em

    Designed for teams

  • Normal

    --tracking-normal0

    Designed for teams

  • Wide

    --tracking-wide0.05em

    Designed for teams

  • Wider

    --tracking-wider0.1em

    Designed for teams

  • Eyebrow

    --tracking-eyebrow0.16em

    Now in private beta

Recommended pairings

Battle-tested combinations across marketing pages, dashboard, and extension UI.

Hero — marketing page top

Your whole team, on the same page.

A web that forgets no one. Sidelay turns scattered feedback into a single source of truth, so your team always knows where the conversation is.

Section — feature block

Built for the people who actually use the site.

A web that forgets no one. Sidelay turns scattered feedback into a single source of truth, so your team always knows where the conversation is.

Card — UI surface

Recent sessions

Two unresolved threads on perimetre.co. Updated 3 minutes ago.

Eyebrow — marketing breadcrumb

Chrome extension · Free during beta

Drop a pin where the bug lives.