
Preview image. Unlock full-res
Warm charcoal workbench with code syntax highlights. The core experience is dark and functional, highlighted by colorful code snippets.
This design system feels like a developer's workbench with a warm, analog-meets-digital aesthetic. It pairs a dark, almost charcoal-colored UI with hints of muted earth tones and vibrant, isolated code syntax colors. The sharp, unrounded buttons stand in contrast to the subtly rounded general UI elements, creating a precise, tool-like feel, while the extensive use of GT America font brings a distinctive modern tech presence.
Prioritize GT America for all textual elements except for specific code blocks, using ui-monospace for technical content.
Use 0px border-radius for all interactive buttons to maintain a precise, angular aesthetic.
Apply 'Workbench Gradient' (#221f1d to rgba(41, 57, 105, 0.9)) for rich, dark, interactive code editor backgrounds.
Maintain a primary text color of Carbon (#141414) on light backgrounds and Cloud (#ffffff) on dark backgrounds for readability.
Employ the code syntax colors (Code Violet, Pink, Green, Yellow) exclusively for code snippets or specific data highlights to prevent visual noise.
Utilize Ash (#f6f6f6) for light page backgrounds and Slate (#292929) for dark card/surface backgrounds, clearly defining section depth.
Enforce a hierarchical typography scale, with the largest display text at 56px and -2.8px letter spacing, creating a distinct visual voice.
Avoid using rounded corners for buttons; all buttons must have 0px border-radius.
Do not introduce new chromatic colors outside the defined accent palette for syntax highlighting; maintain the established code color scheme.
Do not use generic system fonts for headlines or body text; GT America is fundamental to the brand identity.
Avoid excessive use of shadows; prefer distinct background colors and gradients to indicate elevation or separate surfaces.
Do not dilute the contrast between text and background; ensure high contrast ratios like #ffffff on #141414 or #f6f6f6 on #000000.
Do not mix 'Parchment' (#fdefd2) with 'Ash' (#f6f6f6) on adjacent surfaces; these subtle neutrals serve distinct light-theme background roles.









