Design Tokens

All values are resolved live from owll-tokens.css and lib/design.ts. Editing either source is immediately reflected here.

Typography

Live from lib/design.ts → tx. Each role is a complete set of 5 CSS-var references.

Semantic Styles — Tier 2

Owll Translator

--owll-text-display

Hero H1. Most expressive text on the page.

size: var(--owll-text-display-size)wt: var(--owll-text-display-weight)lh: var(--owll-text-display-leading)ls: var(--owll-text-display-tracking)

Owll Translator

--owll-text-title

Section H2. "Translation that can be trusted."

size: clamp(34px, 4.5vw, 44.8px)wt: var(--owll-text-title-weight)lh: 1.1ls: var(--owll-text-title-tracking)

Owll Translator

--owll-text-heading

Card titles. "Real-time Voice Translation"

size: var(--owll-text-heading-size)wt: var(--owll-text-heading-weight)lh: var(--owll-text-heading-leading)ls: var(--owll-text-heading-tracking)

Owll Translator

--owll-text-body

Feature descriptions and paragraph copy.

size: var(--owll-text-body-size)wt: var(--owll-text-body-weight)lh: var(--owll-text-body-leading)ls: var(--owll-text-body-tracking)

Owll Translator

--owll-text-ui

Navigation, buttons, FAQ questions.

size: var(--owll-text-ui-size)wt: var(--owll-text-ui-weight)lh: var(--owll-text-ui-leading)ls: var(--owll-text-ui-tracking)

Owll Translator

--owll-text-caption

Helper text, subtitles, breadcrumbs, attribution.

size: var(--owll-text-caption-size)wt: var(--owll-text-caption-weight)lh: var(--owll-text-caption-leading)ls: var(--owll-text-caption-tracking)

Owll Translator

--owll-text-micro

size: var(--owll-text-micro-size)wt: var(--owll-text-micro-weight)lh: var(--owll-text-micro-leading)ls: var(--owll-text-micro-tracking)

Owll Translator

--owll-text-brand

Logo / wordmark.

size: var(--owll-text-brand-size)wt: var(--owll-text-brand-weight)lh: var(--owll-text-brand-leading)ls: var(--owll-text-brand-tracking)

360K+

--owll-text-stat

Key metrics and numbers.

size: var(--owll-text-stat-size)wt: var(--owll-text-stat-weight)lh: var(--owll-text-stat-leading)ls: var(--owll-text-stat-tracking)

📱

Responsive overrides — Tier 3 (owll-tokens.css)

At max-width: 768px: display 64px→36px, title 48px→32px. 7 remaining roles unchanged.

Primitives — Tier 1

Font Size

--owll-size-xs…

--owll-size-sm…

--owll-size-md…

--owll-size-lg…

--owll-size-xl…

--owll-size-2xl…

--owll-size-3xl…

--owll-size-4xl…

--owll-size-5xl…

--owll-size-6xl…

Font Weight

Ag--owll-weight-light…

Ag--owll-weight-regular…

Ag--owll-weight-medium…

Ag--owll-weight-semibold…

Ag--owll-weight-bold…

Ag--owll-weight-extrabold…

Letter Spacing

OWLL

--owll-tracking-tightestDisplay & title

…

OWLL

--owll-tracking-tighterBrand wordmark

…

OWLL

--owll-tracking-tightBody & labels

…

OWLL

--owll-tracking-snugSubheadings & captions

…

OWLL

--owll-tracking-normalUI elements

…

Line Height

--owll-leading-noneWordmarks, stats

…

--owll-leading-tightDisplay headline

…

--owll-leading-snugTitles & headings

…

--owll-leading-normalBody & UI

…

Color

Swatches and values resolved live from owll-tokens.css. Accent palette sourced from lib/design.ts → accents.

Surface & Background

--owll-bg-pageDefault page…

--owll-bg-sectionAlternate fill…

--owll-bg-surfaceCard / raised…

--owll-bg-badgePill / tag…

--owll-bg-inverseDark inverse…

Text

--owll-text-primaryHigh-emphasis…

--owll-text-secondaryMedium-emphasis…

--owll-text-tertiaryLow-emphasis…

--owll-text-mutedDisabled…

--owll-text-linkLinks…

--owll-text-inverseOn dark bg…

Brand Gradient

--owll-brand-fromDeep blue — 220°…

--owll-brand-viaSky blue — 207°…

--owll-brand-toCyan — 180°…

Functional

--owll-color-fg-successSuccess — 165°…

--owll-color-fg-warningWarning — 40°…

--owll-color-fg-errorError — 10°…

Assistive / Accent — Rotating Palette

Source of truth: lib/design.ts → accents[]. CSS vars --owll-accent-1…6 mirror these values.

accents[0] — --owll-accent-1Periwinkle blue#5b7cea

accents[1] — --owll-accent-2Sky blue#7ba8ff

accents[2] — --owll-accent-3Terracotta orange#e8845a

accents[3] — --owll-accent-4Seafoam green#46bc9a

accents[4] — --owll-accent-5Warm amber#e8bc70

accents[5] — --owll-accent-6Soft lilac#f3bfff

Border Radius

Named by role rather than size, mapped to the primitive radius scale.

control…Toggle / small buttons

chip…FAQ rows, review cards

icon…Icon containers, badges

button…Primary CTA buttons

image…Feature images

card…Hero card, section cards

pill…Tag pills

Shadow

--owll-shadow-iconIcon / logo badge

--owll-shadow-logoApp icon, wordmark

--owll-shadow-heroHero gradient card

--owll-shadow-cardFeature thumbnails

Spacing

Semantic names alias the numeric primitive scale. Bar widths driven by var() — no hardcoded px.

--owll-gap-tight→ --owll-space-2 · Tight gap

…

--owll-gap-base→ --owll-space-4 · Standard gap

…

--owll-gap-loose→ --owll-space-8 · Generous gap

…

--owll-gap-section→ --owll-space-12 · Section gap

…

--owll-card-padding→ --owll-space-8 · Card inner padding

…

--owll-section-px→ --owll-space-10 · Section horizontal (desktop)

…

--owll-section-py→ --owll-space-24 · Section vertical

…

Font Families

Resolved live — preview uses var(--token) directly.

--owll-font-displayBody, UI, heading roles

…

--owll-font-serifH2 title & heading roles

…

--owll-font-brandLogo / wordmark

…

--owll-font-statKey metrics

…