DESIGN.md · explainx registry
OpenAI
The OpenAI design system embodies a dynamic intersection between human-centered warmth and technological precision. It is characterized by minimalistic branding, geometric clarity, and high-impact typography.
Design System#design#ui#ux#template
DESIGN.md (markdown body)
| name | OpenAI |
| colors | background: "#ffffff" foreground: "#000000" brand: "#000000" muted: "#737373" border: "#e5e5e5" card: "#ffffff" accent: "#10a37f" # ChatGPT Teal dark: background: "#000000" foreground: "#ffffff" muted: "#a3a3a3" border: "#262626" card: "#0a0a0a" accent: "#10a37f" |
| typography | fontFamily: sans: "OpenAI Sans, Inter, system-ui, sans-serif" weights: light: 300 regular: 400 medium: 500 semibold: 600 bold: 700 scales: h1: { size: "2.5rem", weight: "700", leading: "1.2" } h2: { size: "2rem", weight: "600", leading: "1.3" } body: { size: "1rem", weight: "400", leading: "1.6" } |
| rounded | default: "8px" full: "9999px" |
Design System: OpenAI
Overview
The OpenAI design system embodies a dynamic intersection between human-centered warmth and technological precision. It is characterized by minimalistic branding, geometric clarity, and high-impact typography.
Design Philosophy
- Humanity meets Technology: Use of perfect circles (humanity) and right angles (technology).
- Geometric Precision: Every element is crafted with mathematical balance, especially the 'O' in the wordmark.
- Minimalism: Low visual noise, generous open space, and a monochrome-first color palette.
- Approachability: Rounded letterforms and smooth curves in "OpenAI Sans" create a friendly, inclusive tone.
Colors
- Monochrome Foundation: Black and White form the core of the brand, ensuring maximum clarity and versatility.
- Accents: The signature green-teal (#10a37f) is used for ChatGPT-specific products and key interactive states.
- Pastel Palette: Used in secondary materials (research paper covers) to differentiate topics while maintaining a soft, humanistic feel.
Typography
- OpenAI Sans: A bespoke typeface that blends geometric precision with a rounded character. It is the primary voice of the brand.
- Scale: Use varying weights (Light to Bold) to create hierarchy rather than excessive color.
Components
- Wordmark: Must have prescribed clear space; should NOT be used with the Blossom logo.
- Blossom: Represented as an intersection of circles. Should be used with lots of open space.
- Cards: Simple white cards with subtle borders and geometric shadows.
- Buttons: Typically rounded or pill-shaped, reflecting the circular motifs of the brand.
Visual Effects
- Open Space: High emphasis on whitespace to "let the brand breathe."
- Geometric Shadows: Clean, sharp, or subtly blurred shadows that follow geometric forms.
- Gradients: Subtle gradients (like the blue circle graphic) used sparingly to add depth without complexity.
Usage
- Copy DESIGN.md into your project or paste it into your IDE agent chat.
- Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
- When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.
Common questions
- What is OpenAI on explainx.ai?
- The OpenAI design system embodies a dynamic intersection between human-centered warmth and technological precision. It is characterized by minimalistic branding, geometric clarity, and high-impact typography. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
- What is DESIGN.md?
- DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
- How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
- Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
- Where is the source repo?
- Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
- How current is this DESIGN.md?
- Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
- Need a fresh DESIGN.md from scratch?
- Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.
Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.
List Your Design.md
Share your design system with AI agents worldwide