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

# Wiza · Design System

> Soft gradients, sharp prospecting data

**Theme:** light · **Industry:** saas · **Source:** https://wiza.co/ · **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._

Wiza’s homepage pairs a light, spacious SaaS layout with lavender-pink section washes and deep violet typography. Product screenshots, trust signals, customer proof, and repeated calls to action make the prospecting platform tangible and easy to evaluate.

## North star

Keep the page airy and product-led: dark-violet clarity on white, with pastel gradients reserved for large feature and conversion panels.

## Overview

The visual system starts with a white canvas and uses broad, softly rounded pastel panels to distinguish selected feature, testimonial, and signup sections. The primary text colour is a very dark violet, with muted purple-grey for supporting copy and pale borders around controls and cards. A lavender-to-pink gradient is a recurring backdrop, while product UI contributes sharper violet and teal details. Britti Sans gives headings a rounded, contemporary display character; Inter handles navigation, body copy, labels, and interface-like details. The layout alternates centered headline-led panels with large product demonstrations and quieter informational blocks. Generous whitespace keeps the long page from feeling dense, while restrained shadows lift screenshots, cards, and compact navigation. Overall, the page balances approachable pastel atmosphere with credible, data-rich B2B software evidence.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas White | `#ffffff` | `--color-canvas-white` | neutral | Main page canvas and the clean backing for navigation, content, and product screenshots. |
| Deep Wisteria | `#26114a` | `--color-deep-wisteria` | brand | Primary headings, body text, navigation, and prominent testimonial copy. |
| Muted Aubergine | `#312749` | `--color-muted-aubergine` | brand | Secondary text, badges, email contact control, and understated interface accents. |
| Quiet Border | `#ededf0` | `--color-quiet-border` | neutral | Fine dividers and subtle outlines on cards, controls, and footer elements. |
| Slate Violet | `#615e6e` | `--color-slate-violet` | neutral | Muted explanatory text and secondary footer copy. |
| Cloud Surface | `#f6f7fa` | `--color-cloud-surface` | surface | Pale cards, badge surfaces, and soft feature blocks. |
| Dusty Lilac | `#9491a1` | `--color-dusty-lilac` | neutral | Low-emphasis labels and muted badge text, including illustrative UI. |
| Cool Stone | `#c1c7cf` | `--color-cool-stone` | surface | Secondary card fill, chiefly in product and interface mockups. |
| Pale Sky | `#ebf2fc` | `--color-pale-sky` | surface | Cool blue tint within broad pastel section backgrounds and gradients. |
| Blush Haze | `#f7ebf5` | `--color-blush-haze` | surface | Soft pink-lilac section wash and gradient transition. |
| Lilac Mist | `#e9e7ed` | `--color-lilac-mist` | surface | Subtle navigation and media backing surfaces. |
| Midnight Blue | `#11244a` | `--color-midnight-blue` | semantic | Occasional dark-blue text detail, not a dominant page brand colour. |
| Vivid Violet | `#3e0079` | `--color-vivid-violet` | accent | Focused accent text and small product-interface highlights. |
| Lavender Wash | `#e8e2fe` | `--color-lavender-wash` | surface | Light violet gradient segment in feature and conversion panels. |
| Petal Pink | `#fce2f0` | `--color-petal-pink` | surface | Pink gradient segment in pastel section backgrounds. |
| Rose Tint | `#fce6ea` | `--color-rose-tint` | surface | Warm terminal tint in the lavender-pink section gradient. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#f6f7fa` (Cloud Surface) · `--color-surface-2` → `#c1c7cf` (Cool Stone) · `--color-surface-3` → `#e9e7ed` (Lilac Mist) · `--color-text` → `#26114a` (Deep Wisteria) · `--color-text-muted` → `#615e6e` (Slate Violet) · `--color-text-subtle` → `#312749` (Muted Aubergine) · `--color-border` → `#ededf0` (Quiet Border) · `--color-accent` → `#312749` (Muted Aubergine) · `--color-accent-2` → `#3e0079` (Vivid Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#26114a` | `#ffffff` | 16.65:1 | AAA |
| `#26114a` | `#f6f7fa` | 15.54:1 | AAA |
| `#26114a` | `#c1c7cf` | 9.78:1 | AAA |
| `#26114a` | `#e9e7ed` | 13.57:1 | AAA |
| `#615e6e` | `#ffffff` | 6.3:1 | AA |
| `#615e6e` | `#f6f7fa` | 5.88:1 | AA |
| `#615e6e` | `#c1c7cf` | 3.7:1 | AA-large |
| `#615e6e` | `#e9e7ed` | 5.13:1 | AA |
| `#312749` | `#ffffff` | 13.84:1 | AAA |
| `#312749` | `#f6f7fa` | 12.92:1 | AAA |

