---
version: alpha
name: Krea
description: A stark black-and-white AI studio where Suisse Intl runs the whole type system, a photographic product still anchors the hero, the primary CTA is a white pill on pure black, and chromatic color is hoarded for two electric signals — an action green and an outline blue — that only appear at the moment of interaction.

colors:
  # Surface / canvas
  background: "#000000"          # pure-black marketing canvas, hero
  surface: "#171717"             # near-black panels, elevated tiles on dark
  surface-light: "#ffffff"       # white body sections below the hero
  surface-muted: "#f5f5f5"       # faint gray fills, hover wash on light

  # Ink / text
  ink: "#ffffff"                 # primary text on the black canvas
  ink-strong: "#000000"          # primary text on white sections, pill-button label
  ink-secondary: "#a3a3a3"       # supporting copy on dark
  ink-muted: "#737373"           # captions, metadata, muted UI text
  ink-faint: "#525252"           # lowest-emphasis helper text
  ink-line: "#404040"            # mid-gray dividers and outline text on dark
  on-accent: "#000000"           # ink that sits on the action-green pill

  # Brand accent — reserved chromatic signals
  accent: "#65f223"              # action green — the loud interactive signal
  accent-outline: "#62a2ff"      # focus / primary-outline blue
  accent-purple: "#762fad"       # purple-rain — decorative gradient moments
  accent-deep: "#55227d"         # deep purple gradient stop
  accent-discord: "#5865f2"      # community / Discord brand link

  # Borders
  border: "#404040"              # standard divider on dark
  border-soft: "#d4d4d5"         # hairline on white sections

  # Shadow tints (opaque approximations for the elevation table)
  shadow-ambient: "#000000"      # was rgba(0,0,0,0.25) — Google format requires hex
  shadow-glow: "#000000"         # was rgba(0,0,0,0.7) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Suisse Intl, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -1.44px
  display:
    fontFamily: "Suisse Intl, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -1.8px
  heading:
    fontFamily: "Suisse Intl, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -0.72px
  heading-sub:
    fontFamily: "Suisse Intl, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.45px
  title:
    fontFamily: "Suisse Intl, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: -0.36px
  body-large:
    fontFamily: "Suisse Intl, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px
  body:
    fontFamily: "Suisse Intl, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Suisse Intl, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.15px
  button:
    fontFamily: "Suisse Intl, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  label:
    fontFamily: "Suisse Intl, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  caption:
    fontFamily: "Suisse Intl, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Suisse Intl, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 1.2px

spacing:
  xs: 2px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  2xl: 24px
  3xl: 32px
  4xl: 48px
  5xl: 96px
  6xl: 160px

rounded:
  sm: 6px
  md: 8px
  lg: 14px
  xl: 16px
  2xl: 24px
  3xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-strong}"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.border}"
    textColor: "{colors.ink}"

  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-accent-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 16px
  card-media:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.3xl}"
    padding: 0px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 14px 24px

  nav-link:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    padding: 6px 12px
  nav-link-hover:
    textColor: "{colors.ink}"

  tab:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
    padding: 8px 14px

  eyebrow:
    textColor: "{colors.ink-muted}"
    typography: "{typography.eyebrow}"
    padding: 0px

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Krea Design System

## Overview

Krea is a generative-media studio that dresses like a film camera, not a SaaS dashboard. The marketing canvas is pure black (`{colors.background}`), and the hero leads not with a gradient or an illustration but with a *photograph* — a real monitor on a real wooden desk, lit like a still life, with the product UI glowing inside the screen. The page reads as a darkroom: matte, contrast-forward, and confident that the work it generates is interesting enough to need no decoration around it. The single typeface, Suisse Intl (`{typography.display-hero}`), carries everything from the 96px hero down to 12px metadata, set tight and clean with aggressive negative tracking on the big sizes (-1.44px at 96px, -1.8px at 72px) so headlines feel dense and engineered.

The signature move is chromatic restraint inverted into chromatic *signaling*. Almost the entire system is grayscale — black, white, and a precise ladder of neutrals from `{colors.ink-secondary}` through `{colors.ink-faint}`. Color is hoarded, then spent at exactly two moments. The primary call-to-action is a **white pill** on black (`{components.button-primary}`) — high contrast, friendly, unmissable. And the genuinely loud color, an electric **action green** (`{colors.accent}`), is held in reserve as the interactive accent: the "generate" energy, the live state, the moment something happens. A secondary outline-blue (`{colors.accent-outline}`) does focus duty. The brand never paints a surface with these; they puncture the monochrome.

