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

# SuperHi Plus · Design System

> Electric blue editorial for creator ownership

**Theme:** dark · **Industry:** education · **Source:** https://superhi.plus/ · **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._

SuperHi Plus pairs saturated blue fields with pale panels to present a creator-led funding and support program. Oversized typography and playful 3D motifs give the long-form page an expressive editorial feel.

## North star

Let saturated blue and pale split panels frame oversized, regular-weight typography, with playful 3D graphics used only as supporting accents.

## Overview

The page is built around a strict two-colour conversation: saturated Signal Blue (#0033e5) carries most of the canvas, while Frosted Blue (#f0f7ff) forms contrasting panels, text, and occasional full-height split-screen areas. Type stays in one family, Haas Grot Disp Web, with regular-weight forms and oversized display headlines that feel direct rather than ornamental. The opening places headline and introductory content in opposing halves, then the same blue field continues through explanatory sections, separated by thin pale rules. Long-form copy is broken into compact groups, numbered points, and bordered controls so the dense content remains scannable. Small 3D smiley and plus-sign illustrations add personality; they are accents, not a replacement for the typography-led layout. Rounded outlined links and buttons provide the main interactive affordances, while elevation remains restrained and the overall effect is spacious, graphic, and high contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Blue | `#0033e5` | `--color-signal-blue` | brand | Dominant page canvas and blue text on pale panels; also used for links and primary button fills. |
| Frosted Blue | `#f0f7ff` | `--color-frosted-blue` | surface | Contrasting panel backgrounds, reversed text, thin rules, and outlined controls across the page. |
| Periwinkle Accent | `#527ceb` | `--color-periwinkle-accent` | accent | Secondary button accent; use sparingly and do not promote it to a section background. |

### Semantic aliases

`--color-canvas` → `#0033e5` (Signal Blue) · `--color-surface` → `#f0f7ff` (Frosted Blue) · `--color-text` → `#f0f7ff` (Frosted Blue) · `--color-border` → `#f0f7ff` (Frosted Blue) · `--color-accent` → `#0033e5` (Signal Blue) · `--color-accent-2` → `#527ceb` (Periwinkle Accent) · `--color-on-accent` → `#f0f7ff` (Frosted Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f0f7ff` | `#0033e5` | 7.47:1 | AAA |
| `#0033e5` | `#f0f7ff` | 7.47:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Haas Grot Disp Web | `--font-body` | webfont | 400 | All page typography, from display headings and body copy to buttons and links. | Inter |

- **Haas Grot Disp Web:** Regular weight throughout; sentence case, clean sans-serif shapes, and no measured tracking adjustment.

### Type scale — Perfect Fourth (ratio ≈ 1.364, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 85px | 400 | 1.13 | 0 | — | Haas Grot Disp Web | Oversized opening statement and prominent editorial headlines. |
| h1 | 56px | 400 | 1.14 | 0 | — | Haas Grot Disp Web | Primary page and major section headings. |
| h2 | 42px | 400 | 1.14 | 0 | — | Haas Grot Disp Web | Section titles and large content headings. |
| h3 | 32px | 400 | 1.25 | 0 | — | Haas Grot Disp Web | Feature and subsection headings. |
| h4 | 24px | 400 | 1.33 | 0 | — | Haas Grot Disp Web | Compact card and FAQ headings. |
| body | 18px | 400 | 1.33 | 0 | — | Haas Grot Disp Web | Explanatory paragraphs and supporting descriptions. |
| caption | 16px | 400 | 1.5 | 0 | — | Haas Grot Disp Web | Small labels, metadata, and secondary notes. |
| button | 16px | 400 | normal | 0 | — | Haas Grot Disp Web | Button and pill-control labels. |
| link | 24px | 400 | 1.33 | 0 | — | Haas Grot Disp Web | Prominent text links and navigation-style link labels. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 16, 22, 24, 32, 40, 48, 96 px.
- Section rhythm 96px · element gap 24px · card padding — · max content width 1248px.

Use a spacious, responsive editorial grid with a measured page maximum width of 1248px. The opening uses a strong side-by-side split, with oversized headline content on a pale panel and supporting copy on blue. Later sections retain the blue canvas but vary between aligned text columns, centered content, and pale-panel splits. The measured section rhythm is generous; keep copy groups concise, align headings consistently, and use thin rules to break up long stretches without adding dense card grids.

## Shape & elevation

- Radius: button `16px` · input `2px` · card `24px` · link `9999px` · xs `16px` · pill `9999px`
- Shadow `inset` (link, button): `rgb(0, 51, 229) 0px 0px 0px 1px inset`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.1) 0px 4px 7px 0px`
- Shadow `inset-2` (link): `rgb(240, 247, 255) 0px 0px 0px 1px inset`
- Motion: standard transition `0.2s linear` on interactive elements.

The page is mostly flat: solid colour fields, pale panels, and fine contrasting borders do the structural work. Avoid card shadows and layered surfaces. The measured interface uses subtle inset outlines on selected controls and a restrained soft shadow on a minor element; keep illustration depth confined to the artwork.

## Imagery

There is no conventional photography in the measured sections. Use playful, glossy 3D smiley faces, plus signs, and simple money, hourglass, or pencil motifs as supporting illustrations. Keep them isolated against the blue and pale backgrounds; preserve the strong colour contrast and let typography and negative space remain dominant.

## Components

### Split opening

Pair a pale headline panel with a Signal Blue content panel; keep oversized type and introductory copy as the main focus.

### Outlined category controls

Use pale text and a thin pale outline on the blue canvas, with rounded corners and arrow-led labels where shown.

### Primary action

A compact Signal Blue fill with pale text and a pill-like silhouette; reserve this treatment for the main action.

### Numbered feature list

Present funding, support, and tools as separated numbered points with short headings and concise supporting copy.

### Editorial content card

Alternate flat pale cards with blue text and blue sections with pale text; avoid adding unmeasured elevation.

### FAQ rows

Keep questions readable as compact text rows, divided by thin pale rules and integrated into the blue page field.

### Measured component styles

- **Primary button** (“View detailed syllabus”): background #0033e5 · text #f0f7ff · radius 72px · padding 6.4px 24px 7.2px 24px · 400 16px Haas Grot Disp Web · shadow rgb(0, 51, 229) 0px 0px 0px 1px inset
- **Secondary button** (“Funding”): transparent background · text #f0f7ff · border 1px solid #f0f7ff · radius 16px · padding 8px 24px · 400 16px Haas Grot Disp Web
- **Link** (“Framework”): transparent background · text #0033e5 · radius 0px · padding 0px · 400 24px Haas Grot Disp Web
- **Input**: transparent background · text #0033e5 · radius 2.4px · padding 3.2px 24px · 400 24px Haas Grot Disp Web
- **Card** (“SuperHi Plus A new cooperative way to cr”): background #f0f7ff · text #0033e5 · radius 0px · padding 0px · 400 16px Haas Grot Disp Web
- **Navigation item** (“SuperHi Plus A new cooperative way to cr”): transparent background · text #0033e5 · radius 0px · padding 24px · 400 16px Haas Grot Disp Web

## Do

- Use #0033e5 as the dominant canvas colour.
- Set pale panels and reversed text in #f0f7ff.
- Keep typography regular-weight and consistently sans-serif.
- Use a split-panel composition to establish hierarchy.
- Break long content into short sections and numbered points.
- Reserve 3D motifs for small illustrative accents.

## Don't

- Do not introduce unmeasured colours as brand tokens.
- Do not add gradients or decorative background textures.
- Do not use heavy shadows to separate content.
- Do not make every section a rounded card.
- Do not let illustrations overpower the headline and copy.
- Do not use all-caps styling or heavy display weights.

## Agent prompt

Build a new responsive page in the SuperHi Plus visual style. Use Signal Blue (#0033e5) as the dominant canvas and Frosted Blue (#f0f7ff) for contrasting panels, reversed text, and fine outlines; apply Periwinkle Accent (#527ceb) sparingly to secondary actions. Set all text in Haas Grot Disp Web or a close Inter substitute, regular weight, with clear oversized headings and readable compact body copy. Start with a bold split-panel composition, then organize content into spacious editorial sections with thin rules and numbered feature groups. Use simple glossy 3D smiley or plus-sign artwork as occasional supporting imagery, not as page backgrounds. Keep surfaces flat, controls clearly outlined or pill-like, and hierarchy driven by colour, typography, and generous spacing rather than shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split-screen opening with a pale headline panel and blue supporting-content panel. | Immediate value proposition, Funding and program facts | Oversized headline, High-contrast panels, Small illustrative icons |
| 2 | comparison | Blue editorial section with grouped headings, concise copy, and numbered content. | Compare existing models, Explain ownership benefits | Text-led layout, Numbered points, Thin pale dividers |
| 3 | feature-grid | Long feature section with varied columns, centered headings, and pale-panel splits. | Explore program areas, Submit an inquiry | Category links, Outlined controls, Alternating blue and pale surfaces |
| 4 | faq | Closing editorial section with FAQ content, supporting links, and a pale illustrated footer area. | Answer common questions, Provide onward navigation | Rule-separated rows, Compact footer links, 3D brand artwork |

## Source CSS custom properties (selected)

```css
--colors-blue: #0033e5;
--colors-blueMid: #7694ff;
--colors-blueLight: #f0f7ff;
--fontSizes-14: 0.875rem;
--fontSizes-16: 1rem;
--fontSizes-18: 1.125rem;
--fontSizes-20: 1.25rem;
--fontSizes-24: 1.5rem;
--fontSizes-32: 2rem;
--fontSizes-42: 2.625rem;
--fontSizes-56: 3.5rem;
--fontSizes-85: 5.305rem;
--space-4: .25rem;
--space-8: .5rem;
--space-16: 1rem;
--space-24: 1.5rem;
--space-32: 2rem;
--space-40: 2.5rem;
--space-48: 3rem;
--space-56: 3.5rem;
--space-64: 4rem;
--space-80: 5rem;
--space-96: 6rem;
--space-112: 7rem;
--space-120: 7.5rem;
--colors-blueAlmost: hsla(240, 79%, 63%, 1);
--colors-pink: hsl(351, 100%, 86%);
--colors-white: hsl(0, 0%, 100%);
--colors-black: hsl(240, 17%, 8%);
--fonts-sans: "Haas Grot Disp Web", Helvetica Neue, Helvetica, Arial, system-ui, sans-serif;
--fontWeights-normal: 400;
--fontSizes-40: 2.5rem;
--fontSizes-48: 3rem;
--fontSizes-52: 3.25rem;
--fontSizes-80: 5rem;
--fontSizes-120: 7.5rem;
--html-font-size: calc((((100vw - 1440px) / 1440) + 1%) * 80);
```

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