---
title: "Krea design system"
variant: extended
source: https://www.krea.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/krea-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Krea · Design System

> A cinematic black canvas for creative AI

**Theme:** light · **Industry:** ai · **Source:** https://www.krea.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Krea’s homepage pairs an almost-black interface with a centered, high-contrast introduction to its creative AI suite. A softly lit desktop product scene anchors the hero, while restrained white controls and typography keep attention on the message and demo.

## North star

Treat deep black as the stage, then use centered white typography and one atmospheric product image to direct attention.

## Overview

The visual identity is defined by a near-black, full-bleed hero rather than by the crawler’s nominal white canvas: the screenshot shows a black header and dark landscape image filling the first viewport. White is reserved for the logo, navigation, headline, supporting copy, and the prominent Open Krea pill, creating crisp contrast without a vivid accent palette. Suisse Intl keeps the large centered headline clean and contemporary; supporting text and compact navigation remain subordinate. A slim hairline separates navigation from the hero. The hero stacks a small announcement chip, a two-line headline, a short explanatory sentence, and paired actions above a wide desktop-on-desk product image. The image’s warm wood and subdued screen colors are photographic content, not core brand colors. Generous vertical breathing room and full-bleed media give the sparse interface a cinematic, premium feel; rounded controls and quiet borders soften the otherwise flat black surfaces.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio White | `#ffffff` | `--color-studio-white` | neutral | Headline, navigation, supporting text, announcement label, and the high-contrast primary CTA. |
| Soft Graphite | `#404040` | `--color-soft-graphite` | semantic | Measured neutral text and link color; secondary text treatment, not a dominant visible hero color. |
| Deep Stage | `#000000` | `--color-deep-stage` | surface | Visible page background across the navigation and hero, and the darkest frame around the product scene. |
| Night Slate | `#0b0f15` | `--color-night-slate` | surface | Near-black inverse section surface in measured data; supports the dark interface palette. |
| Charcoal Edge | `#2f3338` | `--color-charcoal-edge` | semantic | Subtle dark control and navigation border tone, used to separate elements without bright outlines. |
| Mist Gray | `#e5e5e5` | `--color-mist-gray` | surface | Measured light navigation surface; not a defining background in the dark first-viewport screenshot. |
| Smoke Gray | `#444444` | `--color-smoke-gray` | neutral | A muted gradient stop in measured data; not a major flat interface color. |
| Pale Signal | `#eaeaea` | `--color-pale-signal` | neutral | Muted light link text, suitable for secondary copy against the dark interface. |
| Silver Line | `#cccccc` | `--color-silver-line` | semantic | Measured button border tone; use only for restrained outlines or separators. |
| Ash Gray | `#a3a3a3` | `--color-ash-gray` | neutral | Low-emphasis navigation text tone in measured data, not a prominent brand accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Studio White) · `--color-surface` → `#0b0f15` (Night Slate) · `--color-surface-2` → `#000000` (Deep Stage) · `--color-surface-3` → `#e5e5e5` (Mist Gray) · `--color-surface-4` → `#2f3338` (Charcoal Edge) · `--color-text` → `#404040` (Soft Graphite) · `--color-text-muted` → `#ffffff` (Studio White) · `--color-text-subtle` → `#eaeaea` (Pale Signal) · `--color-border` → `#2f3338` (Charcoal Edge)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#404040` | `#ffffff` | 10.37:1 | AAA |
| `#404040` | `#0b0f15` | 1.85:1 | fail |
| `#404040` | `#000000` | 2.03:1 | fail |
| `#404040` | `#e5e5e5` | 8.23:1 | AAA |
| `#ffffff` | `#0b0f15` | 19.21:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#e5e5e5` | 1.26:1 | fail |
| `#eaeaea` | `#ffffff` | 1.2:1 | fail |
| `#eaeaea` | `#0b0f15` | 15.96:1 | AAA |
| `#eaeaea` | `#000000` | 17.46:1 | AAA |

### Gradients

- `linear-gradient(in oklab, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%)`
- `linear-gradient(120deg, rgb(255, 255, 255) 40%, rgb(190, 190, 190) 70%, rgb(100, 100, 100) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Suisse Intl | `--font-body` | webfont | 400, 500, 450, 600 | All interface typography, including the display headline, navigation, body copy, links, and buttons. | Inter |

- **Suisse Intl:** Use clean sans-serif forms, mostly regular weights; reserve medium emphasis for headings and uppercase styling for compact eyebrows.

### Type scale — Golden Ratio (ratio ≈ 1.624, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1.05 | 0 | — | Suisse Intl | Large centered hero headline. |
| h1 | 30px | 500 | 1.25 | -0.015em | — | Suisse Intl | Prominent page heading or section heading. |
| h2 | 18px | 400 | 1.56 | 0 | — | Suisse Intl | Supporting hero sentence and secondary section copy. |
| body | 14px | 400 | 1.43 | 0 | — | Suisse Intl | General interface and explanatory text. |
| caption | 12px | 400 | 1.33 | 0 | — | Suisse Intl | Compact labels and minor supporting details. |
| button | 14px | 450 | 1.43 | 0 | — | Suisse Intl | Primary and secondary action labels. |
| nav | 14px | 400 | 1.43 | 0 | — | Suisse Intl | Top-level navigation items. |
| link | 12px | 400 | 1.33 | 0 | — | Suisse Intl | Small announcement and supporting links. |
| eyebrow | 12px | 500 | 1.33 | 0.1em | uppercase | Suisse Intl | Short uppercase section or status label. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 8, 10, 12, 16, 18, 20, 24, 28, 32, 40, 44 px.
- Section rhythm 108px · element gap 8px · card padding — · max content width 1312px.

The first viewport uses a full-width dark canvas with a slim horizontal navigation row and a centered hero beneath it. The hero content is deliberately narrow relative to the screen: announcement, headline, description, and paired actions align on the center axis, followed by a wide, full-bleed product photograph. Measured page max width is 1312px, with a spacious density and a pronounced section gap. Keep the composition open and avoid adding dense card grids to this introductory block.

## Shape & elevation

- Radius: button `9999px` · badge `9999px` · nav `8px` · link `9999px` · xs `6px` · sm `8px` · pill `9999px`
- Shadow `inset` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.05) 0px 1`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat, with no pronounced card shadows. Thin, low-contrast borders define the navigation edge and dark announcement pill, while rounded controls provide the clearest component separation. Use layering mainly in the hero media, where image detail emerges gradually from the black background.

