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

# Athletics · Design System

> Editorial typography meets a confident dark canvas.

**Theme:** dark · **Industry:** agency · **Source:** https://athleticsnyc.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._

Athletics pairs oversized editorial typography with a restrained dark canvas to present its brand studio practice. Full-bleed motion, a long-form work showcase, and concise studio content make the page feel like a curated portfolio.

## North star

Let oversized, light serif headlines lead across a restrained dark canvas, and treat vivid color as content imagery rather than interface chrome.

## Overview

The page is built around a near-black and charcoal foundation: #000000 anchors the full-bleed opening video, while #1d1d1d carries the long run of studio content. White is reserved for high-contrast display text, navigation, and key controls; the muted metal tone appears sparingly in the footer. The opening’s bright gradients and colorful portfolio artwork belong to embedded media, not the core interface palette. Feature Deck supplies the light, high-contrast serif headlines, creating a distinctly editorial counterpoint to Söhne’s quiet sans-serif navigation, labels, and body copy. The hero places a large left-aligned statement beneath centered motion; subsequent two-column text blocks and a broad specialty list alternate with a tall, staggered project gallery. Generous dark breathing room separates these sections. The overall layout stays flat and unboxed, using imagery and contrast rather than shadows or card borders to establish hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio White | `#ffffff` | `--color-studio-white` | neutral | High-contrast display and body text, client marks, footer surfaces, and the Subscribe button. |
| Charcoal Canvas | `#1d1d1d` | `--color-charcoal-canvas` | surface | Main content background, navigation area, and the continuous dark band behind studio sections. |
| Stage Black | `#000000` | `--color-stage-black` | surface | Opening hero canvas and black areas within selected portfolio media. |
| Metal Haze | `#d6d5d0` | `--color-metal-haze` | neutral | Muted footer detail; a minor interface color, not a defining page surface. |

### Semantic aliases

