Convex

Convex, dark-mode, code-centric

Preview image. Unlock full-res

Warm charcoal workbench with code syntax highlights. The core experience is dark and functional, highlighted by colorful code snippets.

Palette
#141414
#ffffff
#f6f6f6
#fdefd2
#292929
#d7d7d7
#e5e5e5
#948ae3
#fc618d
#7bd88f
#f8e67a
#69bee2

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.

More like this