---
name: Krea
description: "Excellent example of a modern, dark-themed SaaS landing page that prioritizes clarity and premium aesthetics."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#A3A3A3"
  neutral: "#404040"
  bg-soft: "#171717"
  bg-quiet: "#111111"
  muted-soft: "#737373"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 72px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-1.8px"
  display-sm:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.72px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  body-sm:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 28px

---

## Overview

A powerful creative AI suite for generating and editing images, videos, and 3D meshes.

*The Photoshop of the AI generation era.*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#A3A3A3`)** — uses `ink-soft` token
- **Muted (`#404040`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* Consistent base-4 unit grid with generous vertical spacing between major sections.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 9999px

## Components

- **button:** Pill-shaped primary buttons with solid white fill and black text; secondary buttons with translucent dark fill, white text, and a subtle white border.
- **card:** Dark surfaces with slightly lighter backgrounds, subtle inset borders, and soft corner radius.
- **chip:** Small pill-shaped tags for categorization.
- **input:** Dark background fields with subtle borders and white placeholder text.
- **hero:** Large, bold display typography centered above a prominent application screenshot.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```