Recraft Design System

Overview

Recraft's marketing surface is the most chromatically monastic page in the AI-image-tool category — a pure {colors.canvas} ("#000000") floor with {colors.on-canvas} ("#ffffff") type, broken only by editorial photography, two violet artwork tiles, and a single {colors.voltage} ("#d2fc31") pill that says Try Recraft Studio. There is no charcoal lift, no gradient atmosphere, no light-mode interlude. The hero is the wordmark "tastefully crafted AI image models" set in {typography.display-hero} — ABC Gravity Condensed at weight 900 / 76px / 68.4px leading / uppercase — against the black canvas, with a single chartreuse pill below it and a customer-logo strip beneath that.

Display face as voice: where most AI brands run a humanist sans for display and rely on chromatic accent to carry identity, Recraft commits to ABC Gravity at weight 900 across every section opener, and parades six different Gravity widths through the page — Condensed and SemiCondensed in the hero stack, Compressed and Extended on the typography showcase, Expanded Italic and Normal Italic as one-shot section heads. The brand voice is the type itself, not the colour.

Chartreuse-on-electric-blue scarcity: the page renders {colors.voltage} ("#d2fc31") exactly twice — both times on the same Try Recraft Studio pill — paired with {colors.electric-blue} ("#0000ee") text and a 1px border in the same blue. Where the convention in this category is to fill the primary CTA with a saturated violet or teal, Recraft pairs a 1990s magazine yellow-green against a default browser hyperlink blue. The pairing is deliberately unfashionable for an AI product and reads as a creative-tool signal, not an enterprise-AI signal.

Key Characteristics:

• Black {colors.canvas} ("#000000") at 1383 declarations carries the hero, every section, customer-logo strip, and footer. No charcoal tier exists.
• ABC Gravity Condensed at weight 900 / 76px on the hero h1, 72px on every section h2 — {typography.display-hero} and {typography.display-h2}.
• Six Gravity widths declared: Condensed, SemiCondensed, Compressed, Extended Italic, Expanded Italic, Normal Italic. The font family ladder is the system's voice.
• Single chartreuse voltage {colors.voltage} ("#d2fc31") paired with {colors.electric-blue} ("#0000ee") on the only chromatic CTA on the page.
• 5px universal radius {rounded.chrome} carries 127 of 173 corner declarations — cards, pills, image tiles, nav buttons all share it.
• Geist {typography.body-md} at weight 500 / 16px / 20.8px / -0.32px tracking is the workhorse body — every paragraph, every nav link.
• Violet pair {colors.violet-soft} ("#bb7bff") and {colors.violet-deep} ("#6a3eff") appears once each as artwork-tile fills, never as CTA or text.
• Spacing rhythm anchors on 10px (104 declarations) and 20px (38 declarations) — a base-10 grid rather than the 4 or 8px base most current SaaS systems use.

Colors

Canvas & ink

• Canvas ({colors.canvas} — "#000000") — frequency 1383. Used as text (687), border (687), background (9). The dominant tone on the page. Carries hero, every section band, the customer-logo strip, footer, and almost every typographic line as color: black against the white sections inside photographic insets.
• On Canvas ({colors.on-canvas} — "#ffffff") — frequency 238. Used as text (106), border (106), background (26). The hero h1 fill, every section heading, body type, and the white card surfaces that appear once or twice as image-tile inserts.

Voltage

• Voltage ({colors.voltage} — "#d2fc31") — frequency 2. Used as background (2). The chartreuse pill fill on the Try Recraft Studio CTA. Appears nowhere else on the page — no headline highlight, no footer accent, no hover state visible at extract time.
• Electric Blue ({colors.electric-blue} — "#0000ee") — frequency 200. Used as text (100), border (100). The default browser hyperlink colour, but here it is wired as the system's link voice and as the text + border pairing on the chartreuse CTA. Inverts the typical SaaS pattern where the link colour is a brand-tuned blue.

Surface chrome

• Hairline ({colors.hairline} — "#e4e4e4") — frequency 15. Used as background (15). Pagination dots, the inactive states of carousel controls, and a small set of structural separators. The only non-monochrome neutral on the page.
• Ink Muted ({colors.ink-muted} — "#707070") — frequency 2. Used as text (1), border (1). Caption-tier copy below sample artwork, and a single hairline on the customer-logo strip.

