# Recraft · Design system migration spec

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

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

## 1. Identity DNA

Recraft's design system embodies a high-end design studio meets cutting-edge AI research lab—a space where technical precision and aesthetic refinement are inseparable. The identity is built on keywords like Tasteful, Crafted, Advanced, Professional, and Visual, forming a system that communicates premium capability without sacrificing clarity.

**One-liner:** A premium AI image generation platform that bridges design aesthetics with machine intelligence
**Keywords:** Tasteful · Crafted · Advanced · Professional · Visual
**Analogy:** A high-end design studio meets cutting-edge AI research lab

## 2. Color

The palette is dominated by pure black (#000000) with white (#FFFFFF) text and a signature chartreuse green (#D2FC31) accent for primary actions, creating maximum visual impact.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#707070` | placeholder |
| `--accent` | `#D2FC31` | single accent |
| `--line` | `rgba(0,0,0,0.15)` | divider |

**Color principle:** High-contrast dark mode with vibrant accent for primary CTAs

The principle is high-contrast dark mode with vibrant accent for primary CTAs, ensuring every call to action commands immediate attention.

## 3. Typography

Display text uses extremely heavy weight (900) with negative letter-spacing, creating dramatic impact through condensed sans-serif faces. Body text maintains a comfortable 1.4 line-height for readability, while all-caps treatment defines secondary labels and navigation.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 0.95 | 900 | -1px | Hero headlines |
| heading | 24px | 1.2 | 600 | normal | Section titles |
| body | 16px | 1.4 | 400 | normal | Paragraph text |
| caption | 12px | 1.6 | 400 | normal | Small labels and metadata |

**Type rules:**
- 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

## 4. Spacing

Spacing follows a consistent 4px base unit, with generous whitespace in hero sections creating deliberate breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base unit with generous whitespace in hero sections

## 5. Surfaces

Surfaces are defined by subtle depth—a shadow of rgba(0,0,0,0.3) at 0px 11px 40px 0px and 1px solid rgba(0,0,0,0.15) borders. The approach keeps elements grounded without visual clutter.

- **Radius:** sm 5px · md 15px · lg 30px · pill 50px
- **Shadows:**
  - rgba(0,0,0,0.3) 0px 11px 40px 0px
- **Borders:** 1px solid rgba(0,0,0,0.15)

## 6. Layout

The layout skeleton uses a full-width hero with overlaid text and centered content blocks. This structure prioritizes dramatic imagery as background, overlaid with heavy condensed typography and strategically placed CTAs.

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

**Skeleton:** Full-width hero with overlaid text, centered content blocks

## 7. Motion & Interaction

Motion philosophy favors smooth, purposeful transitions—carousel animations between hero images and subtle hover effects on interactive elements. All state changes use CSS transitions for consistency, reinforcing the sophisticated feel without overwhelming content.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth carousel transitions between hero images
  - Subtle hover effects on interactive elements

- **Hover:** Color shifts and subtle scale on interactive elements
- **Click:** Immediate visual feedback with state changes
- **Transition:** All elements use CSS transitions for smooth state changes
- **Keyboard:** Full keyboard navigation support with visible focus states

## 8. Voice & Don'ts

The editorial voice is confident and sophisticated, emphasizing craftsmanship through bold, condensed, all-caps headlines with technical precision. CTAs use direct action-oriented verbs like 'Start creating' and 'Get API', maintaining a tone that avoids playful casualness or excessive promotion.

- **Tone:** Confident and sophisticated, emphasizing craftsmanship
- **Headline style:** Bold, condensed, all-caps statements with technical precision
- **CTA style:** Direct action-oriented verbs like 'Start creating' and 'Get API'
- **Avoid:** Playful or casual language / Excessive exclamation points / Jargon-heavy technical descriptions / Overly salesy promotional copy / Vague value propositions

### Don'ts
- ❌ 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

The system deliberately avoids serif fonts, muted pastels, thin weights, sharp corners, dense layouts, and multiple accent colors—constraints that preserve the brand's singular, high-impact identity.

## System Prompt (paste into AI tool)

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