Radiance
A component system rooted in Scandinavian warmth and Apple precision. Clean surfaces, restrained color, and deliberate spacing.
Navigation
A floating bar with a glass backdrop and precise rounded corners. Minimal visual weight, maximum utility.
Buttons
Four variants at three sizes, with icon support and a disabled state. Clean geometry, subtle elevation, precise borders.
Cards
Four surface archetypes: elevated, bordered, glass, and interactive. Each uses a 20px radius and thin borders.
Elevated card
A layered shadow gives this card a lifted appearance. Suitable for feature highlights and content that benefits from depth.
Bordered card
A precise outline with no shadow. Works well inside forms, configuration panels, and anywhere content sits flat.
Glass card
Translucent surface with backdrop blur. Use for overlays, navigation, or any element that needs to sit above content.
Interactive card
Hover lifts the card with a tighter shadow. Designed for selection grids and clickable content tiles.
Inputs & controls
Input fields, a search bar, textarea, select menu, toggle, and checkbox. Focus rings use the slate accent color.
Badges
Compact indicators in filled and soft treatments. Useful for status, counts, labels, and tags.
Put together
A feature card combining the elevated surface, badge, button, and icon treatments into a single piece.
Clean and precise
A feature card using the elevated surface, stone-softened background, and precise border treatment.