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

# Anycubic · Design System

> Dark, cinematic launches meet a clean maker-first storefront.

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

Anycubic’s homepage pairs a cinematic, dark product-launch hero with bright, spacious shopping and community sections. A restrained black-and-white interface lets vivid printer imagery and a small electric-blue accent carry attention.

## North star

Keep the interface quiet and spacious so high-impact printer imagery—not decoration—drives attention.

## Overview

The page is built around a deliberate contrast: a full-bleed, near-black launch hero gives way to broad white shopping and community sections, with a black footer closing the page. Use the measured palette as a restrained interface system: white canvas, black primary text and inverse bands, pale gray cards, charcoal secondary text and rules, and Signal Blue (#0059ff) for prominent interactive accents. The hero’s blue-green-purple light trails belong to the campaign artwork, not the reusable UI palette. MiSans supplies a contemporary, neutral sans-serif voice; semibold centered headings establish hierarchy above compact, readable body copy. The layout alternates large media-led bands with orderly category tiles, carousels, and testimonial cards. Rounded product cards and pill-shaped actions soften the otherwise clean geometry. Generous white space separates content groups, while fine gray borders and subtle shadows provide just enough component definition. Product photography and creator videos provide the page’s color and personality.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas and light-section background; also reverses text and marks over the dark hero and footer. |
| Soft Porcelain | `#f8f8f8` | `--color-soft-porcelain` | surface | Pale card and link surfaces, notably product and category content against the white canvas. |
| Carbon Black | `#000000` | `--color-carbon-black` | brand | Navigation and primary text; forms the cinematic hero and solid footer band. |
| Graphite | `#333333` | `--color-graphite` | neutral | Muted copy and dark button or footer rules where full black would be too strong. |
| Signal Blue | `#0059ff` | `--color-signal-blue` | accent | Small but high-visibility interactive accent, including the Store control and carousel actions. |
| Silver Line | `#cccccc` | `--color-silver-line` | semantic | Light outlines and separators on controls and navigation. |
| Footer Mist | `#d9d9d9` | `--color-footer-mist` | neutral | Low-emphasis footer copy and supporting text on the black footer. |
| Muted Slate | `#666666` | `--color-muted-slate` | neutral | Secondary text and less prominent interface labels. |
| Footer Charcoal | `#4d4d4d` | `--color-footer-charcoal` | neutral | Subdued rules and borders within the dark footer. |

### Semantic aliases

`--color-canvas` → `#f8f8f8` (Soft Porcelain) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#000000` (Carbon Black) · `--color-text` → `#000000` (Carbon Black) · `--color-text-muted` → `#333333` (Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#333333` (Graphite) · `--color-accent` → `#0059ff` (Signal Blue) · `--color-on-accent` → `#007aff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f8f8f8` | 19.77:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#333333` | `#f8f8f8` | 11.9:1 | AAA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#000000` | 1.66:1 | fail |
| `#ffffff` | `#f8f8f8` | 1.06:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#0059ff` | `#f8f8f8` | 5.11:1 | AA |
| `#0059ff` | `#ffffff` | 5.42:1 | AA |
| `#0059ff` | `#000000` | 3.87:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| MiSans | `--font-body` | webfont | 400, 600, 500 | Site-wide typeface for navigation, headings, body copy, buttons, and captions. | Inter |

- **MiSans:** Use a clean sans-serif with neutral tracking; headings are semibold, while body text and most actions stay regular. Keep case natural.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 600 | 1.18 | 0 | — | MiSans | Centered hero campaign title. |
| h2 | 36px | 600 | 1.5 | 0 | — | MiSans | Major centered section headings. |
| h3 | 20px | 600 | 1.35 | 0 | — | MiSans | Category titles and card headings. |
| h4 | 18px | 400 | 1.33 | 0 | — | MiSans | Supporting labels and smaller content headings. |
| body | 14px | 400 | 1.71 | 0 | — | MiSans | Product descriptions, testimonials, and general supporting copy. |
| caption | 12px | 400 | 2.67 | 0 | — | MiSans | Compact metadata, fine print, and secondary labels. |
| nav | 16px | 500 | 3.75 | 0 | — | MiSans | Primary navigation labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 7, 8, 10, 12, 13, 14, 15, 16, 20, 23, 25, 35, 36, 40 px.
- Section rhythm 46px · element gap — · card padding 14px · max content width 1310px.

Use a centered content system capped at the measured 1310px page width, with full-bleed media for the launch hero and selected carousel content. The header runs horizontally above the hero. Below it, category cards form a balanced two-column grid; later sections center their headings above carousels and card rows. The page alternates broad white content bands with media-led blocks, leaving comfortable gaps between sections. Keep card interiors moderately padded and align headings centrally where the page does.

## Shape & elevation

- Radius: button `9999px` · input `3px` · card `10px` · media `10px` · nav `9999px` · link `10px` · xs `10px` · sm `16px` · pill `9999px`
- Shadow `inset` (card): `rgba(0, 0, 0, 0.5) 10px 0px 15px 0px inset, rgba(0, 0, 0, 0.5) 67px 18px 40px 0px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.15) 0px 4px 20px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

Keep most sections flat against white, with cards defined by pale fills and rounded corners rather than heavy effects. Use restrained outlines on pill actions and carousels. Reserve noticeable depth for product imagery or occasional card shadowing; the black hero and footer provide strong contrast through color blocks rather than elevation.

## Imagery

Prioritize polished product photography and campaign renders of printers, materials, and printed objects. The hero uses dark, immersive, full-bleed product imagery with dramatic colored light trails; treat those colors as artwork, not interface accents. Category cards use bright, uncluttered product imagery. Community and Maker Spotlight areas use video or creator-submitted work in horizontal carousel frames.

## Components

### Primary navigation

Black horizontal header with white Anycubic mark, dark-background navigation labels, account icon, and a bright-blue Store pill.

### Campaign hero

Full-width dark product visual with centered campaign title and supporting line, two outlined pill actions, and discreet carousel controls.

### Category tiles

Four image-led FDM, LCD, Materials, and Accessories cards in a two-column arrangement, with centered titles and compact Learn More links.

### Content carousel

Wide media cards with rounded corners, side navigation controls, and centered pagination indicators for maker and product content.

### Editorial cards

Compact, pale cards for print inspiration and professional reviews, using centered section headings and restrained text styling.

### Newsletter and footer

Black footer band with subscription controls, privacy agreement, grouped site links, locale selector, and subdued legal details.

### Measured component styles

- **Primary button**: background #0059ff · text #007aff · radius 30px · padding 0px · 400 16px MiSans
- **Secondary button** (“Buy Now”): transparent background · text #000000 · border 1px solid #ffffff · radius 30px · padding 0px 20px · 400 18px MiSans
- **Link** (“Learn More”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px MiSans
- **Input** (“English”): transparent background · text #ffffff · radius 3px · padding 0px · 400 13px MiSans
- **Card** (“Edward Wakefield Anycubic Kobra S1 Combo”): background #f5f5f5 · text #000000 · radius 10px · padding 23px 16px 0px 16px · 400 16px MiSans
- **Navigation item** (“3D Printers Materials Accessories Softwa”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px MiSans

## Do

- Use full-bleed dark imagery for the primary launch moment.
- Keep ordinary commerce sections white and spacious.
- Use Signal Blue (#0059ff) sparingly for active controls.
- Center section headings above their content.
- Let product photography supply most visual detail.
- Use rounded cards and pill-shaped actions consistently.

## Don't

- Do not extend hero artwork colors into the general UI palette.
- Do not add decorative gradients to plain interface surfaces.
- Do not make every section dark or high contrast.
- Do not crowd product cards with dense supporting copy.
- Do not use heavy shadows as the primary layout device.
- Do not replace product imagery with generic illustrations.

## Agent prompt

Build a new Anycubic-style ecommerce page with a restrained, product-first visual system. Use Gallery White (#ffffff) for the main canvas, Carbon Black (#000000) for primary text and selected dark bands, and Soft Porcelain (#f8f8f8) for quiet card surfaces. Reserve Signal Blue (#0059ff) for a few high-priority controls. Set type in MiSans or a close sans-serif substitute, with semibold centered headings and regular, compact supporting copy. Start with a full-bleed cinematic product hero, then move into clear category tiles, creator or product carousels, and editorial cards with generous breathing room. Keep the header horizontal, actions pill-shaped, cards softly rounded, and borders subtle. Use authentic printer and maker photography; keep campaign lighting inside imagery rather than turning it into interface chrome. Finish with a black, information-dense footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark campaign image beneath a horizontal navigation bar; centered text and actions overlay the product. | Hero carousel, Buy and Learn actions, Previous/next controls | Dark media backdrop, Centered white type, Outlined pill buttons, Pagination marks |
| 2 | category-nav | Two-column tile grid with centered headings and product images on pale backgrounds. | Category discovery, Learn More links | Rounded image cards, Centered labels, Pale card surfaces |
| 3 | gallery | Centered creative-world heading, wide media carousel, followed by a row of three print-inspiration cards. | Community sharing prompt, Media carousel, Browse inspiration | Wide rounded video frame, Blue carousel controls, Three-card row |
| 4 | testimonials | Centered section heading above a horizontal row of review cards. | Review browsing, Carousel navigation | Pale cards, Publication marks, Compact review text |
| 5 | gallery | Centered Maker Spotlight heading above a horizontal row of tall, image-led creator media cards. | Maker content browsing, Carousel navigation | Portrait media panels, Rounded outer frame, Blue next control |
| 6 | footer | Full-width black footer with subscription row followed by grouped link columns and legal details. | Email subscription, Privacy agreement, Locale selection | Dark surface, Compact link groups, Subdued dividers |

## Source CSS custom properties (selected)

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

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