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

# Superr · Design System

> A warm, playful canvas for learning by hand.

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

Superr presents its AI notebook through a spacious, story-led product page with warm paper tones and playful handwritten details. Large book imagery and illustrated feature scenes make the product feel tactile, personal, and distraction-free.

## North star

Keep the interface as quiet as warm paper, and let expressive notebook imagery carry the story.

## Overview

The page uses a nearly continuous warm off-white canvas, with a pale cream band reserved for the privacy section. Dark espresso-brown anchors the oversized display lettering, interface copy, and hand-drawn outlines; muted gray-brown supports secondary text. The measured blue, pink, and green accents are sparse and appear mainly as small illustrative or annotated details, not as broad interface fills. Gelica gives headings and navigation a soft, rounded editorial character, while Geist keeps supporting copy crisp and legible. The layout alternates oversized product scenes with restrained text, then uses small doodles and notebook annotations to add personality without crowding the page. Generous vertical pauses create a slow, gallery-like rhythm. Borders are thin or hand-drawn in appearance, and cards stay close to the paper palette. The notebook artwork supplies most of the page’s richer color and visual texture.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Paper | `#fdfbf9` | `--color-warm-paper` | brand | Dominant page canvas and the consistent background for most sections. |
| Espresso Ink | `#2b1a07` | `--color-espresso-ink` | brand | Primary heading and text color; also defines dark outlines and card borders. |
| Blush Parchment | `#f7efe9` | `--color-blush-parchment` | surface | Soft section-band surface, visibly used behind the Safe & Secure content. |
| True Black | `#000000` | `--color-true-black` | neutral | Minor muted text occurrence; not a defining page color. |
| Taupe Note | `#8a7b6a` | `--color-taupe-note` | neutral | Secondary copy, including subdued supporting text beneath the hero action. |
| Soft Charcoal | `#171717` | `--color-soft-charcoal` | neutral | Measured component text and some headings; a near-black text variation. |
| Notebook Blue | `#3b82f6` | `--color-notebook-blue` | accent | Small accent text and illustrative details; avoid using as a large interface fill. |
| Petal Pink | `#ff66cf` | `--color-petal-pink` | accent | Sparse accent text and product illustration detail, not a primary CTA color. |
| Garden Green | `#22c55e` | `--color-garden-green` | accent | Small accent text and illustrated details; the meadow scene contains richer greens. |

### Semantic aliases

