# Superhi · Design system migration spec

> Source: https://superhi.com  ·  Curated by OpenDesign  ·  en

> This site is a strong example of how a playful, colorful, and bold design system can be used to create an approachable and engaging educational brand.

## 1. Identity DNA

The Superhi design system is built as a colorful, approachable learning studio—a creative playground where bold geometry and a clean, neutral type palette meet. Its identity is a deliberate structure of vibrant energy held within a clear, friendly framework.

**One-liner:** An online learning platform for creative tech skills, using a bold, colorful, and friendly visual language.
**Keywords:** creative career · learning · playful · community · practical skills
**Analogy:** A colorful, approachable learning studio that feels like a creative playground.

## 2. Color

A primary palette of vibrant yellow and blue anchors the design, with the soft blue background providing a clean canvas for bold geometric shapes. High-chroma accents create a friendly and energetic atmosphere against a light, soft blue canvas.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F0F6FF` | main background |
| `--ink` | `#111118` | body text |
| `--accent` | `#2727E6` | single accent |
| `--line` | `rgba(17, 17, 24, 0.1)` | divider |

**Color principle:** A primary palette of vibrant yellow and blue anchors the design, with the soft blue background providing a clean canvas for bold geometric shapes.

The core principle is contrast: high-energy accents placed against a calm, neutral background to guide focus and create playful hierarchy.

## 3. Typography

The typographic system uses a clean, neutral grotesque for all text levels, ensuring clarity and modernity. Monospace accents introduce a technical secondary voice for code or metadata, while tight negative tracking on large display text adds confidence and punch.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 400 | -2px | Main hero headline |
| h1 | 48px | 1.1 | 400 | -1px | Section headings |
| body | 16px | 1.35 | 400 | -0.16px | General body text and navigation |

**Type rules:**
- Use a clean, neutral grotesque for all text levels
- Maintain tight negative tracking on large display text
- Use monospace for technical or secondary accents

## 4. Spacing

Spacing follows a consistent 4px grid, establishing a reliable rhythm that feels both structured and open. Generous padding and gaps are used deliberately to maintain an airy, uncluttered layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px grid system with generous padding and gaps for an open feel.

## 5. Surfaces

Surfaces are defined by depth and restraint. Subtle blue-tinted shadows provide lift for cards and interactive elements, while minimal solid borders in dark or blue tones mark interactive boundaries with precision.

- **Radius:** sm 8px · md 16px · lg 24px · pill 999px
- **Shadows:**
  - rgba(18, 18, 151, 0.133) 0px 3.2px 4px 0px
- **Borders:** Minimal, often using solid dark or blue lines for interactive elements.

## 6. Layout

The layout is a centered, vertical stack, prioritizing a clear reading path and large, airy sections. Overlapping geometric background elements inject playful energy into the otherwise orderly structural skeleton.

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

**Skeleton:** Centered, vertical stack with large, airy sections and overlapping geometric background elements.

## 7. Motion & Interaction

Motion is governed by a philosophy of clear, friendly feedback. Smooth cubic-bezier transitions handle state changes, while spring-like easing gives transform-based animations a responsive, approachable character.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.37, 0, 0.63, 1)`
- **Patterns:**
  - Smooth transitions for interactive states
  - Spring-like easing for transform-based animations

- **Hover:** Subtle color or opacity shifts on links and buttons.
- **Click:** Immediate visual feedback, likely a slight scale or color change.
- **Transition:** All interactive elements use a consistent 200ms cubic-bezier transition.
- **Keyboard:** Standard focus management with visible outlines.

## 8. Voice & Don'ts

The editorial voice is friendly, encouraging, and direct. Headlines are bold and action-oriented, using empowering language that avoids technical jargon or formal stiffness in favor of clear, practical communication.

- **Tone:** Friendly, encouraging, and direct.
- **Headline style:** Bold, action-oriented statements that empower the user.
- **CTA style:** Clear, direct calls to action like 'See our catalog' or 'Try our free course'.
- **Avoid:** Overly technical jargon / Formal or stiff language / Cluttered or dense text blocks

### Don'ts
- ❌ Don't use a dark background — the site clearly uses a light, soft blue (#F0F6FF) as its primary canvas.
- ❌ Don't use serif fonts — the entire site is built on clean, neutral grotesque sans-serif categories.
- ❌ Don't make buttons rectangular — the design consistently uses pill-shaped, rounded buttons.
- ❌ Don't use muted or pastel-only palettes — the site features vibrant, high-chroma accents like bright yellow and deep blue.
- ❌ Don't create dense, small-scale layouts — the design prioritizes large whitespace and generous padding.
- ❌ Don't use multiple accent colors in one component — each section typically highlights one primary accent color.

The system deliberately avoids dense text blocks, dark backgrounds, serif typography, and rectangular buttons—choices that define its character as much as what it includes.

## System Prompt (paste into AI tool)

```
Superhi is an online learning platform for creative tech skills. Its design DNA is characterized by a playful, friendly, and bold visual language. The core palette uses a soft blue background (#F0F6FF) with vibrant accents in deep blue (#2727E6) and bright yellow (#FFE600). Typography is a clean, neutral grotesque sans-serif with tight tracking on large display text. Key critical donts: never use dark mode backgrounds, avoid serif fonts entirely, and do not make buttons rectangular. The layout is airy, centered, and uses bold geometric shapes as playful background elements.
```