Design System

Design System

Covenant — Swiss design tokens & components

Colors

--bg

--surface

--surface-hover

--accent

Typography

Heading 1 — 3xl semibold

Heading 2 — 2xl semibold

Heading 3 — xl medium

Heading 4 — lg semibold

Body — base regular

Secondary — sm secondary

Tertiary — sm tertiary

Disabled — sm disabled

Status Badges

OpenPlannedIn ProgressDone

Tags

Feature

Buttons

Cards

Body-only card

A bordered surface from the shared Card component.

Card with header & footer

Header and footer slots are divider-separated; interactive adds a hover highlight.

Modal

Centered, focus-trapped dialog. Closes on Escape, overlay click, or an action.

Kanban

Board column and card primitives. Cards keep the title and meta row left-aligned, with assignee avatars, logged hours, and a billable tag.

To Do

3

In Progress

0

No tasks

Borders & Surfaces

Card — border

bg-surface + border-border

Card — subtle border

bg-surface + border-border-subtle

Border Radius

Square theme — all corners are sharp (radius 0).

Tokens --radius-sm/md/lg/full are all 0, so every rounded-* utility renders square.

Badge

Spacing

--spacing-xs
0.25rem
--spacing-sm
0.5rem
--spacing-md
1rem
--spacing-lg
1.5rem
--spacing-xl
2rem
--spacing-2xl
3rem
--spacing-3xl
4rem