Design System

A minimal design reference for vaked.dev. Single-theme, no dependencies, dark mode only.

Colors

Background

#0a0e14

surface

#12171f

surface2

#1a2030

border

#252d3a

Text

text

#c9d1d9

text2

#7a8490

Accent

blue

#58a6ff

purple

#a371f7

green

#2ea043

amber

#d29922

red

#f85149

Typography

Sans-serif — System Font Stack

Vaked declares.

Nix materializes. OTP supervises.

The quick brown fox jumps over the lazy dog. 0123456789.

Monospace — Code / Technical

GENESIS_SEAL_HASH = 7c242080f5f8...

dig TXT vaked.dev +short | grep vaked-genesis-seal

Spacing & Radius

Border Radius: 12px — used on all cards and containers

Content Width: max-width: 880px — centered with auto margins

Section Padding: 80px 24px vertical rhythm

Card Gap: 14px grid gap

Card Padding: 20px 22px

Components

Status Badges

Done In Progress Stub

Cards

card

Card Title

Card description text. Concise, single-sentence summaries.

card — warning

Warning Card

Used for disclaimers and warnings. Amber border.

Seal Block

GOLDEN_HASH = 7c242080f5f821e5eaf563fe2208d60632c451687baf65f4fe8e4a0d226e3ecf

Pipeline

Declare

Write .vaked

→

Check

Prove POLA

→

Lower

Emit artifacts

CSS Custom Properties

:root {
  --bg:        #0a0e14;
  --surface:   #12171f;
  --surface2:  #1a2030;
  --border:    #252d3a;
  --text:      #c9d1d9;
  --text2:     #7a8490;
  --green:     #2ea043;
  --amber:     #d29922;
  --blue:      #58a6ff;
  --purple:    #a371f7;
  --red:       #f85149;
  --accent:    #58a6ff;
  --radius:    12px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", ...;
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, ...;
}