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

# Bambu Lab · Design System

> Precision tools, presented with quiet confidence.

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

Bambu Lab’s homepage pairs a cinematic, dark product hero with a bright, orderly storefront below. Restrained green CTAs and clear editorial sections keep the focus on printers, materials, and maker projects.

## North star

Let immersive product imagery lead, then use a bright modular storefront and restrained green actions to make every next step clear.

## Overview

The page contrasts a cinematic, full-bleed dark hero with a predominantly white and pale-gray storefront. The hero uses a warm, low-key product image and white type, with the printer placed to the right and concise copy and paired actions to the left; the measured black gradient supports legibility over media. Below, white canvas and #eeeeee promotional bands organize category cards, inspiration tiles, learning resources, reviews, and editorial content into distinct, easy-to-scan blocks. Manrope carries the interface throughout: bold, compact headlines establish hierarchy, while regular-weight body copy and links remain restrained. Green is reserved for high-intent commerce and navigation actions rather than broad decoration. Product photography and maker imagery provide the page’s color and personality, while flat surfaces, fine separators, and minimal rounding preserve a precise, modern hardware feel. Generous white intervals separate content modules without making the overall storefront feel sparse.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and frequent light text, including headings and copy over dark hero imagery. |
| Graphite Ink | `#333333` | `--color-graphite-ink` | neutral | Default dark text for headings, body copy, and text on light buttons. |
| Soft Alloy | `#eeeeee` | `--color-soft-alloy` | surface | Pale-gray section background and broad promotional surface behind product categories. |
| Deep Stage | `#000000` | `--color-deep-stage` | surface | Dark navigation and footer surfaces; also appears in the measured hero-overlay gradient. |
| Porcelain Mist | `#f5f5f5` | `--color-porcelain-mist` | surface | Light card, input, and button fill; also used for subtle borders and low-emphasis text. |
| Maker Green | `#00ae42` | `--color-maker-green` | accent | Store CTA, signup action, and commerce links; a sparse signal rather than a large background color. |
| Slate Divider | `#616161` | `--color-slate-divider` | neutral | Subtle card and menu borders; keep it secondary to the surfaces and content. |
| Quiet Gray | `#9e9e9e` | `--color-quiet-gray` | semantic | Muted links and supporting text where lower emphasis is needed. |
| Carbon Detail | `#1a1a1a` | `--color-carbon-detail` | neutral | Minor dark button and text detail; not a defining page-wide color. |
| Metal Haze | `#b2b2b2` | `--color-metal-haze` | semantic | Secondary inverse surface in measured details; use only for subdued dark-surface contrast. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#eeeeee` (Soft Alloy) · `--color-surface-2` → `#000000` (Deep Stage) · `--color-surface-3` → `#f5f5f5` (Porcelain Mist) · `--color-surface-4` → `#b2b2b2` (Metal Haze) · `--color-text` → `#333333` (Graphite Ink) · `--color-text-muted` → `#f5f5f5` (Porcelain Mist) · `--color-text-subtle` → `#9e9e9e` (Quiet Gray) · `--color-border` → `#f5f5f5` (Porcelain Mist) · `--color-accent` → `#00ae42` (Maker Green) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#eeeeee` | 10.89:1 | AAA |
| `#333333` | `#000000` | 1.66:1 | fail |
| `#333333` | `#f5f5f5` | 11.59:1 | AAA |
| `#f5f5f5` | `#ffffff` | 1.09:1 | fail |
| `#f5f5f5` | `#eeeeee` | 1.06:1 | fail |
| `#f5f5f5` | `#000000` | 19.26:1 | AAA |
| `#9e9e9e` | `#ffffff` | 2.68:1 | fail |
| `#9e9e9e` | `#eeeeee` | 2.31:1 | fail |
| `#9e9e9e` | `#000000` | 7.84:1 | AAA |

### Gradients

