---
name: Superhi
description: "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."
version: alpha

colors:
  background: "#F0F6FF"
  primary: "#111118"
  tertiary: "#2727E6"
  line: "rgba(17, 17, 24, 0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2px"
  h1:
    fontFamily: grotesque-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.35
    fontWeight: 400
    letterSpacing: "-0.16px"

rounded:
  sm: 8px
  md: 16px
  lg: 24px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

An online learning platform for creative tech skills, using a bold, colorful, and friendly visual language.

*A colorful, approachable learning studio that feels like a creative playground.*

## Colors

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

- **Background (`#F0F6FF`)** — uses `bg` token
- **Primary text (`#111118`)** — uses `ink` token
- **Accent (`#2727E6`)** — uses `accent` token
- **Borders (`rgba(17, 17, 24, 0.1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* A consistent 4px grid system with generous padding and gaps for an open feel.

## Elevation & Depth

- rgba(18, 18, 151, 0.133) 0px 3.2px 4px 0px
- Borders: Minimal, often using solid dark or blue lines for interactive elements.

## Shapes

- `sm`: 8px
- `md`: 16px
- `lg`: 24px
- `pill`: 999px

## Components

- **button:** Rounded pill-shaped buttons with solid fills (blue or black) and white text.
- **card:** White cards with rounded corners (16-24px) and subtle blue shadows, used for testimonials.
- **hero:** A large, vertically stacked section with centered text, a mascot icon, and bold geometric background shapes.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```