cn|
WorkWritingAboutConnect

cn

building things that matter

  • Work
  • Writing
  • About
  • Connect

© 2026 Cristian Najera

Design System

Component

Button

6 variants

Component

Tag

3 variants

DefaultSolidAccent
Component

Stat

With/without suffix, default + lg

42Projects completed
8yrsYears experience
99%Uptime
12Open source repos
Component

Quote

2 variants, with/without attribution

Design is not just what it looks like. Design is how it works.

The people who are crazy enough to think they can change the world are the ones who do.

Steve Jobs
Component

CodeBlock

Preformatted code display

function greet(name: string): string {
  return `Hello, ${name}!`
}
Component

SectionHeader

2 variants with kicker + description

Kicker text

Default variant

This is the description text for the default variant.

Kicker text

Borderless variant

This is the description text for the borderless variant.

Foundation

Typography

text-display through text-label

Display — 72px SerifThe quick brown fox
H1 — 48px SerifThe quick brown fox
H2 — 32px SerifThe quick brown fox
H3 — 20px SansThe quick brown fox
Lead — 19px SansThe quick brown fox
Body — 16px SansThe quick brown fox
Small — 13px SansThe quick brown fox
Mono — 12px MonoThe quick brown fox
Label — 11px Mono UppercaseThe quick brown fox
Foundation

Colors

Semantic color tokens

background
foreground
primary
muted
accent
border
ink-2
muted-2
accent-soft