- `linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Manrope | `--font-body` | webfont | 400, 700, 500 | Primary family for headings, body copy, navigation, buttons, and links. | Inter |
| Arial | `--font-arial` | system | 700 | System fallback measured on the input field. | Arial |

- **Manrope:** Use regular and medium for interface text, bold for headings; sentence case and neutral tracking keep the tone direct.
- **Arial:** Appears only as a form-control fallback; keep input text plain and legible.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 1.01 | 0 | — | Manrope | Primary hero headline and strongest page-level announcement. |
| h2 | 34px | 700 | 1.2 | 0 | — | Manrope | Major section titles introducing content groups. |
| h3 | 32px | 700 | 1.3 | 0 | — | Manrope | Promotional and feature-card headlines. |
| h4 | 30px | 700 | 1.2 | 0 | — | Manrope | Secondary section or card heading. |
| body | 14px | 400 | 1.5 | 0 | — | Manrope | Descriptions, supporting copy, and editorial summaries. |
| caption | 12px | 400 | 1.5 | 0 | — | Manrope | Small labels, metadata, and understated helper text. |
| button | 16px | 400 | 1.4 | 0 | — | Manrope | Commerce, signup, and hero action labels. |
| link | 14px | 400 | 1.5 | 0 | — | Manrope | Navigation, product actions, and inline calls to explore. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 24, 28, 32, 40, 102, 140, 159 px.
- Section rhythm 40px · element gap 12px · card padding — · max content width 1280px.

The measured content uses a maximum width of 1280px, while the opening hero and media run full bleed. A compact horizontal navigation sits above the hero. Below it, promotional tiles form a two-column grid, followed by paired image cards and three-column learning cards. Content is center-aligned at section level, with left-aligned text inside cards where appropriate. Sections alternate broad light bands and white breathing spaces; the dense commerce links are balanced by spacious editorial and review areas.

## Shape & elevation

- Radius: button `4px` · input `5px` · xs `3px` · sm `4px` · md `5px` · lg `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: cards rely on pale surface blocks and spacing rather than visible shadows. Fine gray borders appear in selected menus or card details, while image-led tiles create their own depth. The hero gains separation from the dark product scene and its overlay gradient; buttons use simple fills and modest corner rounding.

## Imagery

Large, polished product photography dominates the hero, with the printer isolated against a warm, dark studio background. Below, cutout product and filament images share pale category tiles, while lifestyle photography shows practical printing, hobbies, education, and fashion. Review thumbnails and blog imagery add a candid editorial layer. The measured page is image-led rather than illustration-led, with photography supplying most color beyond the restrained interface palette.

## Components

### Primary navigation

Compact black top bar with white logo and links, account icon, and a green Store action.

### Hero actions

Two adjacent actions over the hero: a filled pale Buy now button and an outlined Learn more button.

### Commerce button

Manrope 16px regular; Buy now uses #f5f5f5 with #333333 text and a measured 4px radius.

### Store button

Green #00ae42 fill with white text; compact navigation treatment uses a measured 3px radius.

### Category tile

Pale surface with a small category label, centered heading, green text links, and product imagery.

### Editorial image card

Large photography with white overlaid title and supporting copy, plus a circular directional affordance.

### Email signup

Dark footer section with concise invitation, email input, green signup action, and muted supporting text.

### Measured component styles

- **Primary button** (“Store”): background #00ae42 · text #ffffff · radius 3px · padding 4px 12px · 400 16px Manrope
- **Secondary button** (“Buy now”): background #f5f5f5 · text #333333 · radius 4px · padding 6px 16px · 400 16px Manrope
- **Link** (“Buy now”): transparent background · text #00ae42 · radius 0px · padding 0px · 400 16px Manrope
- **Input**: background #f5f5f5 · text #000000 · radius 5px · padding 1px 2px · 400 16px Arial
- **Card** (“The Bambu H2D isn’t just a bigger 3D pri”): background #f5f5f5 · text #333333 · radius 0px · padding 0px · 400 16px Manrope

