# Krea — Marketing Site Design Spec

> Source: krea.ai (live DOM, computed styles), 2026-07-18 (desktop 1512px).
> Coverage: home / marketing. App/dashboard: pending login (`needs-dashboard`). Responsive: breakpoints from tokens only; mobile rendering not verified.

## 1. Visual Theme & Atmosphere

Minimal, cinematic AI creative suite: a near-black canvas (`#101010` / pure black chrome) over a moody full-bleed photographic hero (a dusk mountain range), with a huge white Suisse Intl headline set at a calm regular 400 weight. The look is restrained and gallery-like — a neutral Tailwind gray scale, no chromatic chrome, a single reserved blue reserved for rare links — so all the colour comes from the warm generative product imagery floated in a dark monitor mock. The signature hero move is a two-tone wordmark ("Krea" white, ".ai" gray). Controls are soft: a white fully-rounded primary pill against a dark bordered secondary pill. Nothing is loud; darkness, scale and product imagery do the work. Feels: cinematic, minimal, modern, premium.

## 2. Color Palette & Roles

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#101010` | Page background |
| black | `#000000` | Nav, dark chrome, deepest sections |
| surface-900 | `#171717` | Raised dark panels |
| surface-800 | `#262626` | Cards, secondary button fill |
| white | `#ffffff` | Primary button, light app-UI surfaces |
| gray-50 | `#fafafa` / `#f5f5f5` | Light inset surfaces in product shots |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| text | `#ffffff` | Primary text, headings on dark |
| muted | `#a3a3a3` | Secondary text |
| muted-2 | `#737373` | Tertiary text |
| faint | `#525252` / `#404040` | Captions, disabled |
| ink | `#000000` | Text on white buttons |

### Accent & semantic
| Token | Hex | Role / usage |
|---|---|---|
| blue | `#006eff` | Rare link / accent |
| destructive | `oklch(57.7% .245 27.325)` | Error (red, not captured as hex) |

### Borders
| Token | Hex | Role / usage |
|---|---|---|
| border | `#262626` | Hairline dividers on dark |
| border-light | `#e5e5e5` / `#d4d4d5` | Borders in light product UI |

Token system: shadcn/ui oklch scale — `--background oklch(100% 0 0)`, `--foreground oklch(14.5% 0 0)`, `--primary oklch(0% 0 0)`, `--muted-foreground oklch(55.6% 0 0)`, `--border oklch(92.2% 0 0)`, `--radius .625rem`. The marketing page renders the dark inversion of these.

Rule: chrome is monochrome white-on-near-black; the neutral gray ladder does all structural work and colour arrives only through product imagery. Blue `#006eff` is reserved and rare.

## 3. Typography Rules

- One family: `"Suisse Intl", ui-sans-serif, system-ui, sans-serif` across display, body and UI — a neo-grotesque set at a calm regular weight.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 60 / 63 | 400 | normal |
| Sub / lead (h2) | 18 / 28 | 400 | normal |
| Body | 16 / 24 | 400 | normal |
| UI / nav | 15 | 400 | normal |
| Muted caption | 16 | 400 | normal, `#a3a3a3` |

Patterns: everything sits at a regular 400 weight — emphasis comes from size and the white-vs-gray two-tone contrast, never from bold weights. No uppercase eyebrows; tracking stays normal.

## 4. Component Stylings

### Buttons
- **Primary (white pill)**: bg `#ffffff`, text `#000000`, fully-rounded pill, h ~`47px`, Suisse Intl 15px 400. ("Start for free" / "Sign up for free".)
- **Secondary (dark pill)**: dark fill `#262626`-ish, text `#ffffff`, 1px subtle border, fully-rounded pill, same height. ("Launch App" / "Log in".)
- **Nav item**: transparent, white text, radius `8px`, 15px 400.

### Nav
- Full-width bar on black: Krea "K" glyph logo left, center links (App / Features / Image / Video / Upscaler / API / Pricing / Enterprise), right white Sign-up pill + dark Log-in pill.

### Chips / badges
- Small dark rounded "NEW" pill badge with white uppercase micro-label announcing new models, on a dark rounded-full chip.

