Diseño · Nico Mastakas

El sistema detrás de este sitio: seis colores, un acento, una escala de 4px. Portado token por token al CSS que estás leyendo.

Explorar el sitioCómo construyo

El sistema completo

Foundations más cada componente, renderizados directo del handoff de Claude Design.

Foundations
Nico Mastakas foundations
Componentes
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
Interacción y estados
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