Artwork tiles

• Violet Soft ({colors.violet-soft} — "#bb7bff") — frequency 1. Used as background (1). Single artwork-tile fill behind one of the vector-generation samples. Never appears on chrome.
• Violet Deep ({colors.violet-deep} — "#6a3eff") — frequency 1. Used as background (1). The deeper counterpart of the violet pair, on a second artwork tile. Reserved for tile fills inside the showcase grid.

Typography

Font family

The system runs ABC Gravity in six declared widths — Condensed, SemiCondensed, Compressed, Extended Italic, Expanded Italic, Normal Italic — all at weight 900, all uppercase, on every headline role. Geist carries every paragraph, nav link, caption, and footer line at weights 400, 500, and 600 / 10–22px / mostly negative tracking. The split is binary: Gravity for shout, Geist for read.

The voice split is intentional:

• ABC Gravity (weight 900, uppercase, 68.4px leading) → h1, h2, italic display shouts, the typographic showcase grid
• Geist (weights 400–600, mixed-case) → body, navigation, captions, footer, micro-tracked labels

Hierarchy

Principles

H1 and h2 always run at weight 900 — never 700 or 500 mid-display. The display-tier line-height (68.4px on 72–76px sizes) is intentionally tight, creating overlap between consecutive lines and pulling the shout into a poster-like block. Body line-height is the inverse — {typography.body-md} runs at 1.3 (20.8 / 16) with -0.32px tracking, generous for a 16px Geist setting. Switching the display to a humanist sans erases the brand voice; the Gravity-versus-Geist contrast IS the typographic system.

Substitutes

If ABC Gravity is unavailable, Antonio at weight 700+ is the closest open-source substitute for the Condensed and SemiCondensed widths — both are tall condensed sans with high-contrast strokes. Oswald at weight 600+ also works for Condensed roles. Anton is the closest match for the heaviest weight 900 cap. For Geist, Inter at the same weights is the cleanest swap — both are geometric-leaning sans built for screen reading at 12–22px.

Layout

Spacing system

• Base unit: 10px (104 declarations) — Recraft anchors on a base-10 grid rather than the 4 or 8px base most current SaaS systems use.
• Tokens: {spacing.xxs} ("2px") · {spacing.xs} ("4px") · {spacing.sm} ("5px") · {spacing.md} ("8px") · {spacing.base} ("10px") · {spacing.lg} ("12px") · {spacing.xl} ("20px") · {spacing.2xl} ("40px") · {spacing.3xl} ("60px") · {spacing.4xl} ("120px").
• Section padding: {spacing.3xl} (60px) vertical between bands, with horizontal {spacing.4xl} (120px) gutters on the wide section bleeds.
• Pill CTA padding: "18px 18px 20px" — an asymmetric vertical pad (top 18 / bottom 20) that drops the label into optical center against the Gravity hero above.
• Card internal padding: {spacing.base} (10px) inside the artwork tiles; {spacing.xl} (20px) around the customer-logo strip and the carousel inserts.

Grid & container

• Hero composition: centered single column — the Gravity headline spans 800px wide, with the chartreuse pill stacked below and the customer-logo strip aligned beneath.
• Section grids: alternating photography-band and showcase-grid rhythm — every other section is a full-bleed photographic insert, and the in-between bands carry vector and design-asset showcases.
• Customer-logo strip: horizontal row of "Airbus", "Asana", "Ogilvy", "Miro" wordmarks in {colors.on-canvas} against {colors.canvas}, set in {typography.label-sm-tracked}.
• Sample-artwork tiles: rounded {rounded.chrome} (5px) cards on {colors.canvas} with content variants on {colors.violet-soft} and {colors.violet-deep} fills.

Rhythm

The page anchors on 60px vertical section padding and 120px horizontal bleed — a luxury-magazine rhythm rather than a tight-card-grid SaaS rhythm. Headline hierarchy is binary — h1 at 76px and h2 at 72px share the same family and weight, with only a 4px size delta. There is no display ladder above 76px, and the only sub-display tier is {typography.display-semicondensed} at 24px.

