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

# A24 · Design System

> Cinematic imagery meets stark editorial restraint.

**Theme:** dark · **Industry:** entertainment · **Source:** https://a24films.com/ · **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._

A24’s homepage pairs a full-screen film still and oversized film titles with a long, editorial feed of shop, podcast, and film features. Stark black-and-white typography and generous white space keep the varied imagery feeling part of one distinctive studio identity.

## North star

Let expressive film and product imagery carry the emotion while a flat black-and-white editorial system stays quiet and precise.

## Overview

The page’s visual identity comes from a restrained black-and-white interface around richly colored film stills and product photography. Black (#000000) frames the opening hero and footer; white (#ffffff) fills the long central content run and carries navigation, headings, and links. Pale gray (#eeeeee) appears as a quiet field behind product imagery, while muted gray (#888888) softens secondary copy. NB International Web drives the oversized, tightly tracked hero titles as well as compact uppercase labels and body text, creating a clear scale contrast without decorative typography. The opening title list overlays full-bleed photography, while the rest of the page alternates spacious editorial feature rows: image on one side, text and a simple arrow link on the other. Film stills interrupt the white sequence as wide, immersive bands. Keep modules flat, edges square, and spacing generous; the imagery, not interface ornament, supplies the color and drama.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#000000` | `--color-studio-black` | brand | Opening hero and footer canvas; also supplies dark text and contrast against white. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main content canvas and the color for hero titles, navigation, headings, links, and footer text. |
| Soft Fog | `#eeeeee` | `--color-soft-fog` | surface | Pale product-card image fields that separate merchandise photography from the white page. |
| Quiet Gray | `#888888` | `--color-quiet-gray` | neutral | Muted secondary text, including subdued labels and supporting copy. |

### Semantic aliases

`--color-canvas` → `#000000` (Studio Black) · `--color-surface` → `#eeeeee` (Soft Fog) · `--color-surface-2` → `#ffffff` (Gallery White) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#000000` (Studio Black) · `--color-text-subtle` → `#888888` (Quiet Gray) · `--color-border` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#eeeeee` | 1.16:1 | fail |
| `#000000` | `#eeeeee` | 18.1:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#888888` | `#000000` | 5.92:1 | AA |
| `#888888` | `#eeeeee` | 3.06:1 | AA-large |
| `#888888` | `#ffffff` | 3.54:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NB International Web | `--font-body` | webfont | 500, 400 | Primary interface, titles, headings, navigation, body copy, captions, and links. | Inter |
| NB International Mono Web | `--font-mono` | webfont | 400 | Monospaced code-style text role; a minor accent in the measured type system. | IBM Plex Mono |

- **NB International Web:** Use medium for oversized display and headings, regular for supporting text; uppercase small labels, with tightly tracked display titles.
- **NB International Mono Web:** Regular weight; very tight tracking and compact line height. Use sparingly for any code-like detail.

### Type scale — Custom (ratio ≈ 2.221, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 74px | 500 | 0.92 | -0.04em | — | NB International Web | Oversized film titles layered over the full-bleed opening image. |
| h1 | 21px | 500 | 1 | 0.014em | uppercase | NB International Web | Compact uppercase section or content headings. |
| body | 15px | 400 | 1.67 | 0.005em | uppercase | NB International Web | Uppercase supporting copy and short descriptive text. |
| caption | 12px | 400 | 1.32 | -0.006em | uppercase | NB International Web | Small uppercase shop, podcast, and watch labels. |
| nav | 74px | 500 | 0.92 | -0.04em | — | NB International Web | Large, bold menu labels in the expanded navigation treatment. |
| link | 74px | 500 | 0.92 | -0.04em | — | NB International Web | Large editorial links, including oversized film-title entries. |
| code | 15px | 400 | 0.92 | -0.065em | — | NB International Mono Web | Minor monospaced detail where a code-like text treatment is needed. |

OpenType features in use: `"cpsp"`.

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 6, 9, 12, 22, 24, 36, 42, 48, 51, 54, 56, 96, 120 px.
- Section rhythm 102px · element gap — · card padding — · max content width 1368px.

Use a spacious, single-page editorial flow with a measured page maximum of 1368px. The opening hero is full bleed, while the central white run contains alternating image-and-copy feature rows; switch sides to create a deliberate rhythm. Film features return as full-width image bands. Keep text left-aligned, with strong negative space around image and text groups. The measured section gap is 102px, and the spacing system is based on a 2px unit with a varied scale. The overall density is spacious rather than dashboard-like.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The interface is predominantly flat: measurements report no shadows, no gradients, and no radius scale. Keep image and content edges square, with no raised-card styling. Separate modules using white space, shifts between black and white canvases, and changes in image scale rather than borders or decorative layers.

## Imagery

Use cinematic photographic stills as full-bleed hero and film-feature backgrounds, cropped to immerse rather than boxed into cards. Product images sit against pale gray fields; podcast features use monochrome portrait photography. Keep imagery crisp and largely untreated by interface effects. Rich browns, greens, and other colors in screenshots belong to the film and product imagery, not the interface palette.

## Components

### Full-bleed film hero

Use an edge-to-edge still with a stacked oversized title list and small year details; place minimal menu, centered mark, and search controls over the image.

### Editorial feature row

Pair an image with left-aligned text and a compact action link; alternate the image and copy sides across successive content rows.

### Product image field

Place merchandise photography on a flat #eeeeee field within the otherwise white content canvas; avoid card shadows and rounded corners.

### Film feature band

Use a full-width cinematic still with a small watch action and title anchored over the image.

### Arrow action link

Render shop and listen actions as restrained text links with a simple arrow, not as filled buttons.

### Footer and signup

Return to a black canvas for compact utility links, social links, and an email signup area with white text.

### Measured component styles

- **Primary button**: transparent background · text #ffffff · radius 0px · padding 6px · 400 15px NB International Web · uppercase
- **Link** (“Primetime 2026”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px NB International Web
- **Input**: transparent background · text #ffffff · radius 0px · padding 0px 0px 8px 0px · 500 74px NB International Web
- **Card**: background #000000 · text #000000 · radius 0px · padding 0px · 400 15px NB International Web
- **Navigation item** (“Films Television Docs Shop Membership No”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px NB International Web

## Do

- Use black and white as the interface’s dominant colors.
- Let large photographic stills define hero and film sections.
- Set titles in NB International Web or a close substitute.
- Use uppercase, compact labels for content categories.
- Alternate image and text placement in editorial rows.
- Keep product imagery on quiet pale-gray fields.
- Use whitespace and image scale to separate content.

## Don't

- Do not add gradients or decorative shadows.
- Do not round image or card corners.
- Do not introduce bright interface accents.
- Do not turn simple links into filled CTA buttons.
- Do not apply screenshot-dominant film colors as brand colors.
- Do not crowd the editorial rows with extra UI.
- Do not make the content feel like a uniform product grid.

## Agent prompt

Build a new entertainment-studio page in A24’s cinematic editorial style. Use Studio Black (#000000) and Gallery White (#ffffff) for the interface; reserve Soft Fog (#eeeeee) for restrained product-image fields and Quiet Gray (#888888) for secondary text. Start with a full-bleed film still, oversized tightly tracked title typography, and minimal overlay navigation. Continue with spacious, alternating image-and-copy rows, punctuated by wide film stills. Use NB International Web or Inter, compact uppercase labels, and simple arrow links rather than filled buttons. Keep square edges, flat surfaces, and generous measured-style spacing; do not add shadows, gradients, or ornamental borders. Treat colors inside photographs as image content, not palette additions. Finish with a compact black footer and clear signup area.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed opening image with oversized title list overlaid at lower left. | film-title links, minimal menu, scroll cue | edge-to-edge photo, white display type, dark canvas |
| 2 | product-showcase | Product image and copy in a spacious two-column feature row. | shop link, product discovery | white canvas, pale image field, arrow action |
| 3 | feature-split | Podcast title and category opposite a wide portrait image. | listen link, editorial feature | alternating split, uppercase label, monochrome photo |
| 4 | product-showcase | Book image and title in a spacious two-column row. | shop link, product discovery | white canvas, pale image field, arrow action |
| 5 | video | Full-width cinematic image band with title and watch link overlaid. | watch now, film discovery | full-bleed still, overlay title, minimal label |
| 6 | product-showcase | Membership product image paired with title and shop action. | shop link, membership discovery | white canvas, editorial split, arrow action |
| 7 | feature-split | Podcast copy and category opposite a wide guest portrait. | listen link, episode discovery | alternating split, monochrome photo, small label |
| 8 | product-showcase | Blu-ray image and title arranged as a two-column feature. | shop link, product discovery | pale image field, white canvas, arrow action |
| 9 | video | Full-width film image with an overlaid title and watch action. | watch now, film discovery | full-bleed image, overlay copy, wide band |
| 10 | feature-split | Wide portrait image paired with podcast title and listen action. | listen link, episode discovery | alternating split, monochrome portrait, uppercase label |
| 11 | product-showcase | Product image and copy in an alternating split row. | shop link, product discovery | white canvas, pale image field, arrow action |
| 12 | product-showcase | Product photography and title in a two-column row. | shop link, product discovery | isolated merchandise, white canvas, large heading |
| 13 | video | Full-bleed still with overlaid title and watch link. | watch now, film discovery | wide image band, overlay copy, minimal label |
| 14 | product-showcase | Book image paired with title and shop link in a spacious split. | shop link, book discovery | pale image field, white canvas, arrow action |
| 15 | product-showcase | T-shirt image and title in an alternating two-column row. | shop link, product discovery | isolated product image, white canvas, large heading |
| 16 | footer | Compact black footer divided into three utility and signup areas. | email signup, social links, utility navigation | black canvas, white text, compact columns |

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