# Recraft — Marketing site Design Spec > 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 > `#0000ee` seen ~101x is browser-default link colour on unstyled Framer anchors > — excluded as leakage, not brand. Button `:hover` rules 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. ## 1. Visual Theme & Atmosphere 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. ## 2. Color Palette & Roles | 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. ## 3. Typography Rules 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 | ## 4. Component Stylings Buttons are chunky and radius-light. Nav controls are 40px at **8px** radius; the hero CTA is a large **60px** at **12px** radius. Primary is the acid-lime #d2fc31 with black text; the nav secondary is a near-white rgba(255,255,255,.9) fill; the hero secondary is a solid #e4e4e4 grey. Media frames are translucent rgba(255,255,255,.15) at 15px radius. Dominant radius across the page is a small **5px** (218 uses) applied to imagery tiles. | Component | Rest | Hover | Focus | Active | Disabled | |---|---|---|---|---|---| | Primary (lime) | #d2fc31, #000 text, 8px / 12px, 40px / 60px | brightness lift (Framer Motion JS, no CSS rule) | browser default — no custom ring found | — | not observed | | Nav secondary | rgba(255,255,255,.9), #000 | as above | as above | — | — | | Hero secondary | #e4e4e4, #000, 12px | as above | as above | — | — | | Media tile | rgba(255,255,255,.15), 15px | — | — | — | — | Focus note: **no custom focus ring exists** anywhere in the CSS — Framer compiles interaction to JS and leaves the browser default. Treat this as an accessibility gap: supply a visible ring (e.g. `0 0 0 3px #d2fc31`) in generated UI rather than copying the omission. ## 5. Layout Principles Full-bleed black stage. A slim orange announcement bar sits directly under the nav. The hero is left-aligned: a two-line 76px display headline, a two-line Geist sub, then a lime + grey CTA pair, with generated imagery filling the right and lower page. Sections alternate black with one full-bleed violet band. Nav is a single row: mark, dropdown link cluster, then secondary + lime primary. ## 6. Depth & Elevation Radius scale: **5px** (dominant — image tiles), 6px, 8px (nav buttons), 12px (hero CTA), 15px (media frames), 30px, 50px, 50% (round). Shadows are almost absent — only two exist: `rgba(0,0,0,.3) 0 11px 40px` and `rgba(1,1,63,.1) 0 2px 19px -4px`, both on floating chrome. **Zero borders on the page** — separation is pure colour blocking against the black stage. ## 7. Motion | Property | Duration | Easing | Applies to | |---|---|---|---| | (no CSS transitions) | — | ease-out / linear declared | interaction is JS-driven | **A finding, not a gap:** the page declares *no CSS transitions at all* and only one keyframe, `__framer-loading-spin` (the Framer loader). All motion is driven by **Framer Motion** (detected), which animates via JS style mutation rather than CSS rules, so durations are not readable from the stylesheet. Declared easings present in the sheet are `ease-out` and `linear`. There is **no `prefers-reduced-motion` block** (`reducedMotionBlocks:0`) — add one when rebuilding. One background video. ## 8. Backgrounds, Effects & WebGL No CSS gradients at all, no backdrop-filter, no grain, no canvas/WebGL. The page is carried by **25 raster layers** of generated imagery plus one video, composited against flat black and the solid orange/violet colour bands. Atmosphere is photography-and-colour-blocking, nothing procedural. ## 9. Do's and Don'ts ### Do - Build on a pure-black #000000 stage and let generated imagery supply the colour. - Set display type in ABC Gravity at weight 900, UPPERCASE, with line-height BELOW the font size. - Mix widths and italics of the same display family inside one headline — that is the identity. - Keep body and UI in a quiet Geist at 16/20.8, weight 500, -0.32px. - Use accents as solid unmixed blocks: lime CTA, orange bar, violet band. - Always pair lime #d2fc31 with black text. ### Don't - Don't go light or "restrained" — this brand is loud and black. - Don't gradient, glow or tint the accents; they are flat blocks. - Don't set the display face below weight 900 or in sentence case. - Don't rely on borders for structure — there are none. - Don't ship without a focus ring or a reduced-motion block; the site omits both. ## 10. Responsive Behavior Framer's breakpoint ladder (fractional max-widths are Framer's off-by-one style): | Breakpoint | What changes | |---|---| | max 759.98px | phone: single column, display type scales down | | 760px | tablet layout | | max 1079.98px | tablet upper bound | | 1080px | desktop layout | | max 1439.98px | desktop upper bound before wide | No dark-scheme blocks (`darkSchemeBlocks:0`) — the site is dark by default, not by scheme. No container queries. No reduced-motion block. ## 11. Agent Prompt Guide - Canvas `#000000` · Text `#ffffff` · Muted `#707070` · No borders · Accent `#d2fc31` (lime CTA) · Blocks `#ff5b15` / `#6a3eff` - Font: ABC Gravity 900 UPPERCASE display (Archivo stand-in) + Geist UI (Inter) · Body: 16/20.8, 500, -0.32px · Radius: 8px nav / 12px hero CTA / 5px tiles · Control height: 40px nav / 60px hero - Focus: none defined — add `0 0 0 3px #d2fc31` · Hover: JS-driven (Framer Motion), no CSS rule Loud, art-directed AI image-model brand on a pure-black #000000 stage — not light or restrained. White #ffffff text, muted #707070, translucent rgba(255,255,255,.15) media frames, and ZERO borders anywhere: separation is colour blocking, not rules. The identity is the display face — ABC Gravity (stand-in Archivo) at weight 900, UPPERCASE, 76px on 68.4px leading so line-height sits BELOW the font size, and deliberately mixed across widths and italics inside a single headline. Body and UI drop to a quiet Geist (stand-in Inter) at 16/20.8, weight 500, -0.32px tracking. Three accents used as solid unmixed blocks: acid-lime #d2fc31 for every primary CTA (always with BLACK text), a full-bleed orange #ff5b15 announcement bar, and a violet #6a3eff feature band — never gradients, glow or tint. Buttons are 40px at 8px radius in nav, 60px at 12px for the hero; the dominant page radius is a small 5px on imagery tiles. Almost no shadows (two, on floating chrome). Motion is entirely Framer Motion JS — the stylesheet declares no transitions and no reduced-motion block, and there is no focus ring; supply both when building. Feels: loud, typographic, confident. Avoid: a light canvas, gradients or tinted accents, sentence-case or sub-900 display type, borders for structure, white text on the lime.