Grok Bot

Colors

• #F9F9F9background-page · page background
• #FFFFFFsurface-primary · browser chrome surface · button backgrounds
• #1A1A1Atext-primary · main headline · button labels
• #737373text-secondary · legal disclaimer text
• #EFEFEFbutton-background · action button fill
• #1D8CF8accent-blue · webview loading indicator line

Type

• titleSF Pro Text · 44px · 600 · #1A1A1A
• buttonSF Pro Text · 28px · 500 · #1A1A1A
• body-legalSF Pro Text · 24px · 400 · #737373

Elements

• app-logo · icon_container

  Centered horizontally, roughly 32% down from screen top; size approximately 180x180 px. · Solid black circle with white slanted capsule shapes forming an eye motif.

• sign-in-grok-button · button

  Centered horizontally, width ~90% of screen (~980 px), height ~100 px. · Light gray solid fill (#EFEFEF), rounded rectangle with slash-circle icon and centered label.

• sign-in-cursor-button · button

  Positioned 18 px below the Grok button, matching width ~980 px, height ~100 px. · Light gray solid fill (#EFEFEF), rounded rectangle with isometric box icon and centered label.

• create-account-button · button

  Positioned 18 px below the Cursor button, matching width ~980 px, height ~100 px. · Light gray solid fill (#EFEFEF), text-only label.

• legal-footer · text_block

  Anchored towards bottom, centered horizontally, width ~80%. · Multi-line centered text with underline styling on Terms and Privacy links.

Layout

Single-column centered web authentication page within an in-app browser sheet. Logo and title top-weighted, action buttons stacked in the middle, terms anchored near the bottom bar.

Notes

System typography is likely SF Pro Display/Text; web styling may load system fallbacks.