The overall impression is premium, photographic, and a little cinematic. Where most AI tools shout with neon gradients, Krea whispers in black-and-white and lets a single green dot do the shouting. Cards below the hero ride generous radii (`{rounded.2xl}`–`{rounded.3xl}`), often wrapping full-bleed generated imagery with no padding (`{components.card-media}`), so the gallery of outputs becomes the texture of the page. Pills are everywhere — buttons, tabs, badges all snap to `{rounded.pill}` — which keeps the chrome soft against the hard black backdrop. It's the look of a tool that takes the *craft* of image-making seriously.

**Key Characteristics:**
- Pure-black marketing canvas (`{colors.background}`) with white body sections (`{colors.surface-light}`) below the hero — a darkroom-to-gallery flip
- Suisse Intl (`{typography.display-hero}`) is the *only* typeface — display, body, labels, metadata all share one family
- Aggressive negative tracking on large display type (-1.44px at 96px, -1.8px at 72px) for a dense, engineered headline
- Photographic hero — a lit product still, not a gradient or illustration — anchors the page
- Primary CTA is a **white pill** (`{components.button-primary}`) on black: maximum contrast, pill radius
- Electric **action green** (`{colors.accent}`) hoarded as the single loud interactive signal — never a fill for whole surfaces
- Outline **blue** (`{colors.accent-outline}`) reserved for focus states
- Everything is a pill: buttons, tabs, and badges all snap to `{rounded.pill}`
- Cards carry large radii (`{rounded.2xl}`–`{rounded.3xl}`) and often wrap full-bleed generated media with zero padding
- A precise neutral ladder (`{colors.ink-secondary}` → `{colors.ink-faint}`) does almost all the hierarchy work
- Compact base spacing (2px/6px/8px steps) inside controls; huge vertical rhythm (`{spacing.6xl}` = 160px) between sections

## Colors

### Surface & Canvas
- **Pure Black** (`{colors.background}`): The dominant marketing canvas and the hero backdrop. Matte, contrast-forward.
- **Near-Black** (`{colors.surface}`): Elevated panels, cards, inputs, and tiles that sit on the black.
- **White** (`{colors.surface-light}`): Body sections below the hero — the page flips to a bright gallery for browsing generated work.
- **Faint Gray** (`{colors.surface-muted}`): Light-section hovers and subtle fills.

### Ink / Text
- **White** (`{colors.ink}`): Primary text on the black canvas.
- **Black** (`{colors.ink-strong}`): Primary text on white sections and the label on the white pill button.
- **Gray** (`{colors.ink-secondary}`): Supporting copy and nav links on dark.
- **Muted Gray** (`{colors.ink-muted}`): Captions, metadata, eyebrows.
- **Faint Gray** (`{colors.ink-faint}`) / **Line Gray** (`{colors.ink-line}`): Lowest-emphasis helper text and mid-gray dividers / outline text.

### Brand Accent
- **Action Green** (`{colors.accent}`): The single loud signal — the interactive "generate" color. Used as a punctuating dot, a primary-action pill, a live indicator. Never a background wash.
- **Outline Blue** (`{colors.accent-outline}`): Focus rings and primary-outline states.
- **Purple Rain / Deep Purple** (`{colors.accent-purple}`, `{colors.accent-deep}`): Decorative gradient moments only.
- **Discord Blurple** (`{colors.accent-discord}`): Community link brand color.

