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

# TCL · Design System

> Clean product retail with vivid, cinematic showcases

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://us.tcl.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._

TCL’s homepage pairs a restrained white retail framework with cinematic, full-bleed product campaigns. Product discovery, editorial stories, reviews, and social content create a long, varied shopping journey.

## North star

Keep the shopping interface quiet and precise so cinematic product imagery carries the visual impact.

## Overview

The page uses a bright white canvas and black text as a quiet frame for large, colorful product imagery. TCL red is reserved for the announcement strip, primary shopping actions, selected links, and compact highlights rather than broad background blocks. Gotham typography gives navigation and product content a precise retail character: headings are firm and prominent, while the light-weight body copy stays measured and readable. A full-width campaign hero leads into compact service benefits and centered product discovery, followed by wide image-led showcases and alternating editorial content. The layout shifts between open, centered sections and tightly packed product or story cards, with generous white gaps separating them. Thin pale borders define product cards and controls; imagery supplies most of the page’s contrast, color, and emotional impact. Lower sections broaden the experience with press quotes, social video tiles, and a structured footer.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Primary page canvas, navigation background, and light text over dark campaign imagery. |
| TCL Red | `#bf0008` | `--color-tcl-red` | brand | Primary CTA fill, announcement bar, and high-priority brand accents. |
| Cloud Gray | `#e6e6e6` | `--color-cloud-gray` | surface | Pale section and control surfaces, including subtle input and interface backgrounds. |
| Display Ink | `#0a0a0a` | `--color-display-ink` | neutral | Main headings, body copy, navigation, and product-card text. |
| Border Mist | `#dfdfe4` | `--color-border-mist` | semantic | Hairline outlines separating product cards and content sections. |
| Gradient Ash | `#d1d1d1` | `--color-gradient-ash` | neutral | Measured gradient stop; appears in decorative or image-overlay treatments rather than core UI. |
| Gradient Slate | `#6b6b6b` | `--color-gradient-slate` | neutral | Measured gradient stop for subdued image treatment, not a defining interface color. |
| Muted Graphite | `#73737a` | `--color-muted-graphite` | semantic | Secondary text and understated supporting information. |
| Footer Charcoal | `#474747` | `--color-footer-charcoal` | neutral | Less prominent text and navigation details, especially in lower-page content. |
| Divider Gray | `#ececec` | `--color-divider-gray` | surface | Subtle separators and low-emphasis control or footer surfaces. |
| Signal Crimson | `#c72030` | `--color-signal-crimson` | accent | Secondary red for links, selected product options, and small highlighted details. |
| Caption Smoke | `#5e5e5f` | `--color-caption-smoke` | neutral | Low-emphasis supporting text and fine-print details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e6e6e6` (Cloud Gray) · `--color-text` → `#0a0a0a` (Display Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#73737a` (Muted Graphite) · `--color-border` → `#dfdfe4` (Border Mist) · `--color-accent` → `#bf0008` (TCL Red) · `--color-accent-2` → `#c72030` (Signal Crimson) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0a0a0a` | `#ffffff` | 19.8:1 | AAA |
| `#0a0a0a` | `#e6e6e6` | 15.86:1 | AAA |
| `#ffffff` | `#e6e6e6` | 1.25:1 | fail |
| `#73737a` | `#ffffff` | 4.71:1 | AA |
| `#73737a` | `#e6e6e6` | 3.77:1 | AA-large |
| `#bf0008` | `#ffffff` | 6.52:1 | AA |
| `#bf0008` | `#e6e6e6` | 5.23:1 | AA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.58))`
- `linear-gradient(to right, rgb(232, 206, 179), rgb(166, 140, 113))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Gotham-Light | `--font-body` | webfont | 400, 600, 500, 200 | Body text, navigation, buttons, captions, and eyebrow labels. | Montserrat |
| Gotham-Medium | `--font-display` | webfont | 500, 800 | Section headings, product titles, and prominent links. | Montserrat |
| Gotham-Bold | `--font-gotham-bold` | webfont | 500 | Primary hero headline. | Montserrat |

- **Gotham-Light:** Light, clean letterforms; body copy is sentence case, while compact buttons and eyebrow labels use uppercase with airy tracking.
- **Gotham-Medium:** Medium-weight headings use modest positive tracking; title case and sentence case dominate.
- **Gotham-Bold:** Bold headline treatment gives the campaign message a strong focal point without changing the overall geometric sans-serif voice.

