Style Guide

Colors

Base Palette

base-100

base-200

base-300

base-content

Accent Colors

primary (amber)

echo (cyan)

notestar (green)

Semantic Colors

info

success

warning

error

Typography

Body — JetBrains Mono

The quick brown fox jumps over the lazy dog. 0123456789

Display — Space Mono

The quick brown fox jumps over the lazy dog.

Decorative — VT323

$ hack.codes_

Type Scale

text-xs (11px)

text-sm (13px)

text-base (15px)

text-lg (17px)

text-xl (20px)

text-2xl (24px)

text-3xl (32px)

Components

Buttons

Inputs

Badges

Primary Info Success Warning Error

Alerts

MSG ok: your changes have been saved

ERR error: could not create note

CRT Effects

$ phosphor glow_

Scanlines + vignette + phosphor glow

App Accent Switcher

Click to change the data-app attribute on <html>.

Accessibility

Contrast Ratios (Dark Mode)

Element	Ratio	WCAG
Body text (90% L on 10% bg)	17+ : 1	AAA
Amber accent	7.5 : 1	AAA
Cyan accent	9.1 : 1	AAA
Green accent	9.8 : 1	AAA
Error red	5.0 : 1	AA

Focus Ring Demo

Tab through these elements to see the 2px accent focus ring.

Focusable link

Reduced Motion

All animations (cursor blink, scanline drift, toast entry) are gated behind motion-safe: and suppressed when prefers-reduced-motion: reduce is set.