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

# Wizz · Design System

> Bright gradients, bold type, real connections

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

Wizz pairs a clean, white editorial layout with a soft pastel hero gradient, oversized black headlines, and vivid pink actions. A centered phone mockup and community photography bring warmth and product context to the otherwise restrained page.

## North star

Let oversized black typography and generous white space frame vivid pink actions, soft pastel atmosphere, and authentic community imagery.

## Overview

The page opens with a softly blended pastel field behind a centered, uppercase black headline, then transitions into a cool near-white canvas and a centered phone mockup. Black provides the strongest contrast for display type and navigation; vivid pink is reserved for compact calls to action and selected link-like emphasis. PolySans Median gives headlines a broad, confident shape, while PolySans Neutral keeps body copy direct and readable. Slim text appears in lightweight links. The layout alternates centered showcase moments with open two-column editorial sections, leaving generous white space between blocks. Community imagery is presented as a horizontal sequence of small portrait cards, while the hero phone acts as the principal product visual. Pale gray supports secondary text and a subtle lower-page fade rather than defining a separate brand surface. Keep the interface graphic and uncluttered, with rounded controls and restrained depth.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Wizz Ink | `#000000` | `--color-wizz-ink` | brand | Primary display and body text, navigation, and the dark inverse footer. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas and spacious content sections; also light text against the black footer. |
| Pop Pink | `#ff3d9e` | `--color-pop-pink` | accent | Download and section CTA fills, plus selected safety-resource link headings. |
| Frost Mist | `#f7fafc` | `--color-frost-mist` | neutral | Cool pale tone in the hero fade toward white; supports the airy showcase backdrop. |
| Soft Ash | `#dadada` | `--color-soft-ash` | semantic | Muted supporting copy, such as the secondary line beneath hero statistics. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Wizz Ink) · `--color-text` → `#000000` (Wizz Ink) · `--color-text-muted` → `#dadada` (Soft Ash) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-accent` → `#ff3d9e` (Pop Pink) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#dadada` | `#ffffff` | 1.4:1 | fail |
| `#dadada` | `#000000` | 15.02:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ff3d9e` | `#ffffff` | 3.27:1 | AA-large |
| `#ff3d9e` | `#000000` | 6.41:1 | AA |

### Gradients

- `linear-gradient(rgb(247, 250, 252) 88.0895%, rgb(255, 255, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PolySans Neutral | `--font-body` | webfont | 400 | Main paragraphs, captions, and general supporting copy. | Inter |
| PolySans Median | `--font-display` | webfont | 600, 400, 700 | Navigation and prominent display headings. | Montserrat |
| PolySans Slim | `--font-polysans-slim` | webfont | 300 | Lightweight text links, including legal and footer links. | Manrope |

- **PolySans Neutral:** Regular-weight sans with straightforward sentence case; carries the majority of page text.
- **PolySans Median:** Use semibold for navigation and regular display styling; headlines are uppercase and tightly stacked.
- **PolySans Slim:** Light weight, often capitalized link labels; keep the treatment airy rather than bold.

### Type scale — Custom (ratio ≈ 2.186, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 86px | 400 | 0.85 | 0 | uppercase | PolySans Median | Oversized uppercase hero headline, set in tight stacked lines. |
| h1 | 72px | 700 | 1 | 0 | uppercase | PolySans Bulky | Large uppercase section titles such as Our Community and Wizz Team. |
| body | 18px | 400 | 1.4 | 0 | — | PolySans Neutral | Mission, safety, community, and team explanatory copy. |
| caption | 14px | 400 | 1.2 | 0 | — | PolySans Neutral | Small supporting labels and secondary informational text. |
| nav | 13px | 600 | 2 | 0 | — | PolySans Median | Header navigation labels and compact menu links. |
| link | 14px | 300 | 1.1 | 0 | capitalize | PolySans Slim | Lightweight resource links and legal or footer navigation. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 5, 8, 10, 12, 16, 20, 24, 32, 48, 64, 80, 88 px.
- Section rhythm 88px · element gap 8px · card padding — · max content width 1064px.

Use a centered content frame capped at the measured 1064px maximum width, with full-bleed hero and community imagery where shown. The page alternates a centered hero and community gallery with open two-column mission, safety, and team content. Use the measured 88px section rhythm and comfortable density, with clear whitespace around headings and visuals. The hero centers its headline and app-store badges above a three-part proof row and phone mockup. Keep editorial content aligned to its column rather than centering every section.

## Shape & elevation

- Radius: button `12px` · media `24px` · nav `9999px` · xs `5px` · sm `12px` · md `24px` · lg `45px` · pill `9999px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.05) 0px 1px 10px 0px`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg` (button): `rgba(0, 0, 0, 0.3) 0px 1px 30px 0px`

