---
version: alpha
name: SuperHi
description: Playful creative-education energy — a punchy primary palette (electric blue, hot pink, sunshine yellow) color-blocked against a near-black ink, oversized rounded geometric sans headlines, fully-rounded pill buttons, and chunky soft-cornered cards that feel hand-built and friendly rather than corporate.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f7f6f3"
  surface-dark: "#0e0e0e"
  ink: "#0e0e0e"
  ink-secondary: "#54514d"
  ink-muted: "#8a8780"

  # Brand accents
  primary: "#1f2cf0"        # SuperHi electric blue
  pink: "#ff4d8d"           # hot pink
  yellow: "#ffd02e"         # sunshine yellow
  green: "#1fc977"          # mint green
  purple: "#7c4dff"         # accent purple

  # Tints (flattened over white canvas)
  primary-soft: "#e8eafe"   # blue wash
  pink-soft: "#ffe6ef"
  yellow-soft: "#fff6d4"
  green-soft: "#e2f8ee"

  # Neutral scale
  gray-900: "#0e0e0e"
  gray-600: "#54514d"
  gray-400: "#8a8780"
  gray-200: "#e4e2dd"
  gray-100: "#efedea"
  gray-50: "#f7f6f3"

  # On-color
  on-primary: "#ffffff"
  on-pink: "#ffffff"
  on-yellow: "#0e0e0e"
  on-ink: "#ffffff"

  # Functional
  border: "#e4e2dd"
  link: "#1f2cf0"
  focus: "#1f2cf0"

typography:
  display-hero:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -0.8px
  sub-heading:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.4px
  card-title:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0px
  caption:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.2px
  eyebrow:
    fontFamily: "Poppins, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 1px
  mono-label:
    fontFamily: "IBM Plex Mono, ui-monospace, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  sm: 8px
  md: 14px
  lg: 24px
  xl: 36px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-accent:
    backgroundColor: "{colors.pink}"
    textColor: "{colors.on-pink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-yellow:
    backgroundColor: "{colors.yellow}"
    textColor: "{colors.on-yellow}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.ink}"
  badge:
    backgroundColor: "{colors.yellow}"
    textColor: "{colors.on-yellow}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 6px 12px
  badge-blue:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-color:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: 28px
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.focus}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 18px 24px
    borderColor: "{colors.border}"
  eyebrow-label:
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
---

# SuperHi Design System

## Overview

SuperHi's identity is creative-education made loud and friendly. As an online school that teaches design, code, and creative careers, its visual language is the opposite of corporate restraint — it leans into a bright, color-blocked palette where electric blue (`{colors.primary}`), hot pink (`{colors.pink}`) and sunshine yellow (`{colors.yellow}`) collide against a near-black ink (`{colors.ink}`) on a clean white-and-warm-paper canvas. The energy says "anyone can make things on the internet," and the design backs that promise with playfulness rather than polish-for-its-own-sake.

Typography carries the personality. Headlines use an oversized, rounded geometric sans (Poppins as the closest open foundation) at heavy weights with tight negative tracking, so titles read big, round, and approachable — confident without being cold. Body copy stays in the same family at relaxed line-heights, keeping the system warm and single-voiced. A monospace label face appears for code-adjacent tags and metadata, a quiet nod to the "learn to code" half of the brand.

The chrome is built from soft geometry. Buttons are fully-rounded pills, cards have generous large-radius corners (`{rounded.lg}`), and whole sections get color-blocked into saturated panels (`{components.card-color}`) where the brand colors become the background, not just the accent. Borders are thin and warm-gray; the structure leans on color contrast and rounded shapes rather than shadows. The result feels hand-built and human — closer to a friendly workbook than a SaaS dashboard.

**Key Characteristics:**
- Punchy primary palette — electric blue, hot pink, sunshine yellow — used as full color-blocks, not just accents
- Near-black ink (`{colors.ink}`) over white and warm-paper (`{colors.surface-soft}`) canvases
- Oversized rounded geometric sans headlines (Poppins) at heavy weights with tight negative tracking
- Fully-rounded pill buttons; default CTA is ink-black, hover flips to brand blue
- Chunky large-radius cards (`{rounded.lg}`) and saturated color-block panels
- Monospace labels for code-adjacent tags, bridging design + code
- Thin warm-gray borders; structure from color and shape, not shadow
- Yellow pill badges and uppercase tracked eyebrows for section labeling

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, default pill button fill. A near-black, not pure black.
- **White** (`{colors.background}`): Page background, card surface, text on color.
- **Warm Paper** (`{colors.surface-soft}`): Alternating section tint, soft cards.

