Designing a Dracula-Inspired UI System

Theme before component polish

I wanted the interface to feel editorial and technical at the same time. The easiest way to do that was to lock the theme tokens first, then let the components inherit them.

Token categories I care about

• background
• foreground
• card
• border
• primary
• accent
• muted foreground

A tiny example

<Button variant="outline">Read article</Button>

Visual goal

The site should feel dark, contrasty, and focused, with cyan and pink used as accents instead of random decoration.