---
version: alpha
name: Recraft
description: An AI image and vector studio dressed in stark black with a single electric chartreuse signal — ABC Gravity's massive uppercase weight runs the hero, Geist handles the interface, and every interaction is anchored by a #d2fc31 CTA that glows against the night canvas.

colors:
  # Surface / canvas
  background: "#000000"          # primary marketing canvas, hero backdrop
  surface: "#111111"             # elevated cards, feature sections on dark
  surface-dim: "#1a1a1a"         # deep recessed panels
  surface-light: "#ffffff"       # white body sections, light-mode areas
  surface-nav: "#f5f5f5"         # near-white nav pill / glass approximation — was rgba(255,255,255,0.9) — Google format requires hex

  # Ink / text
  ink: "#ffffff"                 # primary text on black canvas
  ink-secondary: "#a3a3a3"       # supporting copy, nav links on dark
  ink-muted: "#6b6b6b"           # captions, metadata
  ink-strong: "#000000"          # primary text on white / light sections
  on-primary: "#000000"          # text on the chartreuse CTA button

  # Brand accent
  primary: "#d2fc31"             # electric chartreuse — the single loud signal (CTA, interactive states)
  primary-container: "#c8ef22"   # slightly deeper chartreuse for pressed/active state

  # Borders
  border: "#2a2a2a"              # standard divider on dark canvas
  border-mid: "#3d3d3d"          # mid-emphasis border / card outline
  border-light: "#e4e4e4"        # hairline on light sections

  # Shadow tints
  shadow-dark: "#000000"         # was rgba(0,0,0,0.3) — Google format requires hex
  shadow-navy: "#01013f"         # was rgba(1,1,63,0.1) — the navy-tinted card shadow

typography:
  display-hero:
    fontFamily: "ABC Gravity Condensed, ABC Gravity, ui-sans-serif, system-ui, sans-serif"
    fontSize: 76px
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: 0px
  display:
    fontFamily: "ABC Gravity Expanded, ABC Gravity, ui-sans-serif, system-ui, sans-serif"
    fontSize: 72px
    fontWeight: 900
    lineHeight: 0.95
    letterSpacing: -5.04px
  heading-section:
    fontFamily: "ABC Gravity SemiCondensed, ABC Gravity, ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "Geist, Geist Placeholder, ui-sans-serif, system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.22px
  body:
    fontFamily: "Geist, Geist Placeholder, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.32px
  body-regular:
    fontFamily: "Geist, Geist Placeholder, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  button-ui:
    fontFamily: "Geist, Geist Placeholder, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.32px
  label:
    fontFamily: "Geist, Geist Placeholder, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.4px
  caption:
    fontFamily: "Geist, Geist Placeholder, ui-sans-serif, system-ui, sans-serif"
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.5px

spacing:
  xs: 8px
  sm: 10px
  md: 18px
  lg: 20px
  xl: 30px
  2xl: 36px
  3xl: 40px
  4xl: 52px
  5xl: 60px
  6xl: 100px

rounded:
  none: 0px
  sm: 5px
  md: 6px
  lg: 12px
  xl: 15px
  2xl: 30px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 18px 18px
  button-primary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.surface-nav}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 18px 18px
  button-secondary-hover:
    backgroundColor: "#e0e0e0"    # was rgba(255,255,255,0.816) — Google format requires hex
    textColor: "{colors.ink-strong}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.lg}"
    padding: 18px 18px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 20px
  card-feature:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 30px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 0px 20px
  nav-link:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    padding: 10px 12px
  nav-link-hover:
    textColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 8px 12px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
---

# Recraft Design System

## Overview

Recraft is a professional AI image and vector studio that earns its visual authority by staying nearly silent. The marketing canvas is pure black (`{colors.background}`) — not dark gray, not near-black, but committed zero. Against this the brand deploys exactly one chromatic weapon: an electric chartreuse (`{colors.primary}`) that lands on the primary CTA like a struck match. Everything else — the navigation, the supporting buttons, the body copy, the section headers — lives in a precise ladder of whites, grays, and near-blacks. The lesson is restraint: save the one loud color for the moment that matters, and it carries enormous weight.