## Imagery

A large cinematic photograph shows a desktop monitor on a desk against a dim landscape-like backdrop. The monitor displays the product interface, making the image a real product demonstration rather than decorative illustration. Keep the frame wide, dark, and softly blended into the black canvas; warm desk tones remain inside the image and should not become interface accents.

## Components

### Top navigation

Single horizontal row on black, with a compact white mark, white text links, and right-aligned pill actions; a fine divider separates it from the hero.

### Announcement pill

Small dark rounded link with a subtle outline, a white NEW badge, and concise model-update text.

### Hero headline

Large, regular-weight white Suisse Intl text centered and broken into two balanced lines.

### Primary action

White rounded Open Krea button with black text; it is the strongest interface control by contrast.

### Secondary action

Dark translucent Krea Agent pill placed beside the primary action, visually quieter against the image.

### Product showcase image

Wide, dark desktop scene below the hero actions, showing a monitor with the Krea interface and blending into the surrounding black.

### Measured component styles

- **Primary button** (“Log in”): background #262626 · text #ffffff · radius 3.35544e+07px · padding 8px 16px · 450 14px Suisse Intl
- **Secondary button** (“Open Krea”): background #ffffff · text #000000 · radius 3.35544e+07px · padding 24px 40px · 450 16px Suisse Intl
- **Link** (“NEW Try the new Seedance 2.5 model”): background #24272d · text #ffffff · border 1px solid #3c3f44 · radius 3.35544e+07px · padding 4px 12px 4px 4px · 400 12px Suisse Intl
- **Badge** (“NEW”): background #ffffff · text #000000 · radius 3.35544e+07px · padding 2px 8px · 600 10px Suisse Intl
- **Navigation item** (“App Features Plugins Image Video Upscale”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Suisse Intl

## Do

- Use black as the dominant visible canvas.
- Keep hero copy centered and concise.
- Use white for primary text and the main CTA.
- Place a single atmospheric product demo below the hero actions.
- Keep navigation compact and horizontally aligned.
- Use rounded pills with restrained outlines.

## Don't

- Do not introduce a bright accent color.
- Do not turn photographic colors into interface tokens.
- Avoid card-heavy layouts in the hero.
- Do not add conspicuous shadows or gradients to controls.
- Avoid left-aligning the central hero message.
- Do not crowd the first viewport with extra copy.

## Agent prompt

Build a new page in Krea’s visual style using a near-black Deep Stage (#000000) canvas and a quiet Night Slate (#0b0f15) range for dark surfaces. Use Studio White (#ffffff) for the main headline, navigation, and primary CTA; secondary copy may use Pale Signal (#eaeaea). Set all text in a clean Suisse Intl-like sans serif, using restrained weights and clear hierarchy. Create a compact horizontal navigation with a subtle charcoal divider, then a spacious centered hero with a small outlined announcement pill, concise headline, short description, and paired rounded actions. Place one wide, atmospheric product photograph beneath the actions, blending its dark edges into the canvas. Keep borders subtle, shadows minimal, and the composition open rather than card-heavy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width dark hero with compact top navigation and centered announcement, headline, copy, actions, and product image. | Top-level navigation, Announcement link, Primary and secondary actions, Product demonstration | Black canvas, Centered white typography, Rounded pill controls, Full-bleed dark media |

## Source CSS custom properties (selected)

```css
--radius: .625rem;
--background: oklch(14.5% 0 0);
--foreground: oklch(98.5% 0 0);
--card-foreground: oklch(98.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);
--muted-foreground: oklch(70.8% 0 0);
--accent: oklch(26.9% 0 0);
--accent-foreground: oklch(98.5% 0 0);
--border: oklch(100% 0 0/.1);
--sidebar-foreground: oklch(98.5% 0 0);
--sidebar-primary: oklch(48.8% .243 264.376);
--sidebar-primary-foreground: oklch(98.5% 0 0);
--sidebar-accent: oklch(26.9% 0 0);
--sidebar-accent-foreground: oklch(98.5% 0 0);
--sidebar-border: oklch(100% 0 0/.1);
--overlay-chip-foreground: oklch(100% 0 0);
--shadow-elevation-color: 0deg 0% 0%;
--shiki-foreground: oklch(98.5% 0 0);
--shiki-background: transparent;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/krea-ai