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

# Humble · Design System

> Calm interfaces for smarter factories

**Theme:** light · **Industry:** ai · **Source:** https://humbleops.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._

Humble pairs a quiet, near-white canvas with oversized editorial headlines, restrained orange accents, and black pill-shaped actions. Product UI cards and factory imagery make the manufacturing software tangible while generous open space keeps the long homepage composed.

## North star

Keep the canvas quiet and the typography decisive; use orange only to guide attention between clear product evidence and action.

## Overview

The visual strategy balances a near-white #fafafa canvas with black typography and a small, high-energy orange accent. The header is a restrained horizontal band; the hero uses a large, tightly tracked display headline beside compact supporting copy, then lets a product visual occupy the space below. Bricolage Grotesque gives headlines a distinctive, soft-edged editorial character, while Geist keeps navigation and explanatory copy practical and legible. Content shifts between sparse text-led moments, large interface mockups, and pale rounded cards. Factory imagery adds color and context, but its varied hues belong to illustrations and product media rather than the core palette. Generous vertical pauses separate sections, while compact copy blocks and card details preserve information density. Black pill CTAs provide clear action contrast; soft shadows and subtle hairlines distinguish layered UI without making the overall page feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fafafa` | `--color-gallery-white` | neutral | Primary page canvas and light text-muted token; keeps navigation, hero, and long content sections visually open. |
| Workshop Gray | `#6e6e6e` | `--color-workshop-gray` | neutral | Muted navigation and supporting copy, separating secondary information from black headlines. |
| Machine Ink | `#000000` | `--color-machine-ink` | brand | Headlines, primary CTA fills, and key UI text; anchors the otherwise pale interface. |
| Signal Orange | `#ff4000` | `--color-signal-orange` | accent | Brand mark, highlighted phrases, hero graphic, and occasional product UI emphasis; the main attention cue. |
| Ember Orange | `#fd551d` | `--color-ember-orange` | accent | Measured orange gradient companion, seen in accent treatments rather than as a broad page surface. |
| Soft Alloy | `#f1f1f1` | `--color-soft-alloy` | surface | Pale secondary surface for subtle section or content separation. |
| Warm Stone | `#ecebe8` | `--color-warm-stone` | surface | Warm-tinted card surface, including the distinct explanatory panel. |
| Graphite | `#1c1c1c` | `--color-graphite` | semantic | Occasional dark heading and text tone, subtly softer than the primary black. |

### Semantic aliases