The typography system is structurally unusual in a way that mirrors the product's ambition. For hero and display text, Recraft reaches for ABC Gravity — a contemporary grotesque with multiple optical widths (Condensed, Normal, Expanded, Compressed, Extended) and a single weight: 900 Black, always uppercase, always with a sub-1.0 line-height that stacks letterforms so tightly they read as one muscular shape rather than individual glyphs. Tracks on some display sizes drop to -5.04px. This is not refinement — it's force. Paired against it, Geist (Vercel's typeface) handles all interface text: body copy, navigation, labels, captions. Geist is equipped with OpenType stylistic sets ss01 and ss02 at body sizes, tightened to -0.32px tracking at 16px, giving the interface prose a crisp, editorial snap that contrasts cleanly with the gravity of the display type above.

The signature visual move, beyond the color signal, is scale contrast. ABC Gravity fills the viewport with compressed letterforms at 72–76px. Below that, Geist body text runs at 16–22px. The design system skips the middle — no 36px or 48px heading tier. Sections transition from massive to intimate without a comfortable midpoint, which keeps the energy high and rewards close reading. Cards adopt generous radii (`{rounded.2xl}`), shadow treatments tint lightly with a near-navy tint (`{colors.shadow-navy}`) rather than pure black, and the overall structure follows a dark-canvas-to-feature-sections flow where the black opening gives way to structured content areas.

**Key Characteristics:**
- Pure black canvas (`{colors.background}`) with no gradient, no dark-gray relaxation — full commitment
- Single chromatic signal: electric chartreuse (`{colors.primary}`) reserved exclusively for the primary CTA and interactive confirmation states
- ABC Gravity (multiple optical widths) runs all hero and display type at 900 weight, uppercase, sub-1.0 line-height, with aggressive negative tracking
- Geist handles all interface text with OpenType features `"ss01", "ss02"` active at body sizes
- Two-tier typographic system: massive display (72–76px) drops directly to interface scale (16–22px) with no comfortable middle tier
- Button radius is `{rounded.lg}` (12px) — not a pill, not square — a deliberate mid-firmness
- Near-white glass pill (`{colors.surface-nav}`) used for the secondary "Sign in" CTA against the black nav
- Shadow tints carry a distinctive near-navy hue (`{colors.shadow-navy}`) rather than plain black
- Cards and feature sections adopt 30px radii (`{rounded.2xl}`) for softness against the hard dark field
- Label and caption text reverses tracking to positive (1.4–1.5px) for uppercase utility text, inverting the compressed display rhythm
- Generated imagery is the texture of the page — the canvas exists to frame the work, not to be interesting itself

## Colors

### Surface & Canvas
- **Pure Black** (`{colors.background}`): The hero and marketing canvas. Absolute, not approximated.
- **Elevated Dark** (`{colors.surface}`): Cards, raised containers, feature tiles sitting above the canvas.
- **Deep Recessed** (`{colors.surface-dim}`): Inset panels and the deepest tier of dark UI.
- **White** (`{colors.surface-light}`): Body sections where product feature content shifts to a bright reading environment.
- **Glass White** (`{colors.surface-nav}`): The near-white nav pill for secondary actions — an opaque approximation of the original `rgba(255,255,255,0.9)` overlay.

### Ink / Text
- **White** (`{colors.ink}`): Primary text on the black canvas. Full contrast.
- **Mid-Gray** (`{colors.ink-secondary}`): Supporting copy, secondary nav links, subdued UI labels.
- **Muted Gray** (`{colors.ink-muted}`): Captions, metadata, lowest-emphasis helper text.
- **Black** (`{colors.ink-strong}`): Primary text on white or light sections.
- **On-Primary Black** (`{colors.on-primary}`): The text that sits on the chartreuse button — black on green for maximum legibility.

### Brand Accent
- **Electric Chartreuse** (`{colors.primary}`): The one loud signal. Applied to the primary "Try Recraft Studio" and "Start creating" CTAs, and to live / active interactive confirmations. Never used as a surface fill, section background, or decoration.
- **Deep Chartreuse** (`{colors.primary-container}`): The active/pressed state darkening of the primary. Nearly imperceptible — just slightly heavier than resting.

### Borders & Shadow Tints
- **Dark Border** (`{colors.border}`): Standard divider on the black canvas. Barely perceptible.
- **Mid Border** (`{colors.border-mid}`): Cards and component outlines on dark.
- **Light Border** (`{colors.border-light}`): Hairline dividers on white/light sections.
- **Shadow Dark** (`{colors.shadow-dark}`): The base of shadow layering — opaque stand-in for `rgba(0,0,0,0.3)`.
- **Shadow Navy** (`{colors.shadow-navy}`): The distinctive near-navy tint used for card lift and ambient shadows — original was `rgba(1,1,63,0.1)`, opaque-converted for the Google spec.

## Typography

### Font Families
- **Display / Hero**: `ABC Gravity` (Condensed, Expanded, SemiCondensed, Normal, Compressed, Extended optical variants), with fallbacks `ui-sans-serif, system-ui, sans-serif`. A contemporary grotesque typeface available in multiple width variants but only one weight — Black 900. All display use is uppercase with sub-1.0 line-height and aggressive negative tracking. ABC Gravity is a licensed commercial typeface, self-hosted as woff2.
- **Interface / Body**: `Geist` (Vercel's typeface), with fallbacks `ui-sans-serif, system-ui, sans-serif`. A clean geometric sans with OpenType stylistic sets `"ss01"` and `"ss02"` active at body sizes. Used for all navigation, body copy, labels, captions, and UI text.

### Hierarchy

The full type scale is declared in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 76px / 900 / lh 0.9 — the marquee headline. ABC Gravity Condensed, uppercase, maximum compression |
| `display` | 72px / 900 / -5.04px — section-opening full-width statements. ABC Gravity Expanded |
| `heading-section` | 24px / 900 — sub-section and feature titles. ABC Gravity SemiCondensed |
| `body-large` | 22px / 500 / Geist / -0.22px — lead paragraphs and feature descriptions |
| `body` | 16px / 500 / Geist / -0.32px / ss01+ss02 — standard interface copy |
| `body-regular` | 16px / 400 / Geist — secondary prose, lighter reading |
| `button-ui` | 16px / 500 / Geist — button labels, matching body weight |
| `label` | 14px / 500 / Geist / +1.4px — uppercase utility text; tracking inverts to positive |
| `caption` | 10px / 500 / Geist / +1.5px — smallest tier metadata; widest positive tracking |

### Principles
- **Two tiers, no middle**: ABC Gravity rules the hero scale (72–76px); Geist owns everything from 22px down. There is no comfortable 36–48px heading tier.
- **Black uppercase, compressed**: Every ABC Gravity appearance is weight 900, uppercase, with a line-height below 1.0. It is never used small, mixed-case, or light.
- **Geist with optical features**: At body sizes, `"ss01"` and `"ss02"` OpenType sets are active. At label/caption sizes, positive tracking (1.4–1.5px) opens the compressed stems for legibility.
- **Negative tracking on display, positive on utility**: Display type is compressed; the smallest labels are widened. The system spans a tracking range from -5.04px (72px display) to +1.5px (10px caption).

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit is 10px (the system clusters around 10px multiples: 10, 20, 30, 40, 60, 100). Internal component padding sits at 18–20px; section rhythm grows to `{spacing.6xl}` (100px) between major page blocks.

### Grid & Container
- Hero spans full viewport width; no explicit max-content container on the black canvas
- Feature sections use a centered content container, approximately 1080px wide
- Breakpoints at 760px (tablet) and 1080px (desktop), with a minimal mobile stop at 98px suggesting deep zoom / small device handling
- Content-heavy sections use a multi-column grid (2–3 columns on desktop); the gallery of generated outputs is tightly packed

### Whitespace Philosophy
- **Black is the stage**: the canvas doesn't need whitespace because the dark field *is* the resting state — content punches up from it
- **Dense display, airy sections**: ABC Gravity text stacks are brutally tight (lh 0.9); section gaps are generous (100px)
- **Output is the fill**: generated imagery and vector art are the visual texture; the layout exists to frame and sequence them

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; `{colors.border}` edge only | Black canvas sections, most marketing content |
| Subtle (Level 1) | `0 2px 19px -4px` (`{colors.shadow-navy}`) at ~10% | Feature cards, subtle UI surface lift |
| Elevated (Level 2) | `0 11px 40px 0` (`{colors.shadow-dark}`) at ~30% | Floating product UI panels, prominent cards |
| Focus Ring | `0 0 0 2px` (`{colors.primary}`) | Keyboard focus on interactive elements |

**Shadow Philosophy**: On a pure-black canvas, standard gray drop shadows disappear. Recraft addresses this with two strategies: the primary shadow layer uses a near-navy tint (`{colors.shadow-navy}`) — a subtle warmth in the dark that reads as depth without grayness — and the heavier elevation layer deploys a wider, softer black spread (`{colors.shadow-dark}`) for panels that need to assert they're hovering. The result is shadow that feels atmospheric rather than mechanical.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Hard cuts, full-bleed media crops |
| `sm` | 5px | Small chips, thumbnail images |
| `md` | 6px | Tight inner UI elements |
| `lg` | 12px | Buttons, inputs, the primary interactive shape |
| `xl` | 15px | Nav and secondary UI containers |
| `2xl` | 30px | Cards, major feature containers |
| `pill` | 9999px | Pagination dots, circular icon containers |

The radius personality is mid-firm: buttons and inputs use `{rounded.lg}` (12px), not pills — Recraft wants its CTAs to feel confident and designed, not soft. Cards step up to `{rounded.2xl}` (30px) for softness against the hard dark field. The system avoids the all-or-nothing pill approach common to dark-mode AI tools.

## Components

The complete component spec lives in the `components:` token block. Reference component tokens directly.

### Button Variants

- **`button-primary`** — Chartreuse (`{colors.primary}`) fill, black label, 12px radius. The "Try Recraft Studio" and "Start creating" pattern — every primary CTA on the black canvas. Hover reduces opacity slightly to `{colors.primary-container}`.
- **`button-secondary`** — Near-white glass pill (`{colors.surface-nav}`) fill, black label, 12px radius. The "Sign in" / "Get API" pattern — a softer, less assertive action. Hover darkens lightly.
- **`button-ghost`** — Black fill, white label, 12px radius. For tertiary actions on the dark canvas where neither green nor white glass is appropriate.

### Cards

- **`card`** — Dark elevated surface, 30px radius, 20px padding. Standard feature and content tile.
- **`card-feature`** — Deeper recessed surface (`{colors.surface-dim}`), 15px radius, 30px padding. Used for denser feature breakdowns.

### Navigation

- **`nav-bar`** — Black background, white/gray link text, 20px horizontal padding. Sits flush above the hero. **`nav-link`** defaults to mid-gray (`{colors.ink-secondary}`), brightening to white on hover. The "Try Recraft Studio" chartreuse button is a `button-primary` instance inside the nav.

### Inputs

- **`input`** — Dark elevated fill, white text, 12px radius, 12px 16px padding. **`input-focus`** pairs with a chartreuse (`{colors.primary}`) focus ring following the 2px outline pattern.

### Badges / Labels

- **`badge`** — Dark fill, mid-gray text, pill radius, generous horizontal padding. Category tags and status indicators.

## Do's and Don'ts

### Do
- Keep the marketing canvas absolute black (`{colors.background}`) — no dark grays, no subtle color tints
- Use `{colors.primary}` chartreuse for exactly one action per view: the primary CTA. Let it own that role entirely
- Set ABC Gravity at 900 weight, uppercase, with line-height ≤ 1.0 — loosening it breaks the compressed urgency that defines the hero
- Apply negative tracking to display type and positive tracking to caption/label text — the span from -5.04px to +1.5px is intentional
- Use `{typography.body}` with OpenType features `"ss01", "ss02"` active on Geist at 16px body sizes
- Give buttons `{rounded.lg}` (12px) — not pill, not square — to maintain the brand's mid-firm confidence
- Lift cards to `{rounded.2xl}` (30px) for softness; use the navy-tint shadow (`{colors.shadow-navy}`) for ambient depth on dark
- Let generated imagery and vectors fill cards edge-to-edge — the output is the visual, the chrome is secondary

### Don't
- Don't apply chartreuse (`{colors.primary}`) as a surface fill, section wash, or decorative gradient — it's a button signal, not a brand color
- Don't introduce a third typeface: ABC Gravity handles display, Geist handles interface — that's the complete system
- Don't soften ABC Gravity to mixed-case or reduced weight — every display instance is 900 Black uppercase
- Don't loosen line-height on display type above 1.0 — the brutally tight 0.9–0.95 lh is what makes the hero read as one mass
- Don't use mid-radius (4–8px) on buttons — the design is `{rounded.lg}` (12px); going smaller reads as legacy SaaS
- Don't treat the chartreuse hover as a separate brand moment — it's a subtle opacity reduction on the same hue, not a color shift
- Don't use a gray drop shadow on the black canvas — it vanishes. Use the navy-tint shadow (`{colors.shadow-navy}`) or the black spread (`{colors.shadow-dark}`)
- Don't introduce positive letterSpacing at display sizes — only labels and captions use positive tracking

---

## Responsive Behavior

### Breakpoints

*(Observed from extraction — 3 stops detected.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <760px | Single column; hero ABC Gravity headline scales down significantly; nav condenses to icon/menu; CTA buttons stack vertically |
| Tablet | 760–1080px | Two-column content grid; hero type at ~48–56px; gallery grid at 2 columns |
| Desktop | >1080px | Full layout; hero at 76px; 3-column feature grid; generous 100px section padding |

### Touch Targets

- Buttons use `18px 18px` padding at 16px text — minimum 52px button height, comfortable for touch
- Nav links at 10px 12px padding remain adequate; at mobile the nav collapses to a single CTA button
- Cards carry 20–30px padding, ensuring tap targets are generous

### Collapsing Strategy

- **Navigation**: horizontal link list + CTA → mobile hamburger or condensed pill menu
- **Hero**: ABC Gravity display text scales from 76px toward ~36–44px on small screens; uppercase and tight tracking are preserved
- **Feature grid**: 3-column → 2-column → single column as width decreases
- **Spacing**: section rhythm compresses from 100px toward ~40px on mobile

### Image Behavior

- Generated imagery fills card containers at `object-fit: cover`, recentering on the focal point
- Full-bleed hero canvas imagery crops tighter on mobile but maintains the dark atmospheric quality
- Gallery thumbnails reflow as grid children, maintaining aspect ratio within the card `{rounded.2xl}` boundary

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Pure Black (`{colors.background}`)
- Text: White (`{colors.ink}`) on dark, Black (`{colors.ink-strong}`) on light
- Brand accent (primary CTA): Electric Chartreuse (`{colors.primary}`)
- Secondary text: Mid-Gray (`{colors.ink-secondary}`)
- Border: Near-invisible dark (`{colors.border}`)
- Primary button fill: `{colors.primary}` with `{colors.on-primary}` label

### Example Component Prompts

- "Build the Recraft hero: pure black (`{colors.background}`) canvas, ABC Gravity Condensed 76px / 900 / uppercase / lh 0.9 headline in white (`{colors.ink}`), followed by a 22px Geist subheadline at weight 500 with -0.22px tracking. Primary CTA: chartreuse (`{colors.primary}`) fill, black (`{colors.on-primary}`) label, `{typography.button-ui}`, `{rounded.lg}` radius, 18px 18px padding. Secondary CTA: near-white glass (`{colors.surface-nav}`) fill, black label, same radius."
- "Create a feature card: dark elevated surface (`{colors.surface}`), `{rounded.2xl}` radius, 20px padding, navy-tint shadow (`0 2px 19px -4px {colors.shadow-navy}`). Headline uses `{typography.heading-section}` (ABC Gravity SemiCondensed, 900, uppercase). Body copy uses `{typography.body}` (Geist 16px / 500 / -0.32px with ss01+ss02 features)."
- "Design a Recraft navigation bar: `{colors.background}` fill, no border, 20px horizontal padding. Links use `{typography.label}` (Geist 14px / 500 / +1.4px tracking) at `{colors.ink-secondary}`, brightening to `{colors.ink}` on hover. End-cap: chartreuse `button-primary` with black label at `{rounded.lg}`."
- "Render a label / eyebrow tag: Geist 14px / 500 / +1.4px tracking, `{colors.ink-secondary}` text, all-caps transform. Pair it above an ABC Gravity display headline to establish the section hierarchy before the type scale drops."
- "Create a badge for generated-image category: `{colors.surface}` background, `{colors.ink-secondary}` text, `{typography.caption}` (Geist 10px / 500 / +1.5px), `{rounded.pill}` radius, 8px 12px padding. Use on dark cards as a taxonomy chip."

### Iteration Guide

1. Start from pure black (`{colors.background}`). Any lightening of the canvas — to #111 or #0d0d0d — should be deliberate surface elevation, not canvas drift.
2. ABC Gravity display text: 900 / uppercase / lh ≤ 1.0 at all times. If the hero has light weight or mixed-case, correct it immediately.
3. Assign chartreuse (`{colors.primary}`) to exactly one button per viewport. If two buttons compete for the color, the hierarchy is broken — make one secondary.
4. Body and interface copy uses Geist (`{typography.body}`) with OpenType `"ss01", "ss02"` active and -0.32px tracking. Do not substitute system-ui at these sizes.
5. Buttons use `{rounded.lg}` (12px). Do not drift to pill or to 4–6px — the mid-firmness is the brand's visual voice.
6. Shadows on dark backgrounds use the navy-tint formula (`{colors.shadow-navy}`) for ambient depth; reserve the harder black spread (`{colors.shadow-dark}`) for elevated panels.
7. The space between ABC Gravity's compressed letterforms and Geist's clean 16px prose is intentional — resist filling it with a 36–48px intermediate heading. The contrast is the design.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Recraft. Brand names and trademarks belong to their respective owners.