Friendly AI-creation brand: a clean white / warm off-white canvas, chunky rounded ESBuild headlines in navy, neutral PPMori UI, one royal-blue fully-pill CTA, and vibrant AI-generated imagery carrying all the color inside soft rounded cards.
Browse Gamma in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: gamma.app (live DOM, computed styles), 2026-07-13 (desktop 1512px). Coverage: public homepage (hero + product-preview cards). Dashboard: pending login (needs-dashboard). Responsive: breakpoints from stylesheets only; mobile rendering not verified.
Friendly, optimistic AI-creation brand on a clean white canvas, built around a rounded playful display face (ESBuild) set in deep navy and a single bright royal-blue as the action color. Recognition comes from the chunky rounded headline, fully-pill blue buttons, and vibrant AI-generated imagery — surreal mushrooms, glowing flowers, colorful deck thumbnails — that carries all the saturated color while the chrome itself stays calm navy-on-white. It deliberately avoids the cool, hard, monospace developer aesthetic: everything is soft-cornered, warm and approachable, more creative-tool than enterprise-SaaS. Feels: friendly, playful, optimistic, creative.
| Token | Hex | Role / usage |
|---|---|---|
| navy | #002253 | Headlines, primary ink, secondary button text |
| navy-2 | #0b2e79 | Deep navy detail |
| ink | #38383c | Body text (dark warm gray) |
| ink-2 | #262527 | Strong labels |
| muted | #66666b | Subheads, secondary text |
| faint | #aeaeb2 | Placeholder / tertiary |
| border | #dfdfe0 | Hairline borders |
| canvas | #ffffff | Page background |
| surface-warm | #faf9f5 | Warm off-white section tint |
| Token | Hex | Role / usage |
|---|---|---|
| blue-bright | #0858f7 | Primary action blue |
| blue-deep | #0540ad | Primary button fill (deep royal) |
| blue-500 | #2548eb / #1e2caf | Blue steps |
| link | #0c72ed | Text links |
| blue-tint | #d0e6fe | Secondary-button border, soft fills |
| Hex | Role |
|---|---|
#ff5000 | Vivid orange (imagery) |
#da2887 / #921653 | Pink / magenta (imagery) |
Rule: chrome is navy + white + one royal blue; hot orange/pink live only inside AI-generated imagery and colorful thumbnails, never on UI controls.
ESBuild, sans-serif — a rounded, playful display face for headlines.PPMori, sans-serif — a clean geometric sans for everything else.#66666b (subhead), general body ~16–18.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 60 / 60 | 700 | -1.2px (-2%), ESBuild |
| Section (h2) | 32–44 | 700 | tight, ESBuild |
| Subhead | 18 | 500 | normal, PPMori |
| Body | 16–18 | 400–500 | normal, PPMori |
| Button | 16–18 | 500–600 | normal, PPMori |
| Nav / UI | 16 | 500 | normal, PPMori |
Patterns: rounded ESBuild display at tight -2% tracking carries all personality; PPMori keeps UI clean and neutral. Note the two-family split (playful display vs neutral UI).
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.