ChatGPT

Overview

ChatGPT's design system embodies "Functional Minimalism"—a philosophy that strips away visual noise to create a serene, purposeful interface where AI capabilities feel natural and accessible. The brand serves users seeking intelligent conversation, creative collaboration, and problem-solving assistance; the aesthetic evokes clarity and precision through generous whitespace (rgb(252, 252, 252) backgrounds), restrained color usage, and deliberate typography hierarchy. The emotional response is one of calm competence: the interface never overwhelms, never demands attention through flashiness, but instead guides the user's focus toward the conversation itself.

The voice is conversational yet precise, helpful without being verbose, and grounded in practical utility. ChatGPT speaks in short, direct sentences—never marketing-speak, never breathless enthusiasm. Example: "Ask ChatGPT anything. Get responses tailored to you." The brand personality is approachable, intelligent, and honest about capabilities and limitations. Vocabulary favors clarity over jargon: "chat," "create," "code," "research"—verbs that empower users to act.

Colors

The color palette is anchored by a single, confident primary accent: #1a73e8 (Google Blue), deployed exclusively on interactive elements—primary CTAs, links, focus states, and key affordances. This blue appears infrequently but with high intention, making it the visual anchor for user action. The surface stack is built from near-white neutrals: #fcfcfc (surface), #f5f5f5 (surface-dim), #ffffff (surface-bright), descending through container layers (#e8eaed, #e0e0e0) to create subtle depth without darkness. Text is rendered in #0d0d0d (on-surface), a near-black that maintains legibility while avoiding harsh contrast; secondary text uses #5f6368 (on-surface-variant) for reduced emphasis. Borders and dividers employ #d0d0d0 (outline-variant) and #c4c7c5 (outline) to define regions without visu

Typography

The type system uses a single, system-native font stack (Segoe UI, Helvetica, Arial, sans-serif) to ensure consistent rendering across platforms and eliminate font-loading delays. Display (56px, 600 weight, -0.02em tracking) anchors hero sections and major headings; headline-lg (36px, 600 weight) structures page sections; headline-md (28px, 500 weight) introduces subsections. Body text is set at 16px (body-md, 400 weight, 24px line-height) for primary content, with 18px (body-lg) reserved for emphasis. Labels and interactive text use 14px (label-md, 600 weight, 0.01em tracking) to signal clickability and hierarchy. All type sizes maintain a 1.5x line-height ratio minimum to ensure readability in dense layouts. On small labels over busy backgrounds, apply text-shadow: 0 1px 2px rgba(0, 0, 0

Layout

The layout employs a 12-column grid with a max-width of 1280px, allowing flexible content arrangement from mobile (single column) to desktop (multi-column). The page rhythm is governed by a semantic spacing scale: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for full-page rhythm. The gutter (16px) defines the margin between grid columns and page edges. Whitespace is treated as a first-class design element—sections are separated by lg spacing (40px) to create visual breathing room, and cards/containers use md padding (24px) internally. The container max-width of 1280px ensures content remains scannable on ultra-wide displays; narrower viewports stack content vertically with consiste

Elevation & Depth

Depth is conveyed through subtle shadows and background color shifts rather than dramatic layering. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for resting cards and minor surfaces, md (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated cards and hover states, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating panels. Shadows are soft and spread (no blur-radius below 8px) to avoid harsh contrast. Interactive elements transition between elevation levels on hover: a card at rest uses sm shadow; on hover, it elevates to md shadow while the background shifts fro

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used to soften the interface without sacrificing clarity or precision. Buttons and input fields use full rounding (border-radius: 9999px) to create pill-shaped affordances that feel approachable and modern; this 9999px value ensures perfect circles on small elements and smooth pills on larger ones. Cards and containers use lg rounding (1rem / 16px) to define distinct regions while maintaining a refined, non-playful aesthetic. Smaller UI elements (badges, tags, list items) use md rounding (0.75rem / 12px) as a middle ground. The reaso

Components

Action Elements Buttons are the primary affordance for user intent. The button-primary component uses #1a73e8 background with white text, 40px height, 12px 24px padding, and full rounding. On hover, the background darkens to #1557b0 and gains a 0 2px 8px rgba(26, 115, 232, 0.3) shadow; on active/press, it darkens further to #0d47a1 with a 0 1px 3px shadow. All button state transitions use a 0.2s linear timing function to feel responsive without lag. The button-secondary variant uses a white background with a 1px #d0d0d0 border, on-surface text, and the same 40px height; on hover, the background shifts to surface-container-low (#f5f5f5) and the border to outline (#c4c7c5). Button-ghost is a transparent variant for tertiary actions, using on-surface text with a 36px height and 8px 16px p

Do's and Don'ts

**Do**

• Do use primary blue (#1a73e8) exclusively for interactive elements—CTAs, links, focus states—to create a consistent, scannable interface.
• Do maintain md spacing (24px) between major sections and lg spacing (40px) between page regions to create visual breathing room.
• Do apply 0.2s linear transitions to all interactive state changes (hover, focus, active) to signal responsiveness without animation fatigue.
• Do use the full rounding (9999px) on buttons and inputs to create familiar, touch-friendly affordances.
• Do keep text at 16px (body-md) or larger for primary content; reserve 14px (label-md) for secondary text and UI labels only.
• Do use subtle shadows (sm: 0 1px 2px) at rest and elevate to md shadows (0 3px 8px) on hover to convey depth without drama.

**Don't**

• Don't use multiple accent colors for interactive elements; reserve primary blue for actions and use secondary/tertiary only for status indicators (success, warning, error).
• Don't apply shadows larger than lg (0 8px 24px) to standard UI elements; reserve lg shadows for modals and floating panels only.
• Don't use border-radius values smaller than 0.25rem (4px) on interactive elements; sharp corners reduce perceived affordance.
• Don't exceed 18px font size for body text; larger sizes should be reserved for headlines and display text.
• Don't use color alone to convey meaning; always pair color with text labels, icons, or other visual cues for accessibility.
• Don't apply animations or transitions longer than 0.3s on interactive elements; slower transitions feel sluggish and reduce perceived responsiveness.