Elevation & Depth

The elevation philosophy is flat-as-canvas — depth comes from photographic insets and from the typographic density of the Gravity headlines, never from CSS box-shadow. The page declares zero drop shadows in the extracted CSS — the entire surface reads as a stack of black bands with white type and an occasional violet or chartreuse tile inserted as a punctuation mark.

The violet pair ({colors.violet-soft} and {colors.violet-deep}) is the only deviation from the black canvas, and even then the tiles share the same 5px radius and flush-edge geometry as every other content block. There are no soft drop shadows, no hairline ladders, no surface lifts.

Shapes

Border radius scale

There is no 4px or 12px tier on the marketing surface. The geometry is dominated by 5px (127 declarations) with 6px, 8px, and 15px appearing in single-digit and low-double-digit counts. The 5px discipline reads as a deliberate counter-positioning against the 16–24px soft-corner default that dominates SaaS marketing in this cycle.

Imagery & illustrations

The page leads with high-contrast editorial photography — a portrait of a model in a green wig against a blue field, a group photo with overlaid handwritten "EXCEPTIONAL PROMPT UNDERSTANDING" stencil, an inked black-and-white illustration in the design-assets showcase, and a Día de los Muertos-style vector skull against a magenta canvas in the vector-generation band. The photography reads as art-direction-led, not stock-led — every band is built around a single dominant image, not a grid of small thumbnails.

Components

Top navigation

{components.top-nav} — Black nav bar pinned to the top of the page. Background {colors.canvas} ("#000000"), text {colors.on-canvas}. Carries the Recraft wordmark at left, primary menu items at center, and the chartreuse Try Recraft Studio pill at right. Menu items in {typography.body-md} (Geist 16px / 500). Padding "20px", height "60px".

Hero & section bands

{components.hero-band} — The black hero anchored at top of every marketing page. Background {colors.canvas}, text {colors.on-canvas}. Centered single-column composition: ABC Gravity headline, chartreuse pill, customer-logo strip beneath.

{components.section-band} — Every subsequent section. Same black canvas, same white type, alternating with full-bleed photography insets. Padding "60px 0px".

{components.hero-heading} — The "tastefully crafted AI image models" h1. Type {typography.display-hero} (ABC Gravity Condensed 76px / 900 / 68.4px leading), color {colors.on-canvas}. Centered, ~800px wide, no margin above or below beyond the section padding.

{components.section-heading} — Every section h2. Type {typography.display-h2} (ABC Gravity Condensed 72px / 900), color {colors.on-canvas}. Used on "exceptional prompt understanding", "design assets with taste built in", "unmatched vector generation".

{components.italic-display-shout} — The italic variant of the section opener. Type {typography.display-expanded} (ABC Gravity Expanded Italic 72px / 900 / uppercase). Used as the contrasting italic stop on alternating section heads.

Body type

{components.body-paragraph} — Default running text. Type {typography.body-md} (Geist 16px / 500 / 20.8px leading / -0.32px tracking), color {colors.on-canvas}. Width caps at ~720px centered against the black canvas.

{components.body-emphasis} — Pull-quote-tier body. Type {typography.body-emph} (Geist 22px / 500 / 28.6px leading / -0.22px tracking), color {colors.on-canvas}. Used on the largest non-display body lines.

Buttons & links

{components.button-primary} — The signature chartreuse pill CTA. Background {colors.voltage} ("#d2fc31"), text {colors.electric-blue} ("#0000ee"), 1px border in {colors.electric-blue}, type {typography.button-md} (Geist 12px / 400), padding "18px 18px 20px", height "40px", rounded {rounded.card} (8px). The only chromatic CTA on the entire marketing surface.

{components.button-primary-hover} — Press state inferred from the static page. Same fill and border, opacity drops to "0.9". The exact hover delta is not extracted — see Known Gaps.

{components.nav-link} — Top-nav link items. Text {colors.electric-blue} ("#0000ee"), type {typography.button-md}, padding "0", height "40px". The link colour matches the default browser hyperlink — a deliberate stylistic choice rather than a brand-tuned blue.

Showcase grid & tiles

