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

# 10X HUB · Design System

> Oversized type, quiet space, and a vivid red signal.

**Theme:** dark · **Industry:** design · **Source:** https://10xdesigners.co/ · **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._

10X HUB presents designer-made resources through an almost-black, typography-led interface. A huge white wordmark and a compact red submission button anchor an otherwise spacious page.

## North star

Let oversized white typography dominate a black field, using red only as a precise functional accent.

## Overview

The page builds its identity from a near-black canvas, broad white typography and a single vivid red control. White is reserved for the oversized “10X HUB” wordmark and supporting copy; red marks the primary resource-submission action and small selection details. The composition is unusually open: a compact utility navigation sits at the top, the wordmark spans nearly the full viewport, and a short supporting statement rests far below it. Most of the page remains empty, making the typography itself function as the hero artwork. Text uses clean, regular-weight sans serif forms, with an oversized display treatment contrasted against small, widely distributed labels. There is no prominent photography or decorative illustration in the visible design. Hairline borders and restrained outlined controls provide just enough structure without softening the stark, editorial feel. Keep the layout flat, high-contrast and deliberately sparse.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Wordmark, headings, supporting copy, and occasional light interface surfaces against the dark canvas. |
| Pitch Black | `#000000` | `--color-pitch-black` | brand | Dominant page canvas and the foundation for the high-contrast, typography-led composition. |
| Charcoal Panel | `#212121` | `--color-charcoal-panel` | surface | Secondary dark surface detected in the palette; use for subdued interface areas, not as the main canvas. |
| Signal Red | `#ff1841` | `--color-signal-red` | accent | Bright fill on the resource submission pill and small active navigation or selection indicators. |
| Oxblood Trace | `#550816` | `--color-oxblood-trace` | semantic | Subtle dark-red detail detected mainly in borders; keep it restrained and secondary to Signal Red. |
| Soft Steel | `#bebcbc` | `--color-soft-steel` | neutral | Muted gray detail in thin outlines and small interface marks; not a prominent content color. |

### Semantic aliases

`--color-canvas` → `#000000` (Pitch Black) · `--color-surface` → `#212121` (Charcoal Panel) · `--color-surface-2` → `#ffffff` (Gallery White) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#000000` (Pitch Black) · `--color-border` → `#ff1841` (Signal Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#212121` | 16.1:1 | AAA |
| `#000000` | `#212121` | 1.3:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| helvetica-w01-roman | `--font-body` | webfont | 400 | Main body copy, navigation labels, and smaller supporting text. | Inter |
| wfont_9aea05_daebdda91ced4d119f7837b7bae26e19 | `--font-display` | system | 400 | Display wordmark and selected section headings. | Space Grotesk |

- **helvetica-w01-roman:** Regular weight and clean sans-serif forms; keep small labels crisp and understated.
- **wfont_9aea05_daebdda91ced4d119f7837b7bae26e19:** Regular weight; use for the oversized display treatment and keep letterforms clean and open.

### Type scale — Custom (ratio ≈ 2.171, base 13.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 300px | 400 | 1 | 0 | — | wfont_9aea05_daebdda91ced4d119f7837b7bae26e19 | Oversized 10X HUB wordmark spanning the hero. |
| h1 | 45px | 400 | 1.2 | 0 | — | helvetica-w01-roman | Primary page heading or prominent supporting headline. |
| h2 | 24.5px | 400 | 1 | 0 | — | wfont_9aea05_daebdda91ced4d119f7837b7bae26e19 | Secondary section heading. |
| h3 | 18px | 400 | 1 | 0 | — | helvetica-w01-roman | Compact subheadings and resource labels. |
| body | 13.5px | 400 | 1.6 | 0 | — | helvetica-w01-roman | Short explanatory copy and resource descriptions. |
| nav | 18px | 400 | 1.4 | 0 | — | helvetica-w01-roman | Header navigation and utility labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 10, 12, 15, 20, 30, 40, 50, 60, 70, 90 px.
- Section rhythm 40px · element gap 30px · card padding — · max content width —.

Use a full-bleed black canvas and a wide, open composition rather than a constrained card grid. Align the hero wordmark close to the viewport edges and place small utility controls in a compact top row. Leave substantial vertical separation between the wordmark, its distributed microcopy, and the supporting statement. The page is intentionally low-density, with a thin horizontal divider around the sorting controls lower down. Preserve the quiet expanses of empty space instead of filling them with extra modules.

## Shape & elevation

- Radius: button `2px` · nav `9999px` · link `12px` · xs `12px` · pill `9999px`
- Shadow `sm` (button): `rgba(0, 0, 0, 0) 0.78px 1.84px 8px 1px`
- Motion: standard transition `0.1s linear` on interactive elements.

The interface is predominantly flat, with no meaningful card-shadow system. Use fine outlines and hairline separators to define controls and sorting areas, and reserve filled contrast for the red submission pill. Avoid stacked panels or raised surfaces that interrupt the uninterrupted dark canvas.

## Imagery

The visible first screen is driven by typography, not photography, illustration, or 3D. Treat the wordmark as the hero visual: large, white, and nearly edge-to-edge on the black field. Keep any resource imagery elsewhere secondary and sharply framed rather than layering decorative visuals into the sparse hero.

## Components

### Utility header

A compact top-right utility row with a small icon cluster, outlined dark-mode toggle, and red rounded submission control.

### Display wordmark

Oversized white “10X HUB” typography dominates the hero and stretches across nearly the full viewport width.

