Grafbase

Grafbase, developer-focused, technical

Preview image. Unlock full-res

Architectural blueprint on white marble. The interface feels like a meticulously drafted technical diagram, laid out on a clean, bright surface.

Palette
#1b1b1b
#ffffff
#eaeaea
#60646c
#7c7c7c
#e0e1e6
#8dc63f
#27aae1
#19a05f

Grafbase deploys a precise, engineering-focused aesthetic, balancing stark black and white contrasts with subtle, nuanced grays to create an information-dense yet navigable interface. A single vibrant teal-green gradient acts as a beacon for critical calls to action, injecting a dynamic energy into an otherwise composed presentation. The design leverages a tight Inter type scale and generous padding to ensure clarity and hierarchy, making complex API governance feel structured and approachable. Use Plasma Teal Gradient for all primary calls to action to ensure consistent visual prioritization. Apply Inter font with specific letter-spacing adjustments: -0.05em for 90px headings and -0.025em for 40px headings. Maintain a clear visual hierarchy by utilizing Midnight Ink (#1b1b1b) for main headings and interactive elements, and Slate Text (#60646c) for supporting text. Implement 6px border-radius for all interactive buttons and 12px for content cards to maintain a subtle sense of digital craftsmanship. Leverage the Canvas White (#ffffff) as the dominant page background, ensuring a clean and expansive feel for content. Ensure generous internal padding of 24px for all card-like components to provide ample breathing room for content. Prioritize explicit contrast pairings: #1b1b1b on #ffffff (17.2:1 AAA) and #1b1b1b on #eaeaea (14.3:1 AAA). Do not introduce new vibrant chromatic colors beyond the established accent palette for illustrations and the brand gradient. Avoid using hard-edged rectangles without any radius; all major interactive elements and cards should use either 6px or 12px radii. Do not deviate from the Inter typeface; custom fonts are not part of this system. Refrain from heavy drop shadows; the only significant shadow is on interactive buttons during hover/active states. Do not use highly saturated colors for large background areas or extensive text, sticking to the neutral and accent palette for main UI. Avoid reducing vertical spacing below the 24px element gap between related components. Do not combine multiple gradients; the Plasma Teal Gradient is the sole approved gradient for brand identity.

More like this