---
title: "Affinity design system"
variant: extended
source: https://www.affinity.studio/
captured_at: 2026-10-12
theme: dark
industry: design
generator: Design DNA (https://four.wiralomi.com/style/affinity-studio)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Affinity · Design System

> Expressive editorial typography meets a dark creative canvas

**Theme:** dark · **Industry:** design · **Source:** https://www.affinity.studio/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Affinity pairs a near-black canvas with expressive serif headlines and vivid creative work. Carefully spaced feature stories, testimonials, and download options make the page feel like a portfolio as well as a software homepage.

## North star

Keep the interface restrained and dark so expressive serif typography, vivid creative work, and lime actions remain the focal points.

## Overview

The visual identity is built around a near-black canvas (#000000), with warm charcoal (#211d1d) forming broad alternating section bands. White serif display headlines provide a strong editorial voice, while Canva Sans handles navigation, body copy, and controls with clear utility. Lime (#a7f175) is the signature interaction colour, used for download actions and selected links; pale neutral buttons provide a quieter enterprise path. The content moves between centered, high-impact statements and carefully arranged product stories, with generous breathing room between major sections. Creative imagery is deliberately varied—illustration, interface captures, motion work, and photography—so the artwork carries colour while the surrounding interface stays restrained. Rounded cards, thin muted borders, and subtle inset depth contain product examples without turning the page into a dense dashboard. A white editorial-content band near the lower page creates a deliberate contrast before the dark download area and oversized branded footer.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#000000` | `--color-canvas-black` | brand | Primary page canvas, hero, navigation, dark feature areas, and footer. |
| Studio White | `#ffffff` | `--color-studio-white` | neutral | Primary text and headings on dark sections; also the editorial content band. |
| Creative Lime | `#a7f175` | `--color-creative-lime` | accent | Primary download buttons, selected links, and small emphasis marks. |
| Warm Charcoal | `#211d1d` | `--color-warm-charcoal` | surface | Large feature and testimonial section bands and selected feature cards. |
| Soft Silver | `#c4c4c4` | `--color-soft-silver` | neutral | Muted body copy, secondary links, and footer information. |
| Quiet Graphite | `#383434` | `--color-quiet-graphite` | semantic | Fine outlines and hairlines around cards and contained interface elements. |
| Midnight Slate | `#0f1015` | `--color-midnight-slate` | surface | Subtle dark navigation or supporting surface; use sparingly. |
| Violet Signal | `#a370fc` | `--color-violet-signal` | accent | Accent text and colour within product or creative examples, not a primary page action. |
| Footer Taupe | `#b0a79e` | `--color-footer-taupe` | semantic | Minor footer border detail; not a defining interface colour. |
| Pale Cloud | `#e8e8e8` | `--color-pale-cloud` | surface | Light footer or supporting surface detail, distinct from the main white band. |
| Studio Magenta | `#f075f1` | `--color-studio-magenta` | accent | Rare vivid detail inside creative artwork; avoid treating it as a site-wide UI accent. |
| Electric Cyan | `#2ec7ff` | `--color-electric-cyan` | accent | Artwork or product-preview detail only; not part of the core interface palette. |
| Artwork Orange | `#ff6124` | `--color-artwork-orange` | accent | Bright creative-preview detail, not a recurring page control colour. |
| Paper Cream | `#efe9de` | `--color-paper-cream` | surface | Light feature-card surface in the compatibility carousel. |
| Slate Gray | `#707477` | `--color-slate-gray` | neutral | Low-emphasis text detail; keep secondary to white and silver. |
| Mist Gray | `#b2b2b2` | `--color-mist-gray` | neutral | Minor muted text detail in supporting content. |
| Coral Detail | `#e35b67` | `--color-coral-detail` | accent | Colour appearing within a creative card; not a primary brand control. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#ffffff` (Studio White) · `--color-surface-2` → `#211d1d` (Warm Charcoal) · `--color-surface-3` → `#0f1015` (Midnight Slate) · `--color-surface-4` → `#e8e8e8` (Pale Cloud) · `--color-text` → `#ffffff` (Studio White) · `--color-text-muted` → `#000000` (Canvas Black) · `--color-text-subtle` → `#c4c4c4` (Soft Silver) · `--color-border` → `#383434` (Quiet Graphite) · `--color-accent` → `#a7f175` (Creative Lime) · `--color-accent-2` → `#a370fc` (Violet Signal) · `--color-accent-3` → `#e35b67` (Coral Detail) · `--color-on-accent` → `#0e1318`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#211d1d` | 16.69:1 | AAA |
| `#ffffff` | `#0f1015` | 19:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#211d1d` | 1.26:1 | fail |
| `#000000` | `#0f1015` | 1.11:1 | fail |
| `#c4c4c4` | `#000000` | 12.04:1 | AAA |
| `#c4c4c4` | `#ffffff` | 1.74:1 | fail |
| `#c4c4c4` | `#211d1d` | 9.57:1 | AAA |
| `#c4c4c4` | `#0f1015` | 10.89:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Canva Sans | `--font-body` | webfont | 401, 400, 500, 600 | Navigation, body text, buttons, and supporting headings. | Inter |
| Affinity Serif Variable | `--font-display` | webfont | 400, 700 | Display and headline typography, especially the hero and editorial section titles. | DM Serif Display |
| Times New Roman | `--font-times-new-roman` | system | 400 | Crawler-observed fallback text in a small number of card details. | Libre Baskerville |

- **Canva Sans:** Use clean sans-serif forms and restrained weights; keep labels in natural sentence case.
- **Affinity Serif Variable:** Use expressive, high-contrast serif forms for large statements; preserve the measured hierarchy.
- **Times New Roman:** Treat as incidental fallback noise; do not reproduce its tiny observed card typography as a brand rule.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 700 | 0.98 | 0 | — | Affinity Serif Variable | Oversized hero statement and major editorial moments. |
| h1 | 56px | 700 | 1 | 0 | — | Affinity Serif Variable | Primary page headline and major section title. |
| h2 | 48px | 400 | 1.1 | 0 | — | Affinity Serif Variable | Section-level statements and prominent content headlines. |
| h3 | 32px | 400 | 1.25 | 0 | — | Canva Sans | Feature headings and card titles. |
| h4 | 24px | 401 | 1.4 | 0 | — | Canva Sans | Supporting feature and content headings. |
| body | 16px | 401 | 1.5 | 0 | — | Canva Sans | Explanatory copy, testimonials, and descriptive text. |
| caption | 14px | 400 | 1.57 | 0 | — | Canva Sans | Attribution, metadata, and small supporting labels. |
| nav | 16px | 401 | 1.5 | 0 | — | Canva Sans | Header navigation and footer navigation links. |
| link | 24px | 401 | 1.4 | 0 | — | Canva Sans | Prominent editorial and enterprise links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 8, 12, 14, 16, 22, 24, 32, 40, 48, 80, 120 px.
- Section rhythm 120px · element gap 16px · card padding — · max content width 1288px.

Use a spacious page frame with a measured maximum content width of 1288px. The hero is centered within a full-bleed dark canvas and surrounded by loosely placed artwork. Subsequent sections alternate between full-width charcoal bands and black sections, with centered headings in feature areas and left-aligned editorial content where appropriate. Product examples use multi-column cards or split layouts; testimonials sit within broad open bands. Maintain the measured 120px section rhythm and 16px element rhythm as the underlying spacing references, avoiding cramped stacks.

## Shape & elevation

- Radius: button `12px` · card `20px` · nav `10px` · xs `6px` · sm `8px` · md `10px` · lg `12px` · xl `16px` · 2xl `20px` · pill `9999px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.12) 0px 1px 0.5px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.21) 0px 2px 5px 0px, rgba(0, 0, 0, 0.14) 0px 6px 12px 0px`
- Shadow `inset-2` (other): `rgba(255, 255, 255, 0.15) 0px 0px 0px 1px inset`
- Shadow `inset-3` (nav): `rgba(255, 255, 255, 0.035) 0px 0.294505px 0.147253px 0px inset, rgba(255, 255, 255, 0.03) 0px 0px 0px 0.147253px inset, rgba(0, 0, 0, 0.063) 0px 0.589011px 1.47253px 0px, rgba(0, 0, 0, 0.043) 0px 1.76`
- Shadow `inset-4` (button): `rgba(255, 255, 255, 0.5) 0px 0px 0px 1px inset`
- Shadow `inset-5` (button): `rgb(255, 255, 255) 0px 0px 0px 1px inset`
- Shadow `inset-6` (other): `rgba(255, 255, 255, 0.07) 0px 1px 0.5px 0px inset, rgba(255, 255, 255, 0.07) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.21) 0px 1px 2px 0px, rgba(0, 0, 0, 0.14) 0px 2px 4px 0px`
- Motion: standard transition `0.1s linear` on interactive elements.

The page is predominantly flat, using solid black and warm-charcoal section bands rather than layered shadows. Cards are defined mainly by rounded corners and subdued graphite borders. Reserve subtle inset highlights and soft depth for controls or contained interface elements; do not add heavy, floating shadows to every section.

## Imagery

Artwork is the main source of colour: the hero uses separately framed creative pieces around its centered statement, while later sections feature software interfaces, brand work, and product demonstrations. The page mixes illustration, photography, and video rather than applying one uniform treatment. Keep images crisp and contained in rounded cards or purposeful crops, and let saturated artwork contrast against the restrained dark surroundings.

## Components

### Primary download button

Lime fill (#a7f175), dark text (#0e1318), 12px radius, and measured padding of 8px 16px; used for prominent download actions.

### Enterprise button

Light neutral fill with dark text and the same measured button radius and padding; provides a quieter alternative to the lime action.

### Dark feature card

A product or capability card on black or warm charcoal, with a 20px radius and a thin muted outline where measured.

### Editorial feature band

Full-width warm-charcoal section with a centered serif heading, supporting copy, and a large product visual.

### Testimonial block

Large serif quote with a bright lime quotation mark, followed by compact attribution and a customer mark.

### Footer navigation

Dense multi-column link groups on black, ending in a large oversized Affinity wordmark treatment.

### Measured component styles

- **Primary button** (“Get Affinity”): background #a7f175 · text #0e1318 · radius 12px · padding 8px 16px · 500 14px Canva Sans
- **Secondary button** (“Get for enterprise”): background #e0dcd6 · text #0e1318 · radius 12px · padding 8px 16px · 500 16px Canva Sans
- **Link** (“What’s New in Affinity: Blend Tool, Scri”): transparent background · text #ffffff · radius 0px · padding 0px · 400 10px Times New Roman
- **Card** (“Mac Fully optimized for macOS. Runs nati”): transparent background · text #ffffff · border 1px solid #373434 · radius 20px · padding 0px · 400 10px Times New Roman
- **Navigation item** (“Product”): transparent background · text #ffffff · radius 0px · padding 0px · 400 13.3333px Arial

## Do

- Use black as the dominant page canvas.
- Alternate broad charcoal bands with black sections.
- Reserve lime for meaningful calls to action and emphasis.
- Use expressive serif faces for large editorial statements.
- Let product artwork supply most saturated colours.
- Keep borders subtle and card corners rounded.

## Don't

- Do not turn every section into a card grid.
- Do not use bright artwork colours as global UI accents.
- Do not replace the dark canvas with a gradient-heavy background.
- Do not use sans-serif styling for every large headline.
- Do not add strong shadows to otherwise flat sections.
- Do not crowd the page with tightly stacked content.

## Agent prompt

Build a new page in Affinity’s visual style with a near-black Canvas Black (#000000) foundation and broad Warm Charcoal (#211d1d) section bands. Use Studio White (#ffffff) for high-contrast text, Canva Sans-like sans-serif for navigation and body copy, and expressive serif headlines for major statements. Apply Creative Lime (#a7f175) selectively to primary actions and important links, with dark text on lime buttons. Keep the layout spacious, alternating centered feature moments with split product stories and editorial content. Use rounded, quietly outlined cards rather than heavy elevation. Make creative examples—illustration, interface imagery, or motion—the main source of vivid colour; Violet Signal (#a370fc), Electric Cyan (#2ec7ff), and Studio Magenta (#f075f1) should appear as artwork details, not site-wide controls. Finish with restrained multi-column navigation and an oversized brand mark.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark full-bleed canvas, centered headline and actions, with artwork pieces framing the copy. | Product and enterprise paths, Prominent download action | Oversized serif headline, Floating artwork panels, Lime primary button |
| 2 | feature-grid | Warm-charcoal feature band with centered introduction and a broad product showcase. | Feature explanation, Product capability showcase | Centered serif title, Interface collage, Compact tool selectors |
| 3 | testimonials | Open testimonial area within the charcoal band, with quote, attribution, and customer mark. | Customer proof, Attribution | Lime quote mark, Large serif quotation, Small customer signature |
| 4 | comparison | Black section with a left-aligned title and horizontally browsable capability cards. | Carousel browsing, Capability comparison | Rounded cards, Previous and next controls, Mixed card surfaces |
| 5 | feature-split | Two-column charcoal section with copy on one side and motion-design work on the other. | Related product discovery, External product action | Split composition, Embedded creative media, Compact secondary button |
| 6 | testimonials | Open quote and attribution beneath the creative workflow feature, on the same charcoal band. | Customer proof, Project attribution | Lime quote mark, Editorial quote, Brand logo |
| 7 | feature-grid | Black section with centered introduction and a varied two-column feature-card arrangement. | Feature discovery, Learn-more links | Dark feature card, Product screenshots, Contrasting card widths |
| 8 | content-feed | White editorial band with a three-column content layout and left-aligned headlines. | Article discovery, Read-time metadata | Editorial cards, Image-led previews, Dark text on white |
| 9 | pricing | Black section with centered download message and platform options arranged in three columns. | Platform selection, Free download, Enterprise contact | Platform cards, Lime download actions, Muted unavailable state |
| 10 | footer | Black footer with several columns of product, discovery, help, and contact links. | Multi-column navigation, Related resource discovery | Compact link groups, Section labels, Brand-led closing area |
| 11 | footer | Full-width black closing area with oversized wordmark and compact legal and social details. | Social links, Legal information, Language selection | Oversized brand wordmark, Fine divider, Compact utility row |

## Source CSS custom properties (selected)

```css
--R07nfg: calc(.1rem*12);
--GhB3bg: #ececec;
--eeOqfg: #a7f175b3;
--gFgXSg: #ffffff12;
--x7bg8nn: #3d8bff;
--xfgw0cl: calc(32 * .1rem);
--xz15bgx: -.01em;
--x1ecmbga: .15s cubic-bezier(.35, 0, .58, 1);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/affinity-studio