`--color-canvas` → `#fafafa` (Gallery White) · `--color-surface` → `#f1f1f1` (Soft Alloy) · `--color-surface-2` → `#ecebe8` (Warm Stone) · `--color-text` → `#000000` (Machine Ink) · `--color-text-muted` → `#6e6e6e` (Workshop Gray) · `--color-text-subtle` → `#fafafa` (Gallery White) · `--color-accent` → `#ff4000` (Signal Orange) · `--color-accent-2` → `#fd551d` (Ember Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fafafa` | 20.12:1 | AAA |
| `#000000` | `#f1f1f1` | 18.59:1 | AAA |
| `#000000` | `#ecebe8` | 17.62:1 | AAA |
| `#6e6e6e` | `#fafafa` | 4.89:1 | AA |
| `#6e6e6e` | `#f1f1f1` | 4.51:1 | AA |
| `#6e6e6e` | `#ecebe8` | 4.28:1 | AA-large |
| `#fafafa` | `#f1f1f1` | 1.08:1 | fail |
| `#fafafa` | `#ecebe8` | 1.14:1 | fail |
| `#ff4000` | `#fafafa` | 3.36:1 | AA-large |
| `#ff4000` | `#f1f1f1` | 3.11:1 | AA-large |

### Gradients

- `linear-gradient(rgba(255, 64, 0, 0) 1%, rgba(255, 64, 0, 0.88) 21.0779%, rgb(255, 64, 0) 79.9919%, rgba(255, 64, 0, 0) 98%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 500, 600 | Primary body and navigation type for concise copy and interface labels. | Inter |
| Bricolage Grotesque | `--font-display` | webfont | 500 | Display and heading type, especially the hero and section titles. | Plus Jakarta Sans |
| sans-serif | `--font-sans-serif` | system | 400 | Small captions and fallback text. | Arial |
| Geist Variable | `--font-geist-variable` | webfont | 400 | Variable-font body fallback in measured text. | Inter |
| Inter | `--font-inter` | webfont | 600 | Minor interface and heading fallback. | Inter |

- **Geist:** Measured weights 500 and 600; compact, practical sans-serif with neutral tracking.
- **Bricolage Grotesque:** Measured at 500; large headlines use tight negative tracking and natural sentence case.
- **sans-serif:** System fallback at regular weight; reserve for minor labels and captions.
- **Geist Variable:** Measured at 400; keep supporting text clean and unembellished.
- **Inter:** Measured at 600; use sparingly where a sturdy UI sans is needed.

### Type scale — Perfect Fourth (ratio ≈ 1.349, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 58px | 500 | 1.1 | -0.05em | — | Bricolage Grotesque | Oversized hero statement and major campaign-style headings. |
| h1 | 44px | 500 | 1.1 | -0.052em | — | Bricolage Grotesque | Primary page headline when not using the larger display treatment. |
| h2 | 32px | 500 | 1.2 | -0.03em | — | Bricolage Grotesque | Section titles introducing major homepage content. |
| h3 | 24px | 500 | 1.2 | -0.03em | — | Bricolage Grotesque | Feature and subsection headings. |
| h4 | 20px | 500 | 0.7 | -0.02em | — | Bricolage Grotesque | Compact card or feature headings. |
| body | 13px | 500 | 1.4 | 0 | — | Geist | Explanatory paragraphs, card copy, and product descriptions. |
| caption | 12px | 400 | normal | 0 | — | sans-serif | Small annotations, metadata, and fine-print labels. |
| nav | 15px | 500 | 1.3 | 0 | — | Geist | Header navigation links and concise menu labels. |

OpenType features in use: `"cv01", "cv05", "cv09", "cv11", "ss03"`, `"blwf", "cv03", "cv04", "cv09", "cv11", "ss01", "ss03", "ss04"`, `"blwf", "cv03", "cv04", "cv09", "cv11"`, `"ss01", "ss02", "ss03", "ss04"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 8, 10, 14, 16, 24, 32, 38, 40, 42 px.
- Section rhythm 32px · element gap 10px · card padding — · max content width —.

Use a broad centered desktop composition with substantial side gutters and a compact horizontal navigation bar. The hero is a split editorial arrangement: headline and short proof copy sit in distinct columns, followed by a large centered product visual. Below, alternate full-width media, text-and-interface splits, and stacked comparison cards. Keep copy blocks narrow and interfaces prominent. Section rhythm is spacious and deliberately uneven, with long blank pauses between major content groups; individual cards remain information-dense. Do not invent a fixed max width from the measurements.

## Shape & elevation

- Radius: button `9999px` · card `30px` · media `40px` · nav `4px` · xs `4px` · sm `6px` · md `20px` · lg `29px` · xl `30px` · 2xl `40px` · pill `9999px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.03) 0px 0.706592px 0.706592px -0.416667px, rgba(0, 0, 0, 0.03) 0px 1.80656px 1.80656px -0.833333px, rgba(0, 0, 0, 0.03) 0px 3.62176px 3.62176px -1.25px, rgba(0, 0, 0, 0.03) 0px 6.8656p`
- Shadow `md` (card): `rgba(0, 0, 0, 0.02) 0px 0.839802px 0.839802px -0.3125px, rgba(0, 0, 0, 0.02) 0px 1.99048px 1.99048px -0.625px, rgba(0, 0, 0, 0.02) 0px 3.63084px 3.63084px -0.9375px, rgba(0, 0, 0, 0.02) 0px 6.03627px `
- Shadow `md-2` (other): `rgba(0, 0, 0, 0.13) 0px 0.839802px 0.839802px -0.3125px, rgba(0, 0, 0, 0.13) 0px 1.99048px 1.99048px -0.625px, rgba(0, 0, 0, 0.13) 0px 3.63084px 3.63084px -0.9375px, rgba(0, 0, 0, 0.13) 0px 6.03627px `
- Shadow `lg-2` (card): `rgb(0, 0, 0) 0px 0px 0px 6px, rgba(0, 0, 0, 0.59) 0px 50px 48px 0px`
- Motion: standard transition `0.4s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

The page is mostly flat, with subtle hairlines and pale surfaces doing most of the separation. White cards use soft, low-opacity layered shadows and generous rounded corners; device mockups can carry much stronger image-specific depth. Reserve visible layering for product evidence and primary actions rather than adding shadows to every section.

## Imagery

Mix product-interface captures with illustrated factory scenes and human-at-work imagery. The hero places a prominent device mockup over a strong orange geometric shape; later sections use large, softly framed interface panels and comparison cards. Media can contain colors outside the palette: treat those as illustration or product content, not brand tokens. Keep imagery crisp but visually subordinate to the message.

## Components

### Header navigation

A narrow pale top band with the brand mark at left, compact Geist links centered, and a black rounded Book a Call action at right.

### Hero statement

Large Bricolage Grotesque headline with tight tracking, a slim vertical divider, and a separate compact supporting-copy column.

### Primary CTA

Black pill-shaped action with white text and a soft shadow; repeat consistently for high-intent actions.

### Product media frame

Large interface or device image in a strongly rounded frame, sometimes layered over the signature orange hero graphic.

### Comparison cards

Pale, generously rounded cards contrast a muted 'Today' state with a highlighted Humble outcome and subtle separators.

### Feature showcase

A concise text introduction paired with broad product UI imagery, repeated down the page with ample separation.

### Measured component styles

- **Primary button** (“Book a Call Book a Call”): background #000000 · text #0000ee · radius 200px · padding 0px 24px · 400 12px sans-serif
- **Link** (“Start my 24h Build See if You're a Right”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Card** (“Today Machine capability degrades mid-ru”): background #ffffff · text #000000 · radius 30px · padding 0px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.03) 0px 0.706592px 0.706592px -0.416667px, rgba(0, 0, 0, 0.03) 0
- **Navigation item** (“60-Second Fit Test Pricing Security Abou”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use #fafafa as the dominant page canvas.
- Set prominent headings in Bricolage Grotesque with tight tracking.
- Keep body copy compact and use Geist for navigation and interface text.
- Use #ff4000 selectively for emphasis and signature visual accents.
- Make black pill CTAs the clearest action on pale backgrounds.
- Pair concise text with tangible product UI or factory imagery.

## Don't

- Do not turn orange into a full-page background color.
- Do not crowd the hero with dense explanatory paragraphs.
- Do not use heavy borders around every card or section.
- Do not treat illustration colors as additions to the brand palette.
- Do not use equal visual weight for every heading and caption.
- Do not fill the generous section pauses with decorative content.

## Agent prompt

Build a new Humble-style manufacturing AI page with a calm #fafafa Gallery White canvas, Machine Ink #000000 headlines, and restrained Signal Orange #ff4000 emphasis. Use Bricolage Grotesque for large, tightly tracked editorial headings and Geist for compact navigation, body copy, and UI labels. Create a slim header, a split hero statement with a short supporting column, and a prominent product interface visual. Use black pill-shaped CTAs, pale Soft Alloy #f1f1f1 or Warm Stone #ecebe8 surfaces, generous rounded cards, and understated shadows. Alternate concise text blocks with substantial product screenshots and factory imagery. Preserve long, deliberate whitespace between major sections; keep each card’s information compact. Colors inside screenshots and illustrations are media, not palette extensions.

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