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

# soundcore — Nebula Projectors · Design System

> Cinematic product stories in a clean, shoppable frame

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.soundcore.com/collections/nebula-projector · **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._

A projector collection page pairs cinematic lifestyle imagery with a dense, filterable product catalog. A restrained light canvas and bright cyan actions keep the shopping interface distinct from the dark promotional imagery and footer.

## North star

Let cinematic product imagery lead, then make the catalog easy to scan with quiet surfaces and unmistakable cyan actions.

## Overview

The visual system balances a pale cool canvas (#f7f8f9) with white product cards and near-black footer bands (#111111). Black headings and charcoal body text keep the interface legible, while cyan (#17bbef) marks purchase actions, badges, and links. The collection hero is a wide lifestyle photograph with white overlay copy; a second rounded campaign panel brings product imagery and a prominent release message into the shopping flow. MontForAnker supplies a consistent geometric sans-serif voice, with bold, tightly tracked headings and compact, heavy navigation and controls. The catalog uses a three-column product-card area beside a narrow category and filter rail, keeping product imagery central while exposing shopping controls. Generous transitions between the catalog, editorial overview, FAQ, and footer prevent the long page from feeling like one continuous grid. Rounded cards and pill-shaped CTAs soften the otherwise precise retail layout; thin gray rules organize FAQ rows and form details.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Cyan | `#17bbef` | `--color-signal-cyan` | brand | Primary Buy Now buttons, new-release badges, and active links. |
| Cool Canvas | `#f7f8f9` | `--color-cool-canvas` | surface | Main page background behind the hero, catalog, editorial content, and FAQ. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Product cards, light interface elements, and text placed on cyan controls. |
| Product Ink | `#000000` | `--color-product-ink` | neutral | Headings, navigation, product text, and labels on light surfaces. |
| Footer Charcoal | `#111111` | `--color-footer-charcoal` | surface | Continuous dark background across the newsletter and footer bands. |
| Reading Charcoal | `#333333` | `--color-reading-charcoal` | neutral | Muted supporting copy and secondary links on light backgrounds. |
| Rule Gray | `#e8e8e8` | `--color-rule-gray` | neutral | Fine separators and understated input or interface borders. |
| Bright Aqua | `#15c5f7` | `--color-bright-aqua` | accent | Brighter cyan stop in the accent gradient; supporting detail, not the main canvas. |
| Sky Tint | `#83e4ff` | `--color-sky-tint` | accent | Pale cyan gradient stop and decorative accent detail. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | neutral | Low-emphasis text and secondary metadata. |
| Border Slate | `#414141` | `--color-border-slate` | neutral | Occasional dark component border; not a defining page surface. |
| Soft Black | `#1f2021` | `--color-soft-black` | neutral | Sparse secondary text and details on light surfaces. |
| Silver Text | `#b5b7bb` | `--color-silver-text` | neutral | Low-priority footer or utility links and subdued text. |
| Ash Gray | `#aaaaaa` | `--color-ash-gray` | neutral | Subdued supporting text. |
| Control Slate | `#6b7280` | `--color-control-slate` | semantic | Occasional button outline or secondary control border. |

### Semantic aliases

`--color-canvas` → `#f7f8f9` (Cool Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#111111` (Footer Charcoal) · `--color-text` → `#000000` (Product Ink) · `--color-text-muted` → `#333333` (Reading Charcoal) · `--color-text-subtle` → `#999999` (Quiet Gray) · `--color-border` → `#e8e8e8` (Rule Gray) · `--color-accent` → `#17bbef` (Signal Cyan) · `--color-accent-2` → `#15c5f7` (Bright Aqua) · `--color-accent-3` → `#83e4ff` (Sky Tint) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f7f8f9` | 19.75:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#111111` | 1.11:1 | fail |
| `#333333` | `#f7f8f9` | 11.88:1 | AAA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#111111` | 1.49:1 | fail |
| `#999999` | `#f7f8f9` | 2.68:1 | fail |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#999999` | `#111111` | 6.63:1 | AA |
| `#17bbef` | `#f7f8f9` | 2.1:1 | fail |

### Gradients

- `linear-gradient(to right, rgb(131, 228, 255), rgb(21, 197, 247))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| MontForAnker | `--font-body` | webfont | 700, 600, 500, 900, 800 | Site-wide type for navigation, headings, product cards, body copy, buttons, and FAQs. | Montserrat |

- **MontForAnker:** Geometric sans; headings are bold with negative tracking, while product and navigation UI stays compact and weighty.

### Type scale — Augmented Fourth (ratio ≈ 1.442, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 1.5 | -0.04em | — | MontForAnker | Collection hero headline and primary page title. |
| h2 | 24px | 700 | 1.5 | -0.02em | — | MontForAnker | Campaign and editorial section headings. |
| h3 | 20px | 600 | 1.1 | -0.02em | — | MontForAnker | Subsection titles and prominent product or FAQ headings. |
| body | 16px | 700 | 1.5 | -0.02em | — | MontForAnker | Product descriptions, editorial copy, and supporting page text. |
| caption | 14px | 700 | 1.5 | -0.02em | — | MontForAnker | Compact product metadata, labels, and secondary details. |
| button | 14px | 700 | 1.5 | 0 | — | MontForAnker | Buy Now and other purchase or form actions. |
| nav | 14px | 700 | 1.4 | -0.02em | — | MontForAnker | Global navigation and category navigation labels. |
| link | 16px | 700 | 1.5 | -0.02em | — | MontForAnker | Inline editorial, FAQ, and supporting navigation links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 11, 12, 14, 16, 20, 24, 64 px.
- Section rhythm 72px · element gap 4px · card padding — · max content width 1280px.

The page uses a wide centered retail frame, with measured content capped at 1280px. A full-width photographic collection hero leads into a large campaign panel, followed by a three-column product grid and a filter rail. The long editorial overview and FAQ return to a single-column reading flow. A generous section rhythm separates shopping, information, and conversion areas; the catalog itself is comparatively dense. The footer switches to a dark background and distributes utility links across multiple columns.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `24px` · media `32px` · badge `2px` · xs `3px` · sm `4px` · md `24px` · pill `9999px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.15) 0px 0px 24px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, relying on white cards against a cool light canvas rather than strong shadows. Rounded card corners separate catalog items, while hairline gray borders and separators organize controls and FAQ rows. Large campaign imagery supplies the main depth; the dark footer forms a clear full-width layer.

## Imagery

Photography is the dominant visual storytelling device: a full-width family cinema scene establishes the collection, while the campaign panel and catalog show projectors and accessories. Product images sit on clean card backgrounds for easy comparison. Warm, cinematic scenes and darker product mockups provide contrast against the pale interface. No illustration style defines the brand palette; the cyan accent remains in UI labels and actions.

## Components

### Collection hero

Full-width cinematic lifestyle photography with white title and supporting copy overlaid on the image.

### Campaign panel

Large rounded promotional media card with a New Release badge, product headline, price, cyan Buy Now action, and Learn More link.

### Filter rail

Compact category, scene, price, and offer filters sit beside the product grid, using checkbox controls and expandable groups.

### Product card

White rounded card with product photography, discount badge, title, review and price details, and a cyan purchase button.

### FAQ accordion

Single-column question rows with subtle separators and chevron controls; expanded answers include inline links.

### Newsletter form

Centered subscription prompt in the dark footer, with a pill-like email field and cyan subscribe action.

### Measured component styles

- **Primary button** (“Buy Now”): background #17bbef · text #ffffff · radius 40px · padding 11px 32px 10px 32px · 700 16px MontForAnker
- **Secondary button** (“on”): transparent background · text #000000 · border 1px solid #6b7280 · radius 3px · padding 0px · 600 16px MontForAnker
- **Link** (“Anker Charging”): transparent background · text #b5b7bb · radius 0px · padding 0px · 700 14px MontForAnker
- **Input**: background #eaeaec · text #000000 · border 1px solid #e5e7eb · radius 8px · padding 8px 214px 8px 36px · 600 16px MontForAnker
- **Card** (“$600 OFF New Release soundcore Nebula X1”): background #ffffff · text #000000 · radius 24px · padding 0px · 600 16px MontForAnker
- **Badge** (“New Release”): background #17bbef · text #ffffff · radius 2px · padding 5px 6px · 700 12px MontForAnker
- **Navigation item** (“Headphones Earbuds Speakers Works Projec”): transparent background · text #000000 · radius 0px · padding 0px · 500 16px MontForAnker

## Do

- Keep the main content on the measured cool light canvas.
- Use Signal Cyan for primary purchase actions and release badges.
- Let large product and lifestyle photography carry the campaign story.
- Keep the catalog scannable with a filter rail and repeated card structure.
- Use MontForAnker or a close geometric sans-serif substitute.
- Separate the informational content from the catalog with clear section rhythm.

## Don't

- Do not replace the cyan accent with a second saturated interface color.
- Do not put dense catalog controls over the campaign photography.
- Do not give every section a dark background; reserve near-black for footer bands.
- Do not add heavy shadows where cards and borders already define structure.
- Do not make product cards typographically loose or editorially oversized.
- Do not treat colors found only in product imagery as brand UI colors.

## Agent prompt

Build a new soundcore-style consumer-electronics page with a clean, shoppable visual system. Use Cool Canvas (#f7f8f9) for the main background, Gallery White (#ffffff) for cards, Product Ink (#000000) for headings, and Signal Cyan (#17bbef) for primary actions, links, and badges. Use MontForAnker or a close geometric sans alternative, with bold, tightly tracked headings and compact product UI. Lead with a wide cinematic photograph and overlay readable white copy, then present a rounded campaign feature and a filterable three-column product catalog. Keep product photography central and cards flat, with restrained gray separators. Follow with readable editorial content and a simple FAQ accordion. Finish with a full-width Footer Charcoal (#111111) section, centered newsletter form, and multi-column utility links.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Stacked brand utility strip, announcement line, and main navigation on a light background. | Global category navigation, Utility shortcuts | Compact horizontal links, White navigation surface |
| 2 | product-showcase | Two-column campaign content with large, rounded product media. | Buy Now action, Learn More link | New-release badge, Cyan CTA, Rounded media |
| 3 | product-grid | Filter rail beside a three-column grid of product cards. | Category and price filters, Product sorting, Direct purchase | Discount badges, White rounded cards, Cyan purchase buttons |
| 4 | other | Single-column editorial content with two left-aligned heading sections. | Feature scanning, Inline contextual links | Bold section headings, Compact bullet lists |
| 5 | faq | Single-column accordion with stacked questions and expandable answers. | Expandable answers, Inline answer links | Chevron toggles, Fine separators |
| 6 | newsletter | Centered signup content within a full-width dark band. | Email signup, Consent notice | Rounded input, Cyan subscribe button |
| 7 | contact | Contact details arranged horizontally on the dark footer background. | Phone support, Email support | Small contact icons, Compact text |
| 8 | other | Four service benefits distributed across a horizontal footer row. | Shipping reassurance, Warranty reassurance | Small icons, Inline benefit labels |
| 9 | footer | Multi-column directory on a full-width dark background, followed by payment and brand details. | Topic-based link discovery, Social and app links | Dense link columns, Payment marks, Dark footer surface |

## Source CSS custom properties (selected)

```css
--copilot-kit-primary-color: rgb(23,187,239);
--copilot-kit-contrast-color: #fff;
--copilot-kit-secondary-color: #f3f4f6;
--copilot-kit-secondary-contrast-color: #000;
--copilot-kit-background-color: #fff;
--copilot-kit-muted-color: #6a6a6a;
--copilot-kit-separator-color: rgba(0,0,0,.08);
--copilot-kit-scrollbar-color: rgba(0,0,0,.2);
--copilot-kit-response-button-color: #333;
--copilot-kit-response-button-background-color: #fff;
--btn-bg-active-color: rgb(72,207,250);
--btn-bg-disabled-color: #ccdfe850;
--btn-text-active-color: #fff;
--btn-bg-secondary-color: transparent;
--btn-bg-secondary-disabled-color: #f5f5f550;
--success-color-0: #30d158;
--success-color-1: #d6f4de;
--warning-color-0: #ffc24d;
--warning-color-1: #f6ead0;
--error-color-0: #ff4d4d;
--error-color-1: #f6dbd8;
--marketing-color-0: #ff6b35;
--marketing-color-1: #ff9741;
--info-primary-color: #080a0f;
--info-secondary-color: #2a2c32;
--info-tertiary-color: #4a4c56;
--info-quaternary-color: #767880;
--info-white-color: #fff;
--stroke-primary-color: #17bbef;
--container-primary-color: #eaeaec;
--container-secondary-color-0: #f5f6f7;
--container-secondary-color-1: #fff;
--bg-color-0: #f5f6f7;
--bg-color-1: #fff;
--masks-color-0: rgba(0,0,0,.2);
--masks-color-1: rgba(0,0,0,.6);
--secondary-brand-color-1: #042637;
--secondary-brand-color-2: #b3ecfb;
--badge-text-color: #fff;
--secondary-brand-color-3: #f8f7f6;
```

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