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

# Snapmaker · Design System

> Clean product storytelling with confident maker energy

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

Snapmaker’s homepage pairs a bright, restrained canvas with oversized product imagery and concise pathways into printers, materials, software, and support. Rounded cards and high-contrast dark media panels add structure, while yellow and blue accents mark action without overpowering the products.

## North star

Keep the interface quiet and product-led: use white space and large imagery for impact, reserving vivid accents for clear actions.

## Overview

The page uses Gallery White (#ffffff) as its dominant canvas, letting product renders, creative prints, and lifestyle scenes provide most of the visual color. Ink (#1c1e20) anchors headings and the dark newsletter/footer band; near-black panels frame cinematic video content. Signal Yellow (#ffcd00) is reserved for prominent rounded calls to action, while blue appears selectively on store and subscription actions. Roboto carries the full interface, from compact navigation and body copy to bold display headlines. The typography is direct and unornamented, with strong weight contrast and tight display tracking. A centered, wide content area organizes product-category cards, image-led use-case tiles, editorial quotes, and blog cards into clear grids. Generous white space around the hero contrasts with a compact rhythm in supporting content. Large imagery is often edge-to-edge or softly rounded, while cards remain understated and rely more on image and spacing than decoration.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and light card fields; preserves clean space around product imagery. |
| Soft Graphite | `#5c5c5c` | `--color-soft-graphite` | neutral | Muted copy and measured borders, including secondary text and subdued separators. |
| Ink | `#1c1e20` | `--color-ink` | brand | Primary heading and body text; also the newsletter and footer background. |
| Stage Black | `#111111` | `--color-stage-black` | surface | Dark media and inverse card surfaces used to frame video-led product stories. |
| Badge Gold | `#f5ce00` | `--color-badge-gold` | accent | Small outlined status badge accent; keep limited to the measured badge treatment. |
| Signal Yellow | `#ffcd00` | `--color-signal-yellow` | accent | Primary rounded CTA fill, notably the hero action. |
| Machined Silver | `#a4a5a6` | `--color-machined-silver` | neutral | Subtle media details and fine secondary borders; not a dominant interface color. |
| Mist Gray | `#ededed` | `--color-mist-gray` | surface | Pale card and secondary surface fill that gently separates content from white. |
| Deep Stage | `#070707` | `--color-deep-stage` | surface | Near-black gradient stop within cinematic media treatments, not a general text color. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Text and contrast color on yellow actions, plus occasional inverse media details. |
| Store Blue | `#0c63e2` | `--color-store-blue` | accent | Blue action accent on store and subscribe controls; use sparingly against the neutral page. |
| Cool Gray | `#c2c2c2` | `--color-cool-gray` | neutral | Low-emphasis links and secondary details, especially within dense footer content. |
| Mid Gray | `#999999` | `--color-mid-gray` | neutral | Muted copy and supporting links where primary Ink would feel too strong. |
| Warm Umber | `#382f28` | `--color-warm-umber` | semantic | Warm dark gradient tone within image-led sections; treat as media shading, not core branding. |
| Carbon | `#191919` | `--color-carbon` | neutral | Dark secondary link text and fine interface copy. |
| Porcelain | `#f7f7f7` | `--color-porcelain` | surface | Soft near-white detail surface for secondary cards, links, and control backgrounds. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#111111` (Stage Black) · `--color-surface-2` → `#ededed` (Mist Gray) · `--color-surface-3` → `#000000` (Pure Black) · `--color-surface-4` → `#1c1e20` (Ink) · `--color-text` → `#1c1e20` (Ink) · `--color-text-muted` → `#5c5c5c` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#5c5c5c` (Soft Graphite) · `--color-accent` → `#ffcd00` (Signal Yellow) · `--color-accent-2` → `#0c63e2` (Store Blue) · `--color-on-accent` → `#000000` (Pure Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c1e20` | `#ffffff` | 16.72:1 | AAA |
| `#1c1e20` | `#111111` | 1.13:1 | fail |
| `#1c1e20` | `#ededed` | 14.28:1 | AAA |
| `#1c1e20` | `#000000` | 1.26:1 | fail |
| `#5c5c5c` | `#ffffff` | 6.69:1 | AA |
| `#5c5c5c` | `#111111` | 2.82:1 | fail |
| `#5c5c5c` | `#ededed` | 5.71:1 | AA |
| `#5c5c5c` | `#000000` | 3.14:1 | AA-large |
| `#ffffff` | `#111111` | 18.88:1 | AAA |
| `#ffffff` | `#ededed` | 1.17:1 | fail |

### Gradients

- `linear-gradient(209deg, rgba(0, 0, 0, 0.6) 14%, rgba(0, 0, 0, 0.2))`
- `linear-gradient(177deg, rgba(61, 51, 43, 0.92), rgba(0, 0, 0, 0) 57%)`
- `linear-gradient(rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.92))`
- `linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.12) 52%, rgba(0, 0, 0, 0.34)), linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roboto | `--font-body` | webfont | 400, 700, 500, 600 | All interface typography: navigation, headings, body copy, links, buttons, and footer. | Roboto |

- **Roboto:** Use measured weights 400, 500, 600, and 700. Display and headings are bold; buttons are compact and semibold.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 700 | 1.14 | -0.004em | — | Roboto | Large bold hero and campaign headlines. |
| h1 | 36px | 700 | 1 | -0.007em | — | Roboto | Primary section or page headline. |
| h2 | 32px | 700 | 1.25 | 0 | — | Roboto | Major section headings and prominent editorial titles. |
| h3 | 24px | 400 | 1.25 | 0 | — | Roboto | Card and supporting feature headings. |
| h4 | 20px | 700 | 1.4 | 0 | — | Roboto | Compact category and utility-card headings. |
| body | 14px | 400 | 1.43 | 0 | — | Roboto | Descriptions, testimonials, and supporting information. |
| button | 14px | 600 | 1 | 0 | — | Roboto | Short, semibold CTA labels. |
| link | 14px | 400 | 1.71 | -0.002em | — | Roboto | Navigation, inline actions, and footer links. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 1, 4, 6, 8, 10, 12, 16, 20, 23, 24, 30, 32, 36, 40, 48 px.
- Section rhythm 40px · element gap 8px · card padding — · max content width 1328px.

A wide desktop composition uses a measured 1328px maximum page width and a compact underlying spacing scale. The hero gives its full-bleed media room to dominate while aligning copy to the left; subsequent product categories use a centered two-column card grid. Use-case tiles and editorial content return to left-aligned headings and image-led grids. Sections generally sit on white with clear vertical separation; dark newsletter and footer bands close the page. Keep alignment intentional and avoid dense text blocks.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `50%` · badge `3px` · link `16px` · xs `16px` · sm `20px` · md `24px` · pill `9999px`
- Shadow `xl` (card): `rgba(16, 17, 18, 0.08) 0px 10px 80px 0px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.15) 0px 1px 4px 0px`
- Motion: standard transition `0.25s ease` on interactive elements.

The interface is mostly flat: white canvas, pale card fills, and image contrast do most of the grouping. Use measured 16px card rounding and pill-shaped buttons. Cards may receive a very soft, broad shadow, but avoid strong stacked elevation. Thin gray borders are secondary details rather than the primary layout system; dark gradients belong over media.

## Imagery

Lead with crisp product renders and photographs of printers, materials, accessories, and finished creative projects. The hero juxtaposes concise copy with a large, colorful maker showcase. Use-case cards crop lifestyle photography into rounded image panels with dark bottom overlays for readable captions. Video-led campaign panels use near-black framing and gradient shading. Keep product details sharp and backgrounds secondary; avoid decorative illustration outside the products and media.

## Components

### Hero action

Prominent yellow pill CTA with black or Ink text; keep its label short and visually distinct from nearby text links.

### Product category card

Pale, softly rounded card pairing a small category label, centered bold heading, compact actions, and a large product image.

### Use-case tile

Rounded lifestyle image tile with a dark lower gradient, white title and supporting copy, plus a small directional affordance.

### Campaign video panel

Wide, near-black media panel with centered white headline and restrained text actions; use shading to support legibility.

### Testimonial card

Light rounded card combining creator imagery or identity, a short quote, attribution, and restrained supporting copy.

### Newsletter form

Dark-band signup row with heading and supporting text beside an email field and blue Subscribe action.

### Footer link columns

Compact multi-column navigation on Ink, using small muted links and a subdued legal and locale row.

### Measured component styles

- **Primary button** (“Enter Now”): background #ffcd00 · text #000000 · radius 999px · padding 20px 48px · 700 16px Roboto
- **Secondary button** (“Subscribe”): background #0c63e2 · text #ffffff · radius 30px · padding 0px 48px · 700 16px Roboto
- **Link** (“Snapmaker U1 THE Consumer Toolchanger 3D”): background #fafafa · text #191919 · radius 16px · padding 0px · 400 16px Roboto
- **Input**: transparent background · text #ffffff · radius 0px · padding 0px 18px · 400 16px Roboto
- **Card** (“@mpoxDE Maurizio Nucaro, Content Creator”): background #fafafa · text #1f1f1f · radius 16px · padding 0px · 400 16px Roboto
- **Badge** (“New”): transparent background · text #f5ce00 · border 1px solid #f5ce00 · radius 3px · padding 0px · 500 12px Roboto

## Do

- Use white space to let product imagery carry the visual impact.
- Keep headings bold, direct, and in Roboto.
- Reserve Signal Yellow (#ffcd00) for the primary action.
- Use rounded image cards for use-case and testimonial content.
- Apply dark gradients only when media needs readable captions.
- Separate the footer from the light content with an Ink band.

## Don't

- Do not add unmeasured colors to the core interface palette.
- Do not turn every link or card into a bright CTA.
- Do not use heavy shadows as the main grouping device.
- Do not crowd product imagery with decorative UI.
- Do not make every section dark or use-case imagery overly stylized.
- Do not use display type that feels ornamental or highly condensed.

## Agent prompt

Build a new Snapmaker-style page as a clean, product-led interface. Use Gallery White (#ffffff) for the main canvas and Ink (#1c1e20) for headings and copy; switch to Ink or Stage Black (#111111) only for a deliberate media or footer band. Use Roboto throughout, with bold headlines and compact, clear supporting text. Organize content in a wide centered layout with calm section spacing and image-first cards. Let realistic product photography or renders supply color and detail. Use Signal Yellow (#ffcd00) for the primary rounded CTA, and Store Blue (#0c63e2) only for a secondary action such as signup. Keep cards softly rounded and mostly flat, adding restrained shadows or media gradients only where useful. Favor clear grids, concise copy, and visible product details over ornament.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width white hero with left-aligned copy and prominent right-side showcase media. | primary CTA, secondary learn link, carousel indicator | large bold headline, yellow pill action, full-bleed imagery |
| 2 | product-grid | Centered two-column grid of product-category cards on a light background. | buy actions, compare link, learn-more link | pale rounded cards, centered headings, large product images |
| 3 | gallery | Left-aligned section heading above a two-column grid of rounded lifestyle image tiles. | category exploration, tile navigation | image overlays, white captions, directional icon |
| 4 | video | Horizontally arranged wide dark campaign panels with centered content. | watch video, explore product, carousel navigation | near-black media panels, white centered headline, dark gradient overlays |
| 5 | testimonials | Heading above a horizontal testimonial carousel with image cards and a central quote. | testimonial carousel, creator attribution | softly rounded cards, light neutral surfaces, creator imagery |
| 6 | comparison | Full-width recognition feature followed by a three-column row of editorial quote cards. | press quote browsing, source attribution | product-and-award imagery, light quote cards, publisher marks |
| 7 | content-feed | Left-aligned title and view-all link above a four-column article-card grid. | browse articles, view all | thumbnail cards, compact excerpts, date metadata |
| 8 | feature-grid | Centered heading above four evenly spaced support and community cards. | support navigation, community discovery | simple line icons, pale cards, centered labels |
| 9 | newsletter | Dark horizontal band with copy on the left and signup form on the right. | email signup, subscribe action | Ink background, outlined email field, blue submit button |
| 10 | footer | Dark footer with multiple compact link columns beneath the newsletter band. | product navigation, support links, community links | small muted links, multi-column layout, dark background |
| 11 | footer | Narrow bottom row on the same dark background, separated from footer links. | legal navigation, locale selection | fine divider, muted utility text, compact alignment |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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