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

# Huddle · Design System

> A calm editorial canvas for collaborative startup work

**Theme:** light · **Industry:** design · **Source:** https://www.huddle.works/ · **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._

Huddle pairs a pale, structured canvas with oversized typography and vivid project-card mockups to present a flexible design-and-build service. The page moves from a compact hero into a four-step explanation, then closes with audience-specific calls to action and a quiet information footer.

## North star

Keep the page calm and editorial, using precise dark rules and generous white space to frame colorful, rounded product-card imagery.

## Overview

The visual system balances an editorial grid with friendly, tactile product imagery. A light stone canvas (#e5e6e1) defines the hero, while white process sections create breathing room; thin dark rules articulate the hero grid and separate content without relying on shadow. Nng is used throughout in a restrained, mostly regular weight: large, loosely set headlines lead, while light body copy and compact labels keep explanations quiet. The hero places the headline and CTA on the left and a vertical stack of colorful work cards on the right. Later sections alternate text and product mockups, keeping the explanation readable and concrete. Muted lilac, dusty rose, and sage appear mainly in interface mockups and audience CTA panels rather than as a pervasive page-wide palette. Generous section spacing, large rounded section transitions, pill-shaped buttons, and crisp card outlines make the experience feel approachable but organized.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Oxblood | `#5c2529` | `--color-oxblood` | accent | Dark rose accent for robotics badges, small links, and occasional interface labels. |
| Plum Ink | `#453b60` | `--color-plum-ink` | accent | Muted purple accent for the Private Beta label and select badges or link text. |
| Soft Charcoal | `#232323` | `--color-soft-charcoal` | neutral | Primary heading and body ink, plus the dark lower-page CTA and footer bands. |
| True Black | `#000000` | `--color-true-black` | neutral | Strong grid rules, dark pill buttons, and high-contrast text or card outlines. |
| Cocoa | `#65451d` | `--color-cocoa` | brand | Brown-gold CTA variant and warm accent used on the company audience panel. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main background for the four process sections, text areas, and button text. |
| Honey Gold | `#e4b976` | `--color-honey-gold` | accent | Warm CTA text and small badge or card details, paired with Cocoa. |
| Stone Canvas | `#e5e6e1` | `--color-stone-canvas` | surface | Primary hero background and recurring pale neutral page canvas. |
| Deep Sage | `#3a4444` | `--color-deep-sage` | semantic | Muted dark text and sage-category badge background in project-card UI. |
| Graphite | `#333333` | `--color-graphite` | neutral | Secondary link and mockup text, especially inside outlined building cards. |
| Mist Blue | `#d3e5e9` | `--color-mist-blue` | semantic | Very light blue-gray section hairlines and subtle separators. |
| Sage Mist | `#aebbba` | `--color-sage-mist` | accent | Sage project-card fills and the designer audience CTA panel. |
| Lilac Haze | `#bbb2ce` | `--color-lilac-haze` | accent | Lilac fills in project and wallet mockups; illustration and interface color, not a core canvas. |
| Dusty Rose | `#cb9da2` | `--color-dusty-rose` | accent | Pink project cards, robotics badge text, and the narrow announcement strip. |
| Wine Ink | `#662f33` | `--color-wine-ink` | accent | Occasional dark rose text within mockup and badge artwork. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | neutral | Sparse low-emphasis text detail, most noticeable in secondary interface content. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (True Black) · `--color-surface-2` → `#232323` (Soft Charcoal) · `--color-surface-3` → `#e5e6e1` (Stone Canvas) · `--color-surface-4` → `#aebbba` (Sage Mist) · `--color-text` → `#232323` (Soft Charcoal) · `--color-text-muted` → `#3a4444` (Deep Sage) · `--color-text-subtle` → `#333333` (Graphite) · `--color-border` → `#d3e5e9` (Mist Blue) · `--color-accent` → `#65451d` (Cocoa) · `--color-accent-2` → `#453b60` (Plum Ink) · `--color-accent-3` → `#5c2529` (Oxblood) · `--color-on-accent` → `#e4b976` (Honey Gold)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#232323` | `#ffffff` | 15.72:1 | AAA |
| `#232323` | `#000000` | 1.34:1 | fail |
| `#232323` | `#e5e6e1` | 12.53:1 | AAA |
| `#3a4444` | `#ffffff` | 10.05:1 | AAA |
| `#3a4444` | `#000000` | 2.09:1 | fail |
| `#3a4444` | `#232323` | 1.56:1 | fail |
| `#3a4444` | `#e5e6e1` | 8.01:1 | AAA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#000000` | 1.66:1 | fail |
| `#333333` | `#232323` | 1.24:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Nng | `--font-body` | webfont | 400, 300, 500, 700 | Site-wide display, headings, body copy, links, labels, and buttons. | DM Sans |

- **Nng:** Mostly regular with light body text; headings use subtly tight tracking, sentence case, and no all-caps except small step labels.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 17.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 69px | 400 | 1.3 | -0.021em | — | Nng | Oversized hero headline and high-impact promotional statements. |
| h1 | 44px | 400 | 1.25 | -0.011em | — | Nng | Primary page headline and prominent section heading. |
| h2 | 40px | 400 | 1.35 | -0.008em | — | Nng | Main headings for process steps and audience calls to action. |
| h3 | 29px | 400 | 1.22 | 0 | — | Nng | Secondary headings within feature or testimonial content. |
| h4 | 22px | 400 | 1.3 | 0 | — | Nng | Compact card and supporting content headings. |
| body | 17.5px | 300 | 1.5 | 0 | — | Nng | Light explanatory paragraphs and process descriptions. |
| caption | 12px | 400 | 1.42 | 0 | — | Nng | Small metadata, labels, and compact badge text. |
| button | 16px | 400 | 1.25 | 0 | — | Nng | Text inside rounded primary and section-level CTA buttons. |
| link | 15px | 400 | 1.58 | 0 | — | Nng | Inline navigation, secondary actions, and footer links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 5, 6, 8, 10, 12, 14, 16, 18, 20, 24, 32, 40, 48, 144 px.
- Section rhythm 60px · element gap 32px · card padding 19px · max content width 1150px.

A spacious desktop composition sits within a measured 1150px page maximum. The hero uses a strong two-column split, with the headline and CTA on the left and a narrow, stacked project-card rail on the right. Its dark hairlines give the grid a precise editorial feel. Below, white process sections alternate between one- and two-column arrangements, with consistent left-aligned copy and product imagery. Large vertical gaps and rounded transitions separate major bands; the final dark area groups audience CTAs and footer content. Overall density is low, with compact labels against expansive content regions.

## Shape & elevation

- Radius: button `9999px` · card `24px` · badge `4px` · link `50%` · xs `4px` · sm `8px` · md `24px` · lg `40px` · xl `58px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The page is largely flat: no measured shadows or gradients. Thin black borders and hairlines define the hero grid and outlined mockup cards. Layering comes from overlapping or stacked product cards and portraits, plus rounded section boundaries; pill buttons gain emphasis through solid fills rather than elevation.

## Imagery

Imagery centers on interface mockups: rounded project cards, team profile portraits, workflow screens, and a wallet panel. The hero shows stacked cards cropped by the viewport, while process sections pair a single interface scene with customer quotes or profile cutouts. A later card includes product photography. Pastel lilac, rose, and sage belong chiefly to these mockups, keeping the site canvas restrained.

## Components

### Announcement strip

A narrow white top band with a compact purple Private Beta badge and one-line announcement.

### Hero split

Stone Canvas background; oversized left-aligned headline, supporting paragraph, black pill CTA, and secondary designer link beside a vertical project-card rail.

### Project cards

Rounded pastel interface mockups with compact status labels, small tags, and crisp dividers; colors function as illustrative UI.

### Process step

White section with a small numbered step label, clear heading, concise body copy, testimonial and profile detail, plus product-screen imagery.

### Pill CTA

High-contrast rounded button; black with white text is common, while a warm Cocoa and Honey Gold variant appears in the hero.

### Audience panels

Two large, rounded company and designer panels use warm gold and sage fills with concise copy and a compact CTA.

### Footer

Dark charcoal band organizes About, join, and useful links into quiet columns with a prominent Huddle wordmark.

### Measured component styles

- **Primary button** (“Get started →”): background #65451d · text #e4b976 · radius 100px · padding 24px 40px · 400 22px Nng
- **Secondary button** (“Get started”): background #000000 · text #ffffff · radius 1000px · padding 12px 16px · 400 16px Nng
- **Link** (“Apply as a designer”): transparent background · text #000000 · radius 0px · padding 0px 0px 5px 0px · 400 15.2px Nng
- **Card** (“BUILDING... Product DesignProduct Strate”): transparent background · text #333333 · border 1px solid #000000 · radius 0px · padding 20px 18px · 400 14px Roboto
- **Badge** (“#robotics”): background #5c2529 · text #cb9da2 · radius 4px · padding 4px 8px · 400 12px Nng

## Do

- Use Stone Canvas (#e5e6e1) as the hero’s calm grounding surface.
- Keep headlines large, left-aligned, and visually dominant.
- Separate major regions with thin, crisp dark rules.
- Use colorful pastels mainly inside mockups and audience panels.
- Give process copy ample white space and pair it with real interface examples.
- Make primary actions pill-shaped and high contrast.

## Don't

- Do not turn the whole page into a saturated color field.
- Do not add shadows or gradients that are absent from the measured system.
- Do not crowd the hero with multiple competing calls to action.
- Do not use the mockup palette as the default text or canvas palette.
- Do not center-align every section; preserve the left-led editorial rhythm.
- Do not replace thin borders with heavy decorative framing.

## Agent prompt

Build a new Huddle-style page as a spacious, editorial landing page for a collaborative design service. Use Stone Canvas (#e5e6e1) for the hero and Gallery White (#ffffff) for content sections; set primary text in Soft Charcoal (#232323) and use True Black (#000000) for crisp rules and common CTA pills. Use Nng or a close sans-serif substitute, with large regular-weight, subtly tight-tracked headlines and lighter supporting copy. Create a clear split hero with copy and action on the left and stacked, rounded product cards on the right. Use Lilac Haze (#bbb2ce), Dusty Rose (#cb9da2), and Sage Mist (#aebbba) chiefly within interface mockups. Keep process sections left-aligned, spacious, and alternating in layout. Avoid shadows and gradients; rely on fine borders, generous gaps, and rounded transitions.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Stone Canvas 双栏首屏：左侧主标题、说明与 CTA，右侧竖向项目卡片列。 | 主次 CTA, 项目卡片预览 | 浅石色画布, 黑色细分隔线, 黑色胶囊按钮, 彩色圆角卡片 |
| 2 | how-it-works | 白底双栏，左侧流程说明与客户引语，右侧项目需求卡片。 | 步骤说明, 客户评价, 开始服务 CTA | 小号步骤标签, 简洁标题, 圆角界面卡片 |
| 3 | how-it-works | 白底单栏内容组合，说明与评价在左，团队项目卡片及头像在右。 | 步骤说明, 客户评价, 团队匹配展示 | 轻量文字块, 人物头像叠放, 淡紫项目卡片 |
| 4 | how-it-works | 白底双栏，左侧说明和引语，右侧结合产品照片与界面卡片。 | 步骤说明, 客户评价, 开始服务 CTA | 产品照片, 叠加界面卡片, 宽松留白 |
| 5 | how-it-works | 白底双栏说明区，左侧文字与引语，右侧钱包界面卡片。 | 步骤说明, 客户评价, 支付方式说明 | 清晰金额层级, 淡紫钱包界面, 圆角卡片 |
| 6 | cta | 深色底部区域包含公司与设计师两类受众行动内容。 | 受众分流, 双路径 CTA | 左右并列彩色面板, 圆角边界, 对比色按钮 |
| 7 | footer | 深炭色页脚内分列展示品牌介绍、加入入口、实用链接及标志。 | 分组导航, 加入入口, 法律信息 | 小字号文字, 多列链接, 品牌字标 |

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