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

# Wise Design · Design System

> A quiet canvas for a moving visual archive

**Theme:** light · **Industry:** design · **Source:** https://wise.design/ · **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._

Wise Design pairs a nearly all-white canvas with a horizontally moving strip of rounded visual fragments. Minimal navigation and restrained controls let the brand imagery carry the experience.

## North star

Keep the interface quiet and let a spacious, edge-to-edge ribbon of rounded brand imagery command attention.

## Overview

The first viewport is deliberately sparse: a white canvas surrounds a narrow horizontal filmstrip of circular and pill-shaped media. The measured black and green tones anchor the interface, while bright lime appears in the small brand mark, selected navigation, and imagery rather than as a broad background. Inter supplies the interface typography; the visible labels are compact and unobtrusive, leaving the gallery as the visual center. Navigation sits near the top edge, with a pause control opposite the small logo. A tiny Japanese credit and social links settle near the bottom, reinforcing the gallery-like composition. The media strip spans the viewport and mixes photographs, video stills, and brand artifacts, with varied crop and color but consistently rounded framing. Large expanses of untouched white space separate these elements, creating a calm, spacious rhythm. Build the page as a focused visual experience, not a conventional content-heavy landing page.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Interface text and small labels, including the lower-edge social and credit links. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas and dominant field of open space around the media strip. |
| Soft Fog | `#f0f0f0` | `--color-soft-fog` | surface | Light neutral surface tone measured in the page; use for subtle interface backing. |
| Media Mist | `#f5f5f5` | `--color-media-mist` | surface | Pale media-area surface tone; secondary to the white canvas. |
| Fresh Lime | `#9fe870` | `--color-fresh-lime` | accent | Bright Wise green, visible in brand details and selected navigation treatment. |
| Forest Ink | `#163300` | `--color-forest-ink` | brand | Deep green brand tone measured in text and other content; use as a strong green accent. |
| Moss Button | `#223d0d` | `--color-moss-button` | accent | Dark green fill measured on the Inspiration pill control. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f0f0f0` (Soft Fog) · `--color-surface-2` → `#f5f5f5` (Media Mist) · `--color-text` → `#000000` (Pure Ink) · `--color-accent` → `#9fe870` (Fresh Lime) · `--color-accent-2` → `#223d0d` (Moss Button) · `--color-on-accent` → `#000000` (Pure Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f0f0f0` | 18.43:1 | AAA |
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#9fe870` | `#ffffff` | 1.47:1 | fail |
| `#9fe870` | `#f0f0f0` | 1.29:1 | fail |
| `#9fe870` | `#f5f5f5` | 1.35:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter:Semi Bold | `--font-body` | webfont | 600 | Measured body text; supports clear, compact interface labeling. | Inter |
| Inter:Regular | `--font-inter-regular` | webfont | 400 | Small caption and footer-style text. | Inter |
| Inter | `--font-inter` | webfont | 400 | General interface text and navigation fallback. | Inter |

- **Inter:Semi Bold:** Measured weight 600; tracking is slightly tight. Keep labels crisp and avoid oversized display treatment.
- **Inter:Regular:** Measured weight 400 with normal tracking; use for secondary labels and compact captions.
- **Inter:** Sans-serif interface family; measured at regular weight. Keep casing and presentation restrained.

### Type scale — Major Third (ratio ≈ 1.25, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 16px | 600 | 1.5 | -0.011em | — | Inter:Semi Bold | Compact interface labels and primary navigation text. |
| caption | 12px | 400 | 1.5 | 0 | — | Inter:Regular | Small supporting labels, credits, and social links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 4, 5, 7, 16, 23, 32, 100, 150 px.
- Section rhythm 150px · element gap 3px · card padding — · max content width 1376px.

Use a wide, full-viewport composition with a 12-column measured grid and a spacious overall density. The content area can extend to the measured 1376px maximum width, but the gallery itself reads edge to edge. Keep navigation near the top, the media ribbon around the viewport's middle, and secondary credit and social links close to the bottom. Preserve broad unoccupied areas between these anchors; avoid stacking conventional content sections.

## Shape & elevation

- Radius: button `9999px` · card `9999px` · link `9999px` · xs `7px` · pill `9999px`
- Shadow `md` (card, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.04) 0px 10px 15px -3px, oklab(0 0 0 / 0.04) 0px `

The page is predominantly flat, with no prominent borders or visible card shadows. Rounded media frames provide the main sense of shape and separation. Keep controls clearly distinct through their green fills and pill forms rather than adding heavy outlines or layered panels.

## Imagery

The central feature is a horizontal ribbon of photographic and video-based brand material: events, products, signage, people, and visual experiments. Images use varied crops inside circular or elongated rounded windows, creating an irregular but continuous sequence. Keep source imagery colorful and authentic; these greens and other hues belong to the media, not a uniform page background.

## Components

### Brand mark

Small rounded-square identity mark near the upper-left corner; retain its colorful branded artwork without enlarging it into a hero.

### Mode switch

Two adjacent pill options, Inspiration and Direction; Inspiration is the selected dark green option against a pale green backing.

### Media ribbon

Viewport-spanning horizontal sequence of varied photographs and video stills, clipped into circular and elongated rounded frames.

### Playback control

Small pause control positioned near the upper-right corner to signal motion in the gallery.

### Bottom credits

Minimal design credit at the lower left and compact Instagram and Careers links at the lower right.

### Progress indicator

Thin, understated horizontal track near the bottom center with a darker segment indicating gallery position.

### Measured component styles

- **Primary button** (“Inspiration”): background #223d0d · text #000000 · radius 294.118px · padding 5px 23px · 400 16px ui-sans-serif
- **Link** (“Instagram”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px Inter:Regular
- **Card**: transparent background · text #000000 · radius 64px · padding 0px · 400 16px ui-sans-serif · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0

## Do

- Keep the canvas white and visually quiet.
- Place the media ribbon across the viewport.
- Use rounded crops for gallery imagery.
- Keep navigation small and pill-shaped.
- Use green selectively for active controls and brand details.
- Preserve large areas of open space.

## Don't

- Do not fill the canvas with a green background.
- Do not add dense explanatory copy above the gallery.
- Do not impose a rigid rectangular card grid.
- Do not make navigation visually dominant.
- Do not treat colors inside photos as interface tokens.
- Do not add heavy borders or dramatic shadows.

## Agent prompt

Build a new page in the Wise Design visual style as a quiet, full-viewport gallery experience. Use Gallery White (#ffffff) as the dominant canvas, Pure Ink (#000000) for compact interface labels, and reserve Fresh Lime (#9fe870), Forest Ink (#163300), and Moss Button (#223d0d) for brand details and selected controls. Set interface typography in Inter, keeping labels restrained and clear. Place a small brand mark and pill-style mode switch near the top, with a pause control opposite. Let a horizontal ribbon of authentic photographs or video stills span the page, clipped into varied circles and elongated rounded frames. Preserve generous open space around it, with a subtle progress marker and tiny credits or links near the bottom. Avoid dense copy, heavy borders, and ornamental shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Full-screen white canvas with top controls, a viewport-spanning horizontal media ribbon, and small footer details. | Gallery mode switch, Pause playback, Position indicator | Pill navigation, Rounded media crops, Minimal footer links, Wide negative space |

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