Design System · v1

DS — neo-futurist, restrained.

One source of truth: tokens → components → pages. Everything below is reusable across any module, built on CSS variables so a single edit re-themes the whole system.

dark-first tokens.css components.css live

01 · Color

bgvar(--bg)

surfacevar(--surface)

accentvar(--accent)

accent-2var(--accent-2)

fgvar(--fg)

fg-2var(--fg-2)

posvar(--pos)

negvar(--neg)

auroragradient

02 · Typography

Space Grotesk

Display · headings · marks

Inter — body copy. The quick brown fox jumps over the lazy dog while a neural net quietly overfits in the background. 0123456789

JetBrains Mono — labels, code, metadata · const alpha = 0.001;

03 · Buttons

04 · Badges & tags

default accent live +12.4% transformers quant

05 · Cards & surfaces

Surface

Solid card

Base surface with gradient hairline edge.

Glass · hover

Glass card

Frosted, lifts and glows on hover.

2.54bits / char

Stat tile inside a card.

06 · Callouts

💡

Note. Restrained neo-futurism: mostly monochrome, one glowing accent, gradient used sparingly.

⚠

Careful. Glow and blur are expensive — reserve for key surfaces.

✓

Shipped. This whole system re-themes from one file, tokens.css.

07 · Code, fields & keys

// components build on tokens only
.btn--primary {
  background: var(--aurora);
  box-shadow: var(--glow-soft);
}

Inline --accent token, press ⌘ K to search.

08 · Brand mark

DDmitry Serikov