Krea Design System

Overview

Krea's marketing surface is the rarest move in the dark-AI category — inverted-accent contrast, where the primary CTA is a pure-white pill against a near-black "#0b0f15" canvas and the brand has no painted voltage at all. The header band runs true "#000000", the body floor steps up to "#0b0f15", and the only chromatic activity comes from a photographed iMac sitting on a wooden desk under a forest ridge at dusk. Where most AI-tool home pages compete with a generated-output grid or a marquee video reel, Krea drops a real desk still-life and lets the product run inside the screen. The marketing chrome stays a quiet observer.

Type runs Suisse Intl across every role at modest weights — 400, 450, 500, 600 — with the display headline at 72px / line-height 86.4px / -1.8px tracking. There is no serif display face, no humanist body fallback, no second family on CTAs; Suisse Intl carries everything from 72px hero down to 12px uppercase eyebrow. The button label sits at the unusual weight 450, a variable-axis intermediate between regular and medium that distinguishes the CTA face from both body (400) and display (500-600). It's a precision detail signaling typographic craft — most marketing pages round to 400 or 500 and skip the 450 step entirely.

The shape language is pill-or-eight, not a graded radius scale. Every CTA — Sign up for free, Log in, Start for free, Launch App — resolves to an effectively infinite radius (the inspector reports 33554432px, which clamps to 9999px in practice). Every chrome element below CTA — nav chips at 12px 20px padding, text inputs, dark cards — uses a strict 8px. There are no 4px, 6px, or 12px intermediates on rendered chrome; the system reads as a binary choice between full pill and 8px square-corner, with 14px and 24px reserved for one-off elevation containers.

Frozen brand voltage: four chromatic tokens ship in CSS — k-primary-outline "#62a2ff", action-green "#65f223", purple-rain "#762fad", deep-purple "#55227d" — and none of them paint a single rendered pixel on the home page. Unlike the convention of dark-AI tools wiring a saturated violet or electric-cyan into the primary CTA, Krea reserves its brand voltage for product UI behind authentication. The brightest surface on the marketing page IS the call to action, and the call to action is white.

Key Characteristics:

• Inverted accent: primary CTA fills "{colors.ink}" ("#ffffff") against "{colors.canvas}" ("#0b0f15"). The brightest pixel IS the affordance.
• Pill-or-eight geometry: 9999px on every CTA, 8px on every chrome element, no intermediates rendered on the marketing surface.
• Suisse Intl everywhere: 72px display through 12px eyebrow, no font-family switch. Weight 450 reserved for button labels.
• Frozen brand tokens: "#62a2ff", "#65f223", "#762fad", "#55227d" ship in CSS but paint zero rendered pixels on the home page.
• Photographed hero: a wooden desk with an iMac at dusk replaces the conventional generated-image grid.
• Modest display weight (500-600), not the 700+ that fintech and consumer SaaS use.

Colors

Canvas

• Canvas ({colors.canvas} — "#0b0f15") — frequency 1. Used as bg (1). The body floor — a near-black with a 258-degree blue cast that reads slightly cooler than the true-black header. Anchored to --background and --color-background.
• Canvas Header ({colors.canvas-header} — "#000000") — frequency 387. Used as text (323), bg (9), shadow (22), gradient (33). The header band fill, gradient stops, and the maximum-emphasis text role. Carries the page.

Surface

• Surface ({colors.surface} — "#171717") — frequency 22. Used as text (20), bg (2). Card and popover background, wired to --card and --popover. The mid-step between canvas and elevated surface.
• Surface Elevated ({colors.surface-elevated} — "#262626") — frequency 12. Used as bg (11), border (1). The accent / muted / secondary fill — every elevated chip, hover-state surface, and sidebar accent lands here.
• Surface Panel ({colors.surface-panel} — "#404040") — frequency 156. Used as text (150), gradient (6). The Tailwind neutral-700 anchor, wired to --color-k-panel-bg. A workhorse text and gradient stop.

Ink (text)

