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

# Creality · Design System

> Clean product storytelling with a playful maker edge

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

Creality’s homepage combines a bright, playful campaign hero with a clear showcase of printers, scanners, maker projects, and community content. Crisp typography and pale-gray content bands keep the varied product imagery organized without competing with it.

## North star

Let product and campaign imagery lead, while a restrained white-and-gray interface and selective green actions keep the page easy to scan.

## Overview

The page balances a clean commerce foundation with a lively maker identity. White is the main canvas, while pale gray (#f5f6fa) groups editorial cards, media coverage, newsletter content, and support links into calm section bands. Dark charcoal (#1e1e1e) carries most headings and body copy; Creality green (#17cc5f) marks key actions and selected links. Orange (#fa8c16) appears as a contrasting campaign CTA, while the first-screen lime palette belongs to the illustrated seasonal hero rather than the site-wide interface palette. CrealitySans is used throughout, with medium-weight headings and compact supporting copy. Wide campaign artwork gives way to a two-column product presentation and image-led content cards, then quieter editorial and footer regions. Generous whitespace separates sections, while repeated card layouts make the long page easy to scan.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, white product panels, navigation backgrounds, and light card surfaces. |
| Maker Green | `#17cc5f` | `--color-maker-green` | brand | Primary Store and Learn More actions, selected link accents, and small interface highlights. |
| Charcoal Ink | `#1e1e1e` | `--color-charcoal-ink` | neutral | Main headings, body copy, and dark text on white or pale-gray surfaces. |
| Mist Surface | `#f5f6fa` | `--color-mist-surface` | surface | Editorial and media section bands, newsletter and support areas, cards, and input backgrounds. |
| Maker Orange | `#fa8c16` | `--color-maker-orange` | accent | Contrasting Join Now campaign CTA; use sparingly against the otherwise green action palette. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Black text and prominent dark product actions; measured borders also register this value. |
| Soft Graphite | `#98999e` | `--color-soft-graphite` | neutral | Muted footer and secondary text, including supporting information with lower emphasis. |
| Quiet Border | `#e5e7eb` | `--color-quiet-border` | semantic | Subtle input and button outlines that separate controls from their light backgrounds. |
| Pale Slate | `#cbccd1` | `--color-pale-slate` | neutral | Low-emphasis supporting and footer text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f6fa` (Mist Surface) · `--color-text` → `#1e1e1e` (Charcoal Ink) · `--color-text-muted` → `#98999e` (Soft Graphite) · `--color-text-subtle` → `#000000` (Pure Black) · `--color-border` → `#000000` (Pure Black) · `--color-accent` → `#17cc5f` (Maker Green) · `--color-accent-2` → `#fa8c16` (Maker Orange) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1e1e1e` | `#ffffff` | 16.67:1 | AAA |
| `#1e1e1e` | `#f5f6fa` | 15.44:1 | AAA |
| `#98999e` | `#ffffff` | 2.84:1 | fail |
| `#98999e` | `#f5f6fa` | 2.63:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f5f6fa` | 19.45:1 | AAA |
| `#17cc5f` | `#ffffff` | 2.13:1 | fail |
| `#17cc5f` | `#f5f6fa` | 1.98:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| crealitySans | `--font-body` | webfont | 300, 400, 500 | Site-wide type for navigation, headings, body copy, buttons, links, captions, and footer content. | Inter |

- **crealitySans:** Use a clean sans-serif voice with regular body text and medium headings; keep tracking neutral and casing natural.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 500 | 1.2 | 0 | — | crealitySans | Campaign headline or primary page-level title. |
| h2 | 32px | 500 | 1.5 | 0 | — | crealitySans | Major section headings, such as Influencer Spotlights and Media Coverage. |
| h3 | 24px | 400 | 1.2 | 0 | — | crealitySans | Product and content-card titles. |
| h4 | 20px | 500 | 1.5 | 0 | — | crealitySans | Secondary card or subsection headings. |
| body | 14px | 400 | 1.43 | 0 | — | crealitySans | Product descriptions, editorial summaries, and general interface copy. |
| caption | 12px | 300 | 1.33 | 0 | — | crealitySans | Small supporting labels and fine-print information. |
| button | 14px | 500 | 1.43 | 0 | — | crealitySans | CTA labels such as Learn More, Store, and Join Now. |
| nav | 12px | 500 | 1.33 | 0 | — | crealitySans | Compact primary navigation labels across the header. |
| link | 16px | 400 | 1.5 | 0 | — | crealitySans | Editorial links, footer destinations, and supporting calls to action. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 6, 8, 11, 12, 14, 16, 20, 24, 32, 40, 56, 80, 120 px.
- Section rhythm 40px · element gap 8px · card padding 36px · max content width 1200px.

The desktop page uses a centered content system measured at a 1200px maximum width, with full-bleed campaign artwork and broad section backgrounds. Product and editorial areas switch between two-column and multi-card grids; testimonial and blog regions use repeated cards. Headings generally align to the left edge of their content. A compact spacing rhythm keeps controls and card content close, while larger gaps distinguish major page sections. The overall density is compact, but image-led blocks retain open space.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · pill `9999px`
- Shadow `md` (button): `rgba(30, 30, 30, 0.08) 0px 8px 16px -1px`
- Motion: standard transition `0.3s ease` on interactive elements.

Most content is presented as flat, square-cornered white or pale-gray panels, with separation coming from whitespace and section bands rather than visible outlines. Inputs use a subtle measured border. Buttons are pill-shaped; measured button shadow is restrained, so avoid adding heavy shadows or layered card effects.

## Imagery

The homepage pairs large product photography—printers, scanners, and accessories—with real-life maker scenes, influencer posts, and editorial thumbnails. The opening campaign uses bold, playful illustrated lettering and a luminous lime backdrop; treat those colors and graphic motifs as campaign artwork, not defaults for every section. Keep product images clearly framed against light backgrounds, and preserve the more documentary feel of community photography.

## Components

### Campaign hero

Full-bleed illustrated campaign area with centered creative, supporting copy, and a prominent orange Join Now pill CTA.

### Primary action

Green pill buttons with white text, including Learn More and Store; keep labels short and weight moderate.

### Product showcase

Large, image-led product panels with centered model name, short claim, and compact action buttons.

### Editorial card

Photography or thumbnail above a dark title and muted description; use restrained green links where shown.

### Media quote card

Pale-gray section containing white testimonial cards, short quotes, a green quote mark, and publication branding.

### Newsletter form

Email field on a pale-gray ground with a rounded outline and a compact action control.

### Support shortcuts

Three evenly arranged support destinations, each pairing a simple dark line icon with a concise label.

### Measured component styles

- **Primary button** (“Learn More”): background #17cc5f · text #ffffff · border 2px solid #17cc5f · radius 9999px · padding 8px 16px · 400 14px crealitySans
- **Secondary button** (“Join Now”): background #fa8c16 · text #000000 · border 2px solid #fa8c16 · radius 9999px · padding 8px 16px · 400 14px crealitySans
- **Link** (“Creality KliTek™ \| Next-Gen Nozzle-Chang”): background #ffffff · text #1e1e1e · radius 0px · padding 0px · 400 16px crealitySans
- **Input**: background #f5f6fa · text #1e1e1e · border 1px solid #e5e7eb · radius 9999px · padding 0px 0px 2px 16px · 400 14px crealitySans
- **Card** (“Creality’s second generation “flagship” ”): background #ffffff · text #1e1e1e · radius 0px · padding 40px 32px · 400 16px crealitySans
- **Navigation item** (“3D Printers”): transparent background · text #ffffff · radius 0px · padding 12px 0px · 500 12px crealitySans

## Do

- Use white as the main canvas and pale gray to group related content.
- Reserve Creality green for clear actions and selected link accents.
- Let product photography and campaign artwork carry the visual interest.
- Keep headings direct, dark, and easy to distinguish from body copy.
- Use compact pill-shaped buttons for primary actions.
- Separate major content groups with whitespace and broad section bands.

## Don't

- Do not apply the campaign’s lime illustration palette to every section.
- Do not introduce unmeasured colors, spacing values, or corner radii.
- Do not add heavy shadows or decorative borders to every card.
- Do not let secondary copy compete with product names or main actions.
- Do not crowd full-bleed campaign artwork with extra interface decoration.
- Do not use oversized, high-contrast typography for routine navigation or footer links.

## Agent prompt

Build a responsive Creality-style commerce homepage with a clean white canvas (#ffffff), pale-gray content bands (#f5f6fa), charcoal copy (#1e1e1e), and selective Maker Green actions (#17cc5f). Use Orange (#fa8c16) only for a distinctive campaign CTA. Apply CrealitySans or a close Inter substitute throughout, with medium-weight headings and compact, readable body text. Start with a full-bleed, playful illustrated campaign hero, then organize product showcases and maker-use imagery into clear grids. Continue with community, media, blog, newsletter, and support content before a structured footer. Keep product photography prominent, card treatments mostly flat, and CTAs pill-shaped. Follow the measured 1200px maximum content width and 8px-based spacing rhythm; do not invent measurements or treat hero artwork colors as global brand tokens.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign artwork beneath a slim announcement strip and transparent-style navigation. | campaign announcement, primary Join Now CTA, carousel-style hero content | lime illustrated backdrop, centered campaign lettering, pill CTA |
| 2 | feature-grid | Long, image-led product showcase followed by a two-column grid of everyday 3D-printing use cases. | product discovery, Learn More and Buy Now actions, use-case browsing | large product photography, centered product labels, paired editorial imagery |
| 3 | gallery | Horizontal, two-column spotlight area featuring social posts and community imagery. | creator discovery, social proof, browse spotlight content | creator photography, post excerpts, carousel-like presentation |
| 4 | testimonials | Pale-gray section with a heading and three side-by-side publication quote cards. | third-party validation, scan short reviews | white quote cards, green quotation marks, publication logos |
| 5 | content-feed | Four-card editorial row with a section heading and a small Explore More link. | browse articles, Explore More link | thumbnail-led cards, compact descriptions, light section background |
| 6 | newsletter | Newsletter content and email form arranged side by side within a pale-gray region. | email signup, privacy reassurance | rounded email field, compact submit action, supporting illustration |
| 7 | contact | Three evenly spaced support destinations arranged as a simple horizontal row. | quick support navigation, direct contact discovery | line icons, short labels, pale-gray backing |
| 8 | footer | Multi-column link directory followed by brand marks, social destinations, newsletter entry, and legal details. | category-based navigation, regional selection, legal links | small muted labels, dense link lists, brand and partner logos |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--background: 255 255 255;
--font-sans: CrealitySans;
--brand-color: 23 204 95;
--color: 30 30 30;
--color-foreground: 255 255 255;
```

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