# recraft.ai

Source: https://www.recraft.ai/
Captured: 2026-09-20
Tags: saas, landing, dark, both, editorial, dark-techno, confident, edgy, premium, energetic
Colors: #0f3467, #020303, #20568d, #bc7dfd, #1e74b5, #d0d0ce, #1b1b2d, #f0f1f2
Type (h1): ABC Gravity Condensed · 76px/68.4px · 900 — "TASTEFULLY CRAFTED AI IMAGE MODELS"
Type (h2): ABC Gravity Condensed · 72px/68.4px · 900 — "EXCEPTIONAL PROMPT UNDERSTANDING"
Type (body): Geist · 16px/20.8px · 500 · tracking -0.32px — "Style It Once, Every Image Matches: Introducing V4 Styles"
Type (button): sans-serif · 12px/normal · 400 — "Try Recraft Studio"
Button: "Try Recraft Studio" — fill #d2fc31, text #000000, radius 8px, border 0px, padding 18px 18px 20px 18px, height 40px, type 12px/400
Radii: 5px (40), 6px (8), 50% (6), 15px (4), 30px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/recraft-ai/hero.webp?v=73e352c8
- Page crop (mid-1): https://media.lvly.design/library/recraft-ai/mid-1.webp?v=39a13ecf
- Page crop (mid-2): https://media.lvly.design/library/recraft-ai/mid-2.webp?v=913474e7
- Hero (mobile): https://media.lvly.design/library/recraft-ai/mobile-hero.webp?v=b6312607
- Full page (desktop): https://media.lvly.design/library/recraft-ai/full.jpg?v=727f1cbb
- Full page (mobile): https://media.lvly.design/library/recraft-ai/mobile-full.jpg?v=cbaf1460
- Clip preview (mp4): https://media.lvly.design/library/recraft-ai/video-384kek.preview.mp4?v=366a6ef4

Pure black (#000000) treated as gallery wall: every section is a full-width band of black with
one enormous condensed headline and one piece of art, and nothing else competes. The type does
all the structural work — ABC Gravity Condensed at 900 weight, 76px over a 68.4px line-height,
with exactly one word per headline flipped into the italic cut so "TASTEFULLY *crafted*",
"UNMATCHED *vector*" and "*without* training" each get a stress beat without a second color or
size. Body copy drops to Geist 16px/500 at -0.32px tracking, small and calm, so the gap between
display and text is theatrical rather than gradual. The imagery is fashion-editorial — a blue
tulle portrait, a black-and-white dance frame, a wall of magenta-toned generations — set inside
rounded media cards inset from the page edge so the black reads as a passe-partout, with sibling
slides sliced off at the viewport edges to signal a strip that keeps going. Color is rationed to
two notes: an acid lime #d2fc31 that appears only on primary CTAs, and a violet #bc7dfd
announcement bar above the fold. It works because the restraint is all in the chrome — no
borders, no cards, no gradients, no shadows — which leaves the generated images and the display
face as the only two things on screen, exactly the claim the product is making.

## Steal-worthy details

- One word per headline set in the italic cut of the same condensed face, everything else roman — a stress beat that costs no color, size or weight change and repeats as a system down the page
- Negative leading on the display type: 76px glyphs on a 68.4px line-height (0.9), so a two-line headline locks into a single rectangular mass rather than reading as two sentences
- Acid lime #d2fc31 with black #000000 labels, 8px radius, 12px text, reserved for exactly two buttons (nav and hero); the secondary sits in near-white #f0f1f2 at the same size, so the pair reads as one primary and one alternative, never two CTAs
- The hero is not full-bleed: it is a ~15px-radius media card inset 72px from the page edge, so the black page frames the picture like a mount instead of bleeding into it
- Carousel arrows are parked in the black gutter outside the media card as circular chips, while the dot pagination sits inside the bottom of the image — controls that never sit on the artwork they move
- Slides are sliced by the viewport edge — a sliver of the previous and next image on each side — and captioned underneath in 16px Geist rather than titled above, so each row reads as an endless strip with a museum label
- A single violet #bc7dfd full-bleed bar between nav and hero carries a square badge, one sentence and an underlined "Learn more" — the only chrome above the fold and the only place that color appears in the header
- The footer ends with the wordmark blown up to the full page width in the display face and clipped by the bottom edge, so the last thing on the page is a letterform, not a link

## Style recipe

Set the page ground to pure black `#000000` and keep it black edge to edge — no section tints,
no gradients, no borders, no shadows. Pick one heavy condensed grotesque with a true italic
(ABC Gravity Condensed 900 here) and use it only for headings: 72–76px at desktop, line-height
0.9 (negative leading), letter-spacing normal, all caps. In every heading, flip exactly one word
into the italic cut and leave the rest roman — one word per heading, never two, and never a
color or size change to make the same point. Body and UI take a neutral geometric sans (Geist)
at 16px/500, line-height 1.3, letter-spacing -0.32px; buttons drop to 12px/400. Ration color to
two accents on the black: an acid lime `#d2fc31` with `#000000` labels for primary actions only,
and one violet `#bc7dfd` for a single full-bleed announcement strip. A secondary button is a
near-white `#f0f1f2` chip with black text at the identical size — same shape, different value,
so the hierarchy is tonal. Radii are small and consistent: 5–8px on controls, ~15px on media
cards, 50% on circular icon chips. Present imagery as rounded cards inset 64–80px from the page
edge so the black frames them; for a horizontal set, let the neighboring items be sliced by the
viewport on both sides and put a centered 16px caption under the row rather than a title over
it. Park carousel arrows in the gutter beside the card, not on it, and keep dot pagination
inside the image's lower edge. Rhythm: one screen-height band per idea — headline, art, caption,
black space — with roughly 120–160px of black between bands and no dividers. Motion is limited
to slide transitions and a quiet hover lift on chips. Close the page with the wordmark scaled to
the full viewport width in the display face and cropped by the bottom edge. The two moves that
make it recognizable: the single italic word inside an otherwise roman condensed headline, and
one acid accent that appears nowhere except the buttons.