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

# Sunday · Design System

> Quiet clarity for a more helpful home robot

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

Sunday pairs oversized, restrained typography with immersive footage of Memo working in real homes. A monochrome foundation and warm neutral panels keep the long, spacious page focused on the robot and its everyday tasks.

## North star

Let calm, oversized typography and real-life robot footage lead, with restrained color and ample breathing room.

## Overview

The page begins with a near-white canvas, a compact centered navigation capsule, and a very large, regular-weight headline that gives Memo a clear introduction without decorative noise. Dark ink text and fine pale borders define the interface; broad black and charcoal bands create contrast for technology storytelling, while the final warm off-white panel softens the close. Sans-serif display and body text stay unembellished, with tight headline tracking and a small monospaced voice for captions and technical labels. The layout favors generous vertical pauses, wide video frames, and staggered editorial arrangements over dense card grids. Real-home footage carries the emotional and product story: rounded media corners and subtle overlays keep titles readable while preserving the footage’s natural, warm tones. Pale sage is a restrained supporting surface, not a dominant brand accent.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, navigation background, and occasional light text over dark media. |
| Sunday Ink | `#1a1a1a` | `--color-sunday-ink` | brand | Primary headline, body copy, navigation labels, and core wordmark-like interface text. |
| Quiet Hairline | `#e8e8e8` | `--color-quiet-hairline` | neutral | Fine outlines around navigation, cards, buttons, and section boundaries. |
| Deep Stage | `#000000` | `--color-deep-stage` | surface | Full-width dark storytelling band and dark media or card surfaces. |
| Charcoal Stage | `#333333` | `--color-charcoal-stage` | surface | Secondary dark band and subdued dark interface surfaces. |
| Warm Gallery | `#f3f3f0` | `--color-warm-gallery` | surface | Soft off-white closing panel behind the real-use feature area. |
| Sage Mist | `#aec2b8` | `--color-sage-mist` | accent | Occasional muted green surface or gradient component; supporting rather than dominant. |
| Soft Graphite | `#999999` | `--color-soft-graphite` | semantic | Muted supporting copy, including secondary hero or explanatory text. |
| Moss Graphite | `#505754` | `--color-moss-graphite` | semantic | Minor text color detected in supporting content; not a defining brand surface. |
| Warm Graphite | `#66615c` | `--color-warm-graphite` | semantic | Minor warm-toned supporting text; keep limited to content details. |
| Oat Beige | `#eadcce` | `--color-oat-beige` | accent | Warm color seen on a feature card, likely imagery-led rather than a core interface color. |
| Muted Slate | `#737373` | `--color-muted-slate` | semantic | Secondary navigation gray; use sparingly for subdued labels. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Deep Stage) · `--color-surface-2` → `#333333` (Charcoal Stage) · `--color-surface-3` → `#f3f3f0` (Warm Gallery) · `--color-surface-4` → `#aec2b8` (Sage Mist) · `--color-text` → `#1a1a1a` (Sunday Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#999999` (Soft Graphite) · `--color-border` → `#e8e8e8` (Quiet Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1a1a` | `#ffffff` | 17.4:1 | AAA |
| `#1a1a1a` | `#000000` | 1.21:1 | fail |
| `#1a1a1a` | `#333333` | 1.38:1 | fail |
| `#1a1a1a` | `#f3f3f0` | 15.66:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#333333` | 12.63:1 | AAA |
| `#ffffff` | `#f3f3f0` | 1.11:1 | fail |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#999999` | `#000000` | 7.37:1 | AAA |
| `#999999` | `#333333` | 4.43:1 | AA-large |

### Gradients

- `linear-gradient(in oklab, rgb(174, 194, 184) 33%, rgb(236, 236, 232) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| sans | `--font-body` | webfont | 400 | Headlines, navigation, and general interface and body copy. | Inter |
| mono | `--font-mono` | webfont | 400 | Small captions, badges, and technical or media labels. | IBM Plex Mono |

- **sans:** Regular weight throughout; oversized headings use tight negative tracking. Keep casing natural and avoid decorative bold styling.
- **mono:** Regular weight, compact sizing, and lightly open tracking; use for concise metadata rather than paragraphs.

### Type scale — Perfect Fifth (ratio ≈ 1.511, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 142px | 400 | 1 | -0.025em | — | sans | Oversized editorial phrases in the long-form feature storytelling. |
| h1 | 120px | 400 | 1 | -0.025em | — | sans | Primary hero headline, “Say hello to Memo.” |
| h2 | 104px | 400 | 1 | -0.025em | — | sans | Major feature-section headlines and prominent statements. |
| h3 | 84px | 400 | 1.1 | -0.025em | — | sans | Secondary feature headlines and large media overlays. |
| h4 | 42px | 400 | 1.15 | -0.025em | — | sans | Supporting editorial headings and card titles. |
| body | 18px | 400 | 1.4 | 0 | — | sans | Introductory product explanation and feature descriptions. |
| caption | 14px | 400 | 1.2 | 0.025em | — | mono | Monospaced video captions, badges, and small metadata. |
| nav | 24px | 400 | 1.33 | -0.025em | — | sans | Prominent navigation labels and expanded navigation treatment. |
| code | 14px | 400 | 1.2 | 0.025em | — | mono | Technical or compact metadata labels in monospaced text. |

OpenType features in use: `"ss01"`, `"kern"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 3, 4, 5, 6, 8, 10, 12, 14, 16, 20, 24, 96 px.
- Section rhythm 96px · element gap 8px · card padding — · max content width 684px.

Use a spacious, vertically scrolling editorial composition, with a measured page max width of 684px for constrained content and full-bleed media where the layout calls for it. Center the hero heading and keep navigation compact and centered. Alternate between broad single-column media moments and staggered two-column feature arrangements. The measured section rhythm is generous, with a 96px section gap and an 8px element gap as reference units. Maintain a low-density feel: large pauses, simple alignments, and no unnecessary columns or controls.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `4px` · badge `4px` · nav `9999px` · xs `4px` · sm `6px` · md `12px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s linear` on interactive elements.

The interface is mostly flat, without measured shadows. Separate content with whitespace, pale hairlines, and changes between white, black, charcoal, and warm off-white surfaces. Media and cards use restrained rounded corners; the compact navigation capsule gets a faint border rather than a pronounced floating shadow.

## Imagery

Use wide, rounded-corner video and photographic frames showing Memo performing household tasks in lived-in rooms. Keep footage natural and warm, with practical crops that make the robot and task legible. Overlay occasional large white headlines directly on darker footage. Avoid replacing the real-home material with abstract illustration; warm orange, wood, and household colors belong primarily to the imagery.

## Components

### Centered navigation capsule

Compact, centered white nav with the Sunday mark and menu control; fine pale border, rounded capsule silhouette, and dark labels.

### Hero heading

Centered oversized regular sans headline on white, with a small supporting announcement above and substantial breathing room.

### Full-width video feature

Large rounded video frame with a short white headline overlaid on footage when contrast allows.

### Editorial feature row

Pair explanatory copy with a large video or image, then use smaller supporting media tiles where useful.

### Media badge

Small monospaced label over a media frame, using white text and a restrained dark outline or contrast treatment.

### Dark technology band

Long charcoal or black section for technology storytelling, with media, light copy, and minimal interface chrome.

### Real-use panel

Warm off-white panel introducing product-use details through large type and a horizontally arranged set of image-led cards.

### Measured component styles

- **Primary button** (“Our story”): background #000000 · text #1a1a1a · radius 6px · padding 0px · 400 16px sans
- **Secondary button** (“Explore Technology”): transparent background · text #000000 · border 1px solid #e5e5e5 · radius 3.35544e+07px · padding 12px 14px · 400 14px mono
- **Card** (“Autonomous 5× Uncut video of Memo cleani”): background #000000 · text #1a1a1a · radius 12px · padding 0px · 400 16px sans
- **Badge** (“Autonomous”): transparent background · text #ffffff · border 1px solid #333333 · radius 4px · padding 3px 5px · 400 12px mono
- **Navigation item** (“Technology Company Careers Blog Beta Our”): transparent background · text #1a1a1a · radius 0px · padding 0px · 400 16px sans

## Do

- Keep the canvas predominantly white.
- Use regular-weight sans typography and tight headline tracking.
- Let real household video carry the product story.
- Reserve black and charcoal for distinct storytelling bands.
- Use pale borders as quiet separators.
- Leave generous vertical pauses between major moments.

## Don't

- Do not add bright interface colors beyond measured palette values.
- Do not crowd the page with dense card grids.
- Do not apply heavy shadows or layered effects.
- Do not make monospaced labels the dominant type voice.
- Do not treat orange tones in footage as core brand colors.
- Do not overdecorate the navigation or CTA surfaces.

## Agent prompt

Build a new Sunday-style page with a quiet editorial rhythm: begin on Gallery White (#ffffff), use Sunday Ink (#1a1a1a) for clear, regular-weight sans headlines and body copy, and keep headings oversized with tight tracking. Pair the hero with compact centered navigation and a small, restrained supporting label. Use broad, rounded real-home video or photography as the main storytelling device; let household warmth come from the footage, not added UI colors. Break up the scroll with selective Deep Stage (#000000) or Charcoal Stage (#333333) sections, and use Warm Gallery (#f3f3f0) for a soft closing surface. Keep borders Quiet Hairline (#e8e8e8), metadata small and monospaced, and layouts spacious with staggered media-and-copy arrangements. Avoid shadows, dense grids, and unnecessary decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered compact navigation above centered announcement and oversized headline; wide hero media begins below. | Brand introduction, Beta timing cue | White canvas, Centered capsule navigation, Large regular sans headline |
| 2 | video | Full-width black media-led band with minimal visible content. | Immersive storytelling, Visual pause | Black surface, Full-bleed media treatment |
| 3 | feature-split | Two-column editorial content with text, video, and a compact supporting story card. | Product explanation, Explore company story | White canvas, Rounded media, Fine card outlines |
| 4 | gallery | Long white editorial sequence alternating large feature videos with copy and smaller media tiles. | Task discovery, Real-home demonstration | Wide rounded video, Overlay headlines, Staggered media rows |
| 5 | feature-grid | Long charcoal section with centrally presented product imagery and supporting explanatory content. | Technology education, Explore capabilities | Charcoal background, Light text, Centered media |
| 6 | product-showcase | Warm off-white panel with a large heading and horizontally arranged image-led feature cards. | Feature browsing, Scan practical benefits | Warm neutral surface, Large sans heading, Rounded feature cards |

## Source CSS custom properties (selected)

```css
--color-nav-bg: #fff;
--color-nav-button-hover: #1a1a1a0d;
--color-nav-border: #1a1a1a1a;
--color-nav-primary: #1a1a1a;
```

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