# Recraft AI — Design Language

## 1. Visual Theme & Atmosphere
Recraft is an AI design tool that dresses its marketing site with the energy of a creative instrument. The design language is bold and maximalist within a structured grid: a pure black base canvas, electric lime green and deep purple accents, and a condensed bold display typeface that fills the screen with typographic mass. The use of ABC Gravity Condensed at weight 900 and uppercase transforms the hero into a visual statement. This is a tool that wants to be taken seriously by professional designers — it looks like it was designed by its own users.

## 2. Color Palette & Roles
- **Background** — `rgb(0, 0, 0)` (pure black): the dominant canvas
- **Primary text** — `rgb(255, 255, 255)` (white): all UI text on dark
- **Electric lime** — `rgb(210, 252, 49)`: CTAs, highlight links, energy accents
- **Electric purple** — `rgb(187, 123, 255)` / `rgb(130, 62, 255)`: feature section backgrounds
- **Deep violet** — `rgb(106, 62, 255)`: content section fill
- **Glass button** — `rgba(255, 255, 255, 0.15)`: frosted-glass interactive elements

The palette is a dark tech aesthetic with neon punctuation — black is the canvas, purple and lime are the instruments.

## 3. Typography Rules
- **ABC Gravity Condensed** (weight 900): hero and section headings; the brand's loudest voice
- **Geist** (weight 400–500): body and UI — the quiet counterpart
- Display sizes: 52–56px with `uppercase` and `−0.32px` letter-spacing — impact through compression
- Body at 12–16px: compact but readable
- The contrast between Gravity Condensed's visual weight and Geist's neutrality is the typographic architecture

## 4. Component Stylings
- Multiple radii: 5px (tight), 6px, 8px, 12px, 15px — a loose but intentional scale
- One shadow for focus/glow effects on interactive elements
- Glass morphism button style with 15% white overlay
- Feature cards use bold purple/violet fills as section-defining backgrounds

## 5. Layout Principles
- Full-bleed sections with distinct background colours create scroll-based chapter structure
- Grid-based with generous padding
- Navigation transparent over hero, then sticky with dark fill on scroll
- Hero typography dominates the viewport — minimal imagery competing with type

## 6. Depth & Elevation
- One focal shadow for glow/focus on key interactive elements
- Depth primarily from section background colour transitions (black → purple → violet)
- No multi-layer card elevation system — context changes through colour, not shadow

## 7. Do's and Don'ts
**Do:** Lead with ABC Gravity Condensed uppercase for any hero text — size, weight, and compression together.
**Do:** Use lime green (`rgb(210, 252, 49)`) as the singular CTA colour on the black canvas.
**Do:** Transition sections through purple/violet fills to create scroll narrative.
**Don't:** Use multiple accent colours simultaneously — one neon per section.
**Don't:** Reduce heading weight below 900 for the Gravity typeface.
**Don't:** Apply shadows broadly — reserve for focal interactive moments.

## 8. Responsive Behavior
- 52–56px display type scales down significantly at mobile (likely 28–36px)
- Full-bleed section backgrounds maintained across viewports
- Navigation collapses to hamburger or icon strip
- Grid goes single-column below tablet breakpoint

## 9. Agent Prompt Guide
> Design like Recraft: pure black canvas, white text, ABC Gravity Condensed 900 uppercase headlines (52–56px, -0.32px letter-spacing). Electric lime (`rgb(210,252,49)`) for CTAs, purple/violet fills (`rgb(187,123,255)`, `rgb(106,62,255)`) for feature sections. Geist for body. Glass button style with 15% white overlay. Bold, tool-forward, dark creative energy.

*Generated by Sparkbites — extracted from live CSS analysis*