ChatGPT

Overview

ChatGPT's authentication interface embodies **Austere Minimalism with Atmospheric Depth**—a design philosophy that strips away visual noise to create an intimate, focused moment of access. The brand serves users seeking secure, frictionless entry to conversational AI, and the interface achieves this through a near-black canvas (#010002) paired with pure white CTAs (#ffffff) and supporting pixel-art background imagery that conveys playfulness without distraction. The emotional response is one of clarity and anticipation: the user sees a single, unmissable action path against a serene void.

Voice and personality are understated and direct. ChatGPT speaks in declarative, action-oriented language—"Continue with ChatGPT," "Log in to access"—without flourish or apology. The tone is professional yet approachable, never condescending. Vocabulary is precise and functional: "securely log you in," "review OpenAI's Privacy Policy." Example sentence in brand voice: "Continue with ChatGPT to access your conversations."

Colors

The color system is built on **high-contrast dark-mode minimalism**. Primary (#ffffff) is the signature white used exclusively for the main CTA button and interactive elements—it commands attention against the near-black background and signals actionability. On-primary (#0d0d0d) provides the dark text overlay on white buttons, ensuring WCAG AAA contrast (21:1). Secondary (#cdcdcd) is a mid-gray used for supporting text like "This site uses ChatGPT to securely log you in"—it sits between primary and muted, offering visual hierarchy without competing for focus. Tertiary (#afafaf) is a lighter gray reserved for metadata and disabled states. The surface stack is anchored at #010002 (surface, background) with minimal variation across container levels to maintain the austere aesthetic. Error (#f

Typography

The type system uses a single font family—system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif—to ensure consistency across platforms and reduce cognitive load. Display and headline weights (590 fontWeight) are reserved for primary headings like "Log in to access" (24px, 28px lineHeight, 0.07px letterSpacing), which command the center of the screen. Body text (16px, 400 fontWeight, -0.32px letterSpacing) is used for CTAs and supporting copy, maintaining readability at smaller sizes. Label-sm (12px, 400 fontWeight) is applied to privacy disclaimers and metadata. The -0.32px negative letterSpacing on body and label text creates a tight, modern feel that reinforces the minimalist aesthetic. When displaying small labels over busy backgrounds (e.g., the pixel-art footer), apply

Layout

The layout uses a centered, single-column grid with a max-width of 1468px (min(100%, 1468px)) to accommodate various viewport sizes while maintaining focus. The page is vertically centered using CSS Grid (place-items: center) on a 100vh viewport, creating an immersive, full-screen authentication moment. Padding is set to 24px 20px at desktop, reducing to 24px 18px on mobile (max-width: 640px), ensuring consistent breathing room. The content container (min(762px, 100%)) is 762px wide at desktop, allowing the heading and CTA to breathe without excessive line-wrapping. Spacing between sections uses the lg token (24px) for gap between heading and actions, and md (16px) for gap between button and privacy text. The background artwork is positioned fixed at the bottom with a radial gradient overl

Elevation & Depth

Elevation is achieved through **layered transparency and shadow depth** rather than traditional drop shadows. The base layer is the near-black background (#010002). The content layer sits above with a subtle radial gradient overlay (ellipse 334px 153px, fading from #020617 to transparent) that creates a vignette effect, drawing focus to the center. Interactive elements like buttons and dropdowns use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for the standard elevation (md), and 0 8px 24px rgba(0, 0, 0, 0.25) for elevated modals (lg). Focus states layer a 2px background ring (0 0 0 2px var(--bac

Shapes

The shape philosophy is **Functional Roundness with Precision Edges**—curves are used strategically to soften interactive elements and guide user attention, while maintaining sharp, geometric clarity elsewhere. Buttons use the full radius (100px / {rounded.full}) to create pill-shaped CTAs that feel modern and approachable; this is the most prominent shape on the page and signals "tap here." Dropdown panels and cards use sm (4px) or DEFAULT (8px) radius to maintain a clean, technical appearance that doesn't distract from content. Input fields use DEFAULT (8px) radius for a subtle, professional

Components

Action Elements The primary button is the hero component: 52px height, 0 37px padding, 100px border-radius, white background (#ffffff), dark text (#0d0d0d), 590 fontWeight, 16px fontSize. On hover, the background shifts to #ececec (primary-container), maintaining contrast while signaling interactivity. On active, opacity drops to 0.8 for tactile feedback. On focus-visible, a double-ring shadow appears: 0 0 0 2px #010002 (background ring) + 0 0 0 4px rgb(139 165 255 / 80%) (focus ring), creating a 4px total offset. Transition is background-color 0.1s ease. Secondary buttons are transparent with a 1px border (outline-variant, #505050), 48px height, and 0 24px padding; on hover, they gain a surface-container-high background and on-surface text color.

Containers & Surfaces Cards use s

Do's and Don'ts

**Do**

• Do use the full 100px radius exclusively on primary CTAs—it is the visual anchor and must remain distinctive.
• Do apply text-shadow: 0 1px 4px rgb(0 0 0 / 60%) to all text overlaid on the pixel-art background to ensure legibility.
• Do maintain the near-black background (#010002) as the dominant surface—it is the brand's signature canvas and must not be lightened.
• Do use white (#ffffff) only for primary CTAs and focus rings—never for body text or secondary elements.
• Do apply the double-ring focus state (2px background ring + 4px focus ring) to all interactive elements for keyboard accessibility.
• Do use the system-ui font stack consistently across all platforms—do not substitute with custom fonts.

**Don't**

• Don't use rounded corners larger than 100px on any element—the full radius is reserved for primary buttons.
• Don't apply shadows larger than md (0 3px 8px rgba(0, 0, 0, 0.15)) to cards or dropdowns—the austere aesthetic rejects heavy depth.
• Don't lighten the background beyond #1a1218 (surface-bright)—the near-black canvas is non-negotiable.
• Don't use secondary (#cdcdcd) or tertiary (#afafaf) colors for interactive elements—they are supporting colors only.
• Don't add decorative elements or gradients to buttons—the white background is the only visual treatment needed.
• Don't omit the focus ring on any interactive element—keyboard users depend on the rgb(139 165 255 / 80%) glow for navigation.