Foundations

CSS Tokens & Foundation

The foundational layer of the design system: Surface ramps, theme tokens, functional indicator colors, responsive breakpoint-adjusted typography hierarchy, radii, and spacing.

Surface & Neutral Tokens

Live @/design render

Canvas Surface

--bg-canvas

Application root canvas layer

Panel Surface

--bg-panel

Cards, sidebars, modal panels

Input Surface

--bg-input

Form fields, pills, secondary elements

Elevated Surface

--bg-elevated

Hover states, popovers, elevated cards

Primary Foreground

--fg

Primary text and active icons

Muted Foreground

--fg-muted

Secondary text, captions, placeholders

Subtle Border

--border

Dividers and subtle container borders

Strong Border

--border-strong

Active borders, focus rings

CTA Background

--cta-bg

Primary action button background

CTA Foreground

--cta-fg

Primary action button text

Functional Status Indicators

Live @/design render

Success Indicator

--success

Positive, completed status

Warning Indicator

--warning

Cautionary, pending status

Danger Indicator

--danger

Destructive, error status

Info Indicator

--info

Informational messages, neutral notices

Typography Hierarchy & Breakpoint Scaling

Live @/design render

type.heroHero Display (H1)

TASA Orbiter•Bold (700)•30px / 1.875rem ➔ 48px / 3rem

Secure Document Infrastructure

Landing hero headers, primary showcase titlefont-heading text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-[var(--fg)]

type.pageTitlePage Title (H2)

TASA Orbiter•Semi-bold (600)•24px / 1.5rem ➔ 36px / 2.25rem

Documents & Signer Verification

Main page header titles across applicationsfont-heading text-2xl sm:text-3xl lg:text-4xl font-semibold tracking-tight text-[var(--fg)]

type.pageLeadPage Lead Subtitle

General Sans•Regular (400)•14px / 0.875rem ➔ 18px / 1.125rem

Monitor audit logs, manage document packets, and verify digital signatures in real time.

Descriptive sub-heading beneath primary page titlesmax-w-2xl text-sm sm:text-base lg:text-lg font-normal text-[var(--fg-muted)]

type.sectionTitleSection Header (H3)

TASA Orbiter•Semi-bold (600)•16px / 1rem ➔ 20px / 1.25rem

Authentication & Security Rules

Section headers, card container titles, panel groupingsfont-heading text-base sm:text-lg lg:text-xl font-semibold text-[var(--fg)]

type.sectionLeadSection Sub-lead

General Sans•Regular (400)•12px / 0.75rem ➔ 14px / 0.875rem

Configure role-based access control and signer verification passcodes.

Descriptive sub-text directly under section headerstext-xs sm:text-sm text-[var(--fg-muted)]

type.statValueMetric / KPI Value

TASA Orbiter•Bold (700)•20px / 1.25rem ➔ 30px / 1.875rem

$124,500.00

Dashboard KPI cards, metric totals, numeric countersfont-heading text-xl sm:text-2xl lg:text-3xl font-bold tabular-nums text-[var(--fg)]

type.statLabelMetric / KPI Label

TASA Orbiter (UI)•Semi-bold (600)•10px / 0.625rem ➔ 11px / 0.6875rem

TOTAL REVENUE PROCESSED

KPI card uppercase top labels and category headersfont-ui text-[10px] sm:text-[11px] font-semibold uppercase tracking-wider text-[var(--fg-muted)]

type.tableHeadTable Column Head

TASA Orbiter (UI)•Semi-bold (600)•10px / 0.625rem ➔ 11px / 0.6875rem

DOCUMENT NAME · STATUS · CREATED

Data table headers and grid sort columnsfont-ui text-[10px] sm:text-[11px] font-semibold uppercase tracking-widest text-[var(--fg-muted)]

type.bodyMediumUI Body Medium

General Sans•Medium (500)•12px / 0.75rem ➔ 14px / 0.875rem

Active session token verified for signer@doxt.io

Prominent table cell contents, form values, list titlestext-xs sm:text-sm font-medium text-[var(--fg)]

type.bodyUI Body Regular

General Sans•Regular (400)•12px / 0.75rem ➔ 14px / 0.875rem

Standard paragraph copy, multi-line explanations, and workflow guides.

Standard body text, descriptions, table cellstext-xs sm:text-sm text-[var(--fg-muted)] leading-relaxed

type.captionUI Caption / Micro

General Sans•Regular (400)•11px / 0.6875rem ➔ 12px / 0.75rem

Last modified 2 minutes ago by system worker

Timestamps, helper hints, footnote annotationsfont-sans text-[11px] sm:text-xs text-[var(--fg-muted)]

type.monoCode / Monospace

General Sans / Mono•Medium (500)•12px / 0.75rem ➔ 14px / 0.875rem

doc_pkt_98a7f43b_live

API tokens, packet IDs, hash codes, technical logsfont-mono text-xs sm:text-sm tabular-nums text-[var(--fg)]

Responsive Breakpoint Sizing Matrix

Canonical font sizes & line-height adjustments across all responsive CSS breakpoints.

Token	Level	XS (<640px)	SM (≥640px)	MD (≥768px)	LG (≥1024px)	Font Family
type.hero	Hero Display (H1)	30px / 1.875rem	36px / 2.25rem	40px / 2.5rem	48px / 3rem	TASA Orbiter
type.pageTitle	Page Title (H2)	24px / 1.5rem	30px / 1.875rem	32px / 2rem	36px / 2.25rem	TASA Orbiter
type.pageLead	Page Lead Subtitle	14px / 0.875rem	16px / 1rem	16px / 1rem	18px / 1.125rem	General Sans
type.sectionTitle	Section Header (H3)	16px / 1rem	18px / 1.125rem	18px / 1.125rem	20px / 1.25rem	TASA Orbiter
type.sectionLead	Section Sub-lead	12px / 0.75rem	14px / 0.875rem	14px / 0.875rem	14px / 0.875rem	General Sans
type.statValue	Metric / KPI Value	20px / 1.25rem	24px / 1.5rem	24px / 1.5rem	30px / 1.875rem	TASA Orbiter
type.statLabel	Metric / KPI Label	10px / 0.625rem	11px / 0.6875rem	11px / 0.6875rem	11px / 0.6875rem	TASA Orbiter (UI)
type.tableHead	Table Column Head	10px / 0.625rem	11px / 0.6875rem	11px / 0.6875rem	11px / 0.6875rem	TASA Orbiter (UI)
type.bodyMedium	UI Body Medium	12px / 0.75rem	14px / 0.875rem	14px / 0.875rem	14px / 0.875rem	General Sans
type.body	UI Body Regular	12px / 0.75rem	14px / 0.875rem	14px / 0.875rem	14px / 0.875rem	General Sans
type.caption	UI Caption / Micro	11px / 0.6875rem	12px / 0.75rem	12px / 0.75rem	12px / 0.75rem	General Sans
type.mono	Code / Monospace	12px / 0.75rem	14px / 0.875rem	14px / 0.875rem	14px / 0.875rem	General Sans / Mono

Radius Scale

Live @/design render

--radius-sm

2px

--radius-md

4px

--radius-lg

6px

--radius-xl

8px

--radius-2xl

11px

--radius-3xl

13px

--radius-full

9999px

Spacing Scale

Live @/design render

space-1

4px (0.25rem)

space-2

8px (0.5rem)

space-3

12px (0.75rem)

space-4

16px (1rem)

space-6

24px (1.5rem)

space-8

32px (2rem)

space-12

48px (3rem)

import { … } from "@/design/atoms/Typography"
// source: design/tokens/typography.ts + design/atoms/Typography.tsx