juan_kok — design system

// design_system.sv

Living reference for juan_kok. Every value below reads from the same token files and shared components the production site uses. Click any artifact to view the code needed to build it; click any inline token label to copy it raw.

01 — color palette

Source: src/styles/tokens/colors.css. Click a swatch to copy var(--token).

surfaces

—

--hf-bg

bg-2

—

--hf-bg-2

surface

—

--hf-surface

surface-2

—

--hf-surface-2

cockpit-bg

—

--hf-cockpit-bg

cockpit-panel

—

--hf-cockpit-panel

cockpit-panel-2

—

--hf-cockpit-panel-2

ink

—

--hf-ink

ink-pale

—

--hf-ink-pale

ink-soft

—

--hf-ink-soft

ink-muted

—

--hf-ink-muted

lines

line

—

--hf-line

line-strong

—

--hf-line-strong

brand accents

accent (lime)

—

--hf-accent

accent-2 (teal)

—

--hf-accent-2

accent-3 (mint)

—

--hf-accent-3

category accents

cp-asic

—

--cp-asic

cp-ai

—

--cp-ai

cp-ai-orange

—

--cp-ai-orange

cp-eda

—

--cp-eda

cp-script

—

--cp-script

cp-ok

—

--cp-ok

specialty

terminal-glow

—

--hf-terminal-glow

cyan

—

--hf-cyan

magenta

—

--hf-magenta

violet

—

--hf-violet

lofi / purple

purple-deep

—

--hf-purple-deep

purple-mid

—

--hf-purple-mid

purple-shadow

—

--hf-purple-shadow

lofi-accent

—

--lofi-accent

lofi-accent-2

—

--lofi-accent-2

lofi-bg

—

--lofi-bg

02 — gradients

Source: src/styles/tokens/gradients.css.

purple bar

--hf-grad-purple-bar

horizontal sweep for animated section dividers

purple bar shadow

--hf-grad-purple-bar-shadow

darker mirror of purple bar — drop-shadow under the dividers

fade-x

--hf-grad-fade-x

horizontal fade-to-edges mask

chart lime → yellow

--hf-grad-chart-lime-yellow

cockpit code-activity bars (GRAD.greenYellow)

chart rose → gold

--hf-grad-chart-rose-gold

cockpit donut/speedo accent (GRAD.roseGold)

chart periwinkle → mint

--hf-grad-chart-periwinkle-mint

cockpit donut/speedo accent (GRAD.periwinkleMint)

chart coral → purple

--hf-grad-chart-coral-purple

cockpit donut/speedo accent (GRAD.coralPurple)

chart cyan → magenta

--hf-grad-chart-cyan-magenta

cockpit donut/speedo accent (GRAD.cyanMagenta)

chart emerald → orange

--hf-grad-chart-emerald-orange

cockpit donut/speedo accent (GRAD.emeraldOrange)

chart yellow → red

--hf-grad-chart-yellow-red

cockpit donut/speedo accent (GRAD.yellowRed)

rainbow red → indigo

--hf-grad-rainbow-red-indigo

ROYGBI spectrum sweep (red, orange, yellow, green, blue, indigo)

03 — typography

Source: src/styles/tokens/typography.css.

--hf-mono · primary

JetBrains Mono

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

Body, code, labels, nav, dashboard UI · 400/500/600/700

--hf-display · display

Special Elite

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

Hero headings, project titles, signature badge

--hf-hand · handwritten

Caveat

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

Lofi annotations, casual accents · 400/600

size scale

--hf-fs-xs 10px The quick brown fox jumps over the lazy dog.

--hf-fs-sm 11px The quick brown fox jumps over the lazy dog.

--hf-fs-base 12px The quick brown fox jumps over the lazy dog.

--hf-fs-md 13px The quick brown fox jumps over the lazy dog.

--hf-fs-lg 14px The quick brown fox jumps over the lazy dog.

--hf-fs-xl 16px The quick brown fox jumps over the lazy dog.

--hf-fs-2xl 20px The quick brown fox jumps over the lazy dog.

04 — atmospheric effects

Live components from src/components/ui/. Each one self-positions — drop it anywhere.

<StarfieldStage> — twinkling stars + periodic shooting stars on black bg (scoped canvas; the global version is wired in Layout.astro)

<PurpleSkyTransition> — dark to deep-purple sky with stars

<LofiFooterFade> — purple → page bg fade with drifting dots, between lofi room and footer

.hf-band-cosmic + <NebulaStars> — cockpit cosmic backdrop, var(--hf-grad-cockpit)

.hf-band-nebula + <NebulaStars> — terminal nebula backdrop, var(--hf-grad-nebula)

05 — containers

Common surface treatments. All values come from tokens — no inline hex.

cp-dash

Cockpit dashboard panel — flat dark bg with cyan + purple inner glow.