Keep most content flat against white, using whitespace rather than card borders to separate sections. The phone mockup and portrait tiles provide the main depth through their imagery and soft shadows. Buttons are rounded and visually distinct, while the small dark news pill sits above the hero with a stronger shadow. Avoid adding heavy panel outlines.

## Imagery

Use authentic, youthful portrait photography in horizontal community strips, with cards appearing lightly tilted and softly faded at the edges. The hero centers a large phone mockup showing a real-feeling messaging interface; do not let its interface colors redefine the brand palette. Team imagery is a candid office scene in a rounded media frame. The hero backdrop is a soft pastel wash rather than a hard-edged illustration.

## Components

### Header navigation

Compact black navigation over the hero backdrop, with the Wizz mark at left, menu items at right, and a pink rounded Download action.

### Hero announcement

A short dark pill above the main headline, pairing a small NEWS label with a brief update and arrow affordance.

### Hero headline and store badges

Centered uppercase black display type sits above Apple App Store and Google Play badges; keep the phone as the visual anchor below.

### Proof row

Three horizontally arranged benefits use simple outlined icons in light circular backings, bold black labels, and muted gray supporting lines.

### Community portrait gallery

Full-width-feeling strips of compact portrait images frame a centered community heading and copy; soften the outer cards into white.

### Pink CTA

Compact rounded pink actions such as Our News or Learn more stand out from white sections without introducing large blocks of accent color.

### Footer

A full-width black inverse band with the white wordmark, compact download and social links, and a useful-pages column.

### Measured component styles

- **Primary button** (“Our News”): background #ff3d9e · text #0000ee · radius 12px · padding 10px 16px · 400 12px sans-serif
- **Secondary button** (“NEWS Wizz App is a proud member of the T”): background #292929 · text #0000ee · radius 999px · padding 4px 4px 4px 10px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.3) 0px 1px 30px 0px
- **Link** (“Apple iOS”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Navigation item** (“About Wizz News Safety Hub Our Community”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use #000000 for high-contrast text and navigation.
- Reserve #ff3d9e for compact, high-visibility actions.
- Keep white space generous between editorial sections.
- Use uppercase display headings with close line stacking.
- Center product-showcase content and its supporting proof row.
- Use authentic people photography for community moments.

## Don't

- Do not turn the page into a dense dashboard.
- Do not use pink as a dominant section background.
- Do not add heavy borders around every content group.
- Do not replace the soft hero wash with a flat dark backdrop.
- Do not let mockup colors dictate the brand palette.
- Do not center all editorial copy regardless of section layout.

## Agent prompt

Build a responsive social-app page in Wizz’s clean, youth-oriented style. Use Gallery White (#ffffff) as the main canvas, Wizz Ink (#000000) for navigation and strong typography, and Pop Pink (#ff3d9e) only for compact rounded actions. Give the hero a soft pastel-to-Frost Mist (#f7fafc) wash fading into white, with a centered uppercase display headline, store badges, a three-item proof row, and a prominent phone mockup. Set body copy in an Inter-like neutral sans and headings in a heavier geometric sans. Alternate centered visual showcases with spacious two-column editorial sections. Use real community portraits in lightly treated gallery strips and a candid team image. Apply Soft Ash (#dadada) sparingly to supporting text. Keep surfaces mostly flat, with subtle shadows for floating elements, rounded controls, and no heavy panel borders.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width pastel hero; centered headline and store badges above a three-part proof row and phone mockup. | announcement pill, app-store download links, three-point trust proof | pastel wash, uppercase display headline, rounded pink download action, centered phone mockup |
| 2 | feature-split | Open two-column editorial section with a section heading and mission statements. | mission overview, compact Our News action | white canvas, black heading, pink CTA, wide whitespace |
| 3 | gallery | Centered title and copy framed by horizontal portrait strips above and below. | community standards context, ambassador link | portrait-card rows, soft faded edges, centered uppercase title, pink pill action |
| 4 | feature-split | Two-column editorial content with explanatory copy at left and three resource summaries at right. | safety explanation, linked policies and resources | white background, black body copy, pink resource labels, compact Learn more action |
| 5 | team | Two-column team introduction with text and CTA beside a rounded office photograph. | team introduction, Wizz Team link | large uppercase heading, candid team photography, pink CTA, open white layout |

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