A loud, art-directed image-model brand built on a pure-BLACK #000000 stage — the opposite of the clean-light restraint its category usually reaches for. Enormous UPPERCASE display type does all the shouting: ABC Gravity (stand-in Archivo) at weight 900, 76px on 68.4px leading so line-height sits BELOW the font size, and deliberately mixed across its six widths and italics inside a single headline, so the line reads as a typographic composition rather than a sentence. Body and UI drop to a quiet Geist at 16/20.8, weight 500, -0.32px. Colour arrives as solid unmixed blocks and never as gradient, glow or tint: an acid-lime #d2fc31 primary button that always carries BLACK text, a full-bleed orange #ff5b15 announcement bar, and a violet #6a3eff feature band. There are ZERO borders anywhere — separation is pure colour blocking — and only two shadows exist, both on floating chrome. Buttons are 40px at 8px radius in nav and 60px at 12px for the hero, over a dominant 5px radius on imagery tiles. Being Framer-built, all motion runs through Framer Motion in JS, so the stylesheet declares no CSS transitions at all, and the site ships neither a focus ring nor a reduced-motion block — both recorded as anti-patterns with recommended replacements.
Browse Recraft in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: recraft.ai (live DOM, computed styles), 2026-07-25. 0 stylesheets blocked. Framer-built site: styles are hashed inline classes with no published :root brand tokens, so §2 is read from computed fills/text. The#0000eeseen ~101x is browser-default link colour on unstyled Framer anchors — excluded as leakage, not brand. Button:hoverrules are compiled into Framer Motion JS rather than CSS, so §4 hover is recorded as observed-by- inspection rather than a verbatim rule. Reality check: the hint was wrong on both counts. The queue said "clean light, restrained accent"; Recraft is a pure-BLACK #000000 canvas with three loud accents (acid-lime #d2fc31 CTA, orange #ff5b15 announcement bar, violet #6a3eff panel). Its real signature is the ABC Gravity display used across SIX WIDTHS and italics at weight 900, UPPERCASE, mixed within a single line.
A loud, art-directed image-model brand: a pure-black stage on which enormous UPPERCASE display type does all the shouting, set in ABC Gravity at its heaviest weight and deliberately mixed across widths and italics inside one headline ("*TASTEFULLY* CRAFTED AI IMAGE MODELS"), so the line reads like a typographic composition rather than a sentence. Body and UI drop to a quiet Geist. Colour is used in bold, unmixed blocks — an acid-lime primary button, a full-bleed orange announcement bar, a violet section — never as gradient or tint. Generated imagery fills the page and carries the atmosphere. Feels: loud, art-directed, typographic, confident.
| Token | Hex | Role / usage |
|---|---|---|
| black | #000000 | page canvas, dark sections, text on lime |
| white | #ffffff | primary text on black |
| white-90 | rgba(255,255,255,.9) | secondary button fill |
| white-15 | rgba(255,255,255,.15) | translucent chips / media frames |
| grey | #e4e4e4 | light button fill (Get API) |
| muted | #707070 | muted text |
| lime | #d2fc31 | THE primary CTA fill (always with black text) |
| orange | #ff5b15 | full-bleed announcement bar |
| violet | #6a3eff | full-bleed feature section |
| black-80 | rgba(0,0,0,.8) | scrim over imagery |
Rules: accents appear as solid blocks — a lime button, an orange bar, a violet band — and never as a gradient, glow or border tint. Lime always carries black text, never white.
Two families. ABC Gravity is the display face and the whole identity: it ships in Compressed / Condensed / Normal / Expanded widths plus italics, and the site mixes several inside one headline, all at weight 900, UPPERCASE, with a line-height *below* the font size (76px type on 68.4px leading) so lines lock tightly together. Geist handles body and UI at 16/20.8, weight 500, with slightly negative tracking (-0.32px). No mono.
Specimen substitution: previews load Archivo (a variable-width grotesque
with condensed/expanded axes and a 900 weight) for ABC Gravity, and Inter
for Geist — one bundled Google Fonts link. The site ships the licensed
ABC Gravity / Geist.
| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | ABC Gravity Condensed | 76/68.4 | 900 | normal, UPPERCASE |
| Display accent word | ABC Gravity Normal Italic | 76/68.4 | 900 | normal, UPPERCASE |
| Section (h2) | ABC Gravity Condensed | 72/68.4 | 900 | normal, UPPERCASE |
| Body / UI | Geist | 16/20.8 | 500 | -0.32px |
| Sub / lead | Geist | 18–20 | 400–500 | -0.32px |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.