### Gradients

- `linear-gradient(165deg, rgb(231, 240, 253), rgb(232, 226, 254) 25%, rgb(252, 226, 240) 73%, rgb(252, 230, 234))`
- `radial-gradient(116.3% 50% at 0% 50%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0))`
- `linear-gradient(rgb(235, 242, 252), rgb(238, 251, 249) 59%)`
- `radial-gradient(50% 74.51% at 50% 100%, rgba(255, 255, 255, 0.5) 24.09%, rgba(255, 255, 255, 0.16)), linear-gradient(rgb(239, 239, 255) 0%, rgba(233, 226, 255, 0.8) 15.89%, rgba(255, 225, 241, 0.8) 62.5%, rgb(255, 246, 2`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 700 | Body copy, navigation, captions, badges, and interface-like labels. | Inter |
| Britti Sans | `--font-display` | webfont | 500 | Display and heading typography across hero, feature, testimonial, and CTA sections. | Manrope |

- **Inter:** Neutral sans-serif; regular body and navigation, with medium and bold available for hierarchy.
- **Britti Sans:** Medium-weight, rounded display voice; headings stay in sentence case with compact line spacing.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1 | 0 | — | Britti Sans | Large campaign headlines and prominent section statements. |
| h1 | 56px | 500 | 1 | 0 | — | Britti Sans | Hero headline introducing verified contact data. |
| h2 | 40px | 500 | 1 | 0 | — | Britti Sans | Main feature, social-proof, and conversion section headings. |
| h3 | 32px | 500 | 1 | 0 | — | Britti Sans | Subsection titles and secondary feature headlines. |
| h4 | 24px | 500 | 1 | 0 | — | Britti Sans | Compact card or feature titles. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Paragraphs, descriptions, and supporting product explanations. |
| caption | 14px | 400 | 1.3 | 0 | — | Inter | Small labels, badges, ratings, and supporting metadata. |
| nav | 14px | 400 | 1.5 | 0 | — | Inter | Primary navigation links and menu labels. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48 px.
- Section rhythm 48px · element gap 4px · card padding 44px · max content width 1200px.

The page is a long, single-column narrative on a white canvas, organized into broad centered blocks and occasional two-column feature presentations. Content sits within a measured 1200px maximum page width, with comfortable density and a measured 48px section rhythm. Large rounded pastel panels create visual chapters among white intervals. Headings and calls to action are commonly centered, while product screenshots and feature details can introduce more structured alignment. The sequence moves from hero and product proof through capabilities, testimonials, signup, and a multi-column footer.

## Shape & elevation

