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

# SuperHi Basic Income · Design System

> Electric blue, generous whitespace, and a clear public-interest voice.

**Theme:** light · **Industry:** nonprofit · **Source:** https://www.superhibasicincome.com/ · **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._

A long-form information page for a creative-income experiment, framed by a vivid blue sidebar and a white editorial column. Strong typography, fine rules, and compact text make a dense project story feel structured and approachable.

## North star

Use the blue sidebar as a bold frame and keep the white content column legible, editorial, and carefully divided by fine rules.

## Overview

The visual identity is built around a strict two-colour palette: saturated blue (#2727e6) carries nearly all text and link emphasis, while white (#ffffff) forms the main reading canvas. A full-height blue sidebar anchors the composition with condensed display lettering and a dotted globe illustration; the broad white column holds the page’s explanatory content. Basis provides the practical reading voice, from large centered opening statements to small, closely organized paragraphs, while DDC adds a distinct uppercase display accent. The page uses a repeated editorial rhythm: short section headings sit opposite longer text blocks, separated by subtle horizontal rules. Lists, numbered steps, outlined date badges, and pill-shaped outlined controls make information scannable without adding cards or shadows. Generous open space around the opening statement contrasts with the denser FAQ and process sections, keeping the page distinctive while supporting a long read.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Blue | `#2727e6` | `--color-signal-blue` | brand | Sidebar field, headings, body copy, links, badges, and outlined controls; the page’s defining color. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main content canvas and reversed lettering on the blue sidebar. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#2727e6` (Signal Blue) · `--color-border` → `#2727e6` (Signal Blue) · `--color-accent` → `#2727e6` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2727e6` | `#ffffff` | 8.34:1 | AAA |
| `#2727e6` | `#ffffff` | 8.34:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Basis | `--font-body` | webfont | 400, 700, 500 | Primary reading type for headings, paragraphs, links, labels, and informational lists. | Inter |
| DDC | `--font-ddc` | webfont | 400 | Condensed display lettering for uppercase section markers and the primary circular CTA. | Oswald |

- **Basis:** Use mostly regular and medium weights; bold highlights links and compact uppercase labels.
- **DDC:** Keep uppercase treatment and a narrow display character; reserve for short labels and button text.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 500 | 1.17 | 0 | — | Basis | Opening statement and primary page headline |
| h2 | 32px | 500 | 1.25 | 0 | — | Basis | Major content section headings |
| h3 | 24px | 400 | 1 | 0 | uppercase | DDC | Condensed uppercase display labels |
| h4 | 21px | 500 | 1.33 | 0 | — | Basis | Subsection headings and emphasized statements |
| body | 16px | 400 | 1.5 | 0 | — | Basis | Explanatory paragraphs and supporting copy |
| caption | 14px | 700 | 1.14 | 0 | uppercase | Basis | Compact uppercase labels and dates |
| button | 24px | 400 | 1 | 0 | uppercase | DDC | Uppercase display text inside CTA controls |
| link | 16px | 700 | 1.5 | 0 | — | Basis | Bold inline references and social links |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 16, 24, 32 px.
- Section rhythm — · element gap 24px · card padding — · max content width —.

Build a tall, two-column editorial composition: a persistent blue sidebar beside a white reading column. The sidebar carries identity and status markers; the main column pairs short left-aligned section labels with longer right-hand copy. The opening content is centered and more spacious, while later sections become dense, structured reading blocks. Separate sections with fine horizontal rules. Preserve generous whitespace around the introduction and tighter, consistent spacing within lists and FAQs.

## Shape & elevation

- Radius: button `9999px` · badge `9999px` · link `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The composition is predominantly flat, with no measured shadows or gradients. Use thin blue or subtle gray rules to separate editorial sections, and outlined controls rather than raised cards. The full-height blue sidebar supplies the principal visual layering through contrast with the white content area.

## Imagery

The page is illustration-led rather than photographic. A large dotted globe occupies the blue sidebar, with small point-like marks that read as elements of the graphic, not extra brand colors. Small reward illustrations accompany the opening benefits. Keep imagery flat, sparse, and subordinate to the information; avoid photorealistic assets and decorative image-heavy sections.

## Components

### Blue identity sidebar

A full-height #2727e6 panel with condensed white identity labels, a dotted globe illustration, and application-status lettering.

### Opening statement

Centered blue headline and short supporting line on white, followed by three benefit illustrations and a concise status note.

### Editorial section row

Short section heading sits opposite longer text, with sections divided by fine horizontal rules.

### Numbered information list

Compact numbered points organize benefits, process details, and project principles; bold blue text highlights each lead.

### Date badge

Small uppercase date labels use bold Basis text within a thin blue pill outline.

### Outlined CTA

A large rounded outline control uses uppercase DDC lettering, blue text, and no shadow or filled background.

### FAQ links

A dense vertical list of short blue questions uses small triangular markers and restrained spacing.

### Measured component styles

- **Primary button** (“CONNECT WALLET”): transparent background · text #2727e6 · border 1px solid #2727e6 · radius 50% · padding 32px · 400 24px DDC · uppercase
- **Link** (“Twitter”): transparent background · text #2727e6 · radius 0px · padding 0px · 700 16px Basis
- **Card** (“SUPERHI BASIC INCOME APPLICATIONS CLOSED”): background #2727e6 · text #ffffff · radius 0px · padding 0px · 400 16px Basis
- **Badge** (“JAN 13”): transparent background · text #2727e6 · border 1px solid #2727e6 · radius 50px · padding 0px 4px · 700 14px Basis · uppercase

## Do

- Anchor the composition with a saturated blue sidebar.
- Use white as the main reading surface.
- Keep section labels distinct from longer copy blocks.
- Separate major content groups with fine rules.
- Use bold blue text to make links easy to identify.
- Reserve condensed uppercase type for short display moments.

## Don't

- Do not introduce unmeasured brand colors.
- Do not add shadows or gradient effects.
- Do not turn every text group into a card.
- Do not use photography to compete with the editorial content.
- Do not make the long-form column visually unstructured.
- Do not use display lettering for paragraphs.

## Agent prompt

Create a new long-form project page in the SuperHi Basic Income visual style. Use Signal Blue (#2727e6) for the identity sidebar, text, links, and outlined controls; use Gallery White (#ffffff) as the primary reading canvas. Build a strong split composition with a persistent blue identity rail and an editorial content column. Let Basis-style sans serif handle headlines, paragraphs, and links; use a narrow uppercase display face only for short labels and CTA text. Organize content as paired section headings and copy blocks, divided by fine rules. Use compact numbered lists, simple badges, and flat outlined buttons. Keep illustration sparse and graphic, with no photo-led hero, shadows, gradients, or invented palette colors. Balance a spacious introduction with tighter long-form sections.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Full-height blue sidebar beside a white long-form column; centered introduction followed by paired editorial section rows. | Persistent project identity, Scannable numbered lists, Inline reference links, Application-status reminders | Blue-white split layout, Fine section dividers, Outlined date badges, Rounded outline CTA, Dotted globe illustration |

## Source CSS custom properties (selected)

```css
--base-color: #ffffff;
--accent-color: #2727e6;
--hover-color: #9de6fa;
--button-text-color: white;
--form-bg-color: white;
--padding-gap: 16px;
```

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