• Ink ({colors.ink} — "#ffffff") — frequency 228. Used as text (154), bg (63), shadow (2), gradient (9). Primary text on the dark canvas AND the fill of the primary CTA pill. The same hex carries both roles.
• Ink Muted ({colors.ink-muted} — "#a3a3a3") — frequency 115. Used as text (107), bg (8). The workhorse secondary text — paragraph body, label eyebrows, footer links. Wired to --muted-foreground.
• Ink Faint ({colors.ink-faint} — "#737373") — frequency 15. Used as text (15). Tertiary text and disabled labels. The --ring color also lives here.
• Ink Soft ({colors.ink-soft} — "#525252") — frequency 12. Used as text (12). Quietest legible text role.

Hairline & Divider

• Hairline ({colors.hairline} — "#e5e5e5") — frequency 21. Used as bg (13), border (8). Light-surface fill and hairline border. Wired to --color-zinc-200 and friends.
• Divider ({colors.divider} — "#d4d4d5") — frequency 12. Used as text (9), bg (1), border (2). Light-mode divider with a faint 286-degree tint.
• Light 50 ({colors.light-50} — "#f1f1f1") — frequency 0 rendered. Wired to --color-primary-150 and the lightest neutral 50 stops; reserved for in-app light surfaces.

Shadow Step

• Shadow Step ({colors.shadow-step} — "#646464") — frequency 6. Used as gradient (6). A mid-gray gradient stop used in subtle shadow gradients. No CSS variable name.

Frozen Brand (reserved, zero rendered pixels)

• K Primary Outline ({colors.k-primary-outline} — "#62a2ff") — frequency 0. Wired to --color-k-primary-outline. A 257-degree sky-blue at OKLCH chroma 0.15. Reserved for primary outline states in the editor; absent from the marketing surface.
• Action Green ({colors.action-green} — "#65f223") — frequency 0. Wired to --color-action-green. A saturated 138-degree green at OKLCH chroma 0.26. Reserved for in-app action confirmations.
• Purple Rain ({colors.purple-rain} — "#762fad") — frequency 0. Wired to --color-purple-rain. A 305-degree violet for product chrome behind authentication.
• Deep Purple ({colors.deep-purple} — "#55227d") — frequency 0. Wired to --color-deep-purple and --color-purple-900. The darker purple anchor.

Off-Brand (utility)

• Disappointing Blue ({colors.disappointing-blue} — "#1e3b68") — frequency 0. Wired to --color-disappointing-blue, named in CSS exactly that way. Reserved for warning or error tone variants.
• Discord Purple ({colors.discord-purple} — "#5865f2") — frequency 0. Wired to --color-discord-purple. The Discord brand match for community CTAs.

Typography

Font Family

The system runs Suisse Intl as the primary family across every text role from 72px display down to 12px uppercase eyebrow. Suisse Intl Mono is declared in --font-mono for code surfaces. There is no separate display family and no humanist body fallback. Suisse Intl is a commercial face from Swiss Typefaces; Inter at the matching weights is the closest open-source substitute, with Geist Sans as the second choice. Both transfer the geometry cleanly; weight 450 must be set explicitly via the variable-font axis.

Hierarchy

Principles

• One family, four weights. Suisse Intl handles every role; variety comes from size, weight, and tracking rather than family contrast.
• Weight 450 as the button signature. The CTA label sits between regular and medium — a precision detail most marketing surfaces skip.
• Modest display weight. Display sits at 500-600, not the 700+ that fintech and enterprise systems use. The brand trusts photography and pure-white pill geometry over typographic muscle.
• Negative tracking only on display. Headlines at 72px and 30px use -1.8px and -0.45px respectively. Body, buttons, and labels keep tracking at 0 or +0.15px.
• Uppercase only at 12px. A single uppercase tier with 1.2px positive tracking — the rest of the system is sentence case.

Layout

Spacing System

• Base unit: 4px (with 10px and 12px as the workhorse step sizes).
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 10px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.2xl} 48px · {spacing.3xl} 96px.
• Dominant rhythm: 10px (frequency 66), 12px (56), and 8px (51) are the three workhorse step sizes — the spacing is dense at the chip level, with 48px and 96px reserved for section vertical padding.
• Nav-chip padding: the signature 12px 20px combination (frequency 31) lives on every nav link.

