Switch between the rendered Visual preview and the Raw DESIGN.md.
ChatGPT's design system embodies a clean, minimalist aesthetic centered on clarity and accessibility. The interface prioritizes conversation as the primary focal point, using expansive whitespace and a restrained palette to reduce cognitive load. The design conveys intelligence and trustworthiness through precise typography, subtle depth through delicate shadows, and a focus on readability over decoration. The overall mood is approachable and professional—encouraging users to engage openly with the AI while maintaining a sense of calm and control. Every element serves a functional purpose, reflecting the product's commitment to straightforward interaction.
Key Characteristics
#0D0D0D): Default text color for body copy, labels, and primary content; the system's dominant color used across all readable text#000000): Pure black for maximum contrast in critical text and edge cases#FFFFFF): Primary container and surface color; used for cards, input fields, and light backgrounds#F9F9F9): Subtle background for secondary sections and hover states; almost white with slight warmth#F3F3F3): Light gray background for alternate sections and grouped content areas#D9F4E4): Success state indicator and positive feedback messaging#FFF6D9): Warning or neutral feedback state; warm beige highlight color#E0EFFF): Informational state; light blue for guidance and secondary call-to-action contexts#8F8F8F): Medium gray for interactive icons and secondary interactive elements; used on hover/focus states#5D5D5D): Darker gray for inactive or secondary icons#CDCDCD): Light border color for containers and form inputs#8F8F8F): Reduced-emphasis text for helper text, captions, and secondary information#5D5D5D): Further reduced emphasis for hints and supplementary labels#40484F): Dark neutral for minimal borders and dividing lines between sections#394A5B): Dark blue-gray overlay for modals and semi-transparent backgrounds#FFF0), (#FFF3), (#FFFC): Transparent white variants for layered overlays, backgrounds, and depth effectsPrimary Font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif
Secondary Font: Same stack; system fonts ensure optimal rendering across platforms and devices.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | System Stack | 28px | 400 | 34px | 0px | Hero headings and page titles; generous line height for breathing room |
| Heading / H2 | System Stack | 24px | 600 | 32px | 0px | Section headings and prominent secondary titles; semibold weight for emphasis |
| Body / P | System Stack | 14px | 600 | 20px | 0px | Primary body text and labels; mid-weight for clarity and hierarchy support |
| Body Long | System Stack | 16px | 400 | 24px | 0px | Extended reading content, descriptions, and conversational text; regular weight for friendliness |
| Button | System Stack | 16px | 400 | 24px | 0px | Interactive button labels; standard weight with clear tap targets |
| Button Small | System Stack | 14px | 500 | 20px | 0px | Secondary button text and compact actions; medium weight for distinction |
| Caption | System Stack | 12px | 400 | 16px | 0px | Fine print, timestamps, and helper text; minimal sizing with adequate line height |
| Code | Monospace | 13px | 400 | 18px | 0px | Inline and block code samples; monospace family for technical distinction |
Primary Button (CTA)
#FFFFFF#0D0D0D14px5000px 16px44px999px1px solid rgba(0, 0, 0, 0.15)20px#F3F3F3, border 1px solid rgba(0, 0, 0, 0.25)#E8E8E8, text #0000001px solid #0D0D0D, outline 2px solid rgba(13, 13, 13, 0.1)Secondary Button
rgba(13, 13, 13, 0)#0D0D0D16px4008px 16pxauto16px0px24pxrgba(0, 0, 0, 0.05)rgba(0, 0, 0, 0.1)Ghost Button / Icon Button
rgba(0, 0, 0, 0)#8F8F8F16px4000px36px36px8px0px24pxrgba(0, 0, 0, 0.05), text color #0D0D0Drgba(0, 0, 0, 0.1), text color #0D0D0DCard Default
#FFFFFF1px solid #CDCDCD8px16pxrgba(0, 0, 0, 0.04) 0px 3px 6px 0px, rgba(0, 0, 0, 0.04) 0px 4px 80px 8px, rgba(0, 0, 0, 0.62) 0px 0px 1px 0pxCard Elevated
#FFFFFF1px solid rgba(0, 0, 0, 0.08)8px20pxrgba(0, 0, 0, 0.04) 0px 3px 6px 0px, rgba(0, 0, 0, 0.04) 0px 4px 80px 8px, rgba(0, 0, 0, 0.62) 0px 0px 1px 0pxSurface Subtle
#F9F9F9none8px12pxText Input Default
rgba(0, 0, 0, 0)#0D0D0D16px4000px 0px 16px 0px24px0px1px solid #9B9B9B24px#8F8F8F2px solid #0D0D0D, outline none, padding bottom 15px0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, #0D0D0D 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0pxText Input Error
1px solid #E74C3C#0D0D0D2px solid #E74C3CTextarea
rgba(0, 0, 0, 0)#0D0D0D16px40012px 0px0px1px solid #9B9B9B24px100pxvertical2px solid #0D0D0DSidebar Navigation
rgba(0, 0, 0, 0)52px (collapsed) / 260px (expanded)0px 0px 6px 0px1px solid rgba(0, 0, 0, 0.05)rgba(0, 0, 0, 0) 0px 1px 0px 0pxNavigation Item Default
transparent#0D0D0D16px4008px 12pxauto8px24pxrgba(0, 0, 0, 0.05)#F3F3F3, font weight 5002px solid rgba(13, 13, 13, 0.2)Navigation Item Icon
20px#0D0D0D#5D5D5DLink Text (Underlined)
#0D0D0D14px400underline6px 10px10px20pxrgba(0, 0, 0, 0.05), text color #000000#394A5B2px solid rgba(13, 13, 13, 0.2)Link Icon (Minimal)
#8F8F8F16px4000px#0D0D0D2px solid rgba(13, 13, 13, 0.2)Badge Success
#D9F4E4#0D0D0D12px5004px 8px4pxBadge Warning
#FFF6D9#0D0D0D12px5004px 8px4pxBadge Info
#E0EFFF#0D0D0D12px5004px 8px4pxBase Unit: 4px
Spacing Scale:
4px – Micro spacing within components (internal icon padding, tight grouping)8px – Compact spacing between adjacent elements, form field padding12px – Small spacing for grouped sections and input fields16px – Standard padding for cards and containers; default component padding20px – Medium spacing between distinct sections and larger components24px – Large spacing between major sections; gap between distinct modules40px – Extra-large spacing for section separation in long-form pages60px – Page-level section padding (vertical)64px – Primary page padding and maximum content breathing room128px – Full-height content spacing; hero section vertical guttersUsage Context:
12px internal padding, 16px between fields16px padding, 20px margin between cards40px–60px vertical, 24px–40px horizontal8px between items, 16px from edgesMax Container Width: 1200px (typical full-width content area on desktop)
Column Strategy: 12-column responsive grid adapting to viewport width
Layout Patterns:
Content Padding:
64px left/right padding within max-width container40px left/right padding16px left/right paddingChatGPT embraces breathing room as a core design principle. Extensive whitespace reduces visual clutter and directs focus toward the primary conversation interface. Vertical spacing is generous (40–60px between major sections) to encourage scanning. Horizontal spacing is balanced—enough to separate content without creating disjointed fragments. Whitespace is treated as an active design element, not empty space; it guides the eye and reduces cognitive load during interaction.
0px – Input fields and form elements with minimal visual weight4px – Small accent elements and badges8px – Standard button radius and card corners; secondary components10px – Medium interactive elements and navigation items16px – Large buttons, prominent cards, and conversation bubbles999px – Fully rounded primary CTA buttons and circular icons| Level | Treatment | Use |
|---|---|---|
| Flat (No Shadow) | No box-shadow | Navigation, input fields, flat buttons, backgrounds |
| Subtle (1px) | rgba(0, 0, 0, 0) 0px 1px 0px 0px | Divider lines, navigation separators, minimal depth |
| Raised (3px) | rgba(0, 0, 0, 0.04) 0px 3px 6px 0px | Cards, floating elements, secondary components |
| Elevated (Multi-layer) | rgba(0, 0, 0, 0.04) 0px 3px 6px 0px, rgba(0, 0, 0, 0.04) 0px 4px 80px 8px, rgba(0, 0, 0, 0.62) 0px 0px 1px 0px | Modals, overlays, primary cards, maximum depth |
Shadow Philosophy: ChatGPT uses a restrained shadow system emphasizing clarity over depth. Shadows are subtle and serve functional purposes—indicating affordance, layering, or focus—rather than aesthetic decoration. The multi-layer shadow approach creates dimensional hierarchy without overwhelming the interface. Shadows use low opacity (0.04–0.62) and modest blur radii to maintain visual restraint and prevent the design from feeling heavy or three-dimensional.
#0D0D0D as your primary text color for all body copy, labels, and default text states; it's the system's dominant neutral-apple-system, Segoe UI, etc.) for performance and native rendering qualityrgba(13, 13, 13, 0.2)#000000 as default text – reserve it for edge cases and maximum contrast scenarios#CDCDCD or semi-transparent variants – simplify borders to maintain minimalist aesthetic| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | Single-column layout, sidebar collapses to 52px icon rail, full-width input, 16px padding, stacked navigation |
| Tablet | 768px–1199px | Two-column layout begins, sidebar partially expanded to 260px, 40px padding, navigation items show labels |
| Desktop | 1200px+ | Full two-column with stable sidebar, max-content width 1200px, 64px padding, full navigation labels visible |
44×44px for all interactive buttons and links (WCAG AAA compliant)36×36px minimum with adequate padding20px line height minimum with 6px 10px padding for tap safety44px height minimum for text and select fields36px–44px height with 8px horizontal padding260px (expanded) to 52px (icon-only) below 768px breakpoint; labels hidden, icons remain visible with tooltips768px; full-width containers on mobile16px to 12px on mobile; maintain 44px height for touch20px to 12px on mobile14px–16px body text, reduce H2 heading from 24px to 20px below 768px40px–60px to 24px–40px on tablet; 16px–24px on mobile#0D0D0D (used 603 times; default for all readable content)#FFFFFF (used 177 times; all surfaces, cards, inputs)#8F8F8F (for helper text, secondary labels, inactive icons)#5D5D5D (for further-reduced emphasis, captions)#F9F9F9 (alternate section backgrounds, hover states)#F3F3F3 (grouped content areas, inactive states)#CDCDCD (form borders, container edges)#D9F4E4 (success states, positive messaging)#FFF6D9 (warning states, attention-needed indicators)#E0EFFF (informational states, secondary CTAs)#394A5B (modal overlays, dark semi-transparent layers)#FFFFFF background with 1px solid rgba(0, 0, 0, 0.15) border, #0D0D0D text, 44px height, 999px radiusDefault all text to #0D0D0D on #FFFFFF surfaces – this is the system's foundational color pairing for maximum clarity and contrast.
Apply 16px padding to all container components (cards, sections, modals) – ChatGPT maintains visual harmony through consistent spacing rhythm.
Use 14px body text with 600 font weight for labels; 16px with 400 weight for conversational content – weight differentiation creates hierarchy without size changes.
Build all primary CTA buttons as 44px height, 999px radius, #FFFFFF background with subtle border – this is ChatGPT's signature action button; always use this pattern.
Icon buttons must be 36×36px with 8px border radius – maintain consistent touch-friendly sizing across all secondary interactive elements.
Apply multi-layer box shadows only to cards and modals – use rgba(0, 0, 0, 0.04) 0px 3px 6px 0px, rgba(0, 0, 0, 0.04) 0px 4px 80px 8px, rgba(0, 0, 0, 0.62) 0px 0px 1px 0px for elevated components.
Never remove focus states – always include a clear 2px solid rgba(13, 13, 13, 0.2) outline on keyboard-navigable elements; accessibility is non-negotiable.
Collapse sidebar to 52px width below 768px – show only icons and tooltips on mobile; expand to 260px with labels on tablet+.
Reduce form input padding from 16px to 12px on mobile, but maintain 44px height – touch targets remain large; reduce whitespace, not usability.
Use feedback colors sparingly and intentionally: green (#D9F4E4) for success only, yellow (#FFF6D9) for warnings, blue (#E0EFFF) for information – reserve these for status indicators, never for primary surfaces.