Primary
Primary text carries headings, labels, and information essential to completing the task.
System / 02
The shared decisions beneath every component, pattern, and product surface.
Primary and secondary heading systems share six named size variants from XXS at 16px through XXL at 48px.
Semibold JetBrains Mono for strong product hierarchy.
Menlo at weight 200 for lighter portfolio and editorial hierarchy.
Use four text roles to establish readable hierarchy, then apply semantic list markup for grouped or sequential information.
Primary
Primary text carries headings, labels, and information essential to completing the task.
Secondary
Secondary text supports the primary message with strong, accessible contrast.
Muted
Muted text is the third level for metadata, timestamps, captions, and low-priority context.
Tag line
Continue
A bright, image-forward theme that pairs darker portfolio ink with muted teal to keep case studies editorial, credible, and easy to scan.
Use clean white surfaces to foreground project imagery, darker ink for confident reading, and muted teal for headings, links, and intentional interaction.
Keep canvas and cards white, separate content with crisp neutral borders, and let project imagery provide the dominant visual color.
Use the darker portfolio ink for primary reading, reserve gray for supporting metadata, and keep teal concise enough to remain distinctive.
A charcoal-first theme that preserves the portfolio’s cool teal identity while reducing glare and maintaining clear hierarchy.
Use deep charcoal instead of pure black, lift content onto graphite surfaces, and reserve teal for headings, focus, and meaningful action.
Keep the canvas darkest, use card and popover tokens for elevation, and retain visible borders between adjacent graphite surfaces.
Use foreground for primary reading, muted foreground for support copy, and never substitute teal for long-form body text.
A crisp daylight theme that grounds electric lime in mineral whites and dark, legible ink.
Use pale mineral surfaces for calm reading, dark green for accessible primary text, and neon lime as a concise high-energy signal.
Keep surfaces pale and neutral so neon elements retain their signal strength without overwhelming content.
Use the fifth hierarchy color—deep green—for headings and labels on light surfaces; reserve fluorescent neon for fills, rings, and selected states.
A near-black theme where electric lime becomes the clearest signal for action, focus, and selected state.
Keep large surfaces nearly black, lift content onto subtle carbon panels, and use neon only where attention should move next.
Use carbon layers and crisp borders rather than glow effects; the neon accent should remain sharp.
Neon works on dark surfaces for concise labels and controls; use soft white for paragraphs.
Core and status colors adapt to light and dark themes without changing their intended role.
Charcoal
Primary ink for headings, body copy, and high-emphasis controls.
Light: #2A292D · Dark: #F4F3F1 · --foreground / --primary
Graphite
Raised surfaces and secondary control backgrounds.
Light: #F0EFF1 · Dark: #3B3A3E · --card / --secondary
Soft white
Quiet canvas color that reduces glare while preserving clarity.
Light: #FAF9F7 · Dark: #222124 · --background
Muted gray
Low-emphasis surfaces and tertiary supporting information.
Light: #EFEEF0 · Dark: #363538 · --muted / --muted-foreground
Primary accent
Cool teal reserved for focus, selection, and primary actions.
Light: #527F8D · Dark: #78A9B7 · --brand
Success
Confirms completed actions, healthy states, and positive outcomes.
Light: #2F7D57 · Dark: #63B88A · --success
Warning
Signals caution, elevated risk, or a state that needs attention.
Light: #A66300 · Dark: #E1A84B · --warning
Error
Communicates failed actions, invalid input, and critical problems.
Light: #C43D4F · Dark: #EF7885 · --error
Portfolio ink
Near-black primary text and action color.
#030213 · --primary
Portfolio surface
Fixed-light page and card canvas.
#FFFFFF · --background
Portfolio muted
Cool neutral for understated fields and surfaces.
#ECECF0 · --muted
Portfolio accent
Muted blue for links, wayfinding, and branded emphasis.
#578392 · --brand
Supporting hues classify information without competing with primary actions. Every hue includes coordinated light, softened dark, and vibrant values with demonstrated text contrast.
Light blue · Dark blue · Vibrant blue
Light: #E8F1F4 · Dark: #3F626E · Vibrant: #59BDDD · --chip-skill
Light green · Dark green · Vibrant green
Light: #EAF5EF · Dark: #3F6954 · Vibrant: #55C98B · --chip-application
Light rose · Dark rose · Vibrant rose
Light: #F5E9EE · Dark: #70485B · Vibrant: #E979A8 · --chip-system
Light orange · Dark orange · Vibrant orange
Light: #F5F0EB · Dark: #725D48 · Vibrant: #E7A85F · --chip-professional
Light gray · Dark gray · Vibrant gray
Light: #F1F1F2 · Dark: #58575D · Vibrant: #A9A8B0 · --chip-industry
Light violet · Dark violet · Vibrant violet
Light: #F0EAF5 · Dark: #604C76 · Vibrant: #BD82E8 · --chip-ai
Light yellow · Dark yellow · Vibrant yellow
Light: #F7F4E9 · Dark: #6B6345 · Vibrant: #E6CE57 · --chip-visual
JetBrains Mono carries system labels and confident headings. Inter remains neutral and highly readable for body copy.
Display / Mono
Aa 01 →
JetBrains Mono · 600
Body / Sans
Aa 01 →
Inter · 400–600
A 4px base scale with purposeful jumps: 4, 8, 12, 16, 24, 32, 48, 64.
Small 6px radii communicate precision. Use 4px for compact labels and 8px only for larger containers.
Prefer borders and surface contrast. Use elevation only for floating menus, dialogs, and transient UI.
16px for compact controls, 20px for standard actions, and 24px for prominent wayfinding.
100–200ms transitions clarify state. Respect reduced motion and never delay task completion.
Mobile-first: sm 640, md 768, lg 1024, xl 1280, 2xl 1536.
Use semantic role names such as background, foreground, muted, border, brand, and destructive.
:root {
--background: oklch(0.985 0.002 90);
--foreground: oklch(0.19 0.006 285);
--brand: oklch(0.84 0.195 128);
--radius: 0.375rem;
}