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

# Super · Design System

> A calm canvas for building better Notion websites

**Theme:** light · **Industry:** saas · **Source:** https://super.so/ · **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._

Super presents a Notion-to-website service through a spacious, light canvas punctuated by confident charcoal bands. Product previews, customer stories, and template galleries make the practical benefits tangible, while warm yellow CTAs provide a consistent focal point.

## North star

Keep the page quiet and spacious, using charcoal section bands and yellow only to mark meaningful actions.

## Overview

The page uses an almost-white canvas (#fdfdfc) as a quiet backdrop for charcoal (#262a2e) headings and alternating dark section bands. Warm yellow (#ffbe3c) is reserved for primary calls to action and small brand accents, not broad decoration. Beausite sans-serif typography gives the oversized, tightly tracked hero a crisp product feel; supporting copy is smaller, muted, and comfortably spaced. Layout is centered and modular, with a broad content frame, generous section pauses, and multi-column grids for testimonials, templates, features, and showcase examples. Screenshots and website mockups carry the product story, usually presented as clean, rectangular previews rather than expressive illustration. Cards sit on light or charcoal surfaces with restrained rounding and subtle shadows; pale gray surfaces and hairlines separate content without competing with the imagery. Dark bands create clear chapter changes while preserving a consistent, uncluttered rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fdfdfc` | `--color-gallery-white` | brand | Dominant page canvas and light card base; gives product previews a clean, open surround. |
| Slate Copy | `#66707a` | `--color-slate-copy` | neutral | Primary muted text and link color for supporting descriptions and secondary reading. |
| Charcoal Ink | `#262a2e` | `--color-charcoal-ink` | brand | Main text and full-width dark section bands, including how-it-works and template gallery areas. |
| Soft Mist | `#f2f1f1` | `--color-soft-mist` | surface | Pale card, button, and section surface; also appears frequently around subtle separators. |
| Quiet Hairline | `#ebebeb` | `--color-quiet-hairline` | neutral | Low-contrast borders and fine dividers that structure light surfaces without adding visual weight. |
| Cool Haze | `#ccd1d6` | `--color-cool-haze` | neutral | Lighter muted text and links, especially for secondary information on darker surfaces. |
| Sunlit Gold | `#ffbe3c` | `--color-sunlit-gold` | accent | Primary CTA fill and small navigation or brand accents; keep usage sparse and purposeful. |
| Graphite Panel | `#33383d` | `--color-graphite-panel` | surface | Dark card and inverse surface tone, visible in template cards and other dark panels. |
| Button Black | `#111111` | `--color-button-black` | semantic | Text and icon contrast on the yellow primary CTA. |
| Steel Gray | `#808c99` | `--color-steel-gray` | neutral | Minor measured text color; use only for quiet secondary details where visible. |
| Warm Ash | `#787673` | `--color-warm-ash` | neutral | Minor warm-gray text tone, likely supporting metadata rather than a defining brand color. |

### Semantic aliases

`--color-canvas` → `#fdfdfc` (Gallery White) · `--color-surface` → `#262a2e` (Charcoal Ink) · `--color-surface-2` → `#f2f1f1` (Soft Mist) · `--color-surface-3` → `#33383d` (Graphite Panel) · `--color-text` → `#262a2e` (Charcoal Ink) · `--color-text-muted` → `#66707a` (Slate Copy) · `--color-text-subtle` → `#ccd1d6` (Cool Haze) · `--color-border` → `#ebebeb` (Quiet Hairline) · `--color-accent` → `#ffbe3c` (Sunlit Gold) · `--color-on-accent` → `#111111` (Button Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#262a2e` | `#fdfdfc` | 14.2:1 | AAA |
| `#262a2e` | `#f2f1f1` | 12.82:1 | AAA |
| `#262a2e` | `#33383d` | 1.22:1 | fail |
| `#66707a` | `#fdfdfc` | 4.96:1 | AA |
| `#66707a` | `#262a2e` | 2.87:1 | fail |
| `#66707a` | `#f2f1f1` | 4.47:1 | AA-large |
| `#66707a` | `#33383d` | 2.35:1 | fail |
| `#ccd1d6` | `#fdfdfc` | 1.51:1 | fail |
| `#ccd1d6` | `#262a2e` | 9.4:1 | AAA |
| `#ccd1d6` | `#f2f1f1` | 1.36:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Beausite | `--font-body` | webfont | 400, 600, 500, 300 | Site-wide typeface for navigation, hero and section headings, body copy, captions, links, and buttons. | Inter |

- **Beausite:** Use clean sans-serif forms; display and headings are semibold with tight negative tracking, while body and navigation remain regular and unforced.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1.1 | -0.039em | — | Beausite | Oversized hero headline, centered above the product comparison preview. |
| h1 | 38.5px | 600 | 1.1 | -0.026em | — | Beausite | Primary page and major section headings. |
| h2 | 25.5px | 600 | 1.2 | -0.031em | — | Beausite | Section titles and prominent feature or content headings. |
| h3 | 20px | 300 | 1.3 | 0 | — | Beausite | Light-weight subheadings and secondary feature titles. |
| body | 16px | 400 | 1.5 | 0 | — | Beausite | Explanatory copy, testimonials, and product descriptions. |
| caption | 14px | 400 | 1.71 | 0 | — | Beausite | Small labels, image captions, and secondary metadata. |
| button | 16px | 500 | 1.6 | 0 | — | Beausite | Primary and secondary action labels. |
| nav | 16px | 400 | normal | 0 | — | Beausite | Top navigation links and menu items. |
| link | 16px | 400 | normal | 0 | — | Beausite | Text links in showcase, content, and supporting sections. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 6, 8, 12, 16, 20, 24 px.
- Section rhythm 48px · element gap 4px · card padding — · max content width 1088px.

Use a centered content frame with a measured maximum width of 1088px and comfortable density. The first viewport centers the hero headline, supporting copy, CTA, and paired product previews beneath a compact horizontal navigation. Alternate broad light and charcoal section bands to define chapters. Within them, use centered headings, three-column cards, two-column feature splits, and a four-column template gallery where appropriate. Keep generous section gaps and consistent alignment; avoid dense edge-to-edge text.

## Shape & elevation

- Radius: button `8px` · card `8px` · media `50%` · nav `8px` · link `5px` · xs `3px` · sm `4px` · md `5px` · lg `8px` · xl `12px` · 2xl `16px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.008) 2.6px 4px 2.6px 0px, rgba(0, 0, 0, 0.01) 7.3px 11px 7.1px 0px, rgba(0, 0, 0, 0.01) 17.5px 26.5px 17.2px 0px, rgba(0, 0, 0, 0.02) 58px 88px 57px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.05) 0px 30px 22px -11px`
- Shadow `md-2` (nav): `rgba(0, 0, 0, 0.04) 0px 0px 20px 0px`
- Shadow `lg` (button): `rgba(18, 18, 32, 0.05) 0px 12px 40px -3px`
- Shadow `md-3` (other): `rgba(0, 0, 0, 0.08) 0px 4px 20px 0px`
- Motion: standard transition `0.12s ease-in` on interactive elements.

Most sections and cards rely on flat color surfaces, with subtle rounded corners and restrained shadows on selected cards and the CTA. Pale borders separate light controls without becoming prominent. Layer product previews over their surroundings only when needed to communicate the Notion-to-site transformation; dark cards remain distinct through surface contrast rather than heavy outlines.

## Imagery

Use product screenshots and website previews as the primary visual material: Notion interfaces, customized site mockups, and template thumbnails. Arrange previews in clean pairs or card grids, keeping their rectangular browser-like framing legible. Customer portraits appear small in testimonial cards. Feature illustrations are understated and often use warm yellow accents; avoid adding unrelated decorative photography or elaborate 3D effects.

## Components

### Primary CTA

Warm yellow (#ffbe3c) rounded button with near-black (#111111) medium-weight label; use the measured 8px radius and a soft shadow.

### Top navigation

Compact horizontal links in Beausite, paired with a lightly bordered Sign in control and yellow primary action.

### Hero comparison

Centered headline and supporting copy lead into two side-by-side Notion and custom-site previews, with a small transition cue.

### Dark section band

Full-width charcoal (#262a2e) chapter background with light text and a centered heading or aligned content grid.

### Template card

Rounded preview card in a multi-column gallery; dark graphite surfaces and subtle depth complement varied website thumbnails.

### Testimonial card

Quiet light card with a small customer portrait, name, handle, and muted compact review text.

### Measured component styles

- **Primary button** (“Get started for free”): background #ffbe3c · text #111111 · radius 8px · padding 13px 16px 14px 16px · 500 16px Beausite · shadow rgba(18, 18, 32, 0.05) 0px 12px 40px -3px
- **Secondary button** (“Sign in”): transparent background · text #4d545c · border 1px solid #f2f4f5 · radius 8px · padding 10px 16px · 500 16px Beausite
- **Link** (“Depo”): transparent background · radius 0px · padding 0px · 400 16px Beausite
- **Card** (“High Performance High Performance Incred”): background #ffffff · text #262a2e · radius 8px · padding 0px · 400 16px Beausite · shadow rgba(0, 0, 0, 0.008) 2.6px 4px 2.6px 0px, rgba(0, 0, 0, 0.01) 7.3px 11px 7.1px 0
- **Navigation item** (“Templates Showcase Features Pricing Guid”): transparent background · text #37352f · radius 0px · padding 0px · 400 16px Beausite

## Do

- Use Gallery White (#fdfdfc) as the dominant canvas.
- Reserve Sunlit Gold (#ffbe3c) for primary actions and small accents.
- Create chapter breaks with broad Charcoal Ink (#262a2e) bands.
- Keep hero and section headings crisp, centered, and tightly tracked.
- Show the product through legible website and Notion previews.
- Use muted gray copy for supporting information and metadata.

## Don't

- Do not turn the yellow accent into a large background field.
- Do not add gradients absent from the measured visual system.
- Do not crowd the hero or card grids with excessive copy.
- Do not use heavy outlines or dramatic shadows on every card.
- Do not replace product screenshots with unrelated stock imagery.
- Do not make every section dark; preserve the alternating light rhythm.

## Agent prompt

Build a new SaaS page in Super’s visual style. Use Gallery White (#fdfdfc) for the main canvas, Charcoal Ink (#262a2e) for strong headings and selected full-width section bands, and Sunlit Gold (#ffbe3c) sparingly for the primary CTA. Set all text in Beausite or a close sans-serif substitute such as Inter; make display headings semibold with tight tracking and body copy muted and comfortable to read. Use a centered content frame, spacious section breaks, and clear modular grids. Show the product through crisp Notion and website previews, with restrained rounded cards, quiet borders, and only subtle shadows. Alternate light content areas with charcoal chapters, keeping actions and navigation easy to scan. Avoid decorative gradients, excessive density, or unrelated imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | how-it-works | Three-column steps on a charcoal band with a centered heading and image previews. | Sequential steps, Visual walkthrough | Dark section band, Three-column cards, Centered heading |
| 2 | testimonials | Light section with centered heading and a three-column customer quote grid. | Social proof, Customer quotes | Light cards, Small portraits, Muted review text |
| 3 | product-grid | Charcoal section with heading, category links, and a four-column template gallery. | Category filtering, Browse templates | Dark band, Thumbnail cards, Compact metadata |
| 4 | feature-grid | Light section with a centered heading and feature cards arranged in a three-column grid. | Feature discovery, Explore all features | Pale cards, Yellow-tinted illustrations, Centered CTA |
| 5 | feature-split | Charcoal two-column block pairing left-aligned text with a large Notion interface preview. | Product proof, Link to source page | Dark band, Split layout, Light secondary button |

## Source CSS custom properties (selected)

```css
--floating-toc-line-gap: 7px;
--floating-toc-line-color: rgba(55, 53, 47, 0.16);
--floating-toc-line-active-color: rgba(55, 53, 47, 0.88);
--floating-toc-heading-highlight-bg: rgba(47, 125, 225, 0.14);
--floating-toc-heading-highlight-radius: 6px;
--floating-toc-panel-bg: #ffffff;
--floating-toc-panel-border: #E9E9E7;
--floating-toc-panel-radius: 14px;
--floating-toc-panel-shadow: 0 16px 38px rgba(15, 15, 15, 0.11);
--floating-toc-font-family: inherit;
--floating-toc-font-size: 14px;
--floating-toc-line-height-text: 1.35;
--floating-toc-text-color: rgba(55, 53, 47, 0.68);
--floating-toc-text-hover-color: rgba(55, 53, 47, 0.96);
--floating-toc-active-color: #2f7de1;
--floating-toc-item-radius: 5px;
--floating-toc-item-hover-bg: rgba(55, 53, 47, 0.08);
--floating-toc-active-bg: rgba(55, 53, 47, 0.08);
--rounded-md: 8px;
--primary-500: #ffbe3c;
--primary-600: #fbb43c;
--color-bg-default: #fdfdfc;
--color-text-default: #262a2e;
--column-spacing: 32px;
--shadow-md: 0px 12px 40px -3px rgba(18, 18, 32, 0.05);
--image-border-radii: calc(5px - 5px);
--color-gray: hsl(36, 2%, 46%);
--color-text-gray: hsl(36, 2%, 46%);
--color-bg-gray: hsl(
        36,
        2%,
        90%
      );
--color-bg-gray-light: hsl(
        36,
        2%,
        90%
      );
--color-pill-gray: hsl(
        calc(36 + 14),
        2%,
        88%
      );
--color-pill-text-gray: hsl(
        36,
        2%,
        calc(46% - 28%)
      );
--color-bg-form-btn-gray: #A7A39A;
--color-brown: hsl(19, 31%, 47%);
--color-text-brown: hsl(19, 31%, 47%);
--color-bg-brown: hsl(
        19,
        31%,
        90%
      );
--color-bg-brown-light: hsl(
        19,
        31%,
        90%
      );
--color-pill-brown: hsl(
        19,
        calc(31% + 10%),
        89%
      );
--color-pill-text-brown: hsl(
        19,
        calc(31% + 10%),
        calc(47% - 28%)
      );
--color-bg-form-btn-brown: #9A6851;
```

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