Grok

Overview

Grok is an AI assistant built by SpaceX that embodies a philosophy of 'Minimalist Clarity'—a design aesthetic that prioritizes directness, accessibility, and cognitive ease. The interface strips away unnecessary ornamentation to create a calm, focused environment where users can interact with AI capabilities without distraction. The brand personality is conversational yet authoritative: Grok speaks with precision and curiosity, avoiding jargon while maintaining technical credibility. The visual language uses a warm, near-white canvas (#f9f8f7) paired with a confident primary blue (#3860be) that signals trust and actionability. Every interaction is designed to feel natural and immediate, as if the AI is a capable thinking partner rather than a tool.

The tone is direct and exploratory. Example sentence: 'What should we explore?' This phrasing invites collaboration rather than commanding action. Grok's vocabulary favors active verbs (Imagine, Build, Create, Explore) and avoids corporate hedging. The design system reflects this voice through generous whitespace, clear hierarchy, and interaction patterns that reward curiosity—buttons that feel responsive, inputs that anticipate the next step, and feedback that confirms understanding without being verbose.

Colors

The color system is built on a neutral, warm foundation that evokes approachability and clarity. The primary surface (#f9f8f7) is a near-white with subtle warmth (hsl(0, 0%, 99%) in the gray scale), creating a canvas that feels inviting rather than sterile. This is paired with a carefully calibrated surface stack: surface-container-low (#faf9f8) for subtle depth, surface-container (#f5f4f2) for mid-tier containers, and surface-container-highest (#e9e7e5) for maximum contrast without harshness.

Primary blue (#3860be) is the signature accent, used exclusively for high-confidence CTAs, focus states, and brand-critical interactions. This blue is neither corporate nor playful—it sits in the 'trustworthy-but-modern' range. Secondary green (#68b631) supports success states and positive feedback

Typography

The type system uses universalSans as the primary typeface, with Inter and Roboto as fallbacks, creating a modern, geometric aesthetic that pairs well with the minimalist design philosophy. The hierarchy is built on weight and size rather than decorative effects. Display (60px, 700 weight) is reserved for hero moments and major announcements. Headline-lg (40px, 600 weight) anchors page sections. Headline-md (28px, 600 weight) is used for subsections and card titles. Body-md (16px, 400 weight) is the default reading weight, set at 24px line-height for comfortable scanning. Label-md (14px, 500 weight) is used for buttons, badges, and form labels, with 0.01em letter-spacing to add subtle distinction. All text uses negative letter-spacing at the display level (-0.04em) to tighten large headlin

Layout

The layout system uses a 12-column grid with a maximum container width of 896px, creating a focused, readable experience that works equally well on desktop and tablet. The page rhythm is built on the spacing scale: lg (40px) separates major sections, md (24px) separates components within sections, and sm (12px) provides breathing room between related elements. The gutter (24px) is applied consistently to horizontal margins, ensuring content never touches the viewport edge. Whitespace is treated as a first-class design element—sections are generously spaced to reduce cognitive load and guide the eye through the page. The hero section uses centered alignment with a max-width constraint, creating a focal point that draws attention to the primary CTA. Form inputs and cards use the full contain

Elevation & Depth

Elevation is achieved through subtle shadows and border treatments rather than dramatic depth effects. The base layer (surface, #f9f8f7) has no shadow. Level 1 (cards, input fields) uses a 1px solid border in outline-variant (#c7c5c7) with a subtle shadow: 0 4px 12px rgba(0, 0, 0, 0.1). Level 2 (modals, dropdowns) increases the shadow to 0 3px 8px rgba(0, 0, 0, 0.15) and may add a semi-transparent backdrop. Hover states elevate cards to Level 2 shadow, signaling interactivity. Focus states use a 3px ring of primary color at 10% opacity (rgba(56, 96, 190, 0.1)) around the element, creating a cl

Shapes

The shape philosophy is 'Soft-Technical'—combining geometric precision with subtle softness to balance approachability and professionalism. Buttons use full border-radius (9999px) to create pill-shaped CTAs that feel friendly and clickable. Input fields also use full radius, creating a cohesive input experience. Cards and containers use 8px radius (lg), providing enough rounding to feel modern without becoming cartoonish. Smaller UI elements like badges and chips use 6px radius (md). Dividers and subtle separators use 4px radius (DEFAULT). This graduated approach ensures that the most interact

Components

Action Elements Buttons are the primary interaction mechanism and use a three-tier system. Primary buttons (background: #3860be, text: white, padding: 8px 16px, height: 40px, radius: full) are used for high-confidence CTAs like 'Imagine' or 'Sign up'. On hover, the background darkens to #2d4fa3 with a 200ms ease transition. Secondary buttons (background: white, text: #050505, border: 1px solid #c7c5c7, padding: 4px 8px, height: 32px, radius: 6px) are used for lower-priority actions like 'Skip to main content'. Ghost buttons (background: transparent, text: #3860be, padding: 8px 12px) are used for tertiary actions and links. All buttons use label-md typography (14px, 500 weight) and include a focus ring of rgba(56, 96, 190, 0.1) at 3px width.

Containers & Surfaces Cards use a white

Do's and Don'ts

**Do**

• Do use primary blue (#3860be) exclusively for high-confidence CTAs and focus states—never use it for decorative elements or low-priority actions.
• Do maintain the 24px gutter on all sides of the container to ensure content never touches the viewport edge.
• Do apply the full border-radius (9999px) to all buttons and input fields to maximize perceived interactivity.
• Do use the spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px) consistently—never invent intermediate values.
• Do apply the 200ms ease transition timing to all hover and focus state changes for a responsive but not jarring feel.
• Do use near-black text (#050505) for body copy, never pure black (#000000), to reduce eye strain and maintain warmth.

**Don't**

• Don't use secondary colors (green, orange) for primary CTAs—they dilute the brand signal and confuse interaction hierarchy.
• Don't apply shadows to elements on the base surface layer (#f9f8f7)—shadows are reserved for elevated containers.
• Don't use border-radius values outside the defined scale (sm: 2px, DEFAULT: 4px, md: 6px, lg: 8px, xl: 10px, full: 9999px).
• Don't mix typeface families within a single component—stick to universalSans with Inter/Roboto as fallbacks.
• Don't apply text-shadow to body copy—it's reserved for small labels over busy backgrounds only.
• Don't use the outline-variant color (#c7c5c7) for text—it's reserved for borders and dividers only.