Design system

The tokens and components this portfolio is built from: a living reference, not a separate library.

Color Primitives

Neutral

neutral-0
neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
neutral-950

Green

green-50
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900

Amber

amber-50
amber-100
amber-200
amber-300
amber-400
amber-500
amber-600
amber-700
amber-800
amber-900

Red

red-50
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900

Violet

violet-50
violet-100
violet-200
violet-300
violet-400
violet-500
violet-600
violet-700
violet-800
violet-900

Peach

peach-50
peach-100
peach-200
peach-300
peach-400
peach-500
peach-600
peach-700
peach-800
peach-900

Semantic Tokens

Intent-based tokens that map to primitives. Both the swatch and the mapping below it reflect whichever theme is active; switch themes above to see them update.

Status

--status-availablegreen-400green-600green-600green-600Color of the pulse dot in the “Available for work” indicator on the homepage. Stays green in every theme: it's a semantic status signal, not a themeable accent.

Button

--button-primary-fillneutral-50neutral-950peach-600violet-600Background of the primary (solid) button, e.g. the Resume button.
--button-primary-labelneutral-950neutral-50neutral-50neutral-50Label color on top of the primary button fill.
--button-secondary-strokeneutral-700neutral-300peach-300violet-300Border color of the secondary (outlined) button, e.g. the LinkedIn button.
--button-secondary-labelneutral-400neutral-600peach-700violet-700Label color of the secondary button.

Text

--text-neutral-strongneutral-50neutral-900neutral-900neutral-900Headings and primary content. Flows through the --fg-primary alias, used on h1/h2/h3 and the nav brand name.
--text-neutral-baseneutral-300neutral-500neutral-500neutral-500Body copy. Flows through --fg-secondary: paragraph and description text.
--text-neutral-subtleneutral-400neutral-400neutral-400neutral-400Secondary/meta text. Flows through --fg-tertiary, the most-used text color: labels, project descriptions, footer links, timestamps.
--text-neutral-faintneutral-700neutral-300neutral-300neutral-300Lowest-emphasis text (placeholders, disabled states). Defined but not consumed by any component yet; reserved for future use.
--text-interactiveneutral-0neutral-950neutral-950neutral-950Label color for text drawn directly on an accent-colored surface. Defined but not consumed yet; reserved for future use.

Fill

--fill-neutral-darkestneutral-0neutral-0neutral-0neutral-0Constant near-white fill. Defined but not consumed by any component yet; reserved for future use.
--fill-surfaceneutral-950neutral-50peach-50violet-50Page background. Flows through --surface-base, applied to <body> and the blurred nav/footer bars.
--fill-frameneutral-900neutral-100peach-100violet-100One step up from --fill-surface. Flows through --surface-frame, the backdrop behind transparent product-shot images (FramedImage). Same color for every case study, only the theme changes it.

Stroke

--stroke-neutral-defaultneutral-0, 8% opacityneutral-950, 6% opacityneutral-950, 6% opacityneutral-950, 6% opacityDefault hairline border. Flows through --stroke: nav bottom border, footer top border, section dividers, card and list-row borders.
--stroke-neutral-strongneutral-600neutral-400neutral-400neutral-400Opaque, higher-contrast border for elements that need to stand out on their own rather than blend into a surface, e.g. the theme toggle circles. Flows through --stroke-strong.

Component Aliases

Shorthand tokens used directly in Tailwind classes throughout the site (text-fg-primary, border-stroke, etc.).

--fg-primary--text-neutral-strongPrimary text shorthand (text-fg-primary): headings and emphasized content.
--fg-secondary--text-neutral-baseSecondary text shorthand (text-fg-secondary): body copy.
--fg-tertiary--text-neutral-subtleTertiary text shorthand (text-fg-tertiary), the most common text color: labels, descriptions, meta.
--surface-base--fill-surfaceBackground shorthand (bg-surface-base): applied to <body> and translucent nav/footer bars.
--surface-frame--fill-frameBackground shorthand for FramedImage: the themed backdrop behind transparent product-shot images in case studies.
--stroke--stroke-neutral-defaultBorder shorthand (border-stroke), the hairline border used almost everywhere: nav, footer, dividers, cards.
--stroke-opacity--stroke-neutral-default-opacity · 8%6%6%6%Opacity paired with --stroke to produce the hairline effect.
--stroke-strong--stroke-neutral-strongHigher-contrast border shorthand (border-stroke-strong): used on the theme toggle circles.

Radius Scale

xs · 4px

chips, badges

sm · 8px

buttons, tags, inputs

md · 12px

cards, gallery images

lg · 16px

hero images, large containers

xl · 24px

featured / oversized cards

Typography

Inter, via next/font/google. Headings use tight, slightly negative letter-tracking; body copy stays relaxed.

H1 · Hero · text-5xl/7xl, tracking -1.44px

Design & management

H1 · Case study · text-5xl/6xl, tracking -1.28px

Case study title

H2 · Section group · text-2xl, tracking tight

Section group

H3 · Card title · text-xl, tracking tight

Card title

Body · large · text-lg, fg-secondary

Making digital products that are simple, considered, and built to last.

Body · small · text-sm, fg-tertiary

Supporting copy, descriptions, and secondary detail.

Label · text-xs, uppercase, tracking-widest

Selected Work

Mono · font-mono

01 · 2024

Components

Button

PrimarySecondary

ThemeToggle

Dotted underline link (.underline-dots)

View project →

Work list row

01
Project Name

Short project description.

FadeImage · fades in on load, used for hero & gallery images

FadeImage example

Nav bar · fixed, blurred, bottom border

Eugene Tochilin

Footer · used identically on every page