◆
Tool Card
Compact card with a smaller notch on the bottom-right.
Design System
Tokens, typography, and component patterns used across the site. Every section renders in both light and dark themes side-by-side via scoped data-theme wrappers.
01 / Tokens
light
Surfaces
deep
--color-deep
surface
--color-surface
card
--color-card
card-alt
--color-card-alt
card-hover
--color-card-hover
panel
--color-panel
personal-bg
--color-personal-bg
Lines
line
--color-line
line-soft
--color-line-soft
Accent
cyan
--color-cyan
cyan-bright
--color-cyan-bright
cyan-soft
--color-cyan-soft
accent
--color-accent
accent-light
--color-accent-light
Dark Variants
dark-bg
--color-dark-bg
dark-card
--color-dark-card
dark-line
--color-dark-line
Syntax
syntax-string
--color-syntax-string
syntax-number
--color-syntax-number
dark
Surfaces
deep
--color-deep
surface
--color-surface
card
--color-card
card-alt
--color-card-alt
card-hover
--color-card-hover
panel
--color-panel
personal-bg
--color-personal-bg
Lines
line
--color-line
line-soft
--color-line-soft
Accent
cyan
--color-cyan
cyan-bright
--color-cyan-bright
cyan-soft
--color-cyan-soft
accent
--color-accent
accent-light
--color-accent-light
Dark Variants
dark-bg
--color-dark-bg
dark-card
--color-dark-card
dark-line
--color-dark-line
Syntax
syntax-string
--color-syntax-string
syntax-number
--color-syntax-number
02 / Typography
Display — Orbitron
Display H1
Display H2
Display H3 Uppercase
Display Small / Card Title
Body — IBM Plex Sans
Lead paragraph — the quick brown fox jumps over the lazy dog.
Body normal — the quick brown fox jumps over the lazy dog.
Body small / muted — the quick brown fox jumps over the lazy dog.
Caption / Eyebrow
03 / Text Colors
light
text-primary — primary body text
text-muted — secondary text
text-faint — deemphasized labels
cyan — accent / link color
dark
text-primary — primary body text
text-muted — secondary text
text-faint — deemphasized labels
cyan — accent / link color
04 / Backgrounds
light
bg-deep
Sample text on this surface.
bg-surface
Sample text on this surface.
bg-card
Sample text on this surface.
bg-card-alt
Sample text on this surface.
bg-personal-bg
Sample text on this surface.
bg-dark-bg
Sample text on this surface.
bg-dark-card
Sample text on this surface.
dark
bg-deep
Sample text on this surface.
bg-surface
Sample text on this surface.
bg-card
Sample text on this surface.
bg-card-alt
Sample text on this surface.
bg-personal-bg
Sample text on this surface.
bg-dark-bg
Sample text on this surface.
bg-dark-card
Sample text on this surface.
05 / Cards
light
Game Card
Game Card
Beveled top-left and bottom-right corners.
Tool Card
Article Link
/Article LinkSlash bullet, title, and description.dark
Game Card
Game Card
Beveled top-left and bottom-right corners.
Tool Card
◆
Tool Card
Compact card with a smaller notch on the bottom-right.
Article Link
/Article LinkSlash bullet, title, and description.06 / Notches
light
SVG divider used between full-bleed sections, with cyan caps.
dark
SVG divider used between full-bleed sections, with cyan caps.