{components.customer-logo-strip} — Horizontal logo row showing "Airbus", "Asana", "Ogilvy", "Miro", "Mira" beneath the hero. Background {colors.canvas}, text {colors.on-canvas}, type {typography.label-sm-tracked} (Geist 14px / 500 / 1.4px tracking). Padding "20px 0px".

{components.image-tile} — A single full-bleed photographic insert. Background {colors.canvas}, rounded {rounded.chrome} (5px), no padding. Carries one editorial image per section.

{components.violet-tile} — Showcase tile with violet artwork backing. Background {colors.violet-soft} ("#bb7bff"), text {colors.on-canvas}, rounded {rounded.chrome} (5px), padding "10px".

{components.violet-tile-deep} — Deeper violet variant for the second artwork tile. Background {colors.violet-deep} ("#6a3eff"), same geometry and padding as the soft variant.

Carousel & meta

{components.carousel-dot} — Inactive pagination indicator. Background {colors.hairline} ("#e4e4e4"), rounded {rounded.ring} (50%), height "8px". Sits below the showcase carousel.

{components.carousel-dot-active} — Active state. Background {colors.on-canvas} ("#ffffff"), same ring geometry.

{components.caption-meta} — Caption-tier copy below sample artwork. Background transparent, text {colors.ink-muted} ("#707070"), type {typography.micro-tracked} (Geist 10px / 500 / 1.5px tracking). Padding "5px 0px".

Footer

{components.footer-band} — Black footer band that closes every page. Background {colors.canvas}, text {colors.on-canvas}, type {typography.body-md-regular} (Geist 16px / 400). Padding "40px 20px". Carries legal links and the secondary nav row.

Do's and Don'ts

Do

• Anchor every page on {colors.canvas} ("#000000"). A charcoal surface tier (any near-black above the pure floor) flattens the contrast and makes the chartreuse pill read as a muted accent rather than a single voltage point.
• Render every headline in ABC Gravity at weight 900 / uppercase. Switching to weight 700 reads as the same family at a different stop; switching to a humanist sans erases the brand voice.
• Use {colors.voltage} ("#d2fc31") only on the primary CTA and only with {colors.electric-blue} ("#0000ee") text. The two-color pairing IS the brand signal.
• Apply {rounded.chrome} (5px) on every chrome surface — cards, pills, image tiles, nav controls. A 12px or 16px radius reads as foreign.
• Set body in Geist at weight 500 / 16px / -0.32px tracking. The negative tracking pulls the body into typographic conversation with the Gravity display above.
• Treat the violet pair ({colors.violet-soft} and {colors.violet-deep}) as artwork backings only — never as CTA fills or section grounds.

Don't

• Don't pair the chartreuse pill with white or black text. The page declares {colors.electric-blue} ("#0000ee") for both the label and the 1px border — a default-hyperlink blue, deliberately chosen against the brand-tuned-blue convention.
• Don't run an h1 above 76px on the marketing surface. The Gravity headline at 76px / 68.4px leading is the largest typographic object; a 96px or 120px headline would compete with the chartreuse pill rather than introduce it.
• Don't bold the Geist body. Body sits at weight 500 — bumping to 600 or 700 erases the negative-tracking signature and pushes Geist into a heavier register that fights the Gravity display.
• Don't apply drop shadows. The CSS declares no --drop-shadow variables and the page renders zero box-shadows; depth comes from the photographic insets and the typographic density only.
• Don't use a 4px corner radius on cards. The system anchors on 5px (127 declarations) and the 1-pixel difference reads as off-grid.
• Don't widen the colour palette. The 8-token palette is the discipline; introducing a "brand teal" or "accent magenta" inverts the chromatic monasticism that positions Recraft against the rest of the AI-image category.

Known Gaps

• 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 interactivity that does not capture in a static snapshot.
• The violet pair ({colors.violet-soft} and {colors.violet-deep}) 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 at extraction time.
• The exact tracking on the ABC Gravity display tier is reported as "normal" in the extracted CSS — the brand may be running OpenType features (small caps, alternate widths) that do not surface in the computed letter-spacing value.
• The chartreuse-on-electric-blue pairing's exact contrast ratio (WCAG AA / AAA conformance) is not verified — the colour pairing is a brand-led choice and may require an accessible alternative for body-tier copy.