### Brand Accents
- **Electric Blue** (`{colors.primary}`): The signature SuperHi blue — links, hover CTA, color-block panels.
- **Hot Pink** (`{colors.pink}`): Accent buttons, highlights, playful color-blocks.
- **Sunshine Yellow** (`{colors.yellow}`): Badges, highlights, energetic panels (always with dark ink on top).
- **Mint Green** (`{colors.green}`): Secondary accent for variety in color-blocked grids.
- **Purple** (`{colors.purple}`): Occasional fourth accent.

### Tints
- **Blue Wash** (`{colors.primary-soft}`): Soft badge backgrounds, subtle panels.
- **Pink Soft** (`{colors.pink-soft}`), **Yellow Soft** (`{colors.yellow-soft}`), **Green Soft** (`{colors.green-soft}`): Gentle tinted surfaces.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Headings, body ink.
- **Gray 600** (`{colors.ink-secondary}`): Secondary text, descriptions.
- **Gray 400** (`{colors.ink-muted}`): Muted captions, placeholders.
- **Gray 200 / 100 / 50** (`{colors.gray-200}`, `{colors.gray-100}`, `{colors.gray-50}`): Borders, dividers, subtle surfaces.

### Functional
- **Border** (`{colors.border}`): Warm-gray hairline borders on cards and inputs.
- **Link** (`{colors.link}`): Electric blue, matches primary.
- **Focus** (`{colors.focus}`): Electric blue focus ring.

## Typography

### Font Family
- **Primary**: `Poppins`, with fallbacks: `Arial, sans-serif` — a rounded geometric sans standing in for SuperHi's friendly heavy-weight display face.
- **Monospace**: `IBM Plex Mono`, with fallbacks: `ui-monospace, Menlo, monospace` — code-adjacent tags and metadata.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 64px hero — big, round, friendly impact |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, feature intros |
| `card-title` | Course / feature card titles |
| `body-large` | Lead paragraphs, hero subtitles |
| `body` | Standard reading text |
| `body-medium` | Nav, emphasized UI text |
| `button-ui` | Pill buttons |
| `caption` | Metadata, small labels |
| `eyebrow` | Uppercase tracked section labels |
| `mono-label` | Code-adjacent tags |

### Principles
- **Rounded and heavy**: Display headlines run at 600–700 weight with tight negative tracking — big, geometric, approachable.
- **One voice**: Headlines and body share the same family, keeping the system warm and consistent.
- **Mono as a wink**: The monospace face appears only on code-adjacent labels, signaling the "learn to code" side of the brand.
- **Tracked eyebrows**: Uppercase, letter-spaced eyebrow labels (`{typography.eyebrow}`) in brand blue set up sections.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.2xl}`–`{spacing.4xl}`) for generous section breathing room.

### Grid & Container
- Max content width: approximately 1200px
- Hero: large single-column headline with a color-blocked supporting graphic
- Course/feature sections: 2–3 column card grids
- Color-block panels span full width as saturated section breaks

### Whitespace Philosophy
- **Generous and playful**: Big vertical gaps between sections (`{spacing.3xl}`–`{spacing.4xl}`) let the bright color-blocks breathe.
- **Alternating surfaces**: White sections alternate with warm-paper (`{colors.surface-soft}`) and saturated color panels for rhythm.
- **Color does the dividing**: Section separation comes from color-block contrast and spacing, not heavy rules.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, inputs |
| Color Block (Level 2) | Saturated brand fill, no border | Section panels, feature cards |
| Focus | `2px solid {colors.focus}` ring | Keyboard focus |

**Depth Philosophy**: SuperHi avoids shadow-heavy depth. Hierarchy comes from color saturation and rounded shape — a hot-pink card sits "above" the page because of contrast, not elevation. Borders stay thin and warm; the system feels printed and tactile rather than glassy.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small inputs, tags |
| `md` | 14px | Inputs, small containers |
| `lg` | 24px | Cards, color-block panels |
| `xl` | 36px | Large feature containers |
| `pill` | 9999px | Buttons, badges |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card-color}`).

### Buttons
- **`button-primary`** — Ink-black pill, white text. Hover flips to electric blue.
- **`button-accent`** — Hot pink pill for playful secondary CTAs.
- **`button-yellow`** — Sunshine yellow pill with dark ink text.
- **`button-secondary`** — White pill with ink-black outline.

