Preview image. Unlock full-res
Terminal aesthetic, crafted in code.
This design system evokes a sense of digital craftsmanship, like a custom-built terminal for a specialized task. The aesthetic leans into a high-contrast dark theme with stark white, monospace-inspired typography, creating an atmosphere of precision and focused utility. Punctuation marks and symbols are used as visual elements, giving the textual content a coded, programmatic feel. Slight rounding on interactive elements prevents harshness, while the overall minimal approach keeps the focus on core information and interactive 3D elements.
Prioritize Quartz White (#e4dfda) for all primary text content against Basalt Black (#12130f) backgrounds to maintain high contrast.
Use Inline VF (or 'IBM Plex Mono') at 80px, weight 400, for primary display headings, without letter-spacing adjustments.
Apply 9999px border-radius to all interactive buttons for a consistent pill shape.
Utilize Arbeit Technik (or 'JetBrains Mono') for body text and labels, with a -0.05em letter-spacing at 12px.
Maintain a compact spacing rhythm, using multiples of 4px for element gaps and button padding.
When introducing subtle borders, use 1px Flint Gray (#3c3c38) for minimal visual separation.
Avoid using highly saturated colors; the system relies on achromatic tones and subtle accents.
Do not deviate from the established font families; custom fonts 'Inline VF', 'Arbeit Contrast', and 'Arbeit Technik' are core to the brand identity.
Do not use generic square corners for interactive elements; buttons require a 9999px radius.
Do not introduce heavy box-shadows or complex elevation; the design's depth comes from content arrangement and subtle background changes.
Do not vary line-height aggressively; stick to the specified 0.80 for display, 1.13-1.25 for headings/body.
Do not add extra padding around sections beyond the 64px sectionGap unless for specific content needs, to preserve density.