Grid & Container

• Max content width: wide-bleed on hero, with the desk photograph centered against the dark canvas.
• Header: full-width "#000000" band at 64px tall with logo-left, links-center, CTA-pair-right.
• Hero: centered headline at 72px display, 20px subtext at weight 450, then the pill pair, then the desk photograph.
• Footer: beneath the captured viewport; not fully observed on the captured surface.

Whitespace Philosophy

Krea uses 96px vertical section gaps and tight 8-12px component interiors — generous breathing room between sections paired with dense chip and button geometry inside them. The contrast between section-scale 96px gaps and chip-scale 10px paddings is the page's rhythm.

Elevation

The system uses almost no box-shadow on the marketing surface. Two shadow tokens ship in CSS — --shadow-xl with a 20px-25px stacked black tint and --drop-shadow-xl with a 9px-7px black tint — but neither is observed on the captured hero. Depth comes from surface tinting, not from shadow.

The pure-white pill on dark canvas IS the elevation system. There is no progressive shadow ladder; the CTA reads as elevated because it inverts the canvas, not because it casts a shadow.

Shapes

Krea operates on pill-or-eight geometry, the binary radius rule. Every CTA — Sign up for free, Log in, Start for free, Launch App — resolves to an effectively infinite radius (the inspector reports 33554432px, the JavaScript Number.MAX_SAFE_INTEGER-adjacent value that browsers clamp to 9999px). Every chrome element below CTA — nav chips, text inputs, dark cards — uses a strict 8px. There are two intermediate radii in the system — 14px for one-off card containers and 24px for the larger surface frames — but they appear rarely on the marketing surface, and 4px / 6px / 16px do not render on rendered chrome at all.

Components

Header

top-nav — A 64px-tall "#000000" header band with the logo wordmark at left, six nav links centered ("App", "Features", "Image", "Video", "Upscaler", "API", "Pricing", "Enterprise"), and the Sign-up / Log-in pill pair at right. No border, no shadow — the band is a flat fill against the slightly lighter "#0b0f15" body canvas.

nav-link — Suisse Intl 15px / weight 400 / line-height 22.5px / 0.15px tracking, white text on transparent background, 8px radius, 12px 20px padding. The 47px tap height is generous for a marketing nav.

nav-link-hover — Background lifts to "#262626" ({colors.surface-elevated}) on hover; everything else stays.

Pill CTAs

button-primary — The signature surface. Pure-white "#ffffff" fill against the dark canvas, "#000000" text, Suisse Intl 14px / weight 450 / line-height 20px, 9999px radius, 8px 16px padding, 36px height, no border. The button is the brightest pixel on the page — the affordance IS the accent.

button-primary-hover — Background dims to "#e5e5e5" ({colors.hairline}) on hover, text stays "#000000". A subtle 8% luminance step.

button-secondary — Same pill geometry, transparent fill, white text, 1px "#262626" border. Used for "Log in" and "Launch App" — every secondary CTA stays a transparent pill.

button-secondary-hover — Background fills to "#262626" on hover, text stays white.

Hero

hero-band — Centered 96px-padded section with the 72px headline (the Krea.ai creative-AI-suite tagline) in {typography.display-xl}, the subtext in {typography.body-lg} at weight 450, then the pill pair, then the desk photograph. Background is the canvas "#0b0f15".

hero-subtext — Suisse Intl 20px / weight 450 / line-height 28px. Sits below the headline at single-line length: "Generate, enhance, and edit images, videos, or 3D meshes for free with AI."

hero-mockup-frame — The wooden-desk photograph with an iMac at dusk centered below the CTA pair. No frame, no shadow, no border — the photograph is bled onto the canvas. 24px radius is available for the rare framed mockup.

Cards & Panels

card-dark — "#171717" fill, white text, 8px radius, 1px "#262626" border, 20px interior padding. The default dark card surface.

panel-dark — "#262626" fill, white text, 8px radius, 12px 20px padding. Used inside nav chips and elevated chips.

Forms