- Radius: button `50%` · input `10px` · card `24px` · media `50%` · badge `6px` · nav `8px` · link `8px` · xs `6px` · sm `8px` · md `10px` · lg `12px` · xl `14px` · 2xl `16px` · pill `9999px`
- Shadow `sm` (other): `rgba(18, 55, 105, 0.08) 0px 2px 4px 0px, rgba(18, 55, 105, 0.04) 0px 1px 1px 0px, rgba(18, 55, 105, 0.08) 0px 0px 0px 1px`
- Shadow `lg` (card): `rgba(14, 59, 101, 0.06) 0px 32px 24px -12px, rgba(14, 59, 101, 0.01) 0px 11px 4px 0px, rgba(14, 59, 101, 0.02) 0px 6px 4px 0px, rgba(14, 59, 101, 0.03) 0px 3px 3px 0px, rgba(14, 59, 101, 0.04) 0px 1px`
- Shadow `md` (card): `rgba(134, 98, 45, 0.01) 0px 11px 4px 0px, rgba(134, 98, 45, 0.02) 0px 6px 4px 0px, rgba(134, 98, 45, 0.03) 0px 3px 3px 0px`
- Shadow `inset` (other): `rgba(114, 49, 255, 0.32) 0px -6px 20px 0px inset, rgba(47, 1, 151, 0.12) 0px 11px 12px 0px, rgba(47, 1, 151, 0.12) 0px 3px 3px 0px, rgba(47, 1, 151, 0.12) 0px 1px 1px 0px, rgba(47, 1, 151, 0.08) 0px 0`
- Shadow `sm-2` (button): `rgba(18, 55, 105, 0.08) 0px 2px 4px 0px, rgba(18, 55, 105, 0.04) 0px 1px 1px 0px`
- Shadow `md-2` (nav, other): `rgba(47, 1, 151, 0.01) 0px 11px 4px 0px, rgba(47, 1, 151, 0.04) 0px 6px 4px 0px, rgba(47, 1, 151, 0.06) 0px 3px 3px 0px, rgba(47, 1, 151, 0.08) 0px 1px 1px 0px, rgba(47, 1, 151, 0.08) 0px 0px 0px 1px`
- Motion: standard transition `0.45s cubic-bezier(0.6, 0.6, 0, 1)` on interactive elements.

Most surfaces stay flat, with thin pale outlines separating controls and cards from the white canvas. Soft, cool-toned shadows lift the floating navigation, product screenshots, and testimonial cards. Keep layering restrained: screenshots may overlap decorative elements, but avoid heavy dark shadows or dense stacks of cards.

## Imagery

Product UI screenshots and interface mockups are the main visual evidence, showing prospect lists, contact details, verification, and integrations. They sit large within their sections, often against white or pastel washes, and are paired with soft shadows rather than dramatic frames. Small customer logos and portrait thumbnails support credibility. The page also uses video-led product demonstrations and light decorative visual elements; imagery should feel clean and legible, not photographic or cinematic.

## Components

### Floating navigation

Compact centered pill-like bar with Wiza mark, Inter navigation links, and a small login control; use a subtle outline and soft shadow.

### Hero CTA pair

Centered headline and short copy above a filled violet primary action and a quiet secondary demo action.

### Product demonstration

Large, detailed prospecting interface screenshot, treated as the main evidence of the product rather than generic decoration.

### Pastel feature panel

Large rounded section wash using pale lavender, blush, or cool blue-green gradients behind centered product storytelling.

### Testimonial card

White rounded quote card with dark-violet text, customer attribution, and gentle shadow inside a cool pastel section.

### Signup form

Email input with a pale outlined surface and a prominent violet account-creation action.

### Footer columns

Quiet multi-column link directory with brand summary, contact email, social marks, and understated muted copy.

### Measured component styles

- **Primary button** (“hello@wiza.co”): transparent background · text #312749 · border 1px solid #eceff3 · radius 1440px · padding 4px 8px 4px 10px · 400 16px Inter · shadow rgba(18, 55, 105, 0.08) 0px 2px 4px 0px, rgba(18, 55, 105, 0.04) 0px 1px 1px 0px
- **Link** (“Get started for free”): transparent background · text #ffffff · radius 8px · padding 0px · 400 16px Inter
- **Input**: transparent background · text #3e0079 · border 1px solid #efebf7 · radius 10px · padding 0px 14px · 400 14px Inter · shadow rgba(47, 1, 151, 0.04) 0px 11px 10px 0px, rgba(47, 1, 151, 0.06) 0px 6px 8px 0px
- **Card** (““Before Wiza, our mobile connect and ema”): transparent background · text #26114a · border 1px solid #f6f7f9 · radius 24px · padding 40px 48px · 400 16px Inter · shadow rgba(14, 59, 101, 0.06) 0px 32px 24px -12px, rgba(14, 59, 101, 0.01) 0px 11px 4p
- **Badge** (“mo_money@gmail.com”): transparent background · text #312749 · border 1px solid #f4f4f6 · radius 6px · padding 2px 8px · 400 14px Inter
- **Navigation item** (“Solutions Resources Enterprise Pricing L”): transparent background · text #26114a · radius 0px · padding 0px · 400 16px Inter

