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