### Type scale — Perfect Fourth (ratio ≈ 1.361, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 500 | 1.2 | 0.012em | — | Gotham-Bold | Primary campaign headline, such as the hero promotion. |
| h2 | 38px | 500 | 1.2 | 0.016em | — | Gotham-Medium | Major section headings and prominent showcase titles. |
| h3 | 30px | 500 | 1.2 | 0.02em | — | Gotham-Medium | Product and feature headlines within content sections. |
| h4 | 26px | 500 | 1.2 | 0.023em | — | Gotham-Medium | Supporting subheads in product and editorial blocks. |
| body | 14px | 400 | 1.5 | 0.043em | — | Gotham-Light | Product descriptions, service messages, and editorial copy. |
| caption | 12px | 400 | 1.5 | 0.05em | — | Gotham-Light | Dates, fine print, and supporting card metadata. |
| button | 12px | 600 | 1.3 | 0.083em | uppercase | Gotham-Light | Compact uppercase shopping and action labels. |
| nav | 14px | 600 | 1.3 | 0.043em | — | Gotham-Light | Primary product navigation and header utility links. |
| link | 16px | 500 | 1.2 | 0.038em | — | Gotham-Medium | Product calls to action and editorial links. |
| eyebrow | 12px | 600 | 1.3 | 0.083em | uppercase | Gotham-Light | Small uppercase section labels and introductory markers. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 5, 6, 8, 9, 10, 12, 15, 16, 20, 24, 28, 30, 32, 80 px.
- Section rhythm 80px · element gap 8px · card padding — · max content width 1376px.

The page moves from a slim announcement and utility area into a full-width navigation bar, then a full-bleed hero. Below, centered product discovery and campaign showcases alternate with split feature content and horizontal editorial and social card rows. Product areas use multi-column layouts; feature panels and stories use more open alignment. The measured content max width is 1376px, with a comfortable density and an 80px section-gap rhythm. Most sections sit on white, so spacing and imagery—not colored bands—signal transitions.

## Shape & elevation

- Radius: button `5px` · link `4px` · xs `4px` · sm `5px` · md `8px`
- Shadow `sm` (card): `rgba(10, 10, 13, 0.06) 2px 7px 7px -2px`
- Shadow `inset` (link): `rgb(199, 32, 48) 0px 0px 0px 1px inset`
- Shadow `sm-2` (card): `rgba(31, 33, 36, 0.1) 0px 1.25px 2.5px 0px, rgba(31, 33, 36, 0.05) 0px 0.625px 3.75px 0px`
- Motion: standard transition `0.1s ease` on interactive elements.

The visual system is mostly flat. Pale hairline borders define product cards and small selection controls, while subtle shadows appear on a limited number of cards. Stronger depth comes from layered campaign media, image overlays, and the photographed products themselves—not from heavy UI shadows or rounded panels.

## Imagery

Large campaign photography and product renders dominate the first screen, with dramatic sports and home-entertainment scenes supplying vivid color. Product cards pair device imagery with restrained copy and price details. Feature areas use wide lifestyle or technology visuals; lower editorial and social sections add article thumbnails and video-like creator portraits. Images are generally presented cleanly, with occasional dark overlays to keep text legible on campaign media.

## Components

### Primary navigation

White horizontal header with a red TCL wordmark, dark product-category labels, and compact search and bag icons.

### Campaign hero

Full-bleed promotional image with a large white headline, compact supporting offer copy, and a red uppercase shopping button.

### Service benefits strip

Pale horizontal band presenting shipping, warranty, payment, and price-match assurances with small icons.

### Product cards

White product tiles with restrained outlines, product imagery, concise model and pricing details, and red CTA buttons.

### Size selector

Compact outlined size links; the selected option uses #c72030 text and border with a subtle inset highlight.

### Editorial and social cards

Image-led article and creator-video cards with compact metadata, short headlines, and understated reading or playback cues.

### Footer directory

Open white footer with a TCL mark, grouped product, company, and support links, social icons, and payment details.

### Measured component styles