## Do

- Use white as the default canvas.
- Reserve pastel gradients for large section panels.
- Set display headings in Britti Sans or a close substitute.
- Use Inter for navigation, body text, and UI labels.
- Show real-looking product interfaces as evidence.
- Keep borders and shadows soft and low contrast.

## Don't

- Do not turn every section into a gradient panel.
- Do not use saturated colours as large background fills.
- Do not crowd the centered hero or feature headings.
- Do not replace product UI with generic stock photography.
- Do not use heavy borders or dramatic shadows.
- Do not introduce unmeasured colour values.

## Agent prompt

Build a new Wiza-style SaaS page with a white Canvas White (#ffffff) foundation, Deep Wisteria (#26114a) headings, and Slate Violet (#615e6e) supporting copy. Use Britti Sans-like rounded medium headings and Inter for navigation, body, labels, and controls. Create a compact floating navigation, centered headline-led hero, and a prominent prospecting product screenshot. Break up the long page with only a few broad, softly rounded pastel panels using Lavender Wash (#e8e2fe), Petal Pink (#fce2f0), Rose Tint (#fce6ea), or Pale Sky (#ebf2fc). Use restrained borders and shadows, generous whitespace, and crisp interface detail. Include feature storytelling, trust proof, customer testimonials, a simple email signup, and a calm multi-column footer. Keep the experience light, credible, and product-led.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy above paired CTAs and a large product demo. | primary and secondary CTA, product preview, trust ratings | floating navigation, pastel hero wash, large product screenshot |
| 2 | logo-cloud | A single compact band of customer marks and ratings beneath the hero. | customer proof, third-party ratings | logo row, small rating labels |
| 3 | feature-split | Broad pale panel with text and problem statements aligned to one side. | problem framing, scannable pain points | soft section wash, compact icon-led statements |
| 4 | feature-split | Centered product-led visual followed by a centered solution headline and explanatory copy. | problem-to-solution transition, feature explanation | decorative contact visuals, centered typography |
| 5 | product-showcase | Rounded pastel panel with product cards above centered heading and CTA. | feature demonstration, extension CTA | profile-card mockups, violet accent, gradient backdrop |
| 6 | feature-split | Pastel panel with a profile-style visual above centered feature copy. | capability proof, feature explanation | profile mockup, pink-lavender gradient |
| 7 | integrations | Cool-tinted section with accuracy figures, centered copy, and integration marks. | accuracy metrics, integration discovery | stat row, soft blue-green wash, floating integration icons |
| 8 | product-showcase | Large interface screenshot above a centered scale-focused headline and copy. | product proof, scale claim | large application screenshot, pastel gradient panel |
| 9 | testimonials | Centered title and quote card, with customer metrics below in a cool pastel panel. | customer quote, outcome metrics, carousel cues | white testimonial card, soft shadow, metric row |
| 10 | cta | Two-column conversion block with text and an email signup action in a pastel panel. | email capture, free signup, reassurance points | outlined email input, violet submit button, gradient background |
| 11 | footer | Three-column footer with brand and contact area, link directories, social marks, and legal copy. | site navigation, contact access, legal information | multi-column link lists, small social icons, muted disclaimer |

## Source CSS custom properties (selected)

```css
--_theme---background: transparent;
--_text-style---font-family: Inter,Arial,sans-serif;
--_theme---text: #26114a;
--_text-style---font-size: clamp(.875*1rem,((.875 - ((1 - .875)/(75 - 20)*20))*1rem + ((1 - .875)/(75 - 20))*100vw),1*1rem);
--_text-style---line-height: 1.5;
--_text-style---font-weight: 400;
--_text-style---letter-spacing: 0em;
--_text-style---text-wrap: pretty;
--_gap---size: 1.5rem;
--_text-style---margin-top: clamp(.625*1rem,((.625 - ((.75 - .625)/(75 - 20)*20))*1rem + ((.75 - .625)/(75 - 20))*100vw),.75*1rem);
--_text-style---margin-bottom: clamp(1.75*1rem,((1.75 - ((2 - 1.75)/(75 - 20)*20))*1rem + ((2 - 1.75)/(75 - 20))*100vw),2*1rem);
--_spacing---space--3: clamp(.875*1rem,((.875 - ((1 - .875)/(75 - 20)*20))*1rem + ((1 - .875)/(75 - 20))*100vw),1*1rem);
--_spacing---space--6: clamp(2*1rem,((2 - ((2.5 - 2)/(75 - 20)*20))*1rem + ((2.5 - 2)/(75 - 20))*100vw),2.5*1rem);
--_spacing---space--7: clamp(2.25*1rem,((2.25 - ((3 - 2.25)/(75 - 20)*20))*1rem + ((3 - 2.25)/(75 - 20))*100vw),3*1rem);
--_spacing---section-space--none: 0px;
--_spacing---section-space--small: clamp(2*1rem,((2 - ((3 - 2)/(75 - 20)*20))*1rem + ((3 - 2)/(75 - 20))*100vw),3*1rem);
--_spacing---section-space--main: clamp(3.5*1rem,((3.5 - ((6 - 3.5)/(75 - 20)*20))*1rem + ((6 - 3.5)/(75 - 20))*100vw),6*1rem);
--_spacing---section-space--large: clamp(5.5*1rem,((5.5 - ((7.5 - 5.5)/(75 - 20)*20))*1rem + ((7.5 - 5.5)/(75 - 20))*100vw),7.5*1rem);
--_spacing---section-space--page-top: clamp(7*1rem,((7 - ((9.5 - 7)/(75 - 20)*20))*1rem + ((9.5 - 7)/(75 - 20))*100vw),9.5*1rem);
--_theme---heading-accent: #4c24a3;
--_spacing---space--2: clamp(.625*1rem,((.625 - ((.75 - .625)/(75 - 20)*20))*1rem + ((.75 - .625)/(75 - 20))*100vw),.75*1rem);
--_theme---background-2: #c1c7cf;
--_spacing---space--1: clamp(.375*1rem,((.375 - ((.5 - .375)/(75 - 20)*20))*1rem + ((.5 - .375)/(75 - 20))*100vw),.5*1rem);
--_spacing---space--4: clamp(1.25*1rem,((1.25 - ((1.5 - 1.25)/(75 - 20)*20))*1rem + ((1.5 - 1.25)/(75 - 20))*100vw),1.5*1rem);
--_spacing---space--5: clamp(1.75*1rem,((1.75 - ((2 - 1.75)/(75 - 20)*20))*1rem + ((2 - 1.75)/(75 - 20))*100vw),2*1rem);
--_spacing---space--8: clamp(2.5*1rem,((2.5 - ((4 - 2.5)/(75 - 20)*20))*1rem + ((4 - 2.5)/(75 - 20))*100vw),4*1rem);
--_typography---font--primary-regular: 400;
--_typography---font--primary-medium: 500;
--_typography---font--primary-bold: 700;
--radius--small: .5rem;
--radius--main: 1rem;
--radius--round: 100vw;
--border-width--main: .094rem;
--_theme---border: color-mix(in srgb,#1f1d1e/**/20%,transparent);
--radius--midsize: .625rem;
--_typography---font-size--text-small: clamp(.75*1rem,((.75 - ((.875 - .75)/(75 - 20)*20))*1rem + ((.875 - .75)/(75 - 20))*100vw),.875*1rem);
--_button-style---border: white;
--_button-style---background: white;
--_button-style---text: #26114a;
--_button-style---border-hover: white;
```

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