---
name: Recraft
description: "This site is worth including as a prime example of how AI tools can present themselves with design sophistication, bridging technical capability with aesthetic refinement."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  tertiary: "#D2FC31"
  neutral: "#707070"
  line: "rgba(0,0,0,0.15)"

typography:
  display:
    fontFamily: condensed-sans
    fontSize: 72px
    lineHeight: 0.95
    fontWeight: 900
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 5px
  md: 15px
  lg: 30px
  pill: 50px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A premium AI image generation platform that bridges design aesthetics with machine intelligence

*A high-end design studio meets cutting-edge AI research lab*

## Colors

High-contrast dark mode with vibrant accent for primary CTAs

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Accent (`#D2FC31`)** — uses `accent` token
- **Muted (`#707070`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.15)`)** — uses `line` token

## Typography

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

- Display text uses extremely heavy weight (900) with negative letter-spacing
- Body text maintains comfortable 1.4 line-height for readability
- All-caps treatment for secondary labels and navigation

## Layout

Full-width hero with overlaid text, centered content blocks

*Rhythm:* Consistent 4px base unit with generous whitespace in hero sections

## Elevation & Depth

- rgba(0,0,0,0.3) 0px 11px 40px 0px
- Borders: 1px solid rgba(0,0,0,0.15)

## Shapes

- `sm`: 5px
- `md`: 15px
- `lg`: 30px
- `pill`: 50px

## Components

- **button:** Rounded rectangles with 5px radius, high contrast fill for primary actions
- **card:** Full-bleed image cards with minimal chrome
- **chip:** Small rounded badges for navigation labels
- **input:** Clean text fields with subtle borders
- **hero:** Dramatic full-viewport image with overlaid typography and CTAs

## Do's and Don'ts

**Don't:**
- Don't use serif fonts — screenshot shows consistent sans-serif typography throughout
- Don't use muted pastel colors — screenshot shows high-contrast black background with vibrant accent
- Don't use thin font weights — screenshot shows extremely heavy 900-weight display text
- Don't use sharp corners — screenshot shows consistent 5-15px border-radius on all components
- Don't use dense layouts — screenshot shows generous whitespace and breathing room
- Don't use multiple accent colors — screenshot shows single dominant chartreuse green for CTAs

---

## System Prompt (paste into AI agent)

```
Recraft.ai is a premium AI image generation platform targeting professional designers and creative teams. The design DNA features a dark, high-contrast aesthetic with a dominant black background (#000000) and vibrant chartreuse accent (#D2FC31) for primary calls-to-action. Typography utilizes condensed sans-serif faces at extreme weights (900) for display text, creating dramatic impact. Key constraints: Never use serif typefaces, avoid muted color palettes, always maintain generous whitespace in layouts, use heavy font weights for headlines, keep corner radii between 5-15px, and ensure all CTAs use the signature green accent color.
```