### Badges
- **`badge`** — Yellow pill, dark ink, uppercase tracked text.
- **`badge-blue`** — Soft blue wash background, blue text.

### Cards
- **`card`** — White, large radius, warm hairline border.
- **`card-color`** — Saturated brand-color block (blue/pink/yellow) with on-color text. The signature SuperHi card.
- **`card-soft`** — Warm-paper surface for quieter content.

### Inputs
- **`input`** — White, warm-gray border, 14px radius. Focus uses electric blue.

### Navigation
- **`nav-bar`** — White header, ink text, Poppins 16px weight 500 links, warm hairline bottom border.

### Distinctive Components
- **Color-Block Panels**: Full-width saturated sections where a brand color becomes the background and content sits in on-color text.
- **Eyebrow Labels**: Uppercase tracked blue labels introducing each section.
- **Course Cards**: Rounded `{rounded.lg}` cards mixing white and color-block variants in a grid.

## Do's and Don'ts

### Do
- Use brand colors as full color-blocks, not just thin accents
- Keep buttons and badges fully rounded (pill)
- Pair yellow backgrounds with dark ink text, never white
- Use Poppins heavy weights with tight negative tracking on headlines
- Let color contrast and rounded shape create hierarchy
- Use warm-paper (`{colors.surface-soft}`) to break up white sections
- Reserve the monospace face for code-adjacent labels only

### Don't
- Don't rely on heavy drop shadows for depth — use color
- Don't put white text on yellow (`{colors.yellow}`) — contrast fails
- Don't use sharp corners on buttons or cards — the brand is rounded
- Don't mute the palette into pastels for primary CTAs — keep accents saturated
- Don't mix in a second display family — Poppins carries everything
- Don't set `primary` as a page background behind body text without switching to on-color text

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, stacked color-blocks |
| Tablet | 600–1024px | 2-column card grids |
| Desktop | 1024–1280px | Full 2–3 column layout, max content width |
| Large | >1280px | Centered with generous margins |

### Touch Targets
- Pill buttons use 14px vertical padding for comfortable taps
- Nav links spaced generously
- Badges have 6px vertical padding

### Collapsing Strategy
- Hero: 64px headline scales down, keeps negative tracking proportionally
- Navigation: horizontal links → hamburger menu
- Card grids: 3-column → 2-column → single column
- Color-block panels: maintain full-width saturated treatment, stack vertically
- Section spacing: 96px+ → ~56px on mobile

### Image Behavior
- Course thumbnails keep large-radius rounded corners at all sizes
- Color-block graphics stay edge-to-edge full width
- Illustrations scale within their rounded containers

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Ink `{colors.ink}` (hover Electric Blue `{colors.primary}`)
- Background: White `{colors.background}`, warm paper `{colors.surface-soft}`
- Heading text: Ink `{colors.ink}`
- Body text: Gray 600 `{colors.ink-secondary}`
- Accent blocks: Electric Blue `{colors.primary}`, Hot Pink `{colors.pink}`, Yellow `{colors.yellow}`
- Border: `1px solid {colors.border}`
- Focus ring: Electric Blue `{colors.focus}`

### Example Component Prompts
- "Create a hero on white. Headline at 64px Poppins weight 700, line-height 1.05, letter-spacing -1.5px, color `{colors.ink}`. Subtitle at 20px Poppins weight 400, `{colors.ink-secondary}`. Ink-black pill CTA (`{rounded.pill}`, 14px 28px) that turns electric blue (`{colors.primary}`) on hover, plus a hot-pink pill secondary."
- "Design a color-block card: electric-blue (`{colors.primary}`) background, white text, 24px radius, 28px padding. Title at 22px Poppins weight 600."
- "Build a yellow pill badge: `{colors.yellow}` background, `{colors.on-yellow}` text, 9999px radius, 6px 12px padding, 13px Poppins weight 700 uppercase tracked."
- "Create navigation: white header, ink text, Poppins 16px weight 500, warm hairline bottom border `1px solid {colors.border}`, ink-black pill CTA right-aligned."

### Iteration Guide
1. Lead with color-blocks — brand colors are backgrounds, not just accents
2. Everything rounds: pills for buttons/badges, 24px for cards
3. Yellow always pairs with dark ink; blue and pink pair with white
4. One family (Poppins) at heavy weights for display, relaxed for body
5. Depth comes from color contrast and rounded shape, never heavy shadow
6. Monospace labels are a wink at the "learn to code" half of the brand

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by SuperHi. Brand names and trademarks belong to their respective owners.