---
version: alpha
name: Procreate
description: A cinematic dark-canvas creative suite where SF Pro at heavy-semibold weight anchors expressive headlines, an electric blue is the only chromatic signal across near-black surfaces, and full-bleed device photography does the emotional work that other brands reserve for illustration.

colors:
  # Surface / canvas
  background: "#000000"             # near-pure black marketing canvas, hero
  surface: "#121212"                # slightly lifted dark panels, product cards
  surface-raised: "#1a1a1a"         # card hover state, modal fill
  surface-light: "#ffffff"          # white content sections, App Store badge bg

  # Ink / text
  ink: "#ffffff"                    # primary text on dark canvas
  ink-secondary: "#a8a8a8"          # supporting copy, metadata on dark
  ink-muted: "#777777"              # lowest-emphasis helper text, nav utility links
  on-surface-light: "#000000"       # black text on white / light sections
  on-primary: "#ffffff"             # white text on blue CTAs

  # Brand accent — electric blue is the singular chromatic signal
  primary: "#0076ff"                # electric Procreate blue — primary CTAs, links, active states
  primary-dark: "#044ba1"           # deep navy — Pro-tier CTA / pressed state
  primary-hover: "#0064d9"          # darkened blue for hover feedback
  primary-container: "#0055b8"      # tinted blue for focus ring, badge fill

  # Semantic
  error: "#f22a2a"                  # --error-font-color; validation / error states

  # Borders
  border: "#e5e7eb"                 # used on card outlines, dividers in light mode
  border-dark: "#262626"            # subtle panel separators on dark surface

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#808080"            # was rgb(128,128,128) at 5px — Google format requires hex
  shadow-overlay: "#000000"         # was rgba(0,0,0,0.5) gradient scrim — Google format requires hex

typography:
  display-hero:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif"
    fontSize: 70px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.35px
  display:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.30px
  heading-section:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.24px
  heading-sub:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.20px
  title:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.15px
  title-small:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.12px
  overline:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0.9px
  body-large:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: -0.50px
  body:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: -0.40px
  button-ui:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.40
    letterSpacing: 0.28px
  caption:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: -0.35px
  label-uppercase:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0.60px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 36px
  2xl: 56px
  3xl: 90px
  4xl: 130px

rounded:
  none: 0px
  sm: 12px
  md: 16px
  lg: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-secondary:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-secondary-hover:
    backgroundColor: "{colors.border-dark}"
    textColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-pro:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 20px
    border: 3px solid {colors.primary}
  button-pro-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    padding: 14px 20px
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-product:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 0px
  nav-link:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body}"
  nav-link-hover:
    textColor: "{colors.ink}"
  nav-link-active:
    textColor: "{colors.ink}"
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  input-select:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px
  input-select-focus:
    backgroundColor: "{colors.border-dark}"
    textColor: "{colors.ink}"
    border: 2px solid {colors.primary}
---

# Procreate Design System

## Overview

Procreate's marketing canvas is unabashedly cinematic. The site opens on a near-pure `{colors.background}` field where full-bleed photography of hands holding iPads — splashed with vibrant digital paintings — provides every gram of warmth and color that the interface chrome deliberately withholds. The structural language is cold, clean, and confident: white SF Pro headlines sit in tight negative tracking against darkness, and `{colors.primary}` — an electric, almost neon blue — is held back like a spotlight, appearing only on buttons and interactive links. This restraint makes every blue element feel like an action.

The typography does heavy lifting without theatrics. System-ui (SF Pro on Apple devices, Inter on others) renders at semibold weight 600 across all display and heading sizes, with negative letterSpacing that gets progressively tighter as size increases. The result is compact, dense headline stacks that feel handcrafted and editorial rather than templated. Body copy drops to weight 400 and widens its tracking to let long paragraphs breathe. The overline style — 0.9px letter-spacing, uppercase, weight 600 — appears above product names as category anchors, a device borrowed from luxury hardware brands.

