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

# Busuu · Design System

> Bright gradients meet community-led learning

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

Busuu pairs a vivid blue-to-violet hero and CTA band with a clean, white editorial layout. Friendly learning illustrations, rounded controls, and generous spacing make a large language-learning offer feel approachable.

## North star

Keep the content airy and legible, using the blue-violet gradient for key moments and mint only for the primary action.

## Overview

The page opens with a full-width blue-to-violet gradient hero, placing a large white headline and supporting copy beside a playful illustration of learners communicating across a world map. A vivid mint-green pill CTA creates the clearest action contrast; the header controls stay compact and legible. Below, white sections alternate between centered headings and two-column feature stories, with product-interface illustrations acting as visual anchors. The language picker uses circular flag imagery in a relaxed horizontal row. Nista is used consistently: heavy, large headings establish hierarchy, while body copy remains regular and readable. Dark charcoal text and muted slate copy keep white sections calm, with pale blue reserved for the footer surface. Content is spaced generously rather than boxed into dense cards. The recurring gradient CTA band near the bottom reconnects the otherwise airy page to the colorful hero.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and text on the gradient hero and CTA band. |
| Learning Mint | `#11ee92` | `--color-learning-mint` | accent | Primary filled pill CTA background and matching CTA border. |
| Charcoal Ink | `#252b2f` | `--color-charcoal-ink` | brand | Primary heading and body text; also the foreground on mint CTA buttons. |
| Cloud Blue | `#f2f7fd` | `--color-cloud-blue` | surface | Pale blue footer and section surface, distinct from the white content canvas. |
| Signal Blue | `#116eee` | `--color-signal-blue` | accent | Links, select button text, and the blue end of the hero and CTA gradients. |
| Vivid Violet | `#6e00f8` | `--color-vivid-violet` | accent | Violet end of the hero and CTA gradients, giving the bands their saturated contrast. |
| Bridge Periwinkle | `#563ce9` | `--color-bridge-periwinkle` | accent | Intermediate stop in the measured blue-violet gradients. |
| Slate Copy | `#666e7e` | `--color-slate-copy` | semantic | Muted secondary copy, including language names and supporting text. |
| Mist Divider | `#d6dee6` | `--color-mist-divider` | neutral | Fine input and footer borders; keep it subtle against white and pale blue. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Measured in some navigation text; visually secondary to the charcoal text system. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2f7fd` (Cloud Blue) · `--color-text` → `#252b2f` (Charcoal Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#666e7e` (Slate Copy) · `--color-border` → `#11ee92` (Learning Mint) · `--color-accent` → `#116eee` (Signal Blue) · `--color-accent-2` → `#11ee92` (Learning Mint) · `--color-accent-3` → `#6e00f8` (Vivid Violet) · `--color-on-accent` → `#252b2f` (Charcoal Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#252b2f` | `#ffffff` | 14.33:1 | AAA |
| `#252b2f` | `#f2f7fd` | 13.31:1 | AAA |
| `#ffffff` | `#f2f7fd` | 1.08:1 | fail |
| `#666e7e` | `#ffffff` | 5.13:1 | AA |
| `#666e7e` | `#f2f7fd` | 4.76:1 | AA |
| `#116eee` | `#ffffff` | 4.68:1 | AA |
| `#116eee` | `#f2f7fd` | 4.34:1 | AA-large |

### Gradients

