Preview image. Unlock full-res
Architectural blueprints on frosted glass. A digital space that feels both precise and slightly translucent, built on foundational whites and grays.
The OpenAI Developers site presents a professional and approachable aesthetic, grounded in a refined grayscale palette. Soft, diffused shadows on card elements subtly layer content, avoiding harsh contrasts. Typography employs a custom Sans typeface with precise letter-spacing, particularly noticeable on headlines, cultivating a sense of technical clarity. The design relies on careful text density and spacious layouts to maintain an open, readable environment, with interactive elements subtly highlighted through state changes rather than high-chroma accents.
Use OpenAI Sans weight 600 for all primary headings, and weight 500 for secondary headings to establish clear hierarchy.
Employ Canvas White (#ffffff) as the default page background and Cloud Gray (#f9f9f9) for most card or elevated section backgrounds.
Apply 8px border-radius to all feature cards, images, and embedded media elements for visual consistency.
For interactive buttons, utilize 9999px (pill shape) border-radius with Shadow (#000000) for filled states.
Maintain 16px as the standard base font size for body text (OpenAI Sans weight 400) colored Slate Text (#282828).
Integrate the rgba(0, 0, 0, 0.08) 0px 1px 2px -1px shadow for subtle elevation on key informational cards or interactive containers.
Ensure 4px horizontal and 8px vertical spacing for most inline elements and small gaps within components.
Avoid using highly saturated or vibrant colors; the system relies on a monochromatic base with subtle shifts in neutral tones.
Do not introduce square corners on buttons or interactive elements; all buttons must maintain 9999px radius.
Refrain from using strong, dark borders around cards; rely on background color shifts and subtle shadows for visual separation.
Do not use letter-spacing wider than normal; the tightly tracked OpenAI Sans is a key brand characteristic.
Avoid large hero gradients or busy background images; keep backgrounds clean and functional.
Do not deviate from the established 4px spacing base unit for element and component spacing.
