Webravery / Design System
Build systems, not screens.
This is a semantic token-based UI system using strict color roles: background, surface, text hierarchy, and functional accents.
Surface Layer
Base content container using surface background.
bg-surfaceElevated Surface
Used for hover states, modals, and raised UI.
bg-surfaceelevatedAccent Layer
Reserved for premium highlights and editorial emphasis.
accent colorSystem Colors
Success Warning Error Info
UI Elements
Buttons and controls should only use semantic roles — never raw colors.
Typography Test
Hierarchy should feel inevitable
Text hierarchy is handled only through text-primary, text-secondary, and text-muted.
Muted text is for metadata, hints, and non-primary information.