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

# TWOTWO · Design System

> Quiet neutrals, vivid lime, made for padel.

**Theme:** light · **Industry:** ecommerce · **Source:** https://twotwo-official.com/en-us · **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._

TWOTWO’s storefront pairs a restrained gray canvas and black typography with vivid lime calls to action. Large product imagery and straightforward shopping grids give the page a sporty, editorial character.

## North star

Keep the interface calm and neutral, letting product photography and lime shopping actions provide the energy.

## Overview

The page is built on a light gray canvas (#e6e6e6), creating a continuous backdrop from navigation through product collections and footer. Black (#000000) carries the wordmark, navigation, headings and product details; muted charcoal (#323232) softens secondary copy. A vivid lime (#e3fc03) is reserved for prominent shopping and signup actions, so it reads as a clear signal rather than a broad decorative fill. White (#ffffff) appears in the newsletter input, while the pale gray border (#c2c6cc) provides a quiet navigation divider. Whyte’s clean sans-serif forms and regular weights keep headings and interface labels direct, with uppercase navigation adding structure. A centered, full-bleed-feeling hero gives way to aligned three-column product grids, a social image strip, a photo-backed signup area and a compact multi-column footer. Product photography supplies most of the page’s warm and colorful variation; those image hues are not the core interface palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Court Mist | `#e6e6e6` | `--color-court-mist` | surface | Dominant page canvas behind the navigation, hero, product grids, social gallery and footer. |
| Racket Ink | `#000000` | `--color-racket-ink` | neutral | Wordmark, navigation, headings, product links, footer text and text on lime buttons. |
| Quiet Divider | `#c2c6cc` | `--color-quiet-divider` | semantic | Fine navigation hairline separating the header from the page. |
| Soft Graphite | `#323232` | `--color-soft-graphite` | neutral | Muted supporting headings and body copy where full black would feel too strong. |
| Electric Lime | `#e3fc03` | `--color-electric-lime` | accent | Primary shopping and signup buttons, plus occasional campaign text and emphasis. |
| Clean Court | `#ffffff` | `--color-clean-court` | surface | Newsletter email field and limited light text or interface surfaces. |

### Semantic aliases

`--color-canvas` → `#e6e6e6` (Court Mist) · `--color-surface` → `#000000` (Racket Ink) · `--color-surface-2` → `#ffffff` (Clean Court) · `--color-text` → `#000000` (Racket Ink) · `--color-text-muted` → `#323232` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Clean Court) · `--color-border` → `#c2c6cc` (Quiet Divider)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#e6e6e6` | 16.83:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#323232` | `#e6e6e6` | 10.27:1 | AAA |
| `#323232` | `#000000` | 1.64:1 | fail |
| `#323232` | `#ffffff` | 12.82:1 | AAA |
| `#ffffff` | `#e6e6e6` | 1.25:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| WhyteBook | `--font-body` | webfont | 400 | Primary interface and content face for navigation, body copy, headings, captions and product links. | Inter |
| WhyteRegular | `--font-display` | webfont | 400 | Display and selected larger section headings. | Inter |

- **WhyteBook:** Regular weight throughout; navigation uses uppercase. Keep tracking neutral and rely on scale and alignment for hierarchy.
- **WhyteRegular:** Regular weight with open, clean forms; use at larger sizes without added tracking or forced uppercase.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1.1 | 0 | — | WhyteRegular | Large centered hero headline over the racket video. |
| h1 | 38px | 400 | 1.3 | 0 | — | WhyteBook | Primary page or collection heading. |
| h2 | 32px | 400 | 1.1 | 0 | — | WhyteRegular | Product collection and major section titles. |
| h3 | 22px | 400 | 1.3 | 0 | — | WhyteBook | Secondary promotional and signup headings. |
| h4 | 20px | 400 | 1.4 | 0 | — | WhyteBook | Compact footer group headings and supporting sections. |
| body | 16px | 400 | 1.4 | 0 | — | WhyteBook | Descriptions, newsletter copy and general content. |
| caption | 13px | 400 | 1.4 | 0 | — | WhyteBook | Product prices, fine print and small supporting labels. |
| button | 16px | 400 | normal | 0 | — | WhyteInktrapRegular | Shopping actions and secondary controls. |
| nav | 13px | 400 | 1.4 | 0 | uppercase | WhyteBook | Uppercase header navigation labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 4, 5, 7, 10, 14, 16, 20, 32, 64, 75 px.
- Section rhythm 32px · element gap — · card padding — · max content width 1376px.

