What is Krea's primary brand color?

Krea has no painted brand accent on the home page. The canvas is near-black ('#0b0f15') with a true-black header band ('#000000'), and the primary CTA fills pure white ('#ffffff') instead of a saturated voltage. Four chromatic tokens ship inside the stylesheet — k-primary-outline ('#62a2ff'), action-green ('#65f223'), purple-rain ('#762fad'), deep-purple ('#55227d') — but none of them paint a rendered pixel on the marketing surface; they are reserved for in-app states and product chrome behind authentication.

What typography does Krea use, and what should I use if Suisse Intl isn't licensed?

Krea runs Suisse Intl across every text role at modest weights (400, 450, 500, 600). Display-xl sits at 72px / line-height 86.4px / -1.8px tracking, heading-md at 30px / 36px, body-md at 14px / 20px, and button-md at 14px / weight 450 / line-height 20px. Suisse Intl Mono is declared in --font-mono for code surfaces. Suisse Intl is a commercial face from Swiss Typefaces; Inter at the matching weights is the closest open-source substitute, with weight 450 set explicitly via variable-font axis. Geist Sans also lands the geometry cleanly.

Why are some radii pill-shaped and others 8px?

Krea splits geometry by role rather than by scale. Every CTA — Sign Up, Log In, Start for Free, Launch App — uses 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, inputs, dark cards — uses a strict 8px. There are no 4px, 16px, or 12px intermediates on chrome; the system reads as 8px-or-pill, with 14px and 24px reserved for one-off larger surfaces (drop-shadow containers and the desk-photo frame).

What's the weight 450 doing on the button label?

It distinguishes the CTA face from body and display without committing to medium. Body paragraphs run weight 400 (Suisse Intl Regular). Display headlines run weight 500 or 600. Buttons sit at weight 450 — an intermediate axis position between regular and medium that variable Suisse Intl supports natively. The result is a button label that reads firmer than body but softer than display, with the same x-height. Inter variable, Geist variable, and any modern variable sans can render 450; static fonts will round to 400 or 500 and lose the precision.

Does Krea use a dark mode by default?

The home page is dark-only — there is no light-mode toggle on the marketing surface. The base background is '#0b0f15', the header band is '#000000', cards sit at '#171717' or '#262626', and primary text is '#ffffff'. CSS variables for light surfaces (--color-primary-0 = '#ffffff', --color-primary-50, --color-primary-100) ship in the stylesheet and presumably drive the in-app editor, but the inverse pairings are not exercised on the marketing chrome and are inferred from variable names rather than observed surfaces.

What's missing from this DESIGN.md spec?

The captured surface is a single-viewport hero — header, headline, pill pair, and the desk photograph. The pricing page, feature deep-dives (Image, Video, Upscaler, API, Enterprise), the in-app editor (canvas, layer rail, prompt input, generation queue), and the Discord-integrated community surfaces all live deeper in the site or behind authentication and are not represented. Hover and active states on the white pill, form-validation styling, and the four reserved brand tokens ('#62a2ff', '#65f223', '#762fad', '#55227d') as deployed in product are inferred from CSS variable names rather than observed rendering.

Krea Design System

Krea.ai's design system as a DESIGN.md file.

About Krea DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source krea.ai

AI & LLM Platforms
Design & Creative Tools

Krea is the generative-AI creative suite for images, video, and 3D meshes, and its marketing surface answers the dark-AI category question with an inverted move — the brightest pixel on the page is the primary CTA, not a saturated brand voltage. The canvas runs near-black "#0b0f15" with a true-black "#000000" header band; the "Start for free" pill fills pure "#ffffff" against that floor, and the secondary "Launch App" pill stays transparent with a hairline border. Where most AI-tool home pages stack a generated-output grid or a video reel above the fold, Krea drops a photographed iMac sitting on a wooden desk under a forest ridge at dusk — the actual product runs inside the screen, but the marketing chrome stays a quiet desk-still-life.

This DESIGN.md packages that discipline into a machine-readable spec built on the Google Labs format. Inside: 19 color tokens grouped into canvas ("#0b0f15", "#000000", "#171717"), surface ("#262626", "#404040"), graded neutral text ("#737373", "#a3a3a3", "#d4d4d5", "#e5e5e5", "#ffffff"), and four frozen brand variables ("#62a2ff", "#65f223", "#762fad", "#55227d") that ship in CSS but never paint a pixel on the home page. Ten typography tokens all on Suisse Intl — display-xl at 72px / 86.4px / -1.8px tracking, heading-md at 30px / 36px, body-md at 14px / 20px, button-md at 14px / weight 450, label-uppercase at 12px / 1.2px tracking — plus a Suisse Intl Mono fallback declared in --font-mono. Four radii ("8px", "14px", "24px", "9999px"), a 4px-base spacing scale, and 16 component recipes covering pill CTAs, nav chips, hero band, and the dark card.

Drop the file into Claude, Cursor, or GitHub Copilot and the agent will reproduce Krea's inversion — white pill as the accent, black canvas, pill-or-8px geometry, weight 450 on buttons — rather than defaulting to a generic dark-AI theme with a violet brand voltage and a generated-image grid. Or reference the tokens directly: every hex, weight, and tracking value is a quoted string ready for Tailwind config or CSS variables. The system is worth studying because it answers the AI-tool category from the opposite direction — the brand voltage is the absence of voltage, and the brightest surface is the call to action itself.

What makes it distinct

Inverted-accent CTAthe primary button fills
Pill-or-nothing geometryevery CTA radius resolves to 33554432px (effectively 9999px), while nav chips and inputs use a strict 8px, with no 4px or 12px intermediates
Weight 450 on button labelsan uncommon intermediate between 400 and 500 that distinguishes Krea's CTA face from its 400 body and 500 display
Hero-as-photographthe canvas swaps illustration and generated grids for a real desk photo (iMac at dusk, forest behind), letting the marketing surface stay quiet while the product page sells the output
Frozen brand voltage

Live at krea.ai

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

krea.ai

Explore Krea

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Krea design system FAQ

Common questions about Krea's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Krea — official site

The generative-AI creative suite for images, video, and 3D meshes — free tier with real-time tools.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Krea in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→