Krea — design system & UI screens
Full-bleed dark hero anchored by a moody, cinematic photo of an Apple Studio Display sitting on a wooden desk at dusk, the screen showing Krea's "Let's create something" generation canvas. Oversized two-line white headline ("Krea.ai is the world's most powerful creative AI suite.") with the brand wordmark rendered in a metallic gradient sits above a pill pair of CTAs — a solid white "Start for free" and a ghost "Launch App." The signature element is the photoreal in-context monitor mockup whose warm sunset glow (the page's only color accent) emerges from an almost-black field, making the product UI itself the focal point.
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/krea.
Decoded design system
Krea's decoded design system: background #101010, text #ECECEE, accent #4285F4, link #4285F4, primary #1A73E8; type scale h1 72px / h2 18px / body 14px; 4px spacing base; 8px base radius. The single interactive/action color is #FFFFFF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #101010 |
| surface | #1D1D1D |
| border | #313131 |
| text | #ECECEE |
| text_muted | #989899 |
| primary | #1A73E8 |
| accent | #4285F4 |
| link | #4285F4 |
| secondary | #D2E3FC |
| button_bg | #FFFFFF |
| button_text | #000000 |
Using these colors
- Action color
#FFFFFF— the single interactive color; only on things you click or must notice, never large fills. accent,linkare all#4285F4— one role, not several (the action color).- accent
#4285F4— accent for emphasis — keep it rare on the page. - primary
#1A73E8— a brand color — but the call-to-action uses #FFFFFF, not this. - secondary
#D2E3FC— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: Suisse Intl
- Body: Suisse Intl
- h1: 72px
- h2: 18px
- body: 14px
Spacing
- base unit: 4px
- scale: 4px, 6px, 8px, 10px, 12px, 16px, 18px, 20px, 24px, 28px
Radii
- base: 8px
- button: 8px
Shadows (elevation)
- overlay:
rgba(0, 0, 0, 0.25) 0px 20px 39px -20px
Motion
Micro-interactions run at 200ms (dominant) with cubic-bezier(0, 0, 0.2, 1).
- durations: 200ms · 500ms · 300ms
- easings:
cubic-bezier(0, 0, 0.2, 1)·cubic-bezier(0.4, 0, 0.2, 1) - animated properties: opacity, scale, transform, background-color
Native design tokens
| Token | Value |
|---|---|
--background | oklch(14.5% 0 0) |
--foreground | oklch(98.5% 0 0) |
--card | oklch(20.5% 0 0) |
--card-foreground | oklch(98.5% 0 0) |
--popover | oklch(20.5% 0 0) |
--popover-foreground | oklch(98.5% 0 0) |
--primary | oklch(100% 0 0) |
--primary-foreground | oklch(0% 0 0) |
--secondary | oklch(26.9% 0 0) |
--secondary-foreground | oklch(98.5% 0 0) |
…and 110 more measured on the page.
Button states (measured)
- primary hover: background
#F5F5F5 - primary focus: border
1px solid oklch(0.556 0 0)
Layout (measured)
- container max-width:
1310px - nav: 69px absolute
- common grid: 2 columns
Motion choreography (measured)
Load order: div.flex×4 → div.wave-bar×6 → body.dark:bg-primary-950 → header.header → img.transition-[transform,×14 → g.transition-transform×8
Scroll reveal: 25 elements rest at opacity 0, translateY(100px), animate in over 0.2s cubic-bezier(0, 0, 0.2, 1).
Stagger: div ×6 — 100ms apart.
Responsive (measured)
- mobile (390px): hero 36px · nav hamburger
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →