Pick one that feels right.
Seven presets. Same components, seven personalities.
Each archetype bundles a coherent set of role tokens — corner radius, density, borders, shadows, motion. Click any card to land on its result page with install commands + the CSS snippet to paste.
Sharp & focused.
Sharp + compact + hairline borders + flat surfaces. Optimized for dense screens and fast scanning.
Modern & balanced.
Slightly-rounded + comfortable + crisp borders + subtle shadows. Modern SaaS baseline.
Soft & calm.
Rounded + spacious + hairline + ambient shadows. Restrained type, soft edges, lots of breathing room.
Bold & layered.
Rounded + comfortable + crisp + dramatic shadows. Vibrant accents. Familiar to mobile-first teams.
Readable & restrained.
Slightly-rounded + spacious + flat + editorial type. Optimized for reading and writing.
Minimal & monochrome.
Sharp + compact + monochrome accent. Bold type. Engineering-led minimalism.
Warm & signature.
Devalok signature. Warm-tinted grain on surfaces, halo focus rings, pink accent, balanced rhythm.
Archetypes are a starting point, not a cage. After you pick one, the result page exposes the underlying role tokens. Override any of them in your own CSS — radius, density, motion, borders. Or start from your brand color and we'll suggest an archetype to pair with it.