### Cards / product tiles
- Rounded (`~10px` / `.625rem`) dark tiles; product imagery shown inside a dark monitor/browser mock with a warm generation canvas.

### Inputs
- Not prominently captured on marketing; app uses `--input oklch(92.2% 0 0)`, focus `--ring oklch(70.8% 0 0)`. Marketing focus ring not captured.

## 5. Layout Principles

- Centered hero: badge, huge two-tone headline, one-line sub, two pill CTAs, then a large product monitor mock.
- Max content generous, centered; strong vertical rhythm over the dark canvas.
- Base radius `.625rem` (10px); pills for CTAs.
- Sections stack dark panels with product imagery over the photographic hero backdrop.

## 6. Depth & Elevation

- Radii: `8px` (nav buttons), `10px` (`.625rem`, cards/inputs), full-pill (CTAs, badges).
- Elevation: mostly flat dark surfaces separated by `#262626` hairlines; the product monitor mock reads as the one floating object. Shadows not prominent on the dark canvas.

## 7. Motion

- Restrained: hover color/opacity micro-transitions; dropdown "Features" menu. Realtime generation is the product's motion story, not the marketing chrome. No heavy scroll library confirmed. Ease default cubic-bezier.

## 8. Backgrounds, Effects & WebGL

- Signature background is a full-bleed dark photographic hero (dusk mountains) behind the centered headline — the darkness is an image, not a flat fill.
- Product imagery (warm generative canvases) inside a dark monitor mock is the only colour source.
- No confirmed WebGL hero or grain; flat dark solids elsewhere. Destructive red exists only as a token.

## 9. Do's and Don'ts

### Do
- Keep the canvas near-black (`#101010` / `#000000`) with white Suisse Intl text.
- Set the hero large at a calm 400 weight; use the white-then-gray two-tone wordmark for emphasis.
- Use a white fully-rounded primary pill against a dark bordered secondary pill.
- Let the neutral Tailwind gray ladder do all structural work; keep chrome monochrome.
- Let colour come only from product imagery floated in a dark monitor mock.

### Don't
- Don't add bold display weights — everything is 400; emphasis is size + two-tone.
- Don't introduce coloured UI chrome; blue `#006eff` is rare and reserved.
- Don't square off the CTAs — primaries are full pills.
- Don't switch to a light overall canvas; the marketing surface is dark.
- Don't add uppercase eyebrows or wide tracking; tracking stays normal.

## 10. Responsive Behavior

- Fluid centered layout; nav collapses on mobile (markup present). Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#101010` · Text `#ffffff` · Muted `#a3a3a3` · Border `#262626` · Accent blue `#006eff` (rare)
- Font: Suisse Intl (one family, 400) · Display 60px · Body 16px · Radius 10px card / full-pill CTA · Button height ~47px
- Focus: not captured (app `--ring oklch(70.8% 0 0)`) · Primary hover: subtle lighten on white pill

<krea_design_language>
Use the Krea design language: a minimal, cinematic AI creative suite on a near-black canvas #101010 (pure #000000 chrome) with white Suisse Intl type set at a calm regular 400 weight across display, body and UI — emphasis comes from size and a white-then-gray two-tone wordmark, never from bold weights. The hero is a huge centered white headline (60px/63, 400) over a full-bleed dark photographic backdrop, with a one-line #a3a3a3 sub and two pill CTAs: a white fully-rounded primary (#ffffff bg, #000 text, ~47px) beside a dark bordered secondary pill (#262626, white text). Structure is carried entirely by a neutral Tailwind gray ladder (#a3a3a3, #737373, #525252, #404040, #262626, #171717) with #262626 hairlines and a shadcn/ui oklch token base (--radius .625rem = 10px, --primary oklch(0% 0 0)); chrome stays monochrome and colour arrives only through warm generative product imagery floated inside a dark monitor mock. Blue #006eff is a rare reserved accent. Cards use ~10px radius, CTAs and badges are full pills, surfaces are flat and dark with no prominent shadows. Feels: cinematic, minimal, modern, premium. Avoid: bold display weights, coloured UI chrome, squared-off CTAs, a light overall canvas, or uppercase/wide-tracked eyebrows.
</krea_design_language>