Styleguide

Hero

Clean · light

Vedran Jukić

Designer · Coder · Agentic Whisperer

I build design systems teams actually use, and I design in code.

Simple takes work.

Clean · dark

Vedran Jukić

Designer · Coder · Agentic Whisperer

I build design systems teams actually use, and I design in code.

Simple takes work.

Vector

Vedran Jukić

Designer · Coder · Agentic Whisperer

I build design systems teams actually use, and I design in code.

Simple takes work.

Comic

Vedran Jukić

Designer · Coder · Agentic Whisperer

I build design systems teams actually use, and I design in code.

Simple takes work.

Markup contract
section.hero > .hero__inner > .hero__grid (12 spans) + .hero__name + .hero__role + .hero__measure + .hero__lede + .hero__tagline.
.hero__grid and .hero__measure are decoration (aria-hidden). The measure's height is the token it labels.
.hero__cut holds words the tagline edits away. They're aria-hidden and start closed, so the tagline reads the same without motion.