### Borders & Shadow Tints
- **Border** (`{colors.border}`): Standard mid-gray divider on the dark canvas.
- **Soft Border** (`{colors.border-soft}`): Hairline on white sections.
- **Ambient / Glow** (`{colors.shadow-ambient}`, `{colors.shadow-glow}`): Opaque stand-ins for the soft ambient cast and the wide black glow behind floating media (originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Primary (and only)**: `Suisse Intl`, with fallbacks `ui-sans-serif, system-ui, -apple-system, sans-serif`. A Swiss neo-grotesque — neutral, precise, slightly warm. It runs the entire scale; there is no secondary or monospace family in the marketing surface.
- **OpenType / tracking**: heavy negative tracking on display sizes (-1.44px at 96px, -1.8px at 72px), tapering to near-zero on body. The 12px eyebrow inverts to positive 1.2px tracking.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 96px / 600 / -1.44px — the marquee headline |
| `display` | 72px / 600 / -1.8px — large section titles |
| `heading` | 48px / 600 / -0.72px — section headings |
| `heading-sub` | 30px / 500 / -0.45px — sub-section headings |
| `title` | 24px / 600 — card and feature titles |
| `body-large` | 20px / 400 — lead paragraphs |
| `body` | 16px / 400 — standard body |
| `body-small` | 15px / 400 — dense supporting copy |
| `button` | 16px / 600 — pill button labels |
| `label` | 14px / 500 — nav links, UI labels |
| `caption` | 14px / 500 — metadata, tags |
| `eyebrow` | 12px / 500 / 1.2px — uppercased section markers |

### Principles
- **One family, full range**: Suisse Intl does everything. Hierarchy comes from size and weight, not from switching typefaces.
- **Tighten the big, relax the small**: display sizes carry heavy negative tracking; body sits near zero.
- **Weight stays mid-heavy**: 600 for display and buttons, 500 for labels, 400 for body. The system rarely goes lighter than 400.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Control internals are tight — a 2px/6px/8px micro-step ladder packs buttons, tabs, and badges densely — while section rhythm is enormous (`{spacing.6xl}` = 160px) so the black canvas breathes between full-bleed media blocks.

### Grid & Container
- Wide, near-full-width layout; the photographic hero spans the viewport
- Below the hero: a responsive gallery grid of generated-media cards (3–4 columns on desktop)
- Common pattern: a tight horizontal pill-nav of tool tabs over a large media canvas

### Whitespace Philosophy
- **Black is the frame**: the dark canvas acts like matte board around the work, not as an empty void
- **Dense controls, airy sections**: pills and tabs pack tightly; major sections sit far apart
- **The output is the texture**: full-bleed generated imagery fills cards, so whitespace recedes and the media carries the page

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; `{colors.border}` divider only | Section bands, most dark-canvas content |
| Subtle (Level 1) | `0 1px 6px` at ~10% black | Resting cards and floating chips |
| Card (Level 2) | `0 1px 3px` + `0 1px 2px -1px` at ~10% black | Tiles and media cards |
| Lifted (Level 3) | `0 20px 39px -20px` (`{colors.shadow-ambient}`) | Floating product surface above the desk still |
| Glow (Level 4) | `0 0 77px 17px` (`{colors.shadow-glow}`) | The wide black halo that lifts media off the black canvas |
| Focus Ring | `0 0 0 2px` (`{colors.accent-outline}`) | Keyboard focus on inputs and controls |

**Shadow Philosophy**: On a pure-black canvas, conventional drop shadows are nearly invisible — so Krea reaches for the opposite trick. The most distinctive elevation is a wide, soft **black glow** (`{colors.shadow-glow}`) that darkens the canvas *around* a floating media surface, making it appear to hover by contrast rather than by cast. On the white body sections, shadows return to a normal soft ambient. It's a darkroom approach to depth: light the subject, sink the surround.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 6px | Small inner chips, image thumbnails |
| `md` | 8px | Default control radius, small buttons |
| `lg` | 14px | Tabs, inputs, segmented controls |
| `xl` | 16px | Mid containers |
| `2xl` | 24px | Cards |
| `3xl` | 32px | Large media cards, full-bleed output frames |
| `pill` | 9999px | Buttons, tabs, badges — the default interactive shape |

The radius personality is soft-but-substantial: interactive elements snap to full pills, while containers ride generous 24–32px corners. There are almost no sharp 0px corners — the soft geometry is what keeps the hard black canvas from feeling severe.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — White (`{colors.surface-light}`) pill, black label, pill radius. The main CTA on the black canvas ("Start for free"). Hover softens to `{colors.surface-muted}`.
- **`button-secondary`** — Near-black (`{colors.surface}`) pill, white label. The ghost / "Launch App" pattern. Hover lifts to `{colors.border}`.
- **`button-accent`** — Action-green (`{colors.accent}`) pill, black label. The reserved loud action — generate, run, go.

### Cards
- **`card`** — Near-black surface, 24px radius, modest padding. Holds feature copy and small media.
- **`card-media`** — Larger 32px radius, **zero padding** so a generated image bleeds to the corners. The gallery building block.

### Inputs
- **`input`** — Near-black fill, 14px radius. **`input-focus`** adds a `{colors.accent-outline}` blue ring — the only place blue surfaces.

### Navigation
- **`nav-bar`** — Black, white labels, sits flush over the hero photo with no heavy chrome. **`nav-link`** is gray, brightening to white on hover.

### Tabs & Badges
- **`tab`** — Pill-shaped tool switcher; the active tab inverts to a white fill with black label.
- **`badge`** — Near-black pill with white text for category and status tags.

## Do's and Don'ts

### Do
- Keep the marketing canvas pure black (`{colors.background}`) and treat it like matte board framing the work
- Use Suisse Intl (`{typography.display-hero}`) for *everything* — never introduce a second family
- Apply heavy negative tracking to display type (-1.44px at 96px, -1.8px at 72px)
- Make the primary CTA a **white pill** (`{components.button-primary}`) on black for maximum contrast
- Hoard the **action green** (`{colors.accent}`) — spend it on one interactive signal per view, never as a surface fill
- Reserve the **outline blue** (`{colors.accent-outline}`) for focus rings only
- Snap buttons, tabs, and badges to `{rounded.pill}`; give cards `{rounded.2xl}`–`{rounded.3xl}`
- Let full-bleed generated media fill cards edge to edge (`{components.card-media}`, zero padding)
- Lift floating media with a wide black glow (`{colors.shadow-glow}`) rather than a normal drop shadow on the black canvas

### Don't
- Don't wash whole surfaces in the action green — it's a signal, not a background
- Don't paint the hero with neon gradients; the photographic still is the hero
- Don't introduce a second typeface or a monospace into the marketing surface
- Don't use square 0px corners on interactive elements — the system is soft pills and large radii
- Don't loosen display tracking toward 0 or positive — big type stays compressed
- Don't rely on conventional drop shadows on the black canvas; they vanish — use the glow trick
- Don't make the primary button green or colored — it stays a white pill; green is reserved
- Don't crowd the section rhythm — major blocks want the full `{spacing.6xl}` of breathing room

---

## Responsive Behavior

### Breakpoints
*(Observed stops from extraction; treated as the standard layout breakpoints the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <767px | Single column; hero photo crops tighter; pill-nav collapses to a menu; media gallery stacks to one column |
| Tablet | 768–1023px | Two-column media gallery; hero text scales down from 96px toward ~48px |
| Desktop | 1024–1679px | Full layout; 3-column gallery; pill tool-tabs sit over the media canvas |
| Large | ≥1680px | Wide container; 4-column gallery; generous `{spacing.6xl}` section padding |

### Touch Targets
- Pill buttons run comfortably tall with `12px 24px` padding
- Tool tabs and gallery cards carry generous tap area; pills keep targets thumb-friendly

### Collapsing Strategy
- **Navigation**: horizontal pill tool-nav → menu toggle on mobile; the white "Start for free" pill persists
- **Hero**: the photographic still crops and recenters; headline drops from 96px toward ~48px keeping proportional tracking
- **Gallery**: media grid steps 4 → 3 → 2 → 1 columns
- **Spacing**: section rhythm compresses from 160px toward ~48px

### Image Behavior
- Generated media fills `{components.card-media}` cards edge to edge and reflows as grid children
- The hero product still scales as a contained background image, recentering on the screen

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Pure Black (`{colors.background}`)
- Text: White (`{colors.ink}`) on dark, Black (`{colors.ink-strong}`) on light sections
- Brand accent: Action Green (`{colors.accent}`) — reserved interactive signal
- Secondary text: Gray (`{colors.ink-secondary}`)
- Border: Mid-gray (`{colors.border}`)
- Primary CTA: **White pill** (`{colors.surface-light}` fill, `{colors.ink-strong}` label)

### Example Component Prompts

- "Create a hero on pure black (`{colors.background}`) with a 96px white (`{colors.ink}`) headline in Suisse Intl, letter-spacing -1.44px, line-height 1.0, over a lit photographic product still; place a white pill primary button (`{colors.surface-light}` fill, `{colors.ink-strong}` label, `{rounded.pill}`, 12px 24px padding) beside a near-black ghost pill (`{colors.surface}` fill, white label)"
- "Build the action button: action-green (`{colors.accent}`) pill, black (`{colors.on-accent}`) label, `{typography.button}`, `{rounded.pill}` radius, 12px 24px padding — used once per view for the generate action"
- "Render a media gallery card: near-black (`{colors.surface}`) surface, `{rounded.3xl}` radius, zero padding so a generated image bleeds to the corners, lifted off the black canvas with a wide black glow (`{colors.shadow-glow}`, `0 0 77px 17px`)"
- "Design an input: near-black (`{colors.surface}`) fill, white text, `{rounded.lg}` radius, 12px 16px padding; on focus add a 2px outline-blue ring (`{colors.accent-outline}`)"
- "Create a pill tab switcher: near-black track, gray (`{colors.ink-secondary}`) inactive labels, the active tab inverts to a white (`{colors.surface-light}`) fill with a black label, `{rounded.lg}` per tab"

### Iteration Guide

1. Start on pure black (`{colors.background}`). If you reached for a gradient hero, replace it with a photographic still or matte black.
2. Use Suisse Intl (`{typography.display-hero}`) for everything. If a second family crept in, remove it.
3. Display type stays compressed — verify -1.44px tracking at hero size before moving on.
4. The primary CTA is a white pill (`{components.button-primary}`). If it's colored, recolor it white; reserve green.
5. Action green (`{colors.accent}`) appears at most once per view, as a signal — never a surface fill. Blue (`{colors.accent-outline}`) is focus-only.
6. Snap all interactive elements to `{rounded.pill}`; give cards `{rounded.2xl}`–`{rounded.3xl}`. No sharp corners.
7. Lift floating media with the black glow (`{colors.shadow-glow}`), not a normal drop shadow — on black, shadows vanish.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Krea. Brand names and trademarks belong to their respective owners.