Grok Mobile — design system & UI screens
Template gallery grid showcasing pre-designed image generation prompts with visual previews (Funky Dance, Future Family, Soda Pop, etc.). Features a clean dark-mode layout with card-based navigation and quick-add buttons for each template category. Official Google Play listing screenshot.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/grok-mobile.
Decoded design system
Grok Mobile's decoded design system: background #0A0A0A, text #FFFFFF, accent #7C1D12, link #7C1D12, primary #7C1D12; type scale h1 34px / h2 22px / body 17px; 4px spacing base; 12px base radius. The single interactive/action color is #7C1D12 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #0A0A0A |
| surface | #181818 |
| border | #2E2E2E |
| text | #FFFFFF |
| text_muted | #A1A1A1 |
| primary | #7C1D12 |
| accent | #7C1D12 |
| link | #7C1D12 |
| button_bg | #7C1D12 |
| button_text | #0A0A0A |
Using these colors
- Action color
#7C1D12— the single interactive color; only on things you click or must notice, never large fills. primary,accent,link,button_bgare all#7C1D12— one role, not several (the action color).- accent
#7C1D12— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
Typography
- h1: 34px
- h2: 22px
- body: 17px
Spacing
- base unit: 4px
- scale: 2px, 4px, 6px, 8px, 10px, 12px, 14px, 16px, 24px, 30px
Radii
- base: 12px
- button: 12px
Shadows (elevation)
- card:
rgba(0, 0, 0, 0.2) 0px 0px 18px 0px
Motion
Micro-interactions run at 100ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).
- durations: 100ms · 150ms · 300ms
- easings:
cubic-bezier(0.4, 0, 0.2, 1)·ease-in-out - animated properties: background-color, border-color, color, text-decoration-color
Native design tokens
| Token | Value |
|---|---|
--input-button-background-hover | oklch(96.12% 0 none) |
--input-border | oklch(90.01% 0 none/.38) |
--toggle-hover | oklch(99.24% 0 none) |
--card-border | oklch(95.5% .0092 274.92) |
--card | oklch(99.24% 0 none/.8) |
--thead-border-b-color | oklch(11.57% 0 none/.1) |
--bg-warning | hsl(47 100% 45% / .08) |
--important-hover | oklch(98.48% 0 none) |
--link-hover | oklch(72.44% .1266 271.21) |
--incognito-input-background | oklch(95.78% .0057 308.39) |
…and 82 more measured on the page.
Button states (measured)
- primary focus: outline
1px solid rgb(138, 138, 138)
Layout (measured)
- container max-width:
800px
Motion choreography (measured)
Load order: div.max-w-breakout → div.otFloatingRounded → div.transition-[padding]
Overlay recipe (measured)
dialog panel: rgba(0, 0, 0, 0) · radius 0px
Input (measured)
height 60px · radius 0px · focus ring 2px solid rgba(0, 0, 0, 0)
Themes
dark counterpart: background #050505, text #FCFCFC.
Responsive (measured)
- breakpoints: 426px · 550px · 600px · 640px · 768px · 896px
- mobile (390px): nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →