THE LEGA DESIGN SYSTEM

Regal

Editorial software for visual creation — calm, considered, premium.

Tokens over values. Content central, chrome quiet. Rust only when it truly means something.

alphaRegal · editorial
FIRST PRINCIPLES
01

Editorial, not dashboard

Lega is editorial software for visual creation — closer to a design publication than a SaaS admin panel. Calm, considered, premium.
02

Content is central; chrome is quiet

UI recedes so the user’s work leads. Depth comes from borders, tone, and whitespace before shadows.
03

Warm, low-chroma, high-contrast

Paper surfaces, near-black ink, rust as rare emphasis. No purple/cyan, neon gradients, glassmorphism, or saturated startup palettes.
04

Three voices in type

Serif for editorial hierarchy, sans for all UI, mono for metadata. Italic serif is a brand device.
05

Tokens over values

Never invent one-off hex or px. Use semantic tokens; if none fits, surface the gap rather than inventing one.
06

Stable primitives

Use @kit/ui first; keep public variant names and map their visuals to Regal.
07

Raw color is user-only

Arbitrary color is allowed in user-generated artwork, email HTML, and tests — never in app or marketing chrome.
01 — COLOR

Ink

Primary text, primary buttons, hard separators, inverted surfaces. Never pure black on pure white for regular UI.

ink-900--ink-900#0b0d10
ink-800--ink-800#1a1d22
ink-600--ink-600rgba(11, 13, 16, 0.6) · #666766
ink-400--ink-400rgba(11, 13, 16, 0.4) · #9d9e9d
ink-200--ink-200rgba(11, 13, 16, 0.12) · #dfdedb
ink-100--ink-100rgba(11, 13, 16, 0.06) · #eeece8

Paper

Page and muted surfaces. The default product surface is warm paper — never cool gray.

paper-50--paper-50#f7f4ee
paper-100--paper-100#f0eee9
paper-200--paper-200#efece4
paper-300--paper-300#e6e2d7
white--white#ffffff

Accent & state

Rust is the brand accent — focus, active steps, selection, rare emphasis. Never decoration. Success/info/warning/danger are semantic only.

rust--rustoklch(0.62 0.13 42) · #b86a42Brand accent
moss--mossoklch(0.55 0.07 150) · #5e7d63Success
mist--mistoklch(0.72 0.04 230) · #8ba5b8Info
ember--emberoklch(0.68 0.16 35) · #d57542Warning
crimson--crimsonoklch(0.52 0.17 25) · #a93828Danger

Dusk

Atmospheric hero scenes only. Not for UI chrome.

dusk-1--dusk-1#2c3947
dusk-2--dusk-2#5a6b7c
dusk-3--dusk-3#8ea2b1
dusk-4--dusk-4#c9b5a0
dusk-5--dusk-5#d9c2a7

Semantic roles

What app code references. Primitives change; these names do not.

bg--color-bgvar(--paper-50)Page background
bg-muted--color-bg-mutedvar(--paper-100)Muted surface
bg-elevated--color-bg-elevatedvar(--white)Cards, popovers
bg-inverted--color-bg-invertedvar(--ink-900)Inverted surface
fg--color-fgvar(--ink-900)Primary text
fg-muted--color-fg-mutedvar(--ink-600)Secondary text
fg-subtle--color-fg-subtlevar(--ink-400)Tertiary text
fg-inverted--color-fg-invertedvar(--white)Text on inverted
border--color-bordervar(--ink-200)Default border
border-strong--color-border-strongvar(--ink-800)Strong border
border-hairline--color-border-hairlinevar(--ink-100)Hairline
accent--color-accentvar(--rust)Brand accent
accent-fg--color-accent-fgvar(--white)On accent
success--color-successvar(--moss)Success state
info--color-infovar(--mist)Info state
warning--color-warningvar(--ember)Warning state
danger--color-dangervar(--crimson)Danger state
02 — TYPOGRAPHY
DisplayInstrument SerifWeight 400 only. Italic is a brand device.
UI / bodyInterAll dense UI, labels, buttons, forms.
MetadataJetBrains MonoTimestamps, version labels, step numbers.
Poster capsArchivo BlackRare poster-like brand caps only.
The quick brown fox jumps
display-xlInstrument Serif96px · 400 · -2.2pxHero display moments
The quick brown fox jumps
display-lgInstrument Serif72px · 400 · -1.6pxSection display headings
The quick brown fox jumps
display-mdInstrument Serif56px · 400 · -1.2pxEditorial headings
The quick brown fox jumps
heading-lgInter24px · 500 · -0.2pxUI section titles
The quick brown fox jumps
heading-mdInter18px · 500 · -0.1pxUI subheadings
The quick brown fox jumps
bodyInter15px · 400 · normalDefault body text
The quick brown fox jumps
body-smInter13.5px · 400 · normalDense UI, buttons
The quick brown fox jumps
captionInter12px · 400 · normalCaptions, helper text
The quick brown fox jumps
eyebrowInter11px · 500 · 2pxSmall-caps labels
The quick brown fox jumps
metaJetBrains Mono11px · 400 · 1.2pxTimestamps, metadata
03 — SPACE & RADIUS

Spacing

0 · 0px
1 · 4px
2 · 8px
3 · 12px
4 · 16px
5 · 20px
6 · 24px
8 · 32px
10 · 40px
12 · 48px
16 · 64px
20 · 80px
24 · 96px
32 · 128px
40 · 160px
gutter · 40px
gutter-mobile · 20px

Radius

none · 0px
xs · 2px
sm · 4px
md · 6px
lg · 10px
xl · 14px
2xl · 20px
full · 9999px
04 — COMPONENTS
Buttons
One of each variant.

default = solid ink pill · secondary = quiet elevated · outline = transparent bordered · ghost = tertiary · destructive = danger · link = text.

Badges
Status and label tones.
DefaultSecondaryOutlineSuccessWarningDestructive

Success maps to moss, warning to ember, destructive to crimson — semantic state only, never decoration.

Form field
Label above field, never inline.

Sentence-case label, hairline border, focus ring uses the rust accent.

Card
Elevated surface — depth from border and tone before shadow.

Cards sit on paper, lift with a hairline border and a warm elevated fill. Chrome stays quiet so content leads.

05 — DO & DON'T
Do

Use rust only for true emphasis

Don't

Use purple or cyan gradients

Do

Reference semantic tokens

Don't

Hardcode hex or px

Do

Warm paper surfaces

Don't

Cool gray dashboards

Do

Sentence case in UI

Don't

ALL CAPS everywhere

06 — TAKE IT WITH YOU
regal.tokens.json
DTCG design tokens — drop into any tooling.
Download
REGAL.md
The full written specification.
Download
regal-ai-primer.md
A prompt primer to brief an AI on Regal.
Download