ChatGPT

Overview

ChatGPT embodies a design philosophy rooted in **Functional Minimalism**—an aesthetic that strips away visual noise to create a transparent interface between user intent and AI capability. The brand serves knowledge workers, students, and curious minds seeking conversational AI without friction. The emotional response is one of calm clarity: the interface recedes, allowing the conversation to take center stage. The color palette is deliberately restrained (light neutrals with strategic blue accents), the typography is system-native and universally legible, and the layout follows a predictable, left-sidebar-plus-main-content rhythm that feels familiar to anyone who has used a modern web application.

The voice is direct, helpful, and unpretentious. ChatGPT speaks in clear, conversational language—never marketing-speak, never flowery. The tone is patient and encouraging, treating the user as an intelligent peer. Example: "Ask anything" (the placeholder in the input field) invites exploration without pressure. The brand personality is approachable yet professional, emphasizing capability and reliability over personality or charm.

Colors

The color system is built on a light, neutral foundation with a single dominant accent. **Primary (#1a73e8)** is Google's signature blue, applied to all interactive elements—buttons, links, focus states, and active indicators. This blue is not decorative; it signals actionability and guides the user's eye to the next step. **Secondary (#0285ff)** is a brighter, more saturated blue reserved for secondary actions and highlights, creating visual hierarchy without introducing a new hue family. **Tertiary (#48a04c)** is a muted green used sparingly for success states, confirmations, and positive feedback (e.g., the green accent in the CSS custom properties for success messaging).

The surface stack is built from near-white tones: **surface (#fcfcfc)** is the page background, **surface-container

Typography

The type system uses the system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif) to ensure maximum legibility and performance across all devices. This choice reflects ChatGPT's philosophy: no custom fonts, no loading delays, no visual pretense. **Display (60px, 700 weight, -0.04em tracking)** is reserved for hero headlines and rare moments of emphasis. **Headline-lg (40px, 600 weight)** anchors major sections. **Body-md (16px, 400 weight, 24px line-height)** is the primary reading size, with generous line-height (1.5) to support long-form conversation transcripts. **Label-md (14px, 500 weight)** is applied to buttons and interactive labels, with 0.01em letter-spacing to add subtle refinement. All text uses 400 or 500 weights; 700 is reserved for head

Layout

The layout follows a **12-column grid** with a fixed 260px left sidebar (surface-container-lowest background, 1px right border in outline-variant) and a fluid main content area. The container max-width is 1280px, centered on the page. The sidebar contains navigation (New chat, Images, Apps, Deep research) and secondary actions (Settings, Help), while the main area hosts the conversation thread and input composer. Spacing uses a semantic scale: **md (24px)** for section separation and card padding, **lg (40px)** for major layout breaks, and **sm (12px)** for internal component spacing. The gutter between grid columns is 24px. The hero prompt ("What's on your mind today?") is centered vertically and horizontally in the main area, using headline-md (28px) weight and color on-surface. The inpu

Elevation & Depth

Depth is conveyed through subtle shadows and surface color shifts rather than dramatic layering. **Level 1 (Base)**: The page background (surface, #fcfcfc) with no shadow. **Level 2 (Cards & Containers)**: Cards use surface-container-lowest (#f9f9f9) with a 1px border in outline-variant (#cdcdcd) and a soft shadow (0 1px 2px rgba(0, 0, 0, 0.06)). **Level 3 (Modals & Elevated Surfaces)**: Modals and popovers use surface-bright (#ffffff) with a stronger shadow (0 4px 12px rgba(0, 0, 0, 0.08)) and a 1px border in outline-variant. On hover, cards transition to surface-container-low (#f7f7f7) and t

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are used consistently but conservatively, creating a modern, approachable feel without sacrificing clarity or precision. **Buttons** use rounded-full (9999px), creating pill-shaped buttons that feel friendly and clickable. **Cards and containers** use rounded-lg (1rem / 16px), a gentle curve that softens the geometry without appearing playful. **Input fields** use rounded-DEFAULT (0.5rem / 8px), a tighter radius that signals functional precision. **Modals and popovers** use rounded-xl (1.5rem / 24px), a larger radius that creates visu

Components

Action Elements **Button-primary** (primary #1a73e8, on-primary white, rounded-full 9999px, height 40px, padding 0 16px, label-md typography, no border) is the dominant call-to-action. On hover, the background shifts to #1557b0 (a 15% darker shade) and a soft shadow (0 2px 8px rgba(26, 115, 232, 0.2)) appears. On active/focus, the background becomes #0d47a1 (on-primary-container) and a 3px focus ring (rgba(26, 115, 232, 0.1)) surrounds the button. Transition: background-color 200ms ease-out, box-shadow 200ms ease-out. **Button-secondary** uses a transparent background with a 1px outline-variant border, primary text color, and the same rounded-full shape. On hover, the background becomes surface-container-high (#ececec).

Containers & Surfaces **Card** (surface-container-lowest #f9f

Do's and Don'ts

**Do**

• Do use primary (#1a73e8) exclusively for interactive elements—buttons, links, focus states, and active indicators. Never use it for decorative or non-interactive content.
• Do maintain the light, neutral surface stack (surface #fcfcfc, surface-container-lowest #f9f9f9) as the default background. Avoid introducing new background colors outside this palette.
• Do apply rounded-full (9999px) to all primary buttons and rounded-lg (16px) to cards and containers. Consistency in shape language reinforces the design system.
• Do use the system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif) for all typography. Custom fonts introduce loading delays and undermine the clean aesthetic.
• Do use soft shadows (0 1px 2px rgba(0, 0, 0, 0.06) for cards, 0 4px 12px rgba(0, 0, 0, 0.08) for elevated surfaces) to signal depth. Avoid harsh or large shadows that create visual clutter.

**Don't**

• Don't use secondary (#0285ff) or tertiary (#48a04c) as primary button colors. These are supporting accents only; primary (#1a73e8) is the only button color.
• Don't introduce new surface colors outside the defined stack (surface, surface-container-lowest, surface-container-low, surface-container-high, surface-container-highest). The palette is intentionally limited to maintain visual coherence.
• Don't apply rounded corners smaller than rounded-DEFAULT (8px) to interactive elements. Smaller radii feel cramped and reduce the approachable, modern aesthetic.
• Don't use custom fonts or web fonts. The system font stack is optimized for performance and legibility; custom fonts introduce loading delays and visual inconsistency across devices.
• Don't apply shadows larger than elevation-lg (0 16px 40px rgba(0, 0, 0, 0.12)) or use blur effects like backdrop-filter. The aesthetic is flat and grounded; excessive depth effects undermine clarity.