Design · Nico Mastakas

The system behind this site: six colors, one accent, a 4px scale. Ported token-for-token into the CSS you are reading.

Explore the siteHow I build

The complete system

Foundations plus every component, rendered straight from the Claude Design handoff.

Foundations
Nico Mastakas foundations
Components
Button
Button · primary · ghost · inline link
CaseStudyCard
CaseStudyCard · badge · title · outcome · metrics · tags
Metric
Metric · big number + small label
Tag
Tag · tech-stack / category pill
Nav & Footer
Nav & Footer · top bar + site footer
Callout & CodeBlock
Callout & CodeBlock · prose note + monospace code panel
Interaction & states
Button states
Button states · default · hover · focus-visible · active, primary / ghost / link
CaseStudyCard states
CaseStudyCard states · default vs hover, border→accent, surface +1, arrow nudges