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

# Tribit · Design System

> Sound-led products, framed by open space and vivid yellow.

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

Tribit’s homepage pairs immersive lifestyle campaigns with crisp, product-focused shopping sections. Bright yellow calls attention to purchase actions, while generous white space and restrained typography keep the experience approachable.

## North star

Let vivid product and lifestyle photography breathe, using Signal Yellow only to make the next shopping action unmistakable.

## Overview

The page’s visual identity is led by full-bleed lifestyle photography rather than a uniformly dark interface: campaign imagery supplies much of the visible color, while the measured site canvas is black and lower sections alternate into clean white product and editorial areas. Signal Yellow (#ffe900) is the key functional accent, used for pill-shaped shopping CTAs and small sale badges. Roboto carries the full hierarchy, with bold, slightly tracked campaign headings, uppercase tracked navigation, and readable body copy. The opening hero places concise copy and a yellow CTA over a large photographic scene; subsequent category tiles, technology callouts, product cards, and social-video thumbnails create a varied shopping journey. Spacious section breaks separate these dense image groups. Pale gray card surfaces distinguish product imagery from the surrounding page, while rounded cards and pill controls soften the otherwise straightforward grid. Blue and pink accents are minor supporting colors, not the dominant brand signature.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Yellow | `#ffe900` | `--color-signal-yellow` | accent | Primary shopping CTA, reward badge, sale marker, and selected section accents. |
| Stage Black | `#000000` | `--color-stage-black` | brand | Measured page canvas and footer field; also appears in navigation and headings over pale campaign imagery. |
| Soft Graphite | `#2b2b2b` | `--color-soft-graphite` | neutral | Muted text, product links, button text, and thin outlines such as product color selectors. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Light product and editorial surfaces, footer text, and high-contrast text on dark areas. |
| Powder Blue | `#c2d6ff` | `--color-powder-blue` | accent | Secondary accent for links, buttons, and carousel controls; subordinate to the yellow CTA. |
| Petal Pink | `#ffb3ba` | `--color-petal-pink` | accent | Occasional link accent only; not a defining color in the page screenshots. |
| Cloud Gray | `#eeeeee` | `--color-cloud-gray` | surface | Pale product-card background that separates speaker imagery from surrounding white space. |
| Plum Charcoal | `#2f222b` | `--color-plum-charcoal` | surface | Dark social-media video card surface; a local tile treatment rather than a page-wide brand color. |
| Amber Glint | `#ffb71b` | `--color-amber-glint` | semantic | Rare link accent in measured data; secondary to Signal Yellow. |
| Near Ink | `#111111` | `--color-near-ink` | neutral | Small dark text and badge lettering, especially where crisp contrast is needed on light cards. |
| Mist White | `#f5f5f5` | `--color-mist-white` | surface | Minor light surface and link background; use as a subtle variation from pure white. |

### Semantic aliases

`--color-canvas` → `#000000` (Stage Black) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#2f222b` (Plum Charcoal) · `--color-surface-3` → `#eeeeee` (Cloud Gray) · `--color-surface-4` → `#f5f5f5` (Mist White) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#2b2b2b` (Soft Graphite) · `--color-text-subtle` → `#000000` (Stage Black) · `--color-border` → `#2b2b2b` (Soft Graphite) · `--color-accent` → `#ffe900` (Signal Yellow) · `--color-accent-2` → `#c2d6ff` (Powder Blue) · `--color-accent-3` → `#ffb3ba` (Petal Pink) · `--color-on-accent` → `#2b2b2b` (Soft Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#2f222b` | 15.17:1 | AAA |
| `#ffffff` | `#eeeeee` | 1.16:1 | fail |
| `#2b2b2b` | `#000000` | 1.48:1 | fail |
| `#2b2b2b` | `#ffffff` | 14.16:1 | AAA |
| `#2b2b2b` | `#2f222b` | 1.07:1 | fail |
| `#2b2b2b` | `#eeeeee` | 12.2:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#2f222b` | 1.38:1 | fail |
| `#000000` | `#eeeeee` | 18.1:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roboto | `--font-body` | webfont | 400, 600, 700 | Site-wide sans serif for navigation, campaign headings, body copy, product details, and controls. | Arial |

- **Roboto:** Use 600–700 weights for headings and controls; navigation and eyebrow labels are uppercase with conspicuous tracking.

### Type scale — Minor Third (ratio ≈ 1.221, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 44.5px | 700 | 1.2 | 0.06em | — | Roboto | Primary campaign product title in the hero. |
| h2 | 44px | 600 | 0.7 | 0.06em | — | Roboto | Major centered section titles, including category and social sections. |
| h3 | 35.5px | 600 | 1.2 | 0.06em | — | Roboto | Category and product-family headings. |
| h4 | 24.5px | 700 | 1.2 | 0.06em | — | Roboto | Product names and smaller section headings. |
| body | 20px | 400 | 1.6 | 0.02em | — | Roboto | Campaign subtitles, descriptions, and supporting editorial copy. |
| caption | 16px | 700 | 1.3 | 0.025em | — | Roboto | Compact supporting labels and small content captions. |
| button | 17px | 600 | 1.6 | 0.06em | — | Roboto | Shopping CTA and other prominent action labels. |
| nav | 13px | 600 | 1.6 | 0.2em | uppercase | Roboto | Uppercase primary navigation links. |
| link | 16px | 700 | 1.3 | 0.025em | — | Roboto | Product titles and other emphasized text links. |
| eyebrow | 13px | 600 | 1.6 | 0.2em | uppercase | Roboto | Short uppercase labels above or alongside section content. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 4, 5, 7, 8, 9, 10, 12, 16, 24, 38, 44, 96 px.
- Section rhythm 96px · element gap 16px · card padding — · max content width 1344px.

The page uses a spacious, full-width storefront composition with campaign media spanning the viewport and content grids nested within a measured 1344px maximum width. The hero aligns headline and CTA to the left over photography; category and editorial headings are centered. Three-column category and technology groupings lead into a denser multi-column product grid and social gallery. Large section breaks create a clear shift between shopping modules. The footer returns to a compact, dark multi-column information layout.

## Shape & elevation

- Radius: button `9999px` · input `6px` · card `20px` · media `50%` · badge `5px` · nav `3px` · link `50%` · xs `5px` · sm `8px` · md `12px` · lg `15px` · xl `16px` · 2xl `20px` · pill `9999px`
- Shadow `hairline` (media): `rgb(0, 0, 0) 0px 0px 0px 1.4px`
- Shadow `inset` (input): `rgba(0, 0, 0, 0.25) 2px 2px 8px 0px inset`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.05) 0px 0px 25px 0px`
- Motion: standard transition `0.16s ease-in-out` on interactive elements.

Most sections and cards read as flat, with contrast created by background changes and white space rather than heavy shadows. Product tiles use rounded pale surfaces; video cards can use a dark plum field. Thin outlines are used for small selectors, while shadowing is subtle and secondary. Keep overlays, including the cookie dialog, clearly above the hero.

## Imagery

Large lifestyle photography drives the hero and makes the products feel part of everyday moments. Product sections switch to isolated speaker and earbud photography on pale card surfaces, keeping silhouettes and variants easy to scan. Social content appears as portrait video thumbnails in a horizontal gallery. The screenshots show no defining illustration style; the palette variations in those tiles and product images are local image content rather than core brand colors.

## Components

### Campaign hero

Full-bleed lifestyle image with left-aligned product title, concise subtitle, and a Signal Yellow pill CTA.

### Primary navigation

Compact uppercase Roboto links sit over the hero alongside menu, locale, account, search, and cart icons.

### Category tiles

Three product-family cards pair bold labels and speaker or earbud imagery with restrained yellow details.

### Product cards

Pale gray rounded cards show product photography, names, sale badges, prices, color swatches, and quick-view actions.

### Social video gallery

Portrait creator videos form a horizontal carousel beneath a centered heading, with compact circular navigation controls.

### Newsletter and footer

Centered email signup sits above a dark footer with three information columns, payment marks, social links, and policy links.

### Sale badge

Small Signal Yellow rounded label highlights promotional savings within the product grid.

### Measured component styles

- **Primary button** (“Quick view”): background #ffe900 · text #2b2b2b · border 1px solid · radius 200px · padding 8.7px 37.6px · 600 14.45px Roboto
- **Link** (“Black”): transparent background · text #2b2b2b · border 1px solid #2b2b2b · radius 50% · padding 0px · 400 20px Roboto
- **Input**: background #ffffff · text #111111 · radius 6px · padding 16.7px 55.6px 16.7px 16.7px · 400 17.7778px Roboto · shadow rgba(0, 0, 0, 0.25) 2px 2px 8px 0px inset
- **Card** (“@dreguazzelli”): background #2f222b · text #ffffff · radius 20px · padding 0px · 400 20px Roboto
- **Badge** (“Save 10%”): background #ffe900 · text #111111 · radius 5px · padding 5px 10px 7px 10px · 700 12px Roboto
- **Navigation item** (“MENU NEW RELEASENEW SPEAKERS EARPHONES C”): transparent background · text #000000 · radius 0px · padding 0px · 600 13px Roboto · uppercase

## Do

- Use large campaign photography as the opening visual.
- Make the primary shopping action Signal Yellow (#ffe900).
- Keep campaign copy concise and legible over imagery.
- Use Roboto throughout the interface.
- Separate shopping modules with generous whitespace.
- Keep product details structured and easy to scan.
- Use rounded pills for prominent shopping actions.

## Don't

- Do not treat the page as uniformly dark; screenshots show broad light content areas.
- Do not let secondary accent colors compete with the yellow CTA.
- Do not add heavy shadows to every card.
- Do not crowd category and editorial sections together.
- Do not mistake colors inside product imagery for UI palette colors.
- Do not use oversized decorative typography in place of product photography.

## Agent prompt

Build a new Tribit-style ecommerce page with an image-led campaign hero, clear product discovery, and spacious editorial breaks. Use Stage Black (#000000) as the measured canvas and footer color, but let campaign photography and bright product sections define the visible page. Use Signal Yellow (#ffe900) for the main pill CTA, rewards, and sale badges; use Soft Graphite (#2b2b2b) for secondary text and outlines. Set all interface text in Roboto, with bold, slightly tracked headings and compact uppercase navigation. Build pale product cards using Cloud Gray (#eeeeee), rounded corners, and simple product-image presentation. Keep category and social sections centered, product grids practical and scannable, and large gaps between major modules. Use shadows sparingly; prioritize image scale, clean alignment, and generous whitespace.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign carousel with left-aligned product copy and CTA over lifestyle photography. | Campaign rotation, Primary shop CTA, Persistent rewards shortcut | Full-width photography, Uppercase navigation, Yellow pill button |
| 2 | category-nav | Centered heading above three side-by-side category cards. | Browse by product family, Category shortcuts | Image-led tiles, Bold category names, Light card backgrounds |
| 3 | feature-grid | Three compact feature items arranged in a row with icons and explanatory copy. | Communicate product benefits, Short technical explanations | Feature icons, Centered labels, Compact supporting text |
| 4 | product-grid | Centered section heading followed by a multi-column product-card grid. | Browse featured products, Compare prices and variants, Quick view | Pale rounded cards, Sale badges, Color swatches |
| 5 | logo-cloud | A single compact row of publication logos centered on the page. | Social proof | Publication wordmarks, Open white space |
| 6 | testimonials | Centered title and subtitle above a horizontal rail of portrait video cards. | Creator stories, Carousel navigation | Portrait video tiles, Circular arrow controls |
| 7 | logo-cloud | Compact horizontal row of image or logo marks. | Brand credibility | Small logo marks, Minimal framing |
| 8 | feature-grid | Four evenly distributed service assurances in a horizontal row. | Reassure before purchase | Small service icons, Short labels, Four-column alignment |
| 9 | newsletter | Centered heading and supporting copy above a single email input and signup action. | Email capture, Privacy reassurance | Dark background, Centered form, Light input field |
| 10 | footer | Dark footer with three link columns and a lower row of payment, social, and shop details. | Policy navigation, Support discovery, Social links | Three-column link lists, White text on black, Payment marks |

## Source CSS custom properties (selected)

```css
--color-foreground: #ffffff;
--color-background: #000000;
--color-button-foreground: #2b2b2b;
--color-button-background: #f7b829;
--color-outlines: #f7b829;
--color-borders: #555555;
--color-overlay: #000000;
--color-overlay-rgb: 0 0 0;
--color-card-foreground: #ffffff;
--color-card-background: #343434;
--gradient-card-background: radial-gradient(rgba(115, 124, 62, 1), rgba(58, 64, 47, 1) 100%);
--color-background-alt: #0f0f0f;
--cart-dot-foreground: #fff;
--cart-dot-background: #c72d00;
--placeholder-bg: rgba(233, 233, 233);
--font-body-family: Roboto, sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-body-line-height: 1.6;
--font-body-letter-spacing: 0.02em;
--font-body-text-transform: none;
--font-heading-family: Roboto, sans-serif;
--font-heading-style: normal;
--font-heading-weight: 600;
--font-heading-line-height: 1.2;
--font-heading-letter-spacing: 0.06em;
--font-heading-text-transform: none;
--font-subheader-family: Roboto, sans-serif;
--font-subheader-style: normal;
--font-subheader-weight: 400;
--font-subheader-text-transform: uppercase;
--font-subheader-letter-spacing: 0.2em;
--font-announcement-family: Roboto, sans-serif;
--font-announcement-style: normal;
--font-announcement-weight: 400;
--font-announcement-text-transform: none;
--font-announcement-size: 13px;
--font-announcement-letter-spacing: 0.02em;
--font-button-family: Roboto, sans-serif;
--font-button-style: normal;
```

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