What makes Procreate's system memorable is the hierarchy of color restraint: `{colors.ink}` (white) and `{colors.ink-secondary}` (medium gray) handle all textual information; `{colors.primary}` handles all actions; and full-bleed app screenshots handle all delight. Nothing in between. The dark surface lifts just enough (`{colors.surface}` at #121212 and `{colors.surface-raised}` at #1a1a1a) to define product cards against the canvas without introducing a second accent color. The impression is that of an Apple product page — restrained, premium, letting the work speak.

**Key Characteristics:**
- Pure black (`{colors.background}`) hero canvas — darker than most dark-mode sites, no gradient relief
- `{colors.primary}` is the only chromatic color in the entire system; all other values are grays or whites
- System-ui / SF Pro at weight 600 with negative tracking for all headlines — tight, confident, Apple-adjacent
- Full-bleed iPad photography carries all emotional color — the design system stays monochromatic to frame it
- Pill-shaped CTAs (`{rounded.pill}`) for standard actions; a distinct squared variant (`{rounded.sm}`) for Pro-tier purchasing
- Overline tokens (`{typography.overline}`) with uppercase + 0.9px spacing signal product family names
- Dense spacing at mobile scale (base unit 12px), expanding to 130px vertical rhythm between page sections
- Twelve responsive breakpoints from 360px to 1920px — the site genuinely optimizes for every screen width
- `{colors.primary-dark}` (#044ba1) distinguishes Pro product CTAs from standard CTAs — darker, bordered
- Flat elevation system — only one shadow token detected, used for a subtle 5px gray haze on images
- Motion is snappy: 0.1s–0.2s ease for hover/button feedback, 1s ease for scroll-triggered reveals
- Card border-radius is consistently `{rounded.lg}` (24px) for product tiles; buttons use `{rounded.pill}` exclusively

## Colors

### Primary Canvas
- **Black** (`{colors.background}`): The site-wide marketing canvas. Pure black — a bolder call than the near-black trend. All text, cards, and photography float on this foundation.
- **Dark Surface** (`{colors.surface}`): Slight lift for product cards at #121212 — barely perceptible but creates the card-on-canvas separation without a visible border.
- **Raised Surface** (`{colors.surface-raised}`): Used for card hover states and modal fills, still within the dark family.
- **White** (`{colors.surface-light}`): Reserved for App Store badge backgrounds and occasional contrast sections below the dark hero.

### Ink / Text
- **White** (`{colors.ink}`): Primary text on dark surfaces — headlines, CTAs, nav links in active state.
- **Medium Gray** (`{colors.ink-secondary}`): Supporting copy, pricing metadata, navigation links in rest state.
- **Muted Gray** (`{colors.ink-muted}`): Lowest-emphasis text — footer utility links, placeholder states.
- **Black** (`{colors.on-surface-light}`): Body text in the occasional light-section context.

### Brand Accent
- **Electric Blue** (`{colors.primary}`): The singular brand signal. Applied to primary CTAs, active navigation indicators, inline hyperlinks. The rarity of its use is what makes it register.
- **Deep Navy** (`{colors.primary-dark}`): Pro-tier product CTA — visually distinct from the standard blue, signals a higher-stakes purchase action.
- **Hover Blue** (`{colors.primary-hover}`): Darkened by ~13% for mouse-over feedback on `{colors.primary}` surfaces.
- **Container Blue** (`{colors.primary-container}`): Focus ring source and badge fill — a midpoint between the electric and the deep.

### Semantic
- **Error Red** (`{colors.error}`): CSS custom property `--error-font-color`. Validation messaging only.

### Borders & Shadow
- **Light Border** (`{colors.border}`): Product card outlines in light sections — a gray Tailwind value (gray-200).
- **Dark Border** (`{colors.border-dark}`): Subtle panel separators on dark surfaces.
- **Shadow Soft** (`{colors.shadow-soft}`): A gray 5px blur on image treatments — the only shadow in the system.

## Typography

### Font Family
- **Primary**: `system-ui, -apple-system, BlinkMacSystemFont`, with `Inter` as the cross-platform fallback. On Apple devices this resolves to SF Pro — a deliberate alignment with the iOS/iPadOS app it sells.
- **No custom or variable fonts** detected. The system relies entirely on native rendering for its typographic character.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Page-level hero headings — "Art is for everyone." |
| `display` | Section-level mega-headlines in feature blocks |
| `heading-section` | Primary section headings within scrollable content |
| `heading-sub` | Feature callout headings and large product labels |
| `title` | Card titles, feature sub-headers |
| `title-small` | Secondary card headings, list item titles |
| `overline` | Product family labels above the headline — uppercase, wide-tracked |
| `body-large` | Hero subheadlines and feature descriptions |
| `body` | Standard paragraph copy, nav links, footer text |
| `button-ui` | All button labels, UI control labels |
| `caption` | Pricing footnotes, metadata, legal copy |
| `label-uppercase` | Badges, category tags, tightest UI label use |

### Principles
- Weight 600 across all display sizes creates a unified semibold voice — there is no thin weight anywhere in the hierarchy
- Negative letterSpacing (−0.12px to −0.50px) tightens headlines to feel editorial; positive spacing (+0.28px to +0.9px) opens up small caps and labels
- No serif typeface exists in the system — the brand's expressiveness comes entirely from imagery, not typographic contrast
- The overline pattern (uppercase + wide tracking at 18px/600w) is the system's only display of typographic ornament
- Line-height 1.1 across large sizes keeps headline stacks compact; 1.5 at body sizes adds reading comfort

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 12px (the `md` token).

The spacing system is notably asymmetric: small values (4px, 8px, 12px) handle internal component padding, while large values jump aggressively to 90px and 130px for between-section vertical rhythm — producing that characteristic "cinematic breathing room" between product sections. Component internals are tight; page sections are generous.

### Grid & Container
- Max content width: approximately 1240px (the site's largest constrained breakpoint)
- 12-column or free-flow grid — the site uses Tailwind utility classes with arbitrary values
- Product cards appear in 2-column pairs at desktop, collapsing to single column at 700px
- Full-bleed imagery sections ignore the container entirely — photography extends edge to edge

### Whitespace Philosophy
- Dense at the component level: buttons, nav items, and labels use 10px vertical padding
- Expansive at the section level: 90px–130px gaps between page sections create visual breathing room
- The contrast between these scales — tight components, vast sections — is what gives the page its cinematic pacing

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default cards, all surface tiles |
| Subtle (Level 1) | `rgb(128,128,128) 0px 0px 5px 0px` | Image hover hazes, subtle photo lifts |
| Scrim | `linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0) 90%)` | Text-over-image overlays in hero |
| Focus Ring | `0 0 0 2px {colors.primary}` | Select / focus state — the blue signal |

**Shadow Philosophy**: Procreate's elevation system is essentially flat — only one actual shadow value was detected site-wide, and it's a gray blur on images, not on UI surfaces. Depth comes instead from surface-color steps (`{colors.background}` → `{colors.surface}` → `{colors.surface-raised}`), paralleling Apple's own UI philosophy where layers are defined by brightness offset rather than shadow projection. The single overlay scrim uses a black gradient to ensure white text remains legible over vibrant photography.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Dividers, full-bleed image containers, select inputs |
| `sm` | 12px | Accessibility/Pro-tier purchase buttons |
| `md` | 16px | Image insets within cards |
| `lg` | 24px | Product cards, major container tiles |
| `pill` | 9999px | All standard CTA buttons, tags, badges |

The system is essentially binary at the button level: everyday actions use `{rounded.pill}` (perfectly rounded), while Pro purchase calls-to-action use `{rounded.sm}` (a squared 12px radius with an explicit blue border) to signal purchase weight. Cards land at `{rounded.lg}` — 24px is unusually generous for a dark-mode design and reinforces the soft, non-aggressive approachability of an iPad-native app brand.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — Electric blue pill; the default CTA. "Buy now", "Download", "Get started". Background `{colors.primary}`, pill radius, 14px semibold label.
- **`button-primary-hover`** — Blue darkened to `{colors.primary-hover}` on hover. 0.1s ease transition.
- **`button-secondary`** — Dark-surface pill for secondary actions like "Learn more". Background `{colors.surface-raised}`, white text.
- **`button-secondary-hover`** — Darker surface fill on hover.
- **`button-pro`** — Pro-tier purchase button. Deep navy `{colors.primary-dark}` fill, 3px solid blue border, squared `{rounded.sm}` radius. Visually heavier than the standard pill.

### Cards

- **`card`** — Dark `{colors.surface}` fill, `{rounded.lg}` 24px radius, 24px internal padding. Used for feature content blocks.
- **`card-product`** — Product (app) card variant with 0 padding — the image bleeds to the rounded edge, with a text overlay inside.

### Inputs

- **`input-select`** — Minimal: transparent background, white text, no border, no radius. Used in the language/region selector. Focuses to a `{colors.border-dark}` fill with a `{colors.primary}` ring.

### Badges

- **`badge`** — Blue-container fill with white text, uppercase label type, pill radius. Used for product family tags.

### Navigation

- Top nav: transparent on scroll, sticky. Links in `{colors.ink-secondary}` at rest, transition to `{colors.ink}` on hover. The Procreate wordmark SVG (white reversed) sits left; CTA buttons appear right.
- Active state uses `{colors.ink}` (white) to distinguish the current section link.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for CTAs and interactive links — its scarcity is its power
- Apply `{rounded.pill}` to all standard action buttons; reserve `{rounded.sm}` for purchase-weight Pro CTAs
- Let full-bleed app photography carry chromatic color — the design system chrome should stay in grays and whites
- Use the `{typography.overline}` token (uppercase, 0.9px tracking) to announce product family names above headlines
- Maintain 90px–130px vertical gaps between major page sections — the cinematic breathing room is intentional
- Apply `{colors.primary-dark}` with a `{colors.primary}` border for Pro / higher-stakes purchase actions
- Use `{colors.border}` (Tailwind gray-200) only in light-section contexts; use `{colors.border-dark}` on dark surfaces
- Reference `{colors.error}` (the `--error-font-color` variable) for all validation and error states
- Keep heading typography at weight 600 throughout — no thin or light weight variants exist in this system
- Apply negative letterSpacing at all headline sizes: tighter headings = more editorial confidence

### Don't
- Don't introduce a second chromatic accent — no greens, oranges, purples, or teals alongside `{colors.primary}`
- Don't use pill radius (`{rounded.pill}`) for cards or container tiles — those take `{rounded.lg}` at 24px
- Don't add mid-range radius values (4px–11px) — the system jumps from `{rounded.none}` → `{rounded.sm}` → `{rounded.lg}` → pill
- Don't apply positive letterSpacing to body text — it belongs only on overlines and small-caps labels
- Don't use a serif typeface for any heading — the system has no serif and no decorative type whatsoever
- Don't use drop shadows on UI surface elements — shadows are for image hazes only
- Don't place `{colors.primary}` as a background fill on large surfaces — it is button- and link-only
- Don't reduce section spacing below 56px — tighter section gaps break the cinematic pacing
- Don't mix `{colors.ink-secondary}` and `{colors.ink-muted}` arbitrarily — secondary is for functional UI text, muted is for footnotes and captions
- Don't introduce background gradients on the hero canvas — the site intentionally withholds any gradient warmth

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | <420px | Single column, max font scale reduced, nav collapses |
| Mobile | 420–600px | Hero copy reflows, product cards stack |
| Mobile Large | 600–823px | Two-column begins for feature tiles |
| Tablet | 823–1080px | Product cards 2-up, nav partially visible |
| Desktop S | 1080–1240px | Full desktop nav visible, max content width approaching |
| Desktop | 1240–1483px | Constrained container at ~1240px, breathing room appears |
| Desktop L | 1483–1764px | Hero images scale up, typography tracking stays |
| Wide | >1764px | Fixed-width content centered, side whitespace grows |

### Touch Targets
- Pill buttons use 10px vertical padding at 14px font — approximately 34px tap height. At mobile, padding increases to maintain 44px minimum tap target per HIG (Apple's own spec, directly relevant to an iPad-first product)
- Navigation links at 16px have sufficient click area; mobile collapses to a hamburger or sheet overlay

### Collapsing Strategy
- Product cards: 2-column grid at desktop → single column at 700px
- Navigation: full horizontal at desktop → collapses at ~823px, likely to a mobile sheet
- Hero section: large typography scales down proportionally — the 70px hero `{typography.display-hero}` reduces to approximately 36–40px on mobile
- Vertical spacing: section gaps compress from 130px to approximately 56px–90px on smaller screens

### Image Behavior
- Full-bleed hero photography scales with the viewport — no fixed max-height, images fill edge to edge
- Product card screenshots are constrained within rounded containers; `{rounded.lg}` maintained at all sizes
- App artwork (colorful illustrations) serves as full-card fills — `object-fit: cover` with `{rounded.lg}` clipping

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent: `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border-dark}`
- CTA: `{colors.primary}`
- Error: `{colors.error}`

### Example Component Prompts

- "Build a hero section with background `{colors.background}`, a small uppercase overline label in `{colors.ink-secondary}` using `{typography.overline}` style, a white headline in `{typography.display-hero}` with −0.35px letterSpacing, a subtitle in `{typography.body-large}` at `{colors.ink-secondary}`, and a row of two pill buttons: a primary in `{colors.primary}` and a secondary in `{colors.surface-raised}`, both using `{typography.button-ui}` at `{rounded.pill}`."

- "Create a product card with background `{colors.surface}`, `{rounded.lg}` corners, a full-bleed image in the top half, and a bottom section with 24px padding containing: a product name in `{typography.title}` at `{colors.ink}`, a price in `{typography.caption}` at `{colors.ink-secondary}`, and a row with a secondary 'Learn more' button and a primary blue 'Buy now' button, both pills."

- "Design a navigation bar with a pure `{colors.background}` background, a white SVG wordmark on the left, horizontal nav links in `{typography.body}` at `{colors.ink-secondary}` that transition to `{colors.ink}` on hover over 0.2s ease, and two pill buttons on the right: one secondary (dark fill) and one primary blue, both sized with `{typography.button-ui}` and `{rounded.pill}`."

- "Build a product family announcement block with a `{colors.background}` canvas, a top overline badge using `{typography.overline}` in white on `{colors.primary-container}` at `{rounded.pill}`, a large heading in `{typography.heading-section}` at `{colors.ink}`, supporting body in `{typography.body-large}` at `{colors.ink-secondary}`, and a `{rounded.lg}` card below containing a full-bleed app screenshot."

- "Create a pricing/Pro CTA section on `{colors.surface}` background with a section heading in `{typography.title}` at `{colors.ink}`, a price in `{typography.display}` at `{colors.ink}`, a short descriptor in `{typography.body}` at `{colors.ink-secondary}`, and a Pro-tier purchase button: background `{colors.primary-dark}`, border `3px solid {colors.primary}`, text `{colors.on-primary}`, `{typography.button-ui}`, radius `{rounded.sm}`."

- "Render a full-page illustration showcase section: `{colors.background}` canvas with 130px vertical padding above and below, a headline in `{typography.display-hero}` at `{colors.ink}`, a caption in `{typography.caption}` at `{colors.ink-muted}`, and a 2-column grid of app artwork cards each with `{rounded.lg}` clipping and no padding."

### Iteration Guide

1. Start with `{colors.background}` as the page canvas — pure black, no warmth, no gradient
2. Electric blue (`{colors.primary}`) appears on CTAs and interactive links only — no large fills, no decorative use
3. All display and heading typography: weight 600, negative letterSpacing, system-ui/SF Pro stack
4. Section separation: use 90px–130px vertical gaps rather than dividers or gradient bands
5. Color hierarchy: `{colors.ink}` (white) for primary information, `{colors.ink-secondary}` for supporting text, `{colors.ink-muted}` for footnotes
6. Border radius is binary for buttons: always `{rounded.pill}`; for cards: always `{rounded.lg}` (24px)
7. Photography and app artwork are the sole source of chromatic warmth — the design system chrome never competes

---

## 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 Procreate. Brand names and trademarks belong to their respective owners.