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

# ELEGOO · Design System

> Practical maker tech, presented with bright clarity

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

ELEGOO’s homepage pairs a bright, image-led storefront with clear product groupings and a restrained black-and-blue interface. Large campaign imagery leads into product discovery, category browsing, customer support, and a contrasting dark footer.

## North star

Let vivid, full-width product imagery attract attention while a calm light canvas, crisp typography, and blue actions keep shopping paths obvious.

## Overview

The page uses a light storefront canvas, with broad pale-gray section bands keeping the long homepage visually continuous. Black headings and body text provide strong contrast; saturated blue marks primary actions, links, small badges, and selected graphic accents. A violet-to-blue gradient is reserved for the repeated printer-finder strip rather than used as a general background treatment. Plus Jakarta Sans carries the interface throughout: heavy, tightly tracked headings contrast with regular, compact body copy and small utility labels. The opening campaign is full-bleed and image-led, while the rest of the page settles into rounded product cards, split product showcases, category tiles, and compact service panels. Product photography and rendered machines supply most of the color and texture, so the interface itself stays restrained. Spacing is comfortable and sections are clearly separated, with a black footer acting as a decisive visual endpoint.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Card and drawer surfaces, white text over dark or image-led areas, and inverse CTA fills. |
| Signal Blue | `#0035ff` | `--color-signal-blue` | brand | Primary blue CTA fill, key links, and select interface accents. |
| Carbon Ink | `#000000` | `--color-carbon-ink` | neutral | Main text and headings, dark footer background, and dark product-card text. |
| Soft Fog | `#f5f5f5` | `--color-soft-fog` | surface | Main page and section background, providing a quiet base around colorful product imagery. |
| Electric Blue | `#1b49ff` | `--color-electric-blue` | accent | Blue end of the printer-finder gradient and occasional link or graphic accent. |
| Graphite Gray | `#474747` | `--color-graphite-gray` | neutral | Muted supporting text and secondary link text on light surfaces. |
| Violet Glow | `#b06bff` | `--color-violet-glow` | accent | Violet end of the printer-finder gradient; not a dominant interface fill. |
| Badge Blue | `#1862f5` | `--color-badge-blue` | semantic | Small blue cart-count badge and minor label accents. |
| Gradient Slate | `#5f5f5f` | `--color-gradient-slate` | neutral | Intermediate tone detected in gradients; not a defining flat interface color. |
| Divider Gray | `#dedede` | `--color-divider-gray` | neutral | Fine borders and separators around controls or understated interface elements. |
| Control Gray | `#545454` | `--color-control-gray` | semantic | Measured border tone on select controls and outlined buttons. |
| Input Charcoal | `#272727` | `--color-input-charcoal` | semantic | Dark outline around the email field and other measured input treatment. |
| Mist Gray | `#f0f0f0` | `--color-mist-gray` | surface | Minor pale supporting surfaces and subtle interface separation. |
| Slate Ink | `#2c2d2e` | `--color-slate-ink` | neutral | Secondary near-black text and heading fragments. |
| Heading Ink | `#1a1c1d` | `--color-heading-ink` | neutral | Heading color token for dark, high-contrast text. |
| Quiet Gray | `#b2b2b2` | `--color-quiet-gray` | neutral | Low-emphasis links and secondary text, particularly against dark sections. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f5` (Soft Fog) · `--color-surface-2` → `#000000` (Carbon Ink) · `--color-text` → `#000000` (Carbon Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#474747` (Graphite Gray) · `--color-border` → `#545454` (Control Gray) · `--color-accent` → `#0035ff` (Signal Blue) · `--color-accent-2` → `#1b49ff` (Electric Blue) · `--color-accent-3` → `#b06bff` (Violet Glow) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#474747` | `#ffffff` | 9.29:1 | AAA |
| `#474747` | `#f5f5f5` | 8.52:1 | AAA |
| `#474747` | `#000000` | 2.26:1 | fail |
| `#0035ff` | `#ffffff` | 7.11:1 | AAA |
| `#0035ff` | `#f5f5f5` | 6.52:1 | AA |
| `#0035ff` | `#000000` | 2.95:1 | fail |

### Gradients

- `linear-gradient(90deg, rgb(176, 107, 255), rgb(27, 73, 255) 99.79%)`
- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Plus Jakarta Sans | `--font-body` | webfont | 400, 800, 700, 600, 500 | Site-wide headings, body copy, navigation, product labels, and buttons. | Manrope |

- **Plus Jakarta Sans:** Headings are heavy, often 800 weight with slight negative tracking; body and utility text stay regular and compact. No uppercase transformation habit.