`--color-canvas` → `#1d1d1d` (Charcoal Canvas) · `--color-surface` → `#ffffff` (Studio White) · `--color-surface-2` → `#000000` (Stage Black) · `--color-text` → `#ffffff` (Studio White) · `--color-text-muted` → `#1d1d1d` (Charcoal Canvas) · `--color-border` → `#ffffff` (Studio White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#1d1d1d` | 16.86:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#1d1d1d` | `#ffffff` | 16.86:1 | AAA |
| `#1d1d1d` | `#000000` | 1.25:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Söhne | `--font-body` | webfont | 300 | Navigation, body copy, small labels, buttons, and links. | Inter |
| Feature Deck | `--font-display` | webfont | 300 | Display, h1, and h2 editorial headlines. | Cormorant Garamond |

- **Söhne:** Light 300 weight dominates; use compact, calm sans-serif copy and preserve sentence case.
- **Feature Deck:** Light 300 serif with delicate contrast; keep headlines large, left aligned, and naturally wrapped.

### Type scale — Golden Ratio (ratio ≈ 1.616, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 116px | 300 | 1.05 | -0.009em | — | Feature Deck | Oversized opening statement and other highest-impact editorial headlines. |
| h1 | 82px | 300 | 1.1 | -0.018em | — | Feature Deck | Primary section statements, including the studio proposition. |
| h2 | 72px | 300 | 1.1 | 0 | — | Feature Deck | Large secondary editorial headings and principle statements. |
| h3 | 22px | 300 | 1.3 | 0 | — | Söhne | Small section headings and supporting labels. |
| body | 17px | 300 | 1.3 | 0 | — | Söhne | Studio descriptions, explanatory paragraphs, and footer copy. |
| button | 17px | 300 | 1.3 | 0 | — | Söhne | Newsletter Subscribe button label. |
| nav | 17px | 300 | 1.3 | 0 | — | Söhne | Primary navigation and footer navigation links. |
| link | 22px | 300 | 1.3 | 0 | — | Söhne | Prominent inline links such as approach and portfolio actions. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 5, 9, 12, 16, 20, 22, 24, 32, 48, 64, 128, 144 px.
- Section rhythm 48px · element gap 5px · card padding — · max content width 1392px.

The measured page max width is 1392px, with the hero and video extending edge to edge. The hero statement and section headings align to the left, while studio introduction and process content use two-column arrangements. A long specialty list and staggered vertical portfolio gallery create a deliberate change of pace. Content remains relatively comfortable in density, with generous dark intervals between sections; the client marks form a compact horizontal band. Follow the measured spacing scale and section gap rather than adding arbitrary dimensions.

## Shape & elevation

- Radius: button `9999px` · link `9999px` · xs `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat: no measured shadows, card system, or persistent border treatment defines the page. Contrast between black and charcoal sections, white type, and the media itself establishes hierarchy. Use the observed pill-shaped actions, while keeping text links unboxed and input treatment restrained. Do not add elevation effects to portfolio previews.

## Imagery

A full-bleed video anchors the hero, with a large animated or dimensional Athletics mark above the headline. The work section uses staggered, perspective-tilted project previews, each retaining its own vivid client palette; these are embedded portfolio media, not interface color tokens. Later, a small team photograph sits alongside the principles copy. Keep image edges clean and avoid decorative frames.

## Components

### Primary navigation

Athletics wordmark sits at the left, with Work, About, Approach, Careers, and Contact aligned on the right over the dark canvas.

### Hero

Full-bleed black video area pairs a centered brand mark with a large, left-aligned light serif headline.

### Studio text split

A small sans-serif section label introduces a large serif statement on the left and concise supporting copy on the right.

### Specialties list

Four lettered disciplines appear as a wide, spacious list with large serif names against charcoal.

### Work gallery

Project artwork is presented as a tall, staggered sequence of tilted previews, followed by a lavender pill-shaped View All Work action.

### Client marks

A compact horizontal strip of client logos sits on the charcoal canvas, with no prominent card containers.

### Newsletter form

Footer form combines a small email prompt, understated input with a bottom hairline, and a white pill Subscribe button.

### Measured component styles

- **Primary button** (“Subscribe”): background #ffffff · text #1d1d1d · radius 9999px · padding 20px 0px · 300 16.8624px Söhne
- **Link** (“Learn about our approach”): transparent background · text #ffffff · radius 0px · padding 0px · 300 22px Söhne
- **Input**: transparent background · text #ffffff · radius 0px · padding 0px 0px 20px 0px · 300 16.8624px Söhne
- **Navigation item** (“Work About Approach Careers Contact”): transparent background · text #1d1d1d · radius 0px · padding 0px · 300 16.8624px Söhne

## Do

- Use #000000 for the full-bleed hero and #1d1d1d for the main content field.
- Set major statements in a light editorial serif with generous scale.
- Keep navigation, labels, and supporting copy in restrained sans-serif type.
- Use white for key type and clear controls against dark surfaces.
- Let project artwork retain its own vivid colors without recoloring the interface.
- Separate content with generous dark breathing room and varied section layouts.

## Don't

- Do not turn the charcoal page into a light or colorful interface.
- Do not use portfolio artwork colors as global UI accents.
- Do not wrap every content group in a card or add drop shadows.
- Do not make the main headlines bold, uppercase, or sans-serif.
- Do not crowd the page with dense copy or tightly stacked sections.
- Do not add borders around media that are absent from the reference.

## Agent prompt

Build a new Athletics-style brand studio page with a restrained dark editorial system. Use Stage Black (#000000) for a full-bleed motion-led hero and Charcoal Canvas (#1d1d1d) for the main content. Set high-impact statements in a light, high-contrast serif similar to Feature Deck; use a quiet Söhne-like sans-serif for navigation, labels, paragraphs, and controls. Keep primary text Studio White (#ffffff), reserving Metal Haze (#d6d5d0) for subtle footer detail. Organize the page with left-aligned oversized statements, two-column studio copy, a spacious specialty list, and a staggered gallery of vivid project media. Let imagery provide the color, not interface chrome. Favor broad dark intervals, flat surfaces, minimal borders, and pill-shaped calls to action. Avoid shadows, generic card grids, and arbitrary extra accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed black video, centered brand mark, and a large left-aligned serif statement. | Motion-led introduction, Immediate brand positioning | Black canvas, Oversized serif headline, Top navigation |
| 2 | feature-split | Two columns: large serif studio statement on the left and explanatory copy on the right. | Positioning statement, Supporting explanation | Charcoal band, Small section label, Editorial serif heading |
| 3 | feature-grid | A broad four-item lettered list arranged across the charcoal content area. | Scannable service list, Lettered item navigation | Large serif service names, Small letter markers, Open layout |
| 4 | feature-split | Two-column section with a large left statement and supporting paragraphs on the right. | Method explanation, Statement-led scanning | Charcoal background, Serif headline, Compact sans-serif copy |
| 5 | gallery | Long vertical sequence of staggered project previews, followed by a wide pill-shaped action. | Portfolio browsing, View all work action | Tilted media previews, Dark gallery field, Lavender pill CTA |
| 6 | logo-cloud | Compact horizontal row of client marks on the charcoal background. | Client credibility, Logo scanning | Small section label, Monochrome logo marks, Open band |
| 7 | footer | Two-column footer with navigation and newsletter form, plus a lower legal row. | Email subscription, Secondary site navigation, Legal links | Understated input hairline, White pill button, Compact footer text |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--default-color: #1a1a1a;
--default-bg: rgb(240 240 240/0.6);
--default-text: #1a1a1a;
--default-text-secondary: #6b6b6b;
--default-root-border: 1px solid rgb(10 10 10/0.1);
--default-border: 1px solid rgb(0 0 0/0.2);
--color-lavender: #e1daf7;
--color-pale-yellow: #f5ffc9;
--color-gold: #ad9130;
--color-text: #000;
--color-background: #fff;
--color-white: #fff;
--color-black: #1d1d1d;
--color-red-orange: #f8b7a2;
--color-gold-2: #ead99e;
--color-gray: #838383;
--color-metal: #d6d5d0;
--leva-colors-elevation1: #292d39;
--leva-colors-elevation2: #181c20;
--leva-colors-elevation3: #373c4b;
--leva-colors-accent1: #0066dc;
--leva-colors-accent2: #007bff;
--leva-colors-accent3: #3c93ff;
--leva-colors-highlight1: #535760;
--leva-colors-highlight2: #8c92a4;
--leva-colors-highlight3: #fefefe;
--leva-colors-vivid1: #ffcc00;
--leva-colors-folderWidgetColor: #8c92a4;
--leva-colors-folderTextColor: #fefefe;
--leva-colors-toolTipBackground: #fefefe;
--leva-colors-toolTipText: #181c20;
--leva-space-xs: 3px;
--leva-space-sm: 6px;
--leva-space-md: 10px;
--leva-space-rowGap: 7px;
--leva-space-colGap: 7px;
--leva-fonts-mono: ui-monospace, SFMono-Regular, Menlo, 'Roboto Mono', monospace;
--leva-fonts-sans: system-ui, sans-serif;
--leva-fontSizes-root: 11px;
```

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