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

# Narwal Robotics · Design System

> Smart cleaning, presented with calm confidence

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

Narwal pairs a restrained monochrome interface with warm, lived-in product imagery and vivid violet accents. A spacious commerce homepage moves from a cinematic product hero through product discovery, real-home proof, brand benefits, editorial content, and a dark utility-rich footer.

## North star

Let calm monochrome commerce UI frame warm, credible home photography, using violet only as a precise accent.

## Overview

The visual system is anchored by white canvas (#ffffff), near-black text (#1d1d1f), and soft gray surfaces, letting product and home photography provide most of the color. A saturated violet is reserved for small badges and interactive accents rather than broad backgrounds. Poppins is used consistently, with substantial, semibold headlines and compact regular-weight supporting copy; headings remain sentence case and left aligned in most sections. The homepage alternates open white and pale-gray commerce areas with occasional full-bleed photographic or near-black feature panels. Product cards are clean, centered, and rounded, while editorial and scenario imagery uses varied crops to make the page feel lived-in rather than catalog-only. Comfortable spacing separates distinct stories, and a restrained border and shadow vocabulary keeps cards legible without making the interface feel heavy. Dark navigation and footer treatments invert the otherwise light storefront.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, white product cards, and inverted text over dark navigation and photography. |
| Soft Ink | `#1d1d1f` | `--color-soft-ink` | neutral | Primary headings, body text, dark purchase buttons, and inverse dark surfaces. |
| Warm Graphite | `#595757` | `--color-warm-graphite` | neutral | Muted supporting copy against light backgrounds. |
| Night Panel | `#19191b` | `--color-night-panel` | surface | Dark lower-gradient stop and near-black feature section treatment. |
| Cloud Gray | `#f5f5f5` | `--color-cloud-gray` | surface | Pale section bands, footer and card backgrounds that distinguish content from the white canvas. |
| Electric Violet | `#683df5` | `--color-electric-violet` | accent | Small flagship badges and violet text details; not a dominant page background. |
| Quiet Silver | `#cac9cc` | `--color-quiet-silver` | semantic | Subtle card and interface borders, plus muted light surfaces. |
| Lavender Ash | `#a6a5ab` | `--color-lavender-ash` | neutral | Low-emphasis copy and secondary labels, including light-on-white product details. |
| Pale Alloy | `#e5e5e7` | `--color-pale-alloy` | surface | Light media, button, and navigation details. |
| Muted Slate | `#838289` | `--color-muted-slate` | neutral | Secondary navigation, footer, and supporting text. |
| Mid Gray | `#8f8f8f` | `--color-mid-gray` | surface | Neutral gray inverse section surface; subordinate to the white and charcoal visual structure. |
| Narwal Violet | `#574cd5` | `--color-narwal-violet` | accent | Measured accent token for buttons and small interactive emphasis. |
| Dusky Plum | `#3d3a45` | `--color-dusky-plum` | neutral | Dark navigation and footer details, including subdued borders. |
| Silver Fog | `#b1b1b1` | `--color-silver-fog` | neutral | Card surface and supporting neutral treatment, including overlaid benefit cards. |
| Stone Gray | `#626262` | `--color-stone-gray` | neutral | Muted link and card treatment, especially on image-backed scenario content. |
| Porcelain Gray | `#eeeeee` | `--color-porcelain-gray` | surface | Pale link and button surfaces against light content. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f5` (Cloud Gray) · `--color-surface-2` → `#1d1d1f` (Soft Ink) · `--color-surface-3` → `#cac9cc` (Quiet Silver) · `--color-surface-4` → `#8f8f8f` (Mid Gray) · `--color-text` → `#1d1d1f` (Soft Ink) · `--color-text-muted` → `#595757` (Warm Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#cac9cc` (Quiet Silver) · `--color-accent` → `#574cd5` (Narwal Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d1d1f` | `#ffffff` | 16.83:1 | AAA |
| `#1d1d1f` | `#f5f5f5` | 15.44:1 | AAA |
| `#1d1d1f` | `#cac9cc` | 10.21:1 | AAA |
| `#595757` | `#ffffff` | 7.18:1 | AAA |
| `#595757` | `#f5f5f5` | 6.58:1 | AA |
| `#595757` | `#1d1d1f` | 2.34:1 | fail |
| `#595757` | `#cac9cc` | 4.35:1 | AA-large |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#ffffff` | `#1d1d1f` | 16.83:1 | AAA |
| `#ffffff` | `#cac9cc` | 1.65:1 | fail |

### Gradients

- `linear-gradient(rgba(25, 25, 27, 0) 53.7%, rgb(25, 25, 27))`
- `linear-gradient(to top, rgba(0, 0, 0, 0.498), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Poppins | `--font-body` | webfont | 400, 500, 600, 700 | Site-wide navigation, headings, body copy, labels, and buttons. | Montserrat |

- **Poppins:** Geometric sans throughout; use semibold headlines, regular supporting copy, and sentence case without added tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 600 | 1.2 | 0 | — | Poppins | Primary product hero title. |
| h2 | 40px | 600 | 1.2 | 0 | — | Poppins | Section titles for discovery, stories, blog, and benefits. |
| h3 | 36px | 600 | 1.2 | 0 | — | Poppins | Product-card and feature headings. |
| h4 | 28px | 400 | 1.4 | 0 | — | Poppins | Secondary feature or content headings. |
| body | 16px | 400 | 1.4 | 0 | — | Poppins | Product descriptions, explanatory copy, and editorial summaries. |
| caption | 14px | 400 | 1.4 | 0 | — | Poppins | Dates, badges, metadata, and compact supporting labels. |
| button | 16px | 500 | 1.2 | 0 | — | Poppins | Purchase and other primary action labels. |
| nav | 14px | 400 | 1.4 | 0 | — | Poppins | Header navigation and utility links. |

OpenType features in use: `"ss04"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 9, 12, 16, 18, 20, 24, 32, 48, 64 px.
- Section rhythm 48px · element gap 8px · card padding 24px · max content width 1224px.

The homepage is a long, vertically sequenced storefront with full-bleed hero and benefit imagery alternating with contained shopping and editorial areas. A measured page max width of 1224px supports product rows and multi-column content; section spacing is comfortable, with a measured 48px section gap and 8px element gap. Most titles align left, while selected brand and trust moments center their heading. Product discovery uses a multi-column card row, testimonials use a horizontally browsable carousel, and the footer packs links into dense columns.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `50%` · badge `2px` · nav `8px` · link `16px` · xs `2px` · sm `6px` · md `8px` · lg `10px` · xl `16px` · pill `9999px`
- Shadow `lg` (media): `rgba(23, 73, 77, 0.15) 0px 20px 30px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.1) 0px 1px 10px 0px`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0.1) 0px 0px 10px 0px`
- Shadow `md-3` (card): `rgba(0, 0, 0, 0.12) 0px 8px 20px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The layout is mostly flat, relying on white space and changes between white, pale gray, and dark image-backed bands to define sections. Product and editorial cards use softly rounded corners, fine neutral borders, or subtle shadows rather than pronounced elevation. Layer white text and translucent benefit cards over photography, and use dark gradients to protect contrast.

