---
version: alpha
name: Affinity
description: Dark creative suite — ink-black canvas, signature lime-green CTA, variable serif display type, and vibrant artwork photography that lets color-saturated user content do the heavy lifting.

colors:
  # Canvas / surfaces (dark-first)
  background: "#0e1318"        # near-black base canvas, rgb(14,19,24)
  surface: "#0f1015"           # deeper card background, rgb(15,16,21)
  surface-elevated: "#211d1d"  # raised element bg — was rgb(33,29,29)
  surface-overlay: "#1a1a1f"   # modal/drawer surface — opaque approx of rgba(255,255,255,0.07) over #0e1318

  # Ink / text
  ink: "#ffffff"
  ink-secondary: "#c4c4c4"     # muted labels, secondary copy
  ink-tertiary: "#7f7f7f"      # placeholders, disabled labels — opaque approx of rgba(255,255,255,0.5) over dark
  on-primary: "#0e1318"        # text on lime CTA

  # Brand accent — the lime
  primary: "#a7f175"           # signature Affinity lime-green CTA
  primary-hover: "#8ecd63"     # hover state for lime CTA
  primary-container: "#1f3314" # tinted surface behind lime elements — opaque approx derived from lime at low opacity

  # App studio colors (Designer / Photo / Publisher)
  app-designer: "#6aaae4"      # Affinity Designer blue
  app-photo: "#9b6fc5"         # Affinity Photo purple /* estimated: brand color */
  app-publisher: "#e05c5c"     # Affinity Publisher red /* estimated: brand color */

  # Interaction
  link: "#9e9eff"              # in-text links — rgb(158,158,255)
  link-hover: "#3860be"        # link hover state
  focus-ring: "#a7f175"        # focus ring matches primary lime

  # Borders
  border: "#5c5c5c"            # component border in dark context — rgb(92,92,92)
  border-subtle: "#2a2a2a"     # dividers, low-contrast separators — opaque approx

  # Semantic
  error: "#e05c5c"             # destructive/error — opaque approx /* estimated */
  success: "#a7f175"           # success maps to lime (single-accent system)

  # Shadow tints
  shadow-dark: "#000000"       # primary shadow color at high opacity
  shadow-soft: "#182c59"       # cool blue-tinted shadow — was rgba(24,44,89,...) from dembrandt

typography:
  display-hero:
    fontFamily: "Affinity Serif Variable, Georgia, Times New Roman, serif"
    fontSize: 112px
    fontWeight: 700
    lineHeight: 0.96
    letterSpacing: -2px
  display:
    fontFamily: "Affinity Serif Variable, Georgia, Times New Roman, serif"
    fontSize: 80px
    fontWeight: 700
    lineHeight: 0.98
    letterSpacing: -1.5px
  heading-section:
    fontFamily: "Affinity Serif Variable, Georgia, Times New Roman, serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: -0.8px
  heading-sub:
    fontFamily: "Canva Sans, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Canva Sans, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  body:
    fontFamily: "Canva Sans, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-medium:
    fontFamily: "Canva Sans, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "Canva Sans, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.57
    letterSpacing: 0px
  button-ui:
    fontFamily: "Canva Sans, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: 0px
  caption:
    fontFamily: "Canva Sans, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 0.12px
  label-small:
    fontFamily: "Canva Sans, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.57
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 16px
  pill: 9999px
  circle: 9999px  # used for avatar/icon circles — equivalent to 50% in practice

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    border: "1px solid {colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.ink}"
  button-ghost:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-ghost-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: 24px
    border: "1px solid {colors.border-subtle}"
  card-app:
    backgroundColor: "{colors.surface-elevated}"
    rounded: "{rounded.md}"
    padding: 32px
  input:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    border: "1px solid {colors.border}"
  input-focus:
    border: "1px solid {colors.focus-ring}"
    backgroundColor: "{colors.surface-elevated}"
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-app:
    backgroundColor: "{colors.app-designer}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 24px
  nav-cta:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
---

# Affinity Design System

## Overview

Affinity's design language begins with absolute darkness — a near-black canvas at `{colors.background}` that functions as a gallery wall rather than a neutral ground. The interface recedes entirely, leaving vivid artwork, photography, and user-created content to command attention. This is a deliberate inversion of the tools-forward approach: Affinity hides its chrome so the work made inside it can glow. One electric lime `{colors.primary}` punctuates the darkness — the only chromatic signature the brand owns outright — applied exclusively to primary CTAs. Everything else is monochrome discipline.