- **Primary button** (“SKIP TO CONTENT”): background #bf0008 · text #ffffff · radius 5px · padding 0px 24px · 600 12px Gotham-Light · uppercase
- **Secondary button**: transparent background · text #bf0008 · border 1px solid #ffffff · radius 50% · padding 0px · 400 14px Gotham-Light
- **Link** (“75"”): transparent background · text #0a0a0a · border 1px solid #e6e6e6 · radius 4px · padding 4px · 500 12px Gotham-Light
- **Input**: transparent background · text #0a0a0a · border 1px solid #e6e6e6 · radius 0px · padding 15px 98px 15px 15px · 400 16px Gotham-Light
- **Card** (“SEPTEMBER 30, 2026 Best Gaming Monitors ”): background #fafafb · text #0a0a0a · radius 0px · padding 0px · 400 14px Gotham-Light
- **Navigation item** (“BEST SELLER TV & HOME THEATER TABLET MOB”): transparent background · text #0a0a0a · radius 0px · padding 0px · 400 14px Gotham-Light

## Do

- Use white space as the default backdrop for shopping content.
- Reserve TCL red for primary actions and selective emphasis.
- Let campaign photography span the page when it is the focal point.
- Keep product cards crisp, pale, and lightly outlined.
- Use Gotham-like geometric sans-serif typography throughout.
- Separate long content with generous, consistent section gaps.

## Don't

- Do not turn the page into a dark or heavily tinted interface.
- Do not use red as a large, persistent section background.
- Do not add heavy shadows or strongly rounded card containers.
- Do not let product descriptions compete with the product images.
- Do not invent decorative gradients as core brand surfaces.
- Do not compress distinct homepage sections into one dense grid.

## Agent prompt

Build a new consumer-electronics retail page in TCL’s clean, image-led style. Use Gallery White (#ffffff) as the main canvas, Display Ink (#0a0a0a) for core text, and TCL Red (#bf0008) for primary actions and restrained brand accents. Use Signal Crimson (#c72030) for selected links or options, Cloud Gray (#e6e6e6) for subtle surfaces, and Border Mist (#dfdfe4) for fine outlines. Favor Gotham-like geometric sans-serif typography, with compact uppercase button labels and stronger headline weights. Establish a full-width image-led hero, then organize products, feature showcases, and editorial cards into clear sections with generous vertical breathing room. Keep product tiles light and quiet, with thin borders and minimal shadow. Prioritize product photography, readable contrast, concise copy, and straightforward shopping navigation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width campaign hero beneath the header, with left-aligned copy over prominent product imagery. | Campaign carousel, Primary shopping CTA, Service-benefit links | Full-bleed imagery, White headline, Red CTA |
| 2 | product-grid | Centered product discovery area with category tabs and a multi-column row of product cards. | Category tabs, Product comparison, Learn-more actions | Outlined product cards, Price and sale details, Red action buttons |
| 3 | product-showcase | Wide product campaign carousel with centered title and supporting copy over imagery. | Carousel navigation, Shop-now action | Wide lifestyle image, Centered overlay copy |
| 4 | feature-split | Centered section heading above alternating two-column feature rows with text and product visuals. | Feature discovery, Learn-more links | Split content, Large product imagery, Open white spacing |
| 5 | content-feed | Centered introduction above a horizontal row of image-led editorial cards. | Editorial browsing, Read-more links | Article thumbnails, Compact date and headline, Horizontal cards |
| 6 | testimonials | Centered heading above a multi-column row of short review excerpts and publication marks. | Press credibility, Quote browsing | Centered quotations, Publication logos, Minimal framing |
| 7 | video | Centered title over a horizontally scrolling grid of social video thumbnails. | Social proof, Video browsing, Carousel controls | Creator imagery, Video thumbnails, Overlay captions |
| 8 | footer | Wide white footer with grouped link columns, social controls, signup field, and payment marks. | Grouped navigation, Social links, Email signup | Multi-column link lists, TCL wordmark, Sparse footer styling |

## Source CSS custom properties (selected)

```css
--color-background: 255,255,255;
--gradient-background: #ffffff;
--color-foreground: 10,10,10;
--color-background-contrast: 191,191,191;
--color-shadow: 191,0,8;
--color-button: 191,0,8;
--color-button-text: 255,255,255;
--color-secondary-button: 255,255,255;
--color-secondary-button-text: 191,0,8;
--color-link: 191,0,8;
--color-badge-foreground: 10,10,10;
--color-badge-background: 255,255,255;
--color-badge-border: 10,10,10;
--payment-terms-background-color: rgb(255 255 255);
--font-body-family: "Gotham-Light";
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-heading-family: "Gotham-Medium";
--font-heading-style: normal;
--font-heading-weight: 500;
--font-body-scale: 1.0;
--font-heading-scale: 1.0;
--media-border-opacity: 0.0;
--media-border-width: 0px;
--media-radius: 0px;
--media-shadow-opacity: 0.0;
--media-shadow-horizontal-offset: 0px;
--media-shadow-vertical-offset: 0px;
--media-shadow-blur-radius: 0px;
--media-shadow-visible: 0;
--product-card-corner-radius: 0.0rem;
--product-card-text-alignment: left;
--product-card-border-width: 0.0rem;
--product-card-border-opacity: 0.1;
--product-card-shadow-opacity: 0.0;
--product-card-shadow-visible: 0;
--product-card-shadow-horizontal-offset: 0.0rem;
--product-card-shadow-vertical-offset: 0.0rem;
--product-card-shadow-blur-radius: 0.0rem;
```

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