## Imagery

Use polished, realistic product photography and cinematic home scenes as the primary visual storytelling. Show robot vacuums and mops in warm, modern interiors, with close-ups or full product views on clean backgrounds for shopping cards. Scenario and testimonial areas favor varied crops and real-life messes, pets, and household activity. Use dark overlays and gradients over images when necessary for legible white copy; avoid decorative illustration as the main visual language.

## Components

### Header navigation

Overlay a full-width hero image with a restrained navigation row: white wordmark and links, plus search, account, and bag icons.

### Hero purchase CTA

Place a bold white product headline and concise supporting lines over lifestyle photography; use a white pill-shaped “Buy now” button.

### Product cards

Present centered product imagery, compact Poppins titles and descriptions, violet badges, pricing, and paired learn-more and purchase actions on white cards.

### Stats strip

Arrange large dark numeric proof points with smaller explanatory labels in a horizontal row on a light background.

### Scenario tiles

Use varied image crops and dark translucent text overlays to show distinct cleaning situations and link-like discovery content.

### Testimonial carousel

Show review cards with user attribution, short copy, portrait or video imagery, and simple previous/next controls.

### Benefit and membership panel

Layer translucent rounded benefit tiles and a wide membership card over blurred lifestyle photography, with white text and subtle borders.

### Footer

Use a near-black background, grouped compact link columns, newsletter input, social icons, and payment marks.

### Measured component styles

