# Gamma — Marketing Site Design Spec > 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. ## 1. Visual Theme & Atmosphere 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. ## 2. Color Palette & Roles ### Ink & neutrals | 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 | ### Accent (royal blue) | 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 | ### Imagery / expressive (from AI art, not chrome) | 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. ## 3. Typography Rules - Display font: `ESBuild, sans-serif` — a rounded, playful display face for headlines. - Body / UI font: `PPMori, sans-serif` — a clean geometric sans for everything else. - Body: 18px / 500 / `#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). ## 4. Component Stylings ### Buttons (fully-pill, radius 24px) - **Primary ("Start for free")**: bg deep royal `#0540ad` (bright `#0858f7` variant), text `#ffffff`, radius 24px (pill), height 40px, padding `0 32px`, PPMori 500. No shadow. - **Secondary ("Watch video")**: bg white, text navy `#002253`, 1px border light-blue `#d0e6fe`, radius 24px, height 48px, PPMori 600, faint white shadow `0 2px 4px rgba(255,255,255,.48)`. - **Ghost ("Login")**: transparent, text navy `#002253`, radius 24px, padding `0 16px`. ### Inputs - Rounded (pill/large-radius) fields, hairline `#dfdfe0` border on white; focus likely a royal-blue ring (exact recipe not captured). ### Cards / product previews - Large rounded panels (~16–24px radius) holding vibrant AI-generated art and mock deck/editor UI (image placeholders, "Suggest images" pill with a sparkle, palette picker). Soft, no hard borders. ### Nav - White, wordmark left (GAMMA, uppercase custom letterforms), center links (Products/Solutions/About/Pricing) in PPMori, right `Login` ghost + bright-blue `Start for free` pill. ## 5. Layout Principles - Two-column hero: left copy (rounded 60px headline → 18px muted subhead → dual pill CTAs), right stacked product-preview cards full of colorful imagery. - Generous whitespace, soft-cornered everything; sections tinted warm off-white `#faf9f5`. - Color enters through imagery, not layout blocks — the structural chrome stays navy/white/blue. ## 6. Depth & Elevation - Radii: buttons full-pill (24px), cards/panels ~16–24px. Nothing sharp. - Control heights: 40px (primary/ghost), 48px (secondary). - Elevation: soft and light — faint shadows on the secondary button; product cards use gentle drop shadows rather than borders. Overall airy, not heavily layered. ## 7. Motion - Friendly micro-interactions on hover for the pill buttons; the product-preview cards animate AI-generation moments (image suggestions appearing). No aggressive scroll-jacking observed on the chrome (exact durations not captured). ## 8. Backgrounds, Effects & WebGL - Clean white / warm off-white `#faf9f5` canvas. The visual energy is vibrant AI-generated imagery (mushrooms, flowers, deck thumbnails) inside rounded cards — that imagery is where all the saturated orange/pink/blue lives. No canvas/WebGL chrome effect, no dark gradient hero, no grain observed on the layout itself. ## 9. Do's and Don'ts ### Do - Keep the canvas white / warm off-white `#faf9f5` with navy `#002253` ink. - Use the rounded ESBuild display for headlines (60px, -2% tracking) and PPMori for all UI/body. - Make buttons fully-pill (radius 24px): deep royal-blue `#0540ad`/`#0858f7` primary, white secondary with a light-blue `#d0e6fe` border. - Let saturated color come from AI-generated imagery and colorful thumbnails inside rounded cards — not from UI chrome. - Keep everything soft-cornered and airy with light shadows, not hard borders. - Reserve one royal blue for actions and links. ### Don't - Don't use sharp corners — Gamma is fully rounded (pills + soft cards). - Don't put hot orange/pink on buttons or chrome; those belong to imagery only. - Don't drop the two-family split (playful ESBuild display + neutral PPMori UI) into a single neutral face. - Don't go dark or add a monospace developer aesthetic — the brand is bright, warm and creative. - Don't over-shadow; elevation stays light and airy. ## 10. Responsive Behavior - Breakpoints in stylesheets (typical 768 / 1024 / 1280). The two-column hero stacks; the 60px headline scales down and nav collapses to a menu. - Mobile rendering not verified — captured at desktop 1512px only. ## 11. Agent Prompt Guide Quick token reference: - Canvas `#ffffff` / `#faf9f5` · Text navy `#002253` / body `#38383c` · Muted `#66666b` · Border `#dfdfe0` · Accent royal blue `#0858f7` / `#0540ad` - Display: `ESBuild` (rounded) · UI: `PPMori` · Body: 18px · Radius: 24px pill buttons, ~16–24px cards · Control height: 40–48px - Primary: `#0540ad` pill, white · Secondary: white + `#d0e6fe` border · Link: `#0c72ed` Use the Gamma design language: a friendly, optimistic AI-creation brand on a clean white / warm off-white #faf9f5 canvas with deep-navy #002253 ink. Headlines use a rounded playful display face (ESBuild) at 60px, -2% tracking; all UI and body use a clean geometric sans (PPMori) — subheads 18px/500 in muted #66666b, body ink #38383c. There is one action color, royal blue: a deep #0540ad / bright #0858f7 fully-pill primary button (radius 24px, white label), a white secondary pill with a light-blue #d0e6fe border, and #0c72ed links. Everything is soft-cornered and airy — pill buttons and large rounded cards with light shadows, never hard borders or sharp corners. Saturated color (hot orange #ff5000, pink #da2887) appears only inside vibrant AI-generated imagery and colorful deck thumbnails within the cards, never on UI chrome, which stays navy + white + blue. Layout is a two-column hero: rounded headline, muted subhead, dual pill CTAs on the left, stacked colorful product-preview cards on the right. Feels: friendly, playful, optimistic, creative. Avoid: sharp corners, hot colors on buttons/chrome, collapsing the ESBuild+PPMori split into one face, a dark or monospace developer look, and heavy shadows.