What is Recraft's primary brand color?

Recraft has no traditional brand accent. The canvas is pure black (#000000, frequency 1383) with white type (#ffffff, frequency 238), and the only chromatic voltage is a chartreuse pill at #d2fc31 — used exactly twice on the page, both on the Try Recraft Studio CTA. That pill's text and 1px border are #0000ee (Electric Blue, frequency 200), which doubles as the hyperlink default across the marketing surface. A violet pair (#bb7bff and #6a3eff) appears only once each, as tile backgrounds behind sample artwork, never as buttons or text emphasis.

What typography does Recraft use, and what should I use as a substitute?

Recraft pairs ABC Gravity (a commercial display family with six declared widths — Condensed, SemiCondensed, Compressed, Extended, Expanded Italic, Normal Italic) at weight 900 / 72–76px / uppercase for every heading, with Geist at weights 400–600 / 10–22px for body, navigation, and meta labels. The hero h1 runs Gravity Condensed at 76px / 68.4px leading; section h2 drops to 72px in the same face. If ABC Gravity is unavailable, the closest open-source substitutes are Antonio at weight 700+ or Oswald at weight 600+ for the condensed widths; Anton works for the heaviest hero stop. For Geist, Inter at the same weights is the cleanest swap.

How does Recraft handle surfaces and elevation?

Surfaces ladder by image, not by tonal lift. The canvas at #000000 carries the hero, every section background, the customer-logo strip, and the footer. There is no charcoal #0a0a0a or #111 surface tier — content tiles are either full-bleed photography or violet (#bb7bff / #6a3eff) fills against the same black floor. Elevation comes from rounded #e4e4e4 hairlines (15 background occurrences) on a handful of carousel pagination dots, plus the 5px universal radius. No drop shadows render on the marketing surface; the page reads as flat black with photographic insets.

Why is the primary CTA chartreuse with electric-blue text?

The Try Recraft Studio pill is the page's single chromatic moment — a #d2fc31 fill with #0000ee text and a 1px #0000ee border, padded 18px 18px 20px on a 40px pill at 8px radius. The colour pairing is deliberately unfashionable for an AI brand (most AI tools use a violet or teal CTA on a dark canvas). Chartreuse against electric blue is closer to a 90s magazine cover or a vinyl sleeve than a SaaS launch screen — which is the point. Recraft positions itself as a creative-tool, not an enterprise AI platform, and the CTA palette is the signal.

What's the deal with the 5px corner radius?

Of 173 total border-radius declarations on the page, 127 land at exactly 5px — cards, pills, image tiles, carousel inserts, nav buttons, almost every chrome element shares the same tight corner. A 6px tier (13 declarations) and a 15px tier (8 declarations) handle a small set of larger surfaces, and 50% circles appear 12 times on avatar bullets. The 5px discipline reads as a deliberate counter-positioning against the 16–24px soft-corner default that dominates SaaS marketing in this cycle; Recraft's geometry feels more like a print layout grid than a rounded-card UI.

What's missing from this DESIGN.md spec?

Several. The actual Recraft Studio (prompt input, generation grid, vector editor, style controls) lives behind authentication and is not represented in this marketing-surface document. Hover states, focus rings, and the press-darker variant of the chartreuse pill are not extracted — the page uses subtle interactivity that doesn't capture in a static snapshot. The violet pair (#bb7bff and #6a3eff) appears once each as tile fills, so their broader ramp inside the product is inferred rather than observed. Form validation, error states, and dark/light mode adaptations are out of scope — the page renders only one mode, and forms only appear in the sign-up funnel which was not captured.

Recraft Design System

Recraft's design system as a DESIGN.md file.

About Recraft DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source recraft.ai

AI & LLM Platforms
Design & Creative Tools

Recraft's marketing surface anchors on the most uncompromising canvas in the AI-image category — a pure "#000000" floor with "#ffffff" type, broken only by an editorial photography band and a chartreuse "#d2fc31" pill that says Try Recraft Studio. The brand voice is not a logo, not an accent color, and not a gradient field. It is the display face itself: ABC Gravity Condensed at weight 900, set in uppercase at 76px on the hero headline and 72px on every section opener, with a 68.4px line-height that pulls vertical metrics tight against the canvas. Where the AI-tool category defaults to humanist sans on a warm cream or a midnight gradient, Recraft commits to pure black and a display family with six tracked widths — Condensed, SemiCondensed, Compressed, Extended, Expanded Italic, and Normal Italic — each surfacing on a single section heading as a typographic flex.

This DESIGN.md packages that discipline into a machine-readable spec built on the Google Labs format. Inside: 8 color tokens grouped into canvas (Black "#000000" at 1383 occurrences, White "#ffffff" at 238), structural ink (Electric Blue "#0000ee" at 200 — the system's hyperlink default, wired into the primary CTA's text and border), surface chrome (Soft Gray "#e4e4e4", Mid Gray "#707070"), and a brand triad (Chartreuse "#d2fc31", Violet "#bb7bff", Deep Violet "#6a3eff") used in single-digit counts. Sixteen typography tokens spanning Gravity at 72–76px down to Geist 10px at 1.5px tracking. A 5-tier radius scale dominated by 5px (127 declarations), a 10px-base spacing rhythm (104 declarations), and 17 component recipes from the chartreuse pill down to the customer-logo strip.

Drop the file into Claude, Cursor, or GitHub Copilot and the agent reproduces Recraft's discipline — black canvas, Gravity display, chartreuse-on-electric-blue CTA, 5px corners on everything — rather than a generic dark-AI theme. Or reference the tokens directly: every hex and tracking value is a quoted string ready for Tailwind config or CSS variables. The system is worth studying because it answers a hard category question with conviction: when the product output is generated imagery and vector artwork, the marketing chrome can be radically typographic and chromatically monastic. Where most AI-image brands lead with a glow gradient or example marquee, Recraft leads with a 76px headline in Gravity and a single yellow-green pill.

What makes it distinct

Display face as voiceABC Gravity Condensed at weight 900 / 72–76px / uppercase carries every heading; six Gravity widths (Condensed, SemiCondensed, Compressed, Extended, Expanded, Normal) form the typographic identity
Single chartreuse voltage#d2fc31 used twice on the entire page, both as the Try Recraft Studio pill fill with a #0000ee text + border pairing
Binary canvas1383 of all colored declarations resolve to #000000 (text + border); the page never lifts to a charcoal surface tier
5px universal radius127 of 173 corner declarations land at 5px; cards, pills, inputs and tiles all share the same tight geometry
Geist as body counterweightGeist 500 at 16px / 20.8px with negative tracking carries every paragraph and nav link below the display tier

Live at recraft.ai

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

recraft.ai

Explore Recraft

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Recraft design system FAQ

Common questions about Recraft's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Recraft — official site

The text-to-image and vector generation studio behind one of the most-used AI design platforms for designers and sellers.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Recraft in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→