- **Primary button** (“TwinAI Dodge™ Obstacle Avoidance”): background #ffffff · text #a6a5ab · radius 0px · padding 8px 64px · 400 15px Poppins
- **Secondary button** (“Shop now”): background #000000 · text #ffffff · border 1px solid #000000 · radius 9999px · padding 0px 32px · 500 16px Poppins
- **Link** (“Hard floors A clean you can see and feel”): background #626262 · text #ffffff · radius 16px · padding 0px · 400 15px Poppins
- **Input**: transparent background · text #f5f5f5 · radius 0px · padding 0px 15px · 400 12px Poppins
- **Card** (“Cr. @valentinelewis 577k Instagram follo”): background #fdfdfd · text #1d1d1f · radius 16px · padding 24px · 400 15px Poppins
- **Badge** (“Flagship”): background #683df5 · text #ffffff · radius 2px · padding 1px 4px · 500 12px Poppins
- **Navigation item** (“🍁 Fall Prime Day Freo 20 Edge Robot Vac”): transparent background · text #ffffff · radius 0px · padding 0px · 400 15px Poppins

## Do

- Keep the main canvas white and use pale gray to separate shopping sections.
- Use Poppins consistently, with clear weight contrast between titles and supporting copy.
- Choose warm, credible household photography for hero and scenario storytelling.
- Reserve violet for small badges and focused interactive emphasis.
- Use rounded product cards and pill-shaped purchase actions.
- Overlay white copy on imagery only when a dark overlay preserves legibility.

## Don't

- Do not turn the restrained storefront into a colorful gradient-heavy interface.
- Do not use violet as a large background field.
- Do not crowd product cards with decorative UI or dense copy.
- Do not replace real home imagery with playful illustration.
- Do not apply heavy shadows to every card or section.
- Do not use all-caps headings or excessive letter spacing.

## Agent prompt

Build a new Narwal-style consumer electronics storefront page with a calm, premium feel. Use Gallery White (#ffffff) as the canvas, Soft Ink (#1d1d1f) for primary copy and purchase actions, and Cloud Gray (#f5f5f5) for quiet section bands. Keep Electric Violet (#683df5) and Narwal Violet (#574cd5) to small badges or focused accents. Use Poppins throughout with semibold, sentence-case headings and readable regular copy. Organize content into spacious, clearly separated blocks: cinematic product hero, centered product cards, real-home scenario imagery, customer proof, and a compact dark footer. Favor warm, realistic photography, rounded cards and pill CTAs, subtle borders, and limited shadow. Keep shopping information clear and let product imagery carry the visual impact.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed photographic hero with left-aligned copy and product imagery. | Product purchase CTA, Hero carousel indicators | White overlay text, Pill-shaped buy button, Image-backed navigation |
| 2 | product-grid | Light-background stats strip followed by a left-aligned heading, category tabs, and product card row. | Category switching, Compare product choices, Buy or learn more | Number-led proof points, White cards, Violet product badges, Compact action row |
| 3 | gallery | Asymmetric mosaic of image tiles with short copy overlays and a section introduction. | Explore use cases, Navigate to cleaning details | Varied photo crops, Dark translucent captions, Minimal text overlays |
| 4 | video | Centered brand-story heading followed by a wide, cinematic media frame. | Watch product story | Wide video still, Open white margins |
| 5 | feature-split | Dark feature band with a white text panel beside close-up technology imagery. | Browse system features, Select feature detail | Tabbed feature list, High-contrast dark media, White information card |
| 6 | testimonials | Pale section with a horizontal row of review and video cards. | Browse customer reviews, Carousel navigation | Attribution and review copy, Mixed media cards, Previous and next controls |
| 7 | feature-grid | Full-bleed lifestyle background with layered benefit tiles and a wide membership card. | Review purchase benefits, Explore membership | Translucent rounded tiles, Icon-led benefits, Layered membership panel |
| 8 | content-feed | White editorial area with one large featured story and a vertical stack of smaller stories. | Browse articles, Open featured story | Mixed-size editorial cards, Image thumbnails, Compact metadata |
| 9 | logo-cloud | Centered heading above a compact row of publication or expert logos. | View trusted sources | Centered title, Aligned logo row, Light neutral band |
| 10 | footer | Dark multi-column footer with newsletter area, grouped navigation, social links, and payment marks. | Subscribe by email, Navigate support and policies | Dark background, Compact link groups, Newsletter input, Social and payment icons |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--border: #d5d5d5;
--bg: #f8f8f8;
--border-radius: 5px;
--kl-reviews-color-light-gray: #e9e9eb;
```

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