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.

Logo

The Sidelay logo is a fixed SVG lockup — symbol and wordmark designed together. Two colour variants ship in apps/brand/public/logos/: amb (warm, default) for cream and light backgrounds, and lav (desaturated) for the lavender accent surface.

Logo

Sidelay (warm variant)

Your whole team, on the same page.

Version sombre

Sidelay (lavender variant)

Your whole team, on the same page.

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. The scale stays fixed; semantic roles (e.g. --text-view-title) point at a scale step so a recurring text role can be retuned in one place.

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

View title

In-app page title — role → Heading LG

--text-view-title

var(--text-heading-lg) · 28px · weight 700

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.