## Do

- Lead with a large, authentic product image.
- Use white text where it overlays dark hero media.
- Reserve Maker Green for high-intent actions and links.
- Keep product categories in clear, pale modular tiles.
- Set headings in bold Manrope and supporting text in regular Manrope.
- Use whitespace to distinguish content groups.

## Don't

- Do not add extra accent colors to the interface palette.
- Do not put heavy shadows on ordinary content cards.
- Do not make every section dark or full bleed.
- Do not let product imagery obscure labels or actions.
- Do not turn links into oversized decorative buttons.
- Do not introduce rounded-card styling where the measured layout is flat.

## Agent prompt

Build a new Bambu Lab page with a compact black navigation bar, crisp white links, and a sparse #00ae42 action. Start with a full-bleed, cinematic product image: keep the product prominent, place concise white copy beside it, and use a subtle dark gradient only to preserve contrast. Follow with a bright storefront rhythm using #ffffff canvas, #eeeeee product bands, and flat image-led tiles. Use Manrope for the interface, bold for headings and regular for body copy; keep text direct and sentence case. Apply #f5f5f5 to quiet controls and #333333 to primary light-surface text. Make product photography do the visual work, separate modules with whitespace, and avoid decorative shadows, extra palette colors, or excessive rounding. Keep commerce actions clear and easy to scan.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed hero beneath a compact horizontal navigation; product media fills the frame with copy and paired actions aligned to one side. | primary and secondary action, carousel indicators, product discovery | dark image overlay, white hero typography, green Store action, full-bleed product photography |

## Source CSS custom properties (selected)

```css
--Font-Style-Headline-1-Size: 100px;
--Font-Style-Headline-1-Line-Height: 1.1;
--Font-Style-Headline-2-Size: 54px;
--Font-Style-Headline-2-Line-Height: 1.01;
--Font-Style-Headline-3-Size: 48px;
--Font-Style-Headline-3-Line-Height: 1.01;
--Font-Style-Headline-4-Size: 40px;
--Font-Style-Headline-4-Line-Height: 1.2;
--Font-Style-Headline-5-Size: 34px;
--Font-Style-Headline-5-Line-Height: 1.2;
--Font-Style-Subtitle-1-Size: 30px;
--Font-Style-Subtitle-1-Line-Height: 1.2;
--Font-Style-Subtitle-2-Size: 24px;
--Font-Style-Subtitle-2-Line-Height: 1.2;
--Font-Style-Subtitle-3-Size: 18px;
--Font-Style-Subtitle-3-Line-Height: 1.3;
--Font-Style-Subtitle-4-Size: 16px;
--Font-Style-Subtitle-4-Line-Height: 1.4;
--Font-Style-Subtitle-5-Size: 14px;
--Font-Style-Subtitle-5-Line-Height: 1.5;
--Font-Style-Subtitle-6-Size: 14px;
--Font-Style-Subtitle-6-Line-Height: 1.5;
--Font-Style-Body-1-Size: 18px;
--Font-Style-Body-1-Line-Height: 1.3;
--Font-Style-Body-2-Size: 16px;
--Font-Style-Body-2-Line-Height: 1.4;
--Font-Style-Body-3-Size: 14px;
--Font-Style-Body-3-Line-Height: 1.5;
--Font-Style-Button-Size: 16px;
--Font-Style-Button-Line-Height: 1.4;
--Font-Style-Description-Size: 12px;
--Font-Style-Description-Line-Height: 1.5;
--Section-Gap-1: 60px;
--Section-Gap-2: 80px;
--Section-Gap-3: 100px;
--Section-Gap-4: 140px;
--Section-Gap-5: 160px;
--Section-Gap-6: 200px;
--Section-Gap-7: 240px;
--Section-Gap-8: 320px;
```

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