A wide desktop storefront uses a measured page maximum of 1376px, with a full-width header and a centered hero. The hero is followed by product collections arranged in three columns, then a dense social gallery, newsletter panel and four-column footer. Section spacing follows a comfortable rhythm, with generous breathing room around product imagery and headings. Collection titles and copy align centrally or to the section start, while product cards remain consistent in width. Preserve the long, scroll-led retail sequence rather than compressing all content into a single screen.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · media `16px` · xs `16px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is predominantly flat: no measured shadows or gradients. Use the canvas itself to unify sections, with the navigation hairline as a restrained separator. Rounded product media and pill-shaped actions provide the main shape contrast; use image layering only where campaign photography or the newsletter background calls for it.

## Imagery

Lead with a large, close-cropped padel racket video or campaign image, with the headline and lime button layered centrally. Product grids use straightforward packshot photography on pale, quiet backgrounds, preserving the products’ color and shape. A narrow social gallery adds candid lifestyle and customer images. Warm beige, green and charcoal tones visible in photos belong to the imagery, not the brand interface palette.

## Components

### Header navigation

Wordmark at left, uppercase category links across the header, and currency, search and bag controls at right; black on the gray canvas with a fine divider.

### Campaign hero

Large media-led banner with centered display headline and a pill-shaped lime Shop Now action in black text.

### Product cards

Three-column retail grid with rounded product imagery, black product-name links, compact price or sold-out status and a full-width lime Shop Now bar.

### Collection heading

Simple section title with a short supporting description, set above product grids without a separate colored panel.

### Social gallery

Horizontal strip of customer and lifestyle imagery under an underlined social heading.

### Newsletter signup

Photo-backed two-column signup area with concise offer copy, a white pill email field and lime pill signup action.

### Footer

Four-column information area on the light canvas, with compact group headings, small links, brand mark and social icons.

### Measured component styles

- **Primary button** (“Shop Now”): background #e3fc03 · text #000000 · radius 50px · padding 12px 0px · 400 16px WhyteBook
- **Link** (“Drop Racket - PLAY TWO - Jade Green Regu”): transparent background · text #000000 · radius 0px · padding 0px · 400 20px WhyteBook
- **Input** (“CAD GBP USD”): transparent background · text #000000 · radius 0px · padding 0px · 400 13px WhyteBook
- **Navigation item** (“SHOP”): transparent background · text #000000 · radius 0px · padding 0px 16px 0px 0px · 400 16px WhyteBook

## Do

- Use #e6e6e6 as the continuous page canvas.
- Reserve #e3fc03 for clear shopping and signup actions.
- Keep navigation uppercase, compact and black.
- Give product photography the largest share of visual attention.
- Build collection grids in three aligned product columns.
- Use pill-shaped primary actions and restrained image rounding.

## Don't

- Do not turn product-image colors into interface colors.
- Do not add gradients or drop shadows.
- Do not place every section inside a separate white card.
- Do not use lime as a large page background.
- Do not crowd product images with decorative labels.
- Do not replace the calm gray canvas with stark white.

## Agent prompt

Build a new TWOTWO storefront page with the same calm, sporty retail language. Use Court Mist (#e6e6e6) as the continuous canvas, Racket Ink (#000000) for navigation and product text, and Electric Lime (#e3fc03) only for prominent actions. Use Clean Court (#ffffff) for form fields and Quiet Divider (#c2c6cc) for subtle header separation; Soft Graphite (#323232) can carry secondary copy. Set clean regular-weight sans-serif typography, compact uppercase navigation and clear heading scale. Make the main content image-led, with rounded product photography, aligned three-column product grids, simple collection titles and generous breathing room. Use pill-shaped buttons with black labels. If adding a campaign or signup image, let its colors remain photographic rather than extending them into the interface palette. Keep surfaces flat, with no shadows or gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large inset campaign media with centered headline and action. | Shop Now CTA | full-width media, centered display text, lime pill button |
| 2 | product-grid | Collection intro above a three-column product grid. | product links, price and sold-out status, Shop Now actions | rounded product images, black text, lime action bars |
| 3 | product-grid | Collection intro followed by three aligned product cards. | product discovery, price display, Shop Now actions | three-column grid, product photography, lime action bars |
| 4 | logo-cloud | Compact horizontal row of publication marks between product collections. | reassurance through endorsements, carousel navigation | black logos, flat background, next arrow |
| 5 | product-grid | Section heading above three accessory product cards. | accessory discovery, sold-out status, Shop Now actions | three-column grid, rounded product images, lime action bars |
| 6 | gallery | Underlined section title above a horizontal strip of social images. | social proof, browse community content | horizontal image strip, mixed lifestyle photography |
| 7 | newsletter | Photo-backed signup panel with copy and form arranged in two columns. | email capture, first-order offer | white pill input, lime signup button, dark photographic background |
| 8 | footer | Four information columns above a brand mark and social icons. | support navigation, company information, social links | compact text links, black headings, light gray canvas |

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