Preview image. Unlock full-res
Dark mode precision workbench. An engineering tool's UI where every element is intentional and optimized for information density under low-light conditions.
This design system evokes a 'professional toolkit' aesthetic, combining the stark clarity of a dark-mode development environment with subtle, almost invisible layering. The primary visual choice is the use of a dark, near-achromatic palette for backgrounds and text, creating a serious, focused atmosphere. Carefully selected custom fonts, particularly the Matter family, give headlines and key information a distinctive, understated technical feel. Strategic use of tight letter spacing and specific line heights for different text sizes contributes to a dense but precise information display, echoing code editor interfaces.
Prioritize the Matter font family for all display and primary text to maintain the precise, technical aesthetic.
Use Midnight Base (#121212) as the consistent page background color for all dark-themed sections.
Apply Graphite Surface (#1E1E1D) for card and internal panel backgrounds to create subtle layering and depth without relying on shadows.
Ensure all primary action buttons use a 4px radius for button edges.
Utilize Negative letter-spacing, such as -0.03em for 68px Matter headlines, to maintain a tight, professional typographic rhythm.
Employ Ash Text (#868684) for secondary body copy and supportive text to provide readability without overwhelming contrast.
Incorporate Geist Mono font for all code blocks or technical references to ensure monospace clarity.
Avoid using bright or overly saturated colors for background elements; stick to the achromatic and near-achromatic scale.
Do not use generic system fonts when Matter or Inter are specified, as they dilute the brand's distinct typographic voice.
Refrain from heavy, multi-directional drop shadows, as the site uses a single, subtle blue glow for focus.
Do not vary border radius widely; stick to 4px for most interactive elements and 8px for larger containers.
Avoid large line-heights for headlines, as the system favors compact, information-dense display (e.g., 0.91 for 68px).
Do not introduce unnecessary visual distractions; the design relies on precise typography and subtle color shifts for hierarchy.
Never use the default browser link color #0000EE; use brand-aligned colors for interactive text elements.
