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

# 21 TSI · Design System

> A cinematic manifesto for reimagining sport

**Theme:** dark · **Industry:** other · **Source:** https://21tsi.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._

21 TSI presents a high-contrast, cinematic introduction to its vision for the sports industry. A stark black canvas and restrained typography keep the focus on the opening film, manifesto, and spacious editorial content.

## North star

Let a deep black canvas and light, spacious typography frame cinematic imagery without competing with it.

## Overview

The visual system is built around a near-total black canvas (#000000), with white (#ffffff) typography and restrained gray (#4d4d4d) borders. These measured colors define the interface; the vivid reds in the opening screenshot belong to the hero film imagery, not the measured UI palette. Saans is used throughout, with light display and heading weights that give the large text a quiet, editorial presence. Uppercase navigation, links, and captions provide compact counterpoints to the airy headlines and body copy. The page favors long, full-bleed-feeling black sections over boxed content, separated by generous vertical intervals. A fine horizontal rule and delicate outlined circular controls add structure without introducing filled panels or shadows. Navigation and labels stay small and unobtrusive, while large statements sit at the left edge and carry the narrative. Recreate the contrast between sparse interface elements and cinematic imagery rather than adding decorative color or dense cards.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Pitch Black | `#000000` | `--color-pitch-black` | surface | Dominant page canvas and the uninterrupted background for long editorial sections. |
| Studio White | `#ffffff` | `--color-studio-white` | neutral | Headlines, body copy, navigation, links, and fine outlined controls against black. |
| Graphite Line | `#4d4d4d` | `--color-graphite-line` | neutral | Thin borders and hairlines on outlined circular elements; keep it subordinate to text. |

### Semantic aliases

`--color-canvas` → `#000000` (Pitch Black) · `--color-text` → `#ffffff` (Studio White) · `--color-border` → `#4d4d4d` (Graphite Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Saans | `--font-body` | webfont | 300, 380, 570 | Site-wide typeface for headlines, body copy, navigation, captions, and links. | Inter |

- **Saans:** Light weights anchor display and body text; navigation and utility labels use uppercase. Keep tracking restrained.

### Type scale — Custom (ratio ≈ 2.302, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 106px | 300 | 1.3 | 0 | — | Saans | Oversized editorial statements and prominent hero messaging. |
| h1 | 47px | 300 | 1 | 0 | — | Saans | Primary section headings such as the mission and Sphere Lab titles. |
| body | 20px | 300 | 1.15 | 0 | — | Saans | Light-weight explanatory and manifesto copy. |
| caption | 14px | 380 | 1.14 | 0 | uppercase | Saans | Compact uppercase supporting labels and metadata. |
| nav | 16px | 570 | 1.38 | 0 | uppercase | Saans | Uppercase primary navigation labels. |
| link | 14px | 380 | 1.14 | 0 | uppercase | Saans | Uppercase utility links and small calls to action. |
| eyebrow | 14px | 380 | 1.14 | 0.05em | uppercase | Saans | Uppercase, letter-spaced section preheads. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 7, 8, 10, 11, 15, 20, 30, 35, 60, 63, 150 px.
- Section rhythm 150px · element gap — · card padding — · max content width 1350px.

The page uses a spacious, mostly single-column editorial structure within a measured maximum width of 1350px. Content aligns to the left, with the navigation distributed horizontally across the top and key actions gathered at the right. Very tall black intervals separate the hero, manifesto, question-led copy, image-led passage, and Sphere Lab content. Preserve the open composition and avoid dense grids: measured section spacing is generous, with a 150px section gap and sparse content density.

## Shape & elevation

- Radius: button `9999px` · card `50%` · link `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s linear` on interactive elements.

The interface is flat: measured data contains no shadows or gradients, and the page relies on black space rather than layered cards. Use restrained thin borders in #4d4d4d for outlined elements and hairlines. Circular controls and outlined navigation actions sit directly on their background, with no filled surface or raised treatment.

## Imagery

The opening is dominated by a full-viewport-feeling, softly blurred sports figure against vivid red-toned footage. Treat that red as image color, not a UI token. The subject is cropped large and atmospheric, with white headline text overlaid near the lower left. Later page sections appear largely black in the scaled screenshots, so keep imagery selective and cinematic rather than filling every section with decorative visuals.

## Components

### Top navigation

A thin horizontal rule anchors a distributed row of small uppercase links; brand mark sits left, navigation spans the middle, and outlined contact, language, and sound controls sit right.

### Hero statement

Large, light-weight white editorial text overlays the lower-left area of blurred sports imagery; keep the image cinematic and the copy sharply legible.

### Outlined utility pills

Contact, language, and sound actions use white uppercase text inside thin rounded outlines; the measured control radius is pill-like.

### Scroll cue

A small outlined circular control with understated uppercase text sits near the hero’s lower-right area.

### Editorial section link

Small uppercase action text sits on a long, fine horizontal rule with a discreet downward arrow, positioned away from the main copy.

### Statement sections

Single-column sections use large, light headings with concise supporting copy on the black canvas, leaving ample surrounding negative space.

### Measured component styles

- **Primary button** (“OUR MANIFESTO OUR MANIFESTO”): transparent background · text #ffffff · radius 0px · padding 0px · 380 14px Saans · uppercase
- **Link** (“FR”): transparent background · text #ffffff · radius 70px · padding 10px 20px · 380 14px Saans · uppercase
- **Card** (“0 0 0 0”): transparent background · text #ffffff · border 1px solid #4d4d4d · radius 594px · padding 0px · 380 14px Saans
- **Navigation item** (“THE SPHERE LAB”): transparent background · text #ffffff · radius 0px · padding 0px · 570 16px Saans · uppercase

## Do

- Use #000000 as the primary page canvas.
- Set primary text and navigation in #ffffff.
- Keep outlined rules and controls fine and understated.
- Use Saans or a close neutral sans-serif substitute.
- Favor light headline weights and uppercase utility labels.
- Reserve saturated reds for cinematic image assets.
- Maintain generous vertical breathing room between sections.

## Don't

- Do not treat the hero’s red footage as a measured brand color.
- Do not add gradients, shadows, or raised card treatments.
- Do not pack content into dense multi-column grids.
- Do not make utility navigation compete with the hero statement.
- Do not introduce bright UI accents beyond the measured palette.
- Do not add filled buttons where the design uses outlined controls.

## Agent prompt

Build a new 21 TSI page as a sparse, cinematic editorial experience. Use Pitch Black (#000000) for the dominant canvas, Studio White (#ffffff) for typography and controls, and Graphite Line (#4d4d4d) only for fine borders and hairlines. Use Saans, or a close neutral sans-serif substitute, with light, oversized statements and compact uppercase navigation and utility labels. Keep navigation distributed across the top, with outlined pill-like actions at the right. Pair editorial copy with selective full-bleed-feeling sports imagery; vivid red may appear inside the image, not as an invented interface token. Organize content in spacious, mostly single-column sections, leaving generous black intervals. Keep the interface flat: no shadows, gradients, dense cards, or decorative UI clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport cinematic image with a distributed top navigation and a large left-aligned statement near the lower edge. | Primary navigation, Contact and language actions, Scroll cue | Black canvas, White uppercase links, Outlined pill controls, Fine top hairline |
| 2 | other | Single-column editorial section on black, with left-aligned heading and copy and a small rule-based action. | Manifesto navigation, Editorial reading | Large light heading, White body copy, Thin rule link |
| 3 | other | A sparse, single-column question-led passage on a continuous black canvas. | Reflective reading | Minimal white typography, Expansive negative space |
| 4 | gallery | A restrained sequence of image assets within the long black editorial flow. | Visual storytelling | Selective imagery, Black surrounding canvas |
| 5 | feature-split | Editorial feature section on black, with a left-aligned heading, supporting copy, and a fine rule-based action. | Learn more link, Feature exploration | Light heading, White copy, Thin rule and arrow |

## Source CSS custom properties (selected)

```css
--cc-modal-border-radius: .5rem;
--cc-btn-border-radius: .4rem;
--cc-modal-transition-duration: .25s;
--cc-link-color: #c2d0e0;
--cc-bg: #161a1c;
--cc-primary-color: #ebf3f6;
--cc-secondary-color: #aebbc5;
--cc-btn-primary-bg: #c2d0e0;
--cc-btn-primary-color: #161a1c;
--cc-btn-primary-border-color: #c2d0e0;
--cc-btn-primary-hover-bg: #98a7b6;
--cc-btn-primary-hover-color: #000;
--cc-btn-primary-hover-border-color: #98a7b6;
--cc-btn-secondary-bg: #242c31;
--cc-btn-secondary-color: #ebf3f6;
--cc-btn-secondary-border-color: #242c31;
--cc-btn-secondary-hover-bg: #353d43;
--cc-btn-secondary-hover-color: #fff;
--cc-btn-secondary-hover-border-color: #353d43;
--cc-separator-border-color: #222a30;
--cc-toggle-on-bg: #c2d0e0;
--cc-toggle-off-bg: #525f6b;
--cc-toggle-on-knob-bg: #161a1c;
--cc-toggle-off-knob-bg: #161a1c;
--cc-toggle-enabled-icon-color: #161a1c;
--cc-toggle-disabled-icon-color: #161a1c;
--cc-toggle-readonly-bg: #343e45;
--cc-toggle-readonly-knob-bg: #5f6b72;
--cc-toggle-readonly-knob-icon-color: #343e45;
--cc-section-category-border: #1e2428;
--cc-cookie-category-block-bg: #1e2428;
--cc-cookie-category-block-border: #1e2428;
--cc-cookie-category-block-hover-bg: #242c31;
--cc-cookie-category-block-hover-border: #232a2f;
--cc-cookie-category-expanded-block-bg: transparent;
--cc-cookie-category-expanded-block-hover-bg: #343e45;
--cc-overlay-bg: rgba(0,0,0,.65);
--cc-webkit-scrollbar-bg: #1e2428;
--cc-webkit-scrollbar-hover-bg: #98a7b6;
--cc-footer-bg: #0c0e0f;
```

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