- `linear-gradient(20.78deg, rgb(110, 0, 248) 3.3%, rgb(86, 60, 233) 27.67%, rgb(17, 110, 238) 93.23%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Nista | `--font-body` | webfont | 400, 700, 800 | All measured text, including headings, body copy, navigation, links, captions, and buttons. | Nunito Sans |

- **Nista:** Use measured 400, 700, and 800 weights; headings are bold and friendly, with no tracked-out or uppercase styling.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 800 | 1.3 | 0 | — | Nista | Hero headline, large white type over the gradient. |
| h2 | 36px | 800 | 1.3 | 0 | — | Nista | Major section titles, generally centered on white. |
| h3 | 24px | 800 | 1.5 | 0 | — | Nista | Feature titles and smaller content headings. |
| body | 16px | 400 | 1.7 | 0 | — | Nista | Hero description, feature explanations, and general copy. |
| caption | 14px | 700 | 1.7 | 0 | — | Nista | Eyebrows, labels, and compact supporting text. |
| button | 16px | 700 | normal | 0 | — | Nista | Bold labels on pill-shaped calls to action. |
| nav | 14px | 700 | 1.7 | 0 | — | Nista | Compact, bold header navigation and controls. |
| link | 18px | 700 | 1.7 | 0 | — | Nista | Prominent blue inline links and related actions. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 3, 5, 6, 8, 10, 12, 14, 15, 16, 20, 24, 28, 30, 32, 40 px.
- Section rhythm 143px · element gap 10px · card padding — · max content width 1200px.

Use a spacious single-page composition within the measured 1200px maximum content width. The opening hero is a full-width two-column band, with copy on the left and learner artwork on the right; the language selector follows as a centered horizontal category row. Feature content alternates image and copy across two columns, with centered section headings and broad vertical breathing room. Keep the footer in three columns over pale blue. Measured section rhythm is spacious, with a 143px section gap and 10px element gap.

## Shape & elevation

- Radius: button `9999px` · input `5px` · nav `16px` · link `16px` · xs `16px` · pill `9999px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px`
- Shadow `md` (nav): `rgba(0, 0, 0, 0.15) 1px 0px 10px 1px`
- Shadow `sm` (button): `rgba(0, 0, 0, 0.3) 0px 2px 4px 0px`
- Motion: standard transition `0.15s ease-out` on interactive elements.

The page is mostly flat: white sections and broad gradient bands do the structural work. Use subtle shadows to lift the navigation and primary CTA, and light borders for inputs and footer separators. Layered course and notification mockups may cast soft shadows for legibility, but avoid enclosing every feature in a card.

## Imagery

Use friendly, colorful illustrations of learners, language bubbles, and learning interfaces rather than relying on large photographic backgrounds. Place hero artwork beside the copy and use smaller tilted product mockups to illustrate feature stories. Flags appear as circular icons in the language picker. Keep illustrations crisp and lightly dimensional; treat any colors inside mockups as illustration detail, not as core brand tokens.

## Components

### Primary CTA

Mint-filled pill button with charcoal bold text, a matching 2px border, and a subtle shadow. The measured label is “Learn for free.”

### Header actions

Compact top-right controls sit over the hero gradient; use white or outlined pill treatments and clear contrast.

### Language selector

Centered heading above a horizontal row of circular flag icons and muted language labels, with subtle directional controls.

### Feature split

Alternate concise feature copy and tilted product-interface illustrations in a two-column rhythm; keep the surrounding background white.

### Gradient CTA band

Full-width blue-violet gradient section with centered award marks, heading, supporting copy, and mint pill action.

### Footer

Three-column navigation on pale blue with a language input, subtle borders, and small utility links.

### Measured component styles

- **Primary button** (“Learn for free”): background #11ee92 · text #252b2f · border 2px solid #11ee92 · radius 45.04px · padding 12px 40px · 700 16px Nista · shadow rgba(0, 0, 0, 0.3) 0px 2px 4px 0px
- **Secondary button** (“Learn for free”): transparent background · text #116eee · border 2px solid #ffffff · radius 45.04px · padding 6px 28px · 700 14px Nista
- **Link** (“Spanish”): transparent background · text #666e7e · radius 16px · padding 15px 0px · 400 16px Nista
- **Input** (“English (UK) English (US) Español Italia”): transparent background · text #252b2f · border 1px solid #d6dee6 · radius 5px · padding 10px 25px 10px 10px · 400 16px Nista
- **Navigation item** (“Learn for free Log in Log in For Educato”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Nista

## Do

- Use Nista or a close rounded sans-serif throughout.
- Keep the main canvas white and content sections open.
- Reserve the blue-violet gradient for prominent bands.
- Make the primary CTA mint with charcoal text.
- Alternate feature copy and illustration placement.
- Keep headings bold and section titles clearly separated.
- Use pale blue for the footer surface and restrained dividers.

## Don't

- Do not make every section a boxed card.
- Do not use the gradient as a page-wide background.
- Do not let mockup colors redefine the brand palette.
- Do not crowd the language selector or feature sections.
- Do not use sharp rectangular primary buttons.
- Do not replace readable body copy with decorative type.
- Do not use mint as a large section background.

## Agent prompt

Build a new Busuu-style education page with a clean white canvas, spacious sections, and a friendly rounded sans-serif such as Nista or Nunito Sans. Use Charcoal Ink (#252b2f) for primary text and Slate Copy (#666e7e) for supporting copy. Create one or two full-width gradient moments using Vivid Violet (#6e00f8), Bridge Periwinkle (#563ce9), and Signal Blue (#116eee). Make the primary action a rounded Learning Mint (#11ee92) pill with charcoal bold text. Organize content into centered headings and alternating two-column feature stories, pairing concise copy with bright learning illustrations or interface mockups. Use circular category icons where relevant, subtle borders, and soft elevation only for controls or layered artwork. Keep generous vertical breathing room and finish with a Cloud Blue (#f2f7fd) multi-column footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width blue-violet gradient; left-aligned copy and CTA beside learner illustration. | Primary free-learning action, Trust review snippet | White headline, Mint pill CTA, Gradient background |
| 2 | category-nav | Centered title above a horizontal row of circular flag icons and language labels. | Browse language options, Directional carousel controls | Circular flag icons, Muted labels, White background |
| 3 | feature-split | Centered section heading followed by alternating two-column feature rows. | Explain learning benefits, Show course experience | Alternating copy and mockups, Bold feature headings, White canvas |
| 4 | stats | Centered single-column statement with generous white space. | Build social proof | Bold centered headline, Minimal decoration |
| 5 | cta | Full-width gradient band with centered awards, heading, copy, and action. | Reinforce credibility, Start learning | Blue-violet gradient, White centered type, Mint pill CTA |
| 6 | logo-cloud | Centered heading and link above a horizontal row of company logos. | Explore business offering | Brand logo row, Blue text link, White background |
| 7 | footer | Pale blue surface with language selector and three columns of grouped links. | Change display language, Browse support and company links | Three-column link groups, Subtle dividers, Compact utility row |

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