text-input — "#171717" fill, white text, Suisse Intl 14px body-sm, 8px radius, 8px 12px padding, 36px height, 1px "#262626" border. Form inputs are not rendered on the captured hero; this is the inferred treatment from the in-app shell wired to --color-input.

Labels & Text

label-eyebrow — Suisse Intl 12px / weight 500 / line-height 16px / 1.2px tracking, uppercase, {colors.ink-muted} "#a3a3a3" text. The only uppercase role in the system. Used for section labels above headings.

body-paragraph — Suisse Intl 16px / weight 400 / line-height 24px, {colors.ink-muted} "#a3a3a3" text. The standard paragraph color is muted, not white — white is reserved for headlines and CTA labels.

footer-link — Suisse Intl 13px / weight 400 / line-height 13px, {colors.ink-muted} "#a3a3a3" text. Tight 13/13 leading is unusual — most footer links use 13/18 or 13/20 — and it compresses the footer rail into a dense ledger.

Do's and Don'ts

Do fill primary CTAs with {colors.ink} ("#ffffff") on the dark canvas. The pure-white pill on near-black is the system's signature — it inverts the dark-AI convention of a saturated brand voltage. Hover dims to {colors.hairline} ("#e5e5e5"), an 8% luminance step.

Do set button labels to weight 450 explicitly. Suisse Intl variable supports the intermediate axis natively, and the difference from body weight 400 and display weight 500-600 is the system's quietest typographic signal.

Do keep secondary CTAs transparent with a 1px {colors.surface-elevated} ("#262626") border on dark canvas. Filling the secondary pill with a tinted dark surface collapses the visual hierarchy with cards and panels, which share the same fill.

Don't use {colors.k-primary-outline} ("#62a2ff"), {colors.action-green} ("#65f223"), {colors.purple-rain} ("#762fad"), or {colors.deep-purple} ("#55227d") on marketing surfaces. These four hex codes ship in CSS variables (--color-k-primary-outline, --color-action-green, --color-purple-rain, --color-deep-purple) but paint zero rendered pixels on the home page. They are reserved for in-app product UI behind authentication; painting them on a hero pill or background band immediately breaks the brand discipline.

Don't use 4px, 6px, 12px, or 16px radii on chrome. The system is pill-or-eight: 9999px on CTAs, 8px on every chrome element. 14px and 24px exist for rare elevation containers, but adding a 12px badge or a 6px input destroys the binary rule.

Don't set display headlines to weight 700 or above. Krea's hero sits at weight 500-600 with -1.8px tracking. Weight 700 reads as heavy fintech display, not the modest, photography-trusting voice the system commits to.

Don't add box-shadow to cards or buttons. The captured marketing surface uses zero rendered shadows; depth comes from surface tinting ("#0b0f15" canvas → "#171717" card → "#262626" elevated → "#ffffff" pill). A drop-shadow on a card breaks the surface ladder.

Don't start paragraph text at white. The body paragraph color is {colors.ink-muted} ("#a3a3a3"), not {colors.ink} ("#ffffff"). White is reserved for the hero headline, nav links, and CTA labels — using it on body paragraphs flattens the hierarchy.

Known Gaps

• Below-the-fold sections: the captured surface is a single-viewport hero. Pricing, feature deep-dives (Image, Video, Upscaler, API, Enterprise), and the in-app editor (canvas, layer rail, prompt input, generation queue) are not represented.
• Hover and active states: the white-pill hover dim and the secondary-pill fill-on-hover are inferred from CSS variable wiring rather than observed motion on the captured surface.
• Form validation: input error states, focus rings, and the four reserved brand tokens as deployed for action confirmations or destructive states are not observable on the home page.
• Light mode: light-surface CSS variables (--color-primary-0 = "#ffffff", --color-primary-50, --color-primary-100) ship in the stylesheet but the marketing surface never renders in light mode.
• Discord-integrated community surfaces: --color-discord-purple "#5865f2" is wired in CSS for community CTAs but not exercised on the captured hero.
• Animation and transition timing: easing curves and durations between section reveals, pill hover dims, and image lazy-loads are not documented.