`--color-canvas` → `#fdfbf9` (Warm Paper) · `--color-surface` → `#f7efe9` (Blush Parchment) · `--color-text` → `#2b1a07` (Espresso Ink) · `--color-text-muted` → `#000000` (True Black) · `--color-text-subtle` → `#8a7b6a` (Taupe Note) · `--color-border` → `#2b1a07` (Espresso Ink) · `--color-accent` → `#3b82f6` (Notebook Blue) · `--color-accent-2` → `#ff66cf` (Petal Pink) · `--color-accent-3` → `#22c55e` (Garden Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2b1a07` | `#fdfbf9` | 16.23:1 | AAA |
| `#2b1a07` | `#f7efe9` | 14.74:1 | AAA |
| `#000000` | `#fdfbf9` | 20.34:1 | AAA |
| `#000000` | `#f7efe9` | 18.48:1 | AAA |
| `#8a7b6a` | `#fdfbf9` | 3.97:1 | AA-large |
| `#8a7b6a` | `#f7efe9` | 3.61:1 | AA-large |
| `#3b82f6` | `#fdfbf9` | 3.56:1 | AA-large |
| `#3b82f6` | `#f7efe9` | 3.24:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| gelica | `--font-display` | webfont | 400, 500, 600 | Display headings, section headings, and navigation; contributes the page's friendly editorial voice. | Fraunces |
| Geist | `--font-body` | webfont | 400, 500 | Body copy and caption-level supporting text. | Inter |

- **gelica:** Use measured regular and medium weights for headings and nav; display titles can be bold and rounded. Keep casing natural.
- **Geist:** Use clean, readable regular text and medium captions. Keep tracking neutral and avoid all-caps styling.

### Type scale — Augmented Fourth (ratio ≈ 1.391, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 104px | 600 | 1.08 | 0 | — | gelica | Oversized hero display lettering and expressive headline moments. |
| h1 | 46px | 400 | 1.2 | 0 | — | gelica | Primary page headline and prominent section titles. |
| h2 | 40px | 400 | 1.2 | 0 | — | gelica | Major feature and product-section headings. |
| h3 | 36px | 400 | 1.2 | 0 | — | gelica | Secondary section titles and feature group headings. |
| h4 | 32px | 400 | 1.2 | 0 | — | gelica | Small section or card-level headings. |
| body | 20px | 400 | 1.5 | 0 | — | Geist | Explanatory product copy and supporting descriptions. |
| caption | 18px | 500 | 1.5 | 0 | — | Geist | Short annotations, labels, and secondary supporting text. |
| nav | 20px | 500 | 1.5 | 0 | — | gelica | Header navigation and compact navigation actions. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 11, 12, 16, 20, 24, 28, 32, 40, 58, 90 px.
- Section rhythm 90px · element gap 12px · card padding 10px · max content width 720px.

Use a restrained centered page frame, with measured content max width of 720px for text-led areas and broader, full-bleed product media where the composition calls for it. Keep headlines centered or left-aligned according to each section’s story. The page moves through long, quiet vertical intervals, interrupted by large media scenes and concise feature content. Favor a comfortable, low-density layout; use the measured 90px section rhythm and compact 12px element gaps as reference points rather than filling open space.

## Shape & elevation

- Radius: button `20px` · card `12px` · media `12px` · nav `16px` · xs `8px` · sm `12px` · md `16px`
- Shadow `md` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 2px 20px 0px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 1px 2px 0px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 1px 4px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is predominantly flat and paper-like, without heavy shadows or elevated dashboard cards. Use dark, clearly defined outlines for selected notebook or content cards, with gentle measured shadows only when a card needs separation. Preserve layering within product imagery rather than adding interface depth.

## Imagery

Treat the notebook as the hero: large, tactile product artwork with visible covers, handwriting, labels, pencils, and page details. Full-bleed scenes include a notebook in a flowered meadow, while later sections use small hand-drawn icons and product variations. Keep images softly integrated against the pale canvas; use doodles and annotations as illustrations, not decorative interface chrome.

## Components

### Hero product scene

Asymmetric two-column opening: a large left-aligned title and short copy sit beside an oversized notebook illustration on the warm canvas.

### Pre-order action

Compact outlined pill button with a dark border, Gelica label, and subdued supporting availability text beneath.

### Feature contents card

Paper-toned card with a 2px espresso outline, 12px corners, and a concise list of notebook capabilities.

### Illustrated feature labels

Small handwritten-style captions and doodles surround feature imagery; use accent color sparingly for emphasis.

### Privacy section

A pale blush parchment band centers a handwritten no-list image, with a concise heading and supporting line.

### Notebook gallery

Large, cropped notebook covers and playful annotations create a showcase without conventional product-card framing.

### Closing handoff scene

Illustrated hands pass a notebook across a spacious canvas, pairing the product image with a short editorial message.

### Measured component styles

- **Primary button** (“Writes like pen & paper I”): transparent background · text #171717 · radius 0px · padding 0px 28px 0px 32px · 400 16px gelica
- **Card** (“It’s kinda like magic paper Writes like ”): background #fffcf9 · text #171717 · border 2px solid #2b1a07 · radius 12px · padding 24px 0px 16px 0px · 400 16px gelica · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“I call dibs!”): transparent background · text #171717 · radius 0px · padding 0px · 400 16px gelica

## Do

- Use Warm Paper (#fdfbf9) as the default canvas.
- Set major headings in a friendly, expressive serif.
- Let product artwork occupy generous space.
- Keep body copy concise and clearly secondary.
- Use Espresso Ink (#2b1a07) for strong text and outlines.
- Reserve blush surface for a distinct section band.
- Treat accent colors as small illustrative highlights.

## Don't

- Do not turn the page into a dense SaaS dashboard.
- Do not use large saturated accent-color backgrounds.
- Do not crowd the long vertical pauses with extra content.
- Do not replace the notebook artwork with generic stock photography.
- Do not add heavy shadows to every card or button.
- Do not force every section into the same centered grid.

## Agent prompt

Build a new product page in Superr’s warm, paper-led visual style. Use Warm Paper (#fdfbf9) for the main canvas, Espresso Ink (#2b1a07) for expressive headings and outlines, and Blush Parchment (#f7efe9) only where a section needs a soft band. Set editorial headlines in Gelica or a close Fraunces substitute; use Geist or Inter for clear supporting copy. Keep text concise and let large, tactile notebook imagery lead. Add sparse hand-drawn notes and small Notebook Blue (#3b82f6), Petal Pink (#ff66cf), or Garden Green (#22c55e) details. Preserve long vertical breathing room, varied section compositions, and lightweight outlined actions. Avoid dashboard density, loud color blocks, generic photography, and unnecessary elevation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with editorial copy on the left and oversized notebook artwork on the right. | Product introduction, Pre-order action, Availability note | Large display heading, Warm neutral canvas, Outlined pill button |
| 2 | other | Single-column, uninterrupted canvas with an unusually spacious vertical pause. | Visual breathing room | Plain warm background |
| 3 | feature-split | Full-bleed product scene with a compact feature list overlaid beside the open notebook. | Feature navigation, Capability overview | Illustrated notebook, Outlined paper card, Small numbered list |
| 4 | feature-split | Full-bleed media-led section continuing the feature sequence. | Feature storytelling | Large product media, Minimal surrounding UI |
| 5 | feature-split | Full-bleed media-led section with the same spacious feature presentation. | Feature storytelling | Product-focused scene, Open canvas |
| 6 | feature-grid | Centered heading amid a sparse three-column arrangement of small illustrated features. | Feature scanning | Doodle icons, Short handwritten captions, Loose grid |
| 7 | other | Centered heading and supporting line above a central no-list image, with small illustrations around it. | Privacy reassurance | Blush section band, Handwritten checklist, Small doodles |
| 8 | gallery | Centered heading between large notebook-cover images, with scattered annotations and decorative doodles. | Product browsing | Oversized product covers, Playful notes, Open composition |
| 9 | product-showcase | Large illustrated handoff scene with a short heading placed to the right. | Emotional product reassurance | Wide illustration, Simple editorial heading, Open background |
| 10 | footer | Compact centered closing area with a small collection of navigation and action elements. | Site navigation, Closing actions | Simple footer controls, Minimal warm canvas |

## Source CSS custom properties (selected)

```css
--background: #fdfbf9;
--foreground: #171717;
```

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