# Super · Design system migration spec

> Source: https://super.so  ·  Curated by OpenDesign  ·  en

> Worth including as an excellent example of a clean, focused SaaS landing page that balances a professional aesthetic with a friendly, accessible feel.

## 1. Identity DNA

Super operates on a simple, powerful principle: transforming a Notion workspace into a published website should feel as straightforward as organizing a desk. The system is built on a foundation of stark clarity—clean surfaces, a direct layout, and a single point of energetic focus—that turns documents into polished digital properties without visual noise.

**One-liner:** A clean, high-contrast SaaS tool for turning Notion documents into professional websites.
**Keywords:** Simple · Efficient · Notion-powered · Professional · Web-building
**Analogy:** A clean, professional workspace that instantly turns your notes into a polished public website.

## 2. Color

The palette is fundamentally high-contrast, built on a crisp interplay of white, light off-white, and dark gray that forms a professional, legible canvas. A single, energetic yellow accent is reserved exclusively for primary calls to action, creating a clear and singular point of visual momentum.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F9F9F8` | card background |
| `--bg-quiet` | `#FDFDFC` | quiet area |
| `--ink` | `#262A2E` | body text |
| `--ink-soft` | `#66707A` | secondary text |
| `--muted` | `#808C99` | placeholder |
| `--muted-soft` | `#CCD1D6` | weak hint |
| `--accent` | `#FFBE3C` | single accent |
| `--line` | `rgba(204, 209, 214, 1)` | divider |

**Color principle:** High-contrast foundation with a single energetic accent.

The principle is one of restriction: a single accent color against a restrained foundation eliminates competition and directs attention with purpose.

## 3. Typography

The typographic voice balances geometric boldness with humanist clarity, using a strong sans-serif for headlines and a complementary body typeface for sustained reading. Tight letter spacing on large display sizes creates a confident, compact rhythm, while maintaining high contrast for effortless legibility at the text level.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 600 | -1px | Hero headline |
| h2 | 38.4px | 1.1 | 600 | -0.8px | Section headers |
| body | 18px | 1.6 | 400 | 0px | Subheadings and paragraphs |
| small | 14px | 1.4 | 400 | 0px | Metadata and UI labels |
| tiny | 12px | 1.5 | 400 | 0px | Footnotes and badges |

**Type rules:**
- Use tight letter spacing for large display text.
- Maintain high contrast for body text against white backgrounds.

## 4. Spacing

A consistent 4px base grid establishes the fundamental unit of spatial rhythm, ensuring every margin and padding value feels deliberate.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous vertical spacing for sections.

## 5. Surfaces

Depth is communicated with extreme subtlety, using large-radius, nearly invisible shadows that lift elements without announcing their presence. Surfaces are defined less by their edges and more by their spatial relationship, with 1px borders in a muted gray providing quiet delineation.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - 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.02) 58px 88px 57px 0px
- **Borders:** 1px solid rgba(204, 209, 214, 1)

## 6. Layout

The layout skeleton is one of focused simplicity: a centered, single column for the primary hero content, anchored by a standard top navigation bar. This structure rejects dense grid patterns in favor of generous vertical spacing and an uncluttered, top-to-bottom reading path.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered column hero layout with a standard top navigation bar.

## 7. Motion & Interaction

Motion philosophy is one of restrained utility, where animation serves interface feedback rather than spectacle. Transitions are quick, smooth opacity and color shifts, providing immediate confirmation of interaction without lingering.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Opacity fades for UI transitions
  - Quick transform scales on interactive elements

- **Hover:** Subtle background color shift or slight scale increase on primary buttons.
- **Click:** Immediate state change with minimal transition delay.
- **Transition:** Smooth opacity and color transitions ranging from 0.1s to 0.2s.
- **Keyboard:** Standard tab focus management for navigation and interactive elements.

## 8. Voice & Don'ts

The voice is confident, direct, and helpful, favoring bold, declarative headlines that clearly state a benefit. Language is kept free of technical jargon and aggressive salesmanship, focusing instead on clear, action-oriented phrasing.

- **Tone:** Confident, direct, and helpful.
- **Headline style:** Bold, declarative, and action-oriented statements.
- **CTA style:** Direct, benefit-driven phrases like 'Get started free'.
- **Avoid:** Overly technical jargon / Aggressive or salesy language / Vague promises

### Don'ts
- ❌ Don't use dark mode for the primary landing page — screenshot shows a predominantly white background.
- ❌ Don't use multiple competing accent colors — screenshot shows only yellow as the primary accent.
- ❌ Don't use decorative serif fonts for headings — screenshot shows a clean, geometric sans-serif.
- ❌ Don't use heavy drop shadows on primary elements — screenshot shows very subtle, large-radius box shadows.
- ❌ Don't clutter the layout with dense grids — screenshot shows a clean, single-column centered layout.
- ❌ Don't use aggressive, bright background colors — screenshot uses a restrained palette of white, off-white, and dark gray.

What it deliberately doesn't do is employ multiple accent colors, decorative fonts, or dark mode—choices that would compromise the system's core focus on clarity and conversion.

## System Prompt (paste into AI tool)

```
Super is a clean, high-contrast SaaS tool for turning Notion documents into professional websites. The visual identity relies on a foundation of white and light off-white backgrounds with dark gray (#262A2E) text, creating a crisp, professional feel. A single, energetic accent color (yellow, #FFBE3C) is used exclusively for primary calls to action. Typography features a bold, geometric sans-serif for display and a clean humanist sans-serif for body text, often with tight letter spacing at large sizes. The layout is centered and minimalist, avoiding visual clutter. Critically, avoid using dark mode for the main landing pages, never use competing bright accent colors, and always keep the layout focused on a single column in the hero section. Ensure all shadows are subtle and large-radius, and keep the UI grounded with a 4px base grid and generous vertical spacing.
```