### Distributed microcopy

Short supporting words sit in a low, widely spaced row beneath the wordmark, functioning as a delicate typographic detail.

### Supporting statement

A short, left-aligned white headline sits well below the hero with generous empty space around it.

### Resource sorting bar

A dark, thinly ruled horizontal control divides sorting options into segments and marks the active choice in red.

### Footer credit

A minimal centered maker credit sits near the bottom, in small white text on the black canvas.

### Measured component styles

- **Primary button**: transparent background · text #000000 · radius 2px · padding 0px · 400 13.3333px Arial · shadow rgba(0, 0, 0, 0) 0.78px 1.84px 8px 1px
- **Link**: transparent background · text #000000 · radius 12px · padding 0px 20px · 400 10px Arial
- **Navigation item** (“10X HUB Toggle dark mode Submit resource”): transparent background · text #000000 · radius 0px · padding 0px · 400 10px Arial

## Do

- Use black as the uninterrupted primary canvas.
- Make the hero wordmark dramatically larger than surrounding text.
- Keep supporting copy white, concise, and regular-weight.
- Reserve red for submission and active-state signals.
- Leave broad, intentional areas of empty space.
- Use thin gray outlines for quiet controls and separators.

## Don't

- Do not add bright colors beyond the measured palette.
- Do not fill the hero with cards or decorative imagery.
- Do not crowd the header with large navigation labels.
- Do not turn every interface element into a red button.
- Do not introduce gradients, heavy shadows, or layered panels.
- Do not center all copy; preserve the left-aligned supporting statement.

## Agent prompt

Build a new page in the 10X HUB visual style: use Pitch Black (#000000) as the dominant full-bleed canvas and Gallery White (#ffffff) for high-contrast typography. Make a very large, clean sans-serif headline the primary visual, with compact utility navigation above and a substantial field of negative space around the content. Use Signal Red (#ff1841) sparingly for the main action and active states; use Soft Steel (#bebcbc) only for subdued outlines. Keep the layout flat and editorial, with thin rules instead of raised cards. Use regular-weight sans-serif text, small quiet labels, and clear left alignment for supporting copy. Avoid decorative imagery, gradients, excess color, and dense content clusters. The page should feel stark, spacious, and deliberately typography-led.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark canvas with a compact top utility row, edge-spanning display wordmark, and distant left-aligned supporting copy. | utility navigation, theme toggle, resource submission action | oversized wordmark, red pill CTA, wide negative space, thin sorting divider |

## Source CSS custom properties (selected)

```css
--wst-button-color-fill-primary: rgb(193,241,0);
--wst-button-color-border-primary: rgb(193,241,0);
--wst-button-color-text-primary: rgb(255,255,255);
--wst-button-color-fill-primary-hover: rgb(193,241,0);
--wst-button-color-border-primary-hover: rgb(193,241,0);
--wst-button-color-text-primary-hover: rgb(255,255,255);
--wst-button-color-fill-primary-disabled: rgb(148,148,148);
--wst-button-color-border-primary-disabled: rgb(148,148,148);
--wst-button-color-text-primary-disabled: rgb(255,255,255);
--wst-button-color-fill-secondary: rgb(255,255,255);
--wst-button-color-border-secondary: rgb(193,241,0);
--wst-button-color-text-secondary: rgb(193,241,0);
--wst-button-color-fill-secondary-hover: rgb(255,255,255);
--wst-button-color-border-secondary-hover: rgb(193,241,0);
--wst-button-color-text-secondary-hover: rgb(193,241,0);
--wst-button-color-fill-secondary-disabled: rgb(255,255,255);
--wst-button-color-border-secondary-disabled: rgb(148,148,148);
--wst-button-color-text-secondary-disabled: rgb(148,148,148);
--wst-color-fill-base-1: rgb(255,255,255);
--wst-color-fill-base-2: rgb(0,0,0);
--wst-color-fill-base-shade-1: rgb(236,234,234);
--wst-color-fill-base-shade-2: rgb(148,148,148);
--wst-color-fill-base-shade-3: rgb(56,56,56);
--wst-color-fill-accent-1: rgb(193,241,0);
--wst-color-fill-accent-2: rgb(193,241,0);
--wst-color-fill-accent-3: rgb(193,241,0);
--wst-color-fill-accent-4: rgb(193,241,0);
--wst-color-fill-background-primary: rgb(255,255,255);
--wst-color-fill-background-secondary: rgb(236,234,234);
--wst-color-text-primary: rgb(0,0,0);
--wst-color-text-secondary: rgb(56,56,56);
--wst-color-action: rgb(193,241,0);
--wst-color-disabled: rgb(148,148,148);
--wst-color-title: rgb(0,0,0);
--wst-color-subtitle: rgb(56,56,56);
--wst-color-line: rgb(0,0,0);
--wst-font-style-h2: normal normal normal calc(63 * min((100 * 1cqw), 9999px) / 1920)/1.4em helvetica-w01-roman,sans-serif;
--wst-font-style-h3: normal normal normal calc(57 * min((100 * 1cqw), 9999px) / 1920)/1.4em helvetica-w01-roman,sans-serif;
--wst-font-style-h4: normal normal normal calc(51 * min((100 * 1cqw), 9999px) / 1920)/1.4em helvetica-w01-roman,sans-serif;
--wst-font-style-h5: normal normal normal calc(42 * min((100 * 1cqw), 9999px) / 1920)/1.4em helvetica-w01-roman,sans-serif;
```

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