Minimal cinematic AI creative suite: a near-black #101010 canvas over a moody photographic hero, white Suisse Intl type at a calm 400 weight, a two-tone white-then-gray wordmark, a white fully-rounded primary pill against a dark bordered secondary pill, a neutral Tailwind gray ladder and a single rare blue accent, with all colour arriving through warm product imagery in a dark monitor mock.
Browse Krea 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: 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.
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.
| 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 |
| 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 |
| Token | Hex | Role / usage |
|---|---|---|
| blue | #006eff | Rare link / accent |
| destructive | oklch(57.7% .245 27.325) | Error (red, not captured as hex) |
| 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.
"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.
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.