The typographic system splits personalities with precision. Large headlines deploy Affinity Serif Variable, a proprietary variable serif with tight `{typography.display-hero}` tracking at -2px and compressed line height near 0.96 — dramatic, almost poster-like. Body copy and UI chrome switch to Canva Sans (the new owner's typeface), a clean geometric sans that handles legibility at small sizes without competing for attention. The serif/sans pairing is unusual for a productivity tool: the serif carries editorial weight while the sans provides clarity. It signals ambition while maintaining approachability.

The three studio product lines — Designer, Publisher, and Photo — each carry their own chromatic identities (`{colors.app-designer}`, `{colors.app-photo}`, `{colors.app-publisher}`), used as accent colors on product-specific cards and navigation elements. These trio colors function as wayfinding within the unified Affinity system, kept subordinate to the lime primary so the suite feels coherent rather than fragmented.

**Key Characteristics:**
- `{colors.background}` near-black base canvas — content, not UI, carries all color
- Single lime accent `{colors.primary}` for CTAs only — zero chromatic competition
- Affinity Serif Variable at `{typography.display-hero}` sizing — editorial poster headlines
- Canva Sans body system: clean, efficient, subordinate to display serif
- Three app colors (`{colors.app-designer}` / `{colors.app-photo}` / `{colors.app-publisher}`) for product wayfinding
- `{rounded.sm}` (8px) dominant radius — consistently soft but not playful
- Multi-layered dark shadows (`{colors.shadow-dark}` + `{colors.shadow-soft}`) create floating effect for UI panels
- Artwork photography as primary content medium — bright, saturated, editorial
- Radial gradient teal-to-lime (`{colors.primary}` → teal) on background hero sections
- `{colors.link}` periwinkle in-text links — separated from lime CTA hierarchy
- Generous whitespace within an overall dark palette — content breathes inside the void
- Variable font with weight axis enables typographic precision without multiple file loads

## Colors

### Primary Canvas
- **Near-Black** (`{colors.background}`): The foundational canvas. Dark enough that all placed artwork pops without any chromatic interference. Not pure black — the slight warmth of `#0e1318` avoids harshness.
- **Deep Surface** (`{colors.surface}`): Slightly deeper card and panel backgrounds, creating layering without requiring shadows on every element.
- **Raised Surface** (`{colors.surface-elevated}`): Component backgrounds — buttons, inputs, utility bars. Built from the near-black palette at a visible step up.

### Brand Accent
- **Lime Green** (`{colors.primary}`): The signature Affinity CTA color. Used exclusively for primary download and purchase actions. Its yellow-green saturation pops against `{colors.background}` with maximum contrast. On hover, `{colors.primary-hover}` shifts slightly darker to confirm interaction.
- **Lime Container** (`{colors.primary-container}`): Tinted surface behind lime badges and inline accents — keeps the lime family coherent without the full CTA intensity.

### App Colors
- **Designer Blue** (`{colors.app-designer}`): Navigation and card accents for Affinity Designer. A calm sky blue.
- **Photo Purple** (`{colors.app-photo}`): Product accents for Affinity Photo. Rich mid-purple.
- **Publisher Red** (`{colors.app-publisher}`): Product accents for Affinity Publisher. Warm coral-red.

### Ink / Text
- **Primary Ink** (`{colors.ink}`): Pure white — high contrast on the dark canvas.
- **Secondary Ink** (`{colors.ink-secondary}`): Mid-gray for supporting copy, labels, and secondary information.
- **Tertiary Ink** (`{colors.ink-tertiary}`): Reduced-opacity equivalent for placeholders and disabled states — opaque approximation of rgba(255,255,255,0.5) on dark.
- **On-Primary** (`{colors.on-primary}`): The dark base color applied as text on the lime CTA — ensures legibility without introducing a new color.

### Interaction & State
- **Link** (`{colors.link}`): Periwinkle-blue for in-text hyperlinks — distinguished from the lime hierarchy.
- **Border** (`{colors.border}`): Mid-gray strokes on dark surfaces — provides edge definition without aggression.
- **Focus Ring** (`{colors.focus-ring}`): Lime matches the primary so focus states feel intentional rather than accessible-only boilerplate.

### Shadow
- **Shadow Dark** (`{colors.shadow-dark}`): Pure black at moderate-to-high opacity for multi-layer drop shadows.
- **Shadow Soft** (`{colors.shadow-soft}`): Cool navy-blue tint — appears as the ambient layer in the layered shadow formula, giving elevated panels a slight color depth.

## Typography

### Font Family
- **Display**: `Affinity Serif Variable`, with fallbacks: `Georgia, Times New Roman, serif` — proprietary variable serif, weight 700 in display use
- **UI / Body**: `Canva Sans`, with fallbacks: `system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif` — owner Canva's geometric sans
- **Variable Fonts**: Both typefaces are variable, loaded as self-hosted woff2 files. No Google Fonts dependency.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero page titles — "The one app for all your creative work" |
| `display` | Section heroes, feature page headers |
| `heading-section` | Section headings, marketing callouts |
| `heading-sub` | Sub-section headers, feature names |
| `body-large` | Lead paragraphs, marketing body copy |
| `body` | Standard content, descriptions |
| `body-medium` | Emphasized body — pricing, feature bullets |
| `nav-link` | Navigation items, tab labels |
| `button-ui` | CTA buttons, action labels |
| `caption` | Labels, overlines, tags |
| `label-small` | Metadata, timestamps, fine print |

### Principles
- The serif/sans split is intentional: serif for emotion and brand impression, sans for utility and information
- Display type is set very tight (line-height ≈ 0.96) for poster-like density — not suited below 56px
- No italic usage in the primary hierarchy — the variable weight axis handles emphasis
- `{typography.button-ui}` at weight 500 is standard across all interactive elements — consistent tap targets
- Body type at 1.50 line-height ensures readability inside the dark context without eye strain

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Affinity uses 8px as its fundamental unit, with 4px for tight component internals. The scale is generous at the upper end — `{spacing.3xl}` at 64px provides real visual breathing room between marketing sections. Within components, `{spacing.md}` (16px) governs most padding.

### Grid & Container
- Max content width: 1650px (primary breakpoint)
- Standard container: 1280px for content-heavy sections
- Mobile breakpoints start at 400px, with major layout shifts at 768px, 900px, and 1200px
- Hero sections span full viewport width; content containers constrain the text layer

### Whitespace Philosophy
- Dark canvas demands generous whitespace — tight layouts would feel claustrophobic on `{colors.background}`
- Photography and artwork are sized generously to fill visual weight that color cannot
- Card padding defaults to `{spacing.lg}` (24px) minimum, `{spacing.xl}` (32px) on feature cards

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, content areas |
| Subtle (Level 1) | `rgba(64,79,109,0.06) 0px 0px 0px 0.5px, rgba(24,44,89,0.14) 0px 2px 4px 0px` | Cards, panels on dark surface |
| Card (Level 2) | `rgba(0,0,0,0.3) 0px 2px 4px, rgba(0,0,0,0.2) 0px 4px 8px` | Standard floating components |
| Elevated (Level 3) | `rgba(0,0,0,0.32) -20px 34px 64px 0px` | Feature showcase frames, large UI mockups |
| Dialog (Level 4+) | Full multi-layer composite | Modal dialogs, dropdowns |
| Focus Ring | `0 0 0 2px {colors.focus-ring}` | Interactive element focus states |

**Shadow Philosophy**: Affinity's shadows are explicitly dark-mode tuned. The elevated card formula layers a hairline `{colors.shadow-soft}` ring at 0.5px for edge definition, then builds outward with warm-black diffuse layers. The hero product showcase uses an extreme 64px blur at -20px horizontal offset to create a dramatic floating-object effect — the kind of treatment that makes UI mockups read as physical objects. This is shadow as spectacle, not shadow as utility.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed images, edge-flush panels |
| `xs` | 4px | Inline tags, chip borders |
| `sm` | 8px | Buttons, inputs, standard cards — dominant radius |
| `md` | 16px | Feature cards, modal containers, product screenshots |
| `pill` | 9999px | Badges, labels, toggle switches |
| `circle` | 50% | Avatar images, app icons, circular indicators |

The dominant radius is `{rounded.sm}` (8px) — applied to every interactive element. This choice sits between the sharp precision of a pro-tool interface and the softness of a consumer app, reflecting Affinity's positioning as professional-grade but approachable. The `{rounded.md}` (16px) tier appears on larger containers, adding visual comfort to the dark canvas without losing the crisp edge quality.

## 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`** — Lime `{colors.primary}` fill on dark ink text `{colors.on-primary}`. The sole warm color in the interface. Used for "Download for Free" and primary purchase CTAs. 8px radius, 16px horizontal padding.
- **`button-secondary`** — Dark surface `{colors.surface-elevated}` with `{colors.border}` stroke. White text. Used for enterprise actions and secondary conversion paths. Same radius as primary for visual consistency.
- **`button-ghost`** — Semi-transparent dark fill `{colors.surface-overlay}` with reduced-opacity ink. Used for utility actions ("Reduce motion", inline toggles) that should not compete with CTAs.
- **`nav-cta`** — Lime primary in the navigation bar, sized smaller than page CTAs. The nav stays dark except for this single accent.

### Cards

- **`card`** — Dark `{colors.surface}` base with subtle border at `{colors.border-subtle}`. 16px radius. Used for feature lists and comparison tables.
- **`card-app`** — Slightly raised `{colors.surface-elevated}` for product-tier cards (Designer, Photo, Publisher). The subtle step in depth distinguishes selectable options from static content.

### Inputs

- **`input`** — Dark `{colors.surface-elevated}` fill with `{colors.border}` stroke. White ink, 8px radius. Inputs match button geometry for consistency.
- **`input-focus`** — Border transitions to `{colors.focus-ring}` (lime) on focus — same lime family as primary CTA, reinforcing the accent system.

### Badges / Tags

- **`badge`** — Lime-container tint with lime text. Pill geometry. Used for "New", "Beta", feature callouts.
- **`badge-app`** — Colored per app (designer/photo/publisher). Used on product navigation to visually separate suite members.

### Navigation

A dark `{colors.background}` bar with Canva Sans nav links in `{colors.ink}`. Navigation CTA (lime "Get Affinity" button) sits at the far right. On mobile, collapses to a hamburger. Sticky on scroll with subtle background blur.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for primary CTAs — one lime per screen, maximum two
- Set display type in Affinity Serif Variable at tight tracking (`{typography.display-hero}`) — the compressed line height is intentional
- Let artwork photography dominate content sections — the dark canvas is the negative space for user-created work
- Apply `{rounded.sm}` (8px) to all interactive elements — maintain consistency across button and input geometry
- Use `{colors.app-designer}`, `{colors.app-photo}`, `{colors.app-publisher}` only for product-specific wayfinding, never as general accent colors
- Maintain the two-type-family split: Affinity Serif Variable for emotion, Canva Sans for utility
- Layer shadows using the multi-level formula (`{colors.shadow-dark}` + `{colors.shadow-soft}`) — single-layer shadows look flat against the dark background
- Keep the background `{colors.background}` as the page canvas — do not introduce new dark tones below this level

### Don't
- Don't use `{colors.primary}` for decorative elements, icon fills, or secondary text — it loses CTA authority immediately
- Don't introduce mid-size border radius values between `{rounded.sm}` and `{rounded.md}` — the 8px / 16px system is binary for components vs containers
- Don't place lime text on any background other than `{colors.background}` or its close variants — contrast needs validation on mid-dark surfaces
- Don't apply the Affinity Serif Variable to body copy or small labels — it is display-only; Canva Sans handles everything under 32px
- Don't add extra colors to the product trio (`{colors.app-designer}`, `{colors.app-photo}`, `{colors.app-publisher}`) — the three are intentionally fixed and exhaustive
- Don't use `{colors.link}` periwinkle for non-link elements — the distinction between lime (action) and periwinkle (navigation) is load-bearing
- Don't fill a page section with `{colors.background}` without visual content — the dark canvas works because artwork provides color; empty dark sections feel like voids
- Don't use shadows lighter than the Level 1 formula for dark-mode cards — thin box-shadows disappear against `{colors.surface}`

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single-column, max-width hero text, stacked app cards |
| Mobile | 425–768px | Single-column layout, reduced hero font scale |
| Tablet | 769–1023px | Two-column feature grid, condensed nav |
| Desktop | 1024–1280px | Full nav, three-column app grid, side-by-side feature sections |
| Wide Desktop | 1281–1649px | Expanded container, larger hero artwork |
| Large Desktop | >1650px | Max-width container locks, artwork centered |

### Touch Targets
- All buttons use minimum 44px touch target height in practice via padding
- Nav items on mobile expand to full-width tap targets
- `{rounded.sm}` (8px) buttons maintain visual consistency across touch and pointer contexts

### Collapsing Strategy
- Navigation collapses to hamburger below 900px; the lime CTA persists as a standalone button
- Hero typography scales down proportionally: `{typography.display-hero}` reduces to approximately 56–64px on mobile
- Three-column app product grid collapses to single column below 768px
- Feature artwork shifts from side-by-side to stacked-with-full-width-image on mobile

### Image Behavior
- Artwork photography is served via responsive CDN (`cdn-cgi/image/width=`) with device-appropriate sizing
- Hero background art crops to portrait aspect on narrow viewports
- Product screenshot mockups use `object-fit: contain` to preserve proportions within constrained containers

---

## Agent Prompt Guide

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

### Example Component Prompts

- "Build an Affinity-style hero section: full-width dark background `{colors.background}`, centered Affinity Serif Variable headline at `{typography.display-hero}` sizing with tight 0.96 line-height and -2px tracking in `{colors.ink}`, subtitle in `{typography.body-large}` at `{colors.ink-secondary}`, two buttons side by side — primary lime `{colors.primary}` with `{colors.on-primary}` text using `{typography.button-ui}` at `{rounded.sm}` with 8px 16px padding, secondary ghost button at `{colors.surface-elevated}` with `{colors.border}` stroke."

- "Build an Affinity-style product card: background `{colors.surface-elevated}` at `{rounded.md}`, 32px padding, small app-color badge (`{colors.app-designer}`) using `{typography.caption}` at `{rounded.pill}` with 4px 10px padding, product name in `{typography.heading-sub}` in `{colors.ink}`, feature list in `{typography.body}` at `{colors.ink-secondary}`, lime CTA button at the bottom using `{components.button-primary}`, multi-layer shadow formula: `rgba(0,0,0,0.3) 0px 2px 4px, rgba(0,0,0,0.2) 0px 4px 8px`."

- "Build an Affinity-style navigation bar: background `{colors.background}`, wordmark at left in `{colors.ink}`, nav links using `{typography.nav-link}` at `{colors.ink-secondary}` with hover to `{colors.ink}`, right-aligned lime CTA button using `{components.nav-cta}`, 24px horizontal padding. Sticky with `backdrop-filter: blur(12px)` and slight `{colors.surface}` tint on scroll."

- "Build an Affinity-style feature section: dark `{colors.background}` canvas, section heading in `{typography.heading-section}` using Affinity Serif Variable at `{colors.ink}` with tight tracking, three-column grid of feature cards using `{components.card}` at `{rounded.md}`, each card with a `{colors.primary-container}` icon container at `{rounded.sm}`, feature title in `{typography.body-medium}`, description in `{typography.body}` at `{colors.ink-secondary}`. Cards hover-lift via shadow transition from Level 1 to Level 2 formula."

- "Build an Affinity-style pricing badge: pill shape at `{rounded.pill}`, background `{colors.primary-container}`, text `{colors.primary}` using `{typography.caption}` at weight 700, 4px 10px padding. Position as an absolute overlay on top-right of a product card to indicate 'New' or 'Popular'."

### Iteration Guide

1. **Start with the canvas** — set `background: {colors.background}` as the page root. The dark canvas is non-negotiable; everything else layers on it.
2. **Lime is singular** — one `{colors.primary}` CTA per screen region. If you have two primary actions, demote the lesser one to `{components.button-secondary}`.
3. **Typography split** — all display text above 32px uses Affinity Serif Variable. Below 32px, use Canva Sans. Never mix in the same heading level.
4. **Shadow formula** — always use at least a two-layer shadow for anything elevated on dark: a tight 2px rise and a soft 8px diffuse. Single-layer shadows disappear on `{colors.surface}`.
5. **Color hierarchy** — `{colors.ink}` for primary content, `{colors.ink-secondary}` for supporting text, `{colors.ink-tertiary}` for placeholders. Never jump straight to tertiary without a secondary layer.
6. **Radius discipline** — `{rounded.sm}` (8px) for all interactive components, `{rounded.md}` (16px) for containers and modals. The gap between these two is the only radius range.
7. **App colors as wayfinding only** — `{colors.app-designer}`, `{colors.app-photo}`, `{colors.app-publisher}` appear once per card to identify the product. Remove them from any element that isn't product-specific navigation or labeling.

---

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