Design System

Style Guide

The Omega UI design language — colors, type, components and Base UI primitives. Toggle light/dark with the control in the nav; every token below re-themes live.

Color

Surfaces & text (theme-aware)
bg
--c-bg
surface
--c-surface
elevated
--c-elevated
border
--c-border
text-muted
--c-text-muted
text-2nd
--c-text-secondary
text
--c-text
Accents (fixed)
teal
green
red
amber
blue
purple

Typography

Display / 48
Heading / 30
Subhead / 20
Body — the quick brown fox jumps over the lazy dog. 16px.
Small — secondary copy and metadata. 14px.
Mono label / 12

Buttons

Score bars

Openness78
Conscientiousness52
Extraversion34
Agreeableness88

Base UI · Switch

Base UI · Tabs

Workspace stats and recent activity.

Base UI · Progress

Extraction coverage
x

Base UI · Tooltip

Accessible, positioned popups.
Omega UI · Base UI @base-ui/react · Tailwind · theme-aware tokens.