Preview image. Unlock full-res
Graphite workshop under a soft spotlight. Surfaces are not black, but deep charcoal, illuminated by concentrated white text and a single vibrant highlight for interactive elements.
This design system evokes a digital craftsman's workshop feel, with a muted dark palette and subtle elevation shifts creating a sense of depth and organization. The interplay of soft, almost invisible backgrounds with crisp white typography and geometric accents defines a precise yet approachable atmosphere. Rounded corners on interactive elements provide a gentle contrast to the otherwise stark, modular structure, hinting at user-friendliness within a powerful system.
Use Storm Slate (#232320) as the foundational background for pages and large sections to ensure a consistent dark theme.
Apply Ghost White (#fffffe) for all primary text, headings, and interactive elements to ensure readability against dark backgrounds.
Maintain the Styrene font at weight 400 for all typography, adjusting size and line-height according to the type scale.
Utilize 16px corner radius for most interactive buttons and 7.5px for content cards, establishing a consistent softening of rectangular forms.
Apply rgba(8, 9, 1, 0.08) 0px 56px 72px 0px inset shadow for subtle internal depth on elevated card components.
Employ Ember White (rgba(254, 254, 218, 0.055)) as a low-opacity background for secondary buttons, indicating interactivity without demanding attention.
Use 9999px radius exclusively for pill-shaped buttons and tags to create a distinctive, self-contained interactive element.
Do not introduce highly saturated colors for backgrounds or major UI elements; maintain the low-chroma dark palette.
Avoid using drop shadows for elevation; rely on the subtle inset shadow and background color shifts (Deep Graphite vs Ash Stone) to indicate depth.
Do not use multiple font families; all text must be Styrene 400.
Avoid arbitrary padding or margin values; adhere strictly to the 4px base unit spacing scale (4px, 8px, 12px, 16px, 32px, 45px).
Do not use pure black (#000000) for backgrounds; Storm Slate (#232320) is the darkest base color.
Do not use plain rectangular buttons without corner radius; all interactive buttons should have at least 16px radius, or 9999px for pills.