### Type scale — Augmented Fourth (ratio ≈ 1.377, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 800 | 1.15 | -0.02em | — | Plus Jakarta Sans | Large hero campaign headline. |
| h2 | 42px | 800 | 1.19 | -0.02em | — | Plus Jakarta Sans | Major section headings such as New Releases. |
| h3 | 40px | 800 | 1.2 | 0 | — | Plus Jakarta Sans | Product and category feature headings. |
| h4 | 34px | 800 | 1.6 | -0.02em | — | Plus Jakarta Sans | Secondary feature headings and supporting promotional titles. |
| body | 15px | 400 | 1.6 | 0 | — | Plus Jakarta Sans | Product descriptions, support copy, and general storefront text. |
| caption | 12px | 400 | 1.6 | 0 | — | Plus Jakarta Sans | Compact labels, badges, and image or card details. |
| button | 14px | 600 | 1.6 | 0 | — | Plus Jakarta Sans | Primary and secondary CTA labels. |
| link | 12px | 400 | 1.6 | 0 | — | Plus Jakarta Sans | Utility navigation and small product or support links. |

OpenType features in use: `"kern"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 25, 30, 32, 48, 64 px.
- Section rhythm 80px · element gap 24px · card padding — · max content width 1280px.

A comfortable long-scroll storefront, with a measured 1280px page maximum and repeated section breaks. The opening campaign is full-bleed, followed by modular product cards, two-column showcases, image tiles, and compact multi-column support and footer areas. Headings alternate centered and left-aligned according to block purpose. A 4px base spacing system and 80px desktop section rhythm create breathing room; product and service cards keep content dense but scannable. The footer switches to a five-column dark layout.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `16px` · media `16px` · badge `50%` · link `16px` · xs `2px` · sm `8px` · md `16px` · pill `9999px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.06) 0px 0px 16.667px 0px`
- Motion: standard transition `0.25s cubic-bezier(0.104, 0.204, 0.492, 1)` on interactive elements.

The interface is mostly flat: pale section backgrounds, white cards, and restrained outlines separate content without heavy shadows. Rounded card and media edges soften the product grid. Full-bleed campaign imagery and occasional gradient bands add depth through composition and color, while the black footer creates the strongest layered contrast.

## Imagery

Large promotional banners and product photography dominate the first impression. Printer renders, filament, finished prints, and use-case scenes appear in white-backed product cards and cropped image tiles. The visuals are bright and polished, with color mainly supplied by product shots and campaign artwork rather than interface decoration. Support cards use vivid illustrated imagery; award marks appear as a compact logo strip.

## Components

### Campaign hero

Full-width promotional image carousel with centered campaign copy, white navigation over imagery, and a compact blue pill CTA.

### Primary CTA

Signal Blue (#0035ff) fill, white semibold 14px Plus Jakarta Sans label, and measured pill-shaped rounding.

### Product card

White card with rounded corners, product image, dark title, and compact supporting copy or link.

### Product showcase

Split image-and-copy presentation with a large machine photograph, feature callouts, and a rounded secondary action.

### Category tile

Rounded lifestyle or application image with a white category label overlaid near the lower edge.

### Printer finder strip

Repeated full-width violet-to-blue gradient banner with search icon, bold white prompt, and dark comparison button.

### Email subscription

Footer newsletter form with compact email input, dark theme, and adjacent submit control.

### Measured component styles

- **Primary button** (“Join Us”): background #0035ff · text #ffffff · border 1px solid #0035ff · radius 40px · padding 6px 20px · 600 14px Plus Jakarta Sans
- **Secondary button** (“Buy Now”): background #ffffff · text #000000 · border 1px solid #ffffff · radius 40px · padding 6px 20px · 600 14px Plus Jakarta Sans
- **Link** (“Download Center”): transparent background · text #000000 · radius 0px · padding 0px · 600 12px Plus Jakarta Sans
- **Input**: transparent background · text #ffffff · border 1px solid #272727 · radius 8px · padding 15px 12px · 400 12px Plus Jakarta Sans
- **Card** (“NEW Centauri Carbon 2 Combo”): background #ffffff · text #000000 · border 1px solid #ebebeb · radius 16px · padding 0px · 400 16px Plus Jakarta Sans
- **Badge** (“0”): background #1862f5 · text #ffffff · radius 50% · padding 0px · 700 10px Plus Jakarta Sans

## Do

- Keep the page canvas light and product imagery prominent.
- Use #0035ff for primary shopping actions and important links.
- Set headings in heavy Plus Jakarta Sans with restrained negative tracking.
- Use rounded white cards to group products and support links.
- Give campaign sections room for wide, immersive photography.
- Reserve the violet-to-blue gradient for a focused promotional strip.

## Don't

- Do not make every section a saturated color block.
- Do not let interface colors compete with product photography.
- Do not use thin, low-contrast text for important headings.
- Do not replace product imagery with generic decorative illustrations.
- Do not apply the gradient indiscriminately across cards or navigation.
- Do not add heavy shadows to an otherwise flat card system.

## Agent prompt

Build a new ELEGOO-style storefront page with a calm #f5f5f5 canvas, white product cards (#ffffff), and crisp dark typography (#000000). Use Plus Jakarta Sans throughout, with bold, tightly tracked section headings and compact regular supporting copy. Make product photography the visual focus: use wide campaign imagery, rounded product tiles, and clear image-and-copy showcases. Apply Signal Blue (#0035ff) to primary pill-shaped CTAs and key links; keep muted copy in Graphite Gray (#474747). Use the Violet Glow (#b06bff) to Electric Blue (#1b49ff) gradient sparingly for a standout finder or promotional strip. Keep borders subtle, spacing comfortable, and card layouts modular. Finish with a distinct black (#000000) multi-column footer and restrained white text.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign carousel with overlaid navigation and centered copy. | Campaign carousel, Primary CTA, Slide indicators | Full-width imagery, White overlay navigation, Blue pill button |
| 2 | feature-grid | Three promotional image cards arranged in a single horizontal row. | Shop links, Campaign discovery | Rounded cards, Image-led promotions, Compact titles |
| 3 | product-showcase | Centered section title above tabs and a wide split product feature. | Product tabs, Learn-more action | Split image and copy, Rounded media, Feature callouts |
| 4 | product-grid | Two-column feature area pairing a vivid print theme panel with product cards. | Category switching, Product browsing | Image-led category panel, Product cards, Compact links |
| 5 | gallery | Six image tiles in an asymmetrical three-column mosaic. | Browse by use case | Rounded photographic tiles, Overlay labels |
| 6 | cta | Repeated horizontal gradient finder banner with search prompt and button. | Compare products, Guided selection | Violet-to-blue gradient, Search icon, Dark pill button |
| 7 | product-grid | Centered heading over a single-row grid of product cards. | Browse new arrivals, Open product detail | White cards, Product renders, New labels |
| 8 | logo-cloud | Left-aligned heading and intro above a horizontal awards-logo row. | Trust building | Compact logo tiles, White card backgrounds |
| 9 | feature-grid | Left-aligned heading above three wide illustrated support cards. | Support discovery, Order tracking, Blog access | Bright illustrated cards, Rounded corners, Learn-more links |
| 10 | feature-grid | Four compact service assurances aligned in a horizontal row. | Reassurance, Payment confidence | Small blue icons, White cards, Compact captions |
| 11 | footer | Black full-width footer with five information columns and a lower utility bar. | Email subscription, Footer navigation, Locale selection | Black background, White and muted links, Email field |

## Source CSS custom properties (selected)

```css
--bg-body: #f5f5f5;
--bg-body-rgb: 245,245,245;
--block-border-radius: 16px;
--button-border-radius: 40px;
--input-border-radius: 8px;
--color-body: #000000;
--color-body-rgb: 0,0,0;
--color-heading-text: #1a1c1d;
--color-heading-text-rgb: 26, 28, 29;
--color-accent: #000000;
--color-accent-rgb: 0,0,0;
--color-border: #dedede;
--color-form-border: #dedede;
--color-star: #0035ff;
--color-overlay-rgb: 159,163,167;
--section-spacing-desktop-secondary: 80px;
--section-spacing-desktop-half: 48px;
--color-drawer-bg: #ffffff;
--header-font-style: normal;
--header-font-weight: 800;
--header-font-family: Plus Jakarta Sans;
--body-font-style: normal;
--body-font-weight: 400;
--body-font-family: Plus Jakarta Sans;
--font-body-letter-spacing: 0.0em;
--font-heading-letter-spacing: -0.02em;
--button-letter-spacing: 0.0em;
--bg-body-darken: #ededed;
--payment-terms-background-color: #f5f5f5;
--color-heading: #000000;
--color-heading-rgb: 0,0,0;
--color-accent-hover: #000000;
--color-drawer-bg-rgb: 255,255,255;
--color-announcement-bar-text: #ffffff;
--color-announcement-bar-bg: #a75bff;
--color-secondary-menu-text: #000000;
--color-secondary-menu-bg: #f5f5f5;
--color-header-bg: #ffffff;
--color-header-bg-rgb: 255,255,255;
--color-header-text: #000000;
```

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