bg: --hf-cockpit-bg · border: --hf-alpha-white-06 · radius: --hf-radius-lg

terminal

Terminal window — near-black bg with traffic lights.

border: --hf-line-strong · radius: --hf-radius-md

card

Project cards, stat cards — surface bg, thin border.

bg: --hf-surface · border: --hf-line · radius: --hf-radius-md

block

Terminal output block — accent left border, near-transparent bg.

border-left: 3px solid --hf-accent · bg: --hf-alpha-white-02

06 — UI components

Live previews from src/components/ui/. Every shared component must appear here — new components added without a preview don't count as reusable.

NEON_TEXT

flickering accent — wraps any inline text

kinetic

strike-then-replace cycle

strike-through copy

animated cross-out on mount

design_system.boundary

section divider with logic-gate motif

value / max / color / segments — used in cockpit meters

[placeholder.module] — port pending

fallback panel for missing/loading content

stat card

Skills

Years

Tape-outs

cockpit vitals — top accent stripe by category

pill buttons

▸ asic.core ▸ ai.pipeline ▸ eda.toolchain ▸ scripts.src

cockpit nav — color tinted by category accent

▸ trigger zoom →

full-page transition — fires on any <a data-zoom>. Zooms the current page out to a point, navigates, then zooms the next page back in. Wired into the footer's "design system" link and this page's "back to site".

07 — naming conventions

section headers (// prefix)

// vitals — stat cards row

// output rate — live — speedometer gauge

// proficiency — donut chart, skill breakdown by category

// skill growth — live — animated bar chart

// commit streak — heatmap

// explore — navigation buttons

page headers (dot notation)

// asic.core · // ai.pipeline · // eda.toolchain · // scripts.src

stat cards (real portfolio data only)

Skills: 22 · Commits: 847 · Years: 3 · Tape-outs: 2 · Projects: 12

08 — bento grid layout

Overview page uses an asymmetric 2-column bento grid. Full-width tiles span both columns.

grid structure

.cp-bento — display: grid; grid-template-columns: 2fr 3fr; gap: 14px

.cp-tile — base tile: subtle bg, 1px border, --hf-radius-lg

.cp-tile-full — spans both columns (grid-column: 1 / -1)

.cp-tile-a / -b — left (narrow) / right (wide) column

.cp-bento-row3 — sub-grid: grid-template-columns: 3fr 2fr

layout map (live grid — real .cp-bento classes)

.cp-tile-full

vitals · stat cards row

.cp-tile-a

output rate · speedometer

.cp-tile-b

proficiency · donut chart

.cp-tile (in .cp-bento-row3 · 3fr)

skill growth · bar chart

.cp-tile (in .cp-bento-row3 · 2fr)

commit streak · heatmap

.cp-tile-full

ticker + explore

responsive

≤640px: single column stack, all tiles and sub-grids collapse to full-width.

09 — spacing & radii

Source: src/styles/tokens/spacing.css · 4px base scale.

spacing scale

4px

--hf-space-1

8px

--hf-space-2

12px

--hf-space-3

16px

--hf-space-4

20px

--hf-space-5

24px

--hf-space-6

32px

--hf-space-8

40px

--hf-space-10

48px

--hf-space-12

border radii

2px

--hf-radius-xs

4px

--hf-radius-sm

8px

--hf-radius-md

12px

--hf-radius-lg

pill

--hf-radius-pill

10 — animation tokens

twinkle — stars, 2s ease-in-out infinite alternate, opacity 0.15→1

pulse — nav dot, 3s ease-in-out infinite, box-shadow glow

blink — cursor, 1s steps(2) infinite, opacity toggle

neon — hero text, text-shadow flicker with random off states

glitch — hero text, color cycling + translate shake, 0.1–0.15s

ticker — portfolio stats scroll, 35s linear infinite translateX

card-in — project cards, 0.4s ease-out, opacity + translateY(12px)

star-twinkle — <PurpleSkyTransition> stars, 2s alternate

11 — page transitions

Sequenced zoom-out → scroll → zoom-in pattern used by the cockpit when navigating between skill pages. Click ◀ ▶ or a dot to play it.

<ZoomSwapDemo> — sequenced zoom transition (dot / category nav)

// overview

auto

live vitals + skill mix

phase machine: idle → out (scale 0.78 + blur, 320ms) → scroll (in real cockpit) → in (scale back to 1, 380ms springy ease) → idle

<CubeSwapDemo> — 3D cube rotation (used for arrow nav in cockpit)

// overview

auto

live vitals + skill mix

rtl · verification · pd

training · inference · ops

flow scripts · automation

each face is a page; rotor pivots -90° per cycle. Faces stay tangent because a ResizeObserver writes --csd-d = stageWidth/2. Keyframe (not transition) so the rotor's translateZ(-D) applies on frame 1 alongside the face's translateZ(+D) — no pre-rotation pop-in.

← back to site