# Krea · Design system migration spec

> Source: https://www.krea.ai  ·  Curated by OpenDesign  ·  en

> Excellent example of a modern, dark-themed SaaS landing page that prioritizes clarity and premium aesthetics.

## 1. Identity DNA

Krea positions itself as the definitive creative tool for the AI generation era, the Photoshop of a new medium. Its design DNA is built on providing a powerful, uncluttered canvas where generated content is the sole focus, framed by a system of strict monochromatic restraint.

**One-liner:** A powerful creative AI suite for generating and editing images, videos, and 3D meshes.
**Keywords:** creative · powerful · suite · AI · generate · enhance
**Analogy:** The Photoshop of the AI generation era.

## 2. Color

The palette is a study in absolute contrast, built on a foundation of pure black and deep, neutral grays. This void-like environment ensures that any color from generated media becomes the primary accent, with crisp white text providing definitive clarity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#171717` | card background |
| `--bg-quiet` | `#111111` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#A3A3A3` | secondary text |
| `--muted` | `#404040` | placeholder |
| `--muted-soft` | `#737373` | weak hint |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** High-contrast dark mode with neutral grays and pure white text to emphasize generated visual content.

The principle is clear: the system must recede, creating a gallery-like void for the user's own creative output.

## 3. Typography

Typography operates as a clean, modern channel for information, utilizing a humanist sans-serif that balances approachability with technical precision. The scale is functional, with tight letter-spacing on headlines creating a confident, compact presence against the dark background.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.05 | 500 | -1.8px | Main hero headline |
| display-sm | 48px | 1.1 | 500 | -0.72px | Section headings |
| body | 16px | 1.5 | 400 | 0px | Default text |
| body-sm | 14px | 1.4 | 400 | 0px | UI labels and navigation |

## 4. Spacing

A consistent base-4 grid establishes a predictable spatial rhythm, with generous vertical padding between major sections to create a sense of calm and order.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / 48 / 64 px
- **Rhythm:** Consistent base-4 unit grid with generous vertical spacing between major sections.

## 5. Surfaces

Surfaces are defined by subtlety, differentiated from the pure black background through slight value shifts and the faint whisper of a 1px rgba white border. Depth is communicated sparingly with soft, diffuse shadows that feel embedded rather than floating.

- **Radius:** sm 4px · md 8px · lg 16px · pill 9999px
- **Shadows:**
  - 0px 1px 6px rgba(0,0,0,0.1)
  - 0px 9px 8px rgba(0,0,0,0.2)
- **Borders:** 1px solid rgba(255,255,255,0.1)

## 6. Layout

The layout skeleton is a centered column, constrained for readability and focused attention. Elements stack vertically in a single, deliberate column, with a spacious hero area anchoring the composition and guiding the eye downward through content.

- **Container max:** 1200px
- **Paragraph max:** 600px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content hero with maximum width constraints, stacking elements vertically on mobile.

## 7. Motion & Interaction

Motion is used as functional feedback, not decoration. Interactions employ smooth, consistent transitions—typically over 0.2 seconds—that confirm user actions with a slight scale or opacity shift, while scroll-triggered content fades in gently to maintain a premium, unhurried feel.

- **Durations:** micro 150ms · small 200ms · medium 500ms
- **Easing:** `cubic-bezier(0, 0, 0.2, 1)`
- **Patterns:**
  - Smooth hover transitions on interactive elements
  - Subtle fade-in and slide-up animations for scroll-triggered content

- **Hover:** Subtle background color shifts or opacity changes on buttons and links.
- **Click:** Slight scale-down or opacity reduction for immediate feedback.
- **Transition:** All properties transitioning smoothly over 0.2s.
- **Keyboard:** Standard focus ring visibility for accessibility.

## 8. Voice & Don'ts

The voice is confident, direct, and empowering, matching the system's visual certainty. Headlines are bold, declarative statements of capability, and calls to action are consistently inviting, emphasizing low-barrier entry points like 'Get Started Free'.

- **Tone:** Confident, direct, and empowering.
- **Headline style:** Bold, declarative statements emphasizing power and capability.
- **CTA style:** Action-oriented and inviting, frequently offering free entry points.
- **Avoid:** Technical jargon / Passive voice / Humble or uncertain language

### Don'ts
- ❌ Don't use bright, saturated neon accents — the screenshot shows a strictly monochromatic dark palette with pure white text.
- ❌ Don't use square corners on buttons — the screenshot shows fully rounded, pill-shaped buttons.
- ❌ Don't use a serif display font — the screenshot shows a clean, modern humanist sans-serif for all headings.
- ❌ Don't use light backgrounds — the screenshot shows a dominant pure black background with dark gray cards.
- ❌ Don't use cluttered navigation — the screenshot shows a clean, centered horizontal menu with minimal links.
- ❌ Don't use sharp drop shadows — the screenshot shows very subtle, soft shadows that blend into the dark background.

What is deliberately excluded is as defining as what is present: bright accent colors, square corners, serif fonts, harsh shadows, and any language that hedges or apologizes.

## System Prompt (paste into AI tool)

```
This system generates designs for a dark-themed, premium AI creative suite. The aesthetic is modern, clean, and highly professional, relying on a strict monochromatic palette of pure black (#000000), dark grays (#111111, #171717, #404040), and crisp white (#FFFFFF). The typography utilizes a clean, humanist sans-serif with tight letter-spacing for headlines. Key interactions should feature smooth transitions and pill-shaped UI components. Critical constraints: avoid bright saturated accent colors, avoid square corners on primary buttons, avoid serif fonts, avoid light or cluttered layouts, avoid harsh shadows, and avoid passive or uncertain copy.
```
