Skip to main content

Style Guide

Design tokens, components, and patterns for hack.codes.

Themes

The platform supports four theme families (hacker, modern, classical, vaporwave), each with light + dark modes. Theme switching is pure CSS-variable rebinding — no markup changes. Use the picker in the header (or the inline buttons below) to switch the live preview.

Theme

Mode

Theme Matrix (3 × 2)

Each tile renders the same content under a different theme. CSS custom properties cascade into the scoped subtree via compound attribute selectors — no iframes needed. Adding a fourth theme would add a fourth column without changing any markup.

hacker · dark

dark

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

primary

modern · dark

dark

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

primary

classical · dark

dark

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

primary

vaporwave · dark

dark

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

primary

hacker · light

light

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

primary

modern · light

light

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

primary

classical · light

light

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

primary

vaporwave · light

light

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

primary

Themable Tokens

Each theme rule block (in assets/css/app.css ) sets these custom properties. Anything else in the stylesheet should read from these rather than hardcode values.

  • --color-base-100/200/300/content — surface palette
  • --color-primary/accent/info/success/warning/error — semantic colors
  • --font-body / --font-heading — typography (mono / sans / serif per theme)
  • --tracking-body / --tracking-heading — letter-spacing per theme
  • --text-base / --text-base--line-height — body type scale (modern 16px/1.55, classical 17px/1.65)
  • --radius-field / --radius-box / --radius-selector — border radii
  • --glow-intensity — multiplier for .glow* utilities (1 = hacker/vaporwave-dark, 0 = modern/classical)
  • --accent-chroma-mult — per-app accent saturation (1 = hacker/modern/vaporwave, 0.6 = classical)

Colors

Base Palette

base-100

base-200

base-300

base-content

Accent Colors

primary (amber)

lab (cyan)

study (green)

Semantic Colors

info

success

warning

error

Typography

Body — Hack

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 13% bg) 15+ : 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.