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

# Flutterwave Design · Design System

> Bold editorial type, playful artwork, and generous white space.

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

A bright editorial homepage introduces Flutterwave’s design team through expressive typography and a curved carousel of story artwork. White space and dark text frame colorful content cards, with a warm peach Vibes band and a compact amber newsletter action adding contrast.

## North star

Use generous white space and bold editorial type to make colorful, image-led stories feel curated rather than crowded.

## Overview

The page uses white as its dominant canvas, letting dark, high-contrast typography and image-led content carry the identity. A large, centered Millik display headline gives the hero an expressive editorial voice; Moderat handles navigation, supporting copy, and story details with a quieter, readable rhythm. The hero carousel presents colorful artwork in a shallow curved arrangement, while the latest stories return to a restrained white three-column feed. A broad peach section distinguishes Vibes without introducing a new visual system. Card artwork supplies much of the page’s vivid color, so those hues should stay inside the imagery rather than become interface colors. Small amber appears chiefly on the newsletter button. Layout is open and comfortable, with clear section breaks, centered hero content, and restrained outlines on controls. Keep surfaces mostly flat and let the artwork, rather than shadows or decoration, provide depth.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#171717` | `--color-soft-ink` | neutral | Primary navigation and link text, button outlines, and other dark interface details. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the clean backdrop around the hero, stories, and newsletter. |
| Card Gray | `#b5b5b5` | `--color-card-gray` | surface | Muted story-card surface; secondary to the artwork-led cards shown in the carousel. |
| Cream Lettering | `#fff9f1` | `--color-cream-lettering` | semantic | Light story-card text over darker card surfaces; not the dominant page canvas. |
| Peach Band | `#fcd2ba` | `--color-peach-band` | surface | Warm full-width background distinguishing the Vibes content section. |
| Slate Card | `#666666` | `--color-slate-card` | surface | Dark story-card surface paired with light text; keep its use within content cards. |
| Midnight Blue | `#12122c` | `--color-midnight-blue` | brand | Measured heading color token; use for prominent headings where the sampled dark-blue text is applied. |
| Hairline Gray | `#d1d1d1` | `--color-hairline-gray` | neutral | Subtle dividers and fine interface borders. |
| Signal Amber | `#f5a623` | `--color-signal-amber` | accent | Newsletter Subscribe button fill; a small, focused accent rather than a section color. |
| Button Black | `#000000` | `--color-button-black` | semantic | Text and small interface details placed on the amber call to action. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#b5b5b5` (Card Gray) · `--color-surface-2` → `#fcd2ba` (Peach Band) · `--color-surface-3` → `#666666` (Slate Card) · `--color-text` → `#12122c` (Midnight Blue) · `--color-text-muted` → `#fff9f1` (Cream Lettering) · `--color-border` → `#171717` (Soft Ink) · `--color-accent` → `#f5a623` (Signal Amber) · `--color-on-accent` → `#000000` (Button Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#12122c` | `#ffffff` | 18.28:1 | AAA |
| `#12122c` | `#b5b5b5` | 8.92:1 | AAA |
| `#12122c` | `#fcd2ba` | 13.12:1 | AAA |
| `#12122c` | `#666666` | 3.18:1 | AA-large |
| `#fff9f1` | `#ffffff` | 1.05:1 | fail |
| `#fff9f1` | `#b5b5b5` | 1.96:1 | fail |
| `#fff9f1` | `#fcd2ba` | 1.33:1 | fail |
| `#fff9f1` | `#666666` | 5.49:1 | AA |
| `#f5a623` | `#ffffff` | 2.03:1 | fail |
| `#f5a623` | `#b5b5b5` | 1.01:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Moderat | `--font-body` | webfont | 400, 500, 600, 700 | Navigation, body copy, story metadata, links, and supporting headings. | Inter |
| Millik | `--font-display` | webfont | 700, 800 | Hero display and primary editorial headings. | Fraunces |

- **Moderat:** Use regular body text with measured 400–700 weights; keep tracking near neutral and avoid all-caps except compact metadata.
- **Millik:** Use a heavy display weight with tight negative tracking; preserve the distinctive bold, expressive headline silhouette.

### Type scale — Augmented Fourth (ratio ≈ 1.392, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 800 | normal | -0.013em | — | Millik | Oversized hero statement and prominent display moments. |
| h1 | 32px | 700 | normal | -0.025em | — | Millik | Primary editorial headings and page-level title. |
| h2 | 22px | 600 | 1.18 | -0.036em | — | Moderat | Section titles and supporting prominent headings. |
| h3 | 20px | 400 | 1.6 | 0 | — | Moderat | Secondary story or explanatory headings. |
| body | 16px | 400 | 1.63 | 0 | — | Moderat | Introductory copy, descriptions, and newsletter support text. |
| caption | 14px | 500 | normal | 0 | — | Moderat | Compact story metadata and small supporting labels. |
| button | 16px | 400 | normal | 0 | — | Flutterwave | Newsletter subscribe action and compact controls. |
| nav | 18px | 400 | normal | 0 | — | Moderat | Top-level site navigation links. |
| link | 18px | 500 | normal | 0 | — | Moderat | Story titles and inline navigational actions. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 6, 10, 11, 12, 15, 18, 20, 30, 32, 40, 50, 60, 82, 117, 120 px.
- Section rhythm 82px · element gap — · card padding — · max content width 1200px.

A comfortable, centered page sits within a measured 1200px maximum content width. The header is a light horizontal navigation row; the hero centers its headline and short intro above a wide, curved carousel. Below, a three-column latest-stories feed gives way to a full-width peach Vibes band with horizontally presented artwork. The newsletter is centered on white, followed by a sparse footer. Sections have clear breathing room rather than dense stacking.

## Shape & elevation

- Radius: button `50%` · input `5px` · card `5px` · nav `50%` · xs `5px`
- No box shadows measured: the page is flat.
- Motion: standard transition `1.2s cubic-bezier(0.16, 1, 0.3, 1)` on interactive elements.

The interface is predominantly flat: white and peach bands, artwork surfaces, and little emphasis on drop shadows. Story cards rely on their images and contrasting overlaid text for separation. Controls and the newsletter form use thin dark outlines; maintain crisp edges and avoid adding heavy elevation or layered effects.

## Imagery

The page relies on colorful editorial artwork and illustrations, not product photography or 3D. Story images appear in large, edge-to-edge cards; the hero carousel bends the row into a shallow arc and crops cards at the viewport edges. Lower content uses a straightforward image grid and a horizontal Vibes strip. Artwork introduces vivid purples, greens, and ochres; treat these as image colors, not UI palette additions.

## Components

### Header navigation

A minimal horizontal header with the Design mark on the left, Moderat navigation links on the right, and small circular controls.

### Intro hero

Centered, heavy Millik headline with a short Moderat introduction beneath it, surrounded by generous white canvas.

### Curved story carousel

Large artwork cards form a shallow arc, with adjacent cards cropped at the viewport edges and outlined circular arrow controls below.

### Latest stories feed

A white editorial section with a section heading, view-all link, and three image-led story cards with compact metadata.

### Vibes gallery

A full-width #fcd2ba band holding a horizontally browsable row of large artworks and small attribution lines.

### Newsletter form

Centered signup heading and supporting line above a thin outlined email input joined to an amber Subscribe button.

### Footer

Sparse white footer with copyright and site link on the left and small social icons on the right.

### Measured component styles

- **Primary button** (“Subscribe”): background #f5a623 · text #000000 · border 1px solid #171717 · radius 0px · padding 1px 6px · 400 16px Flutterwave
- **Secondary button**: transparent background · text #000000 · border 1px solid #171717 · radius 50% · padding 1px 6px · 400 14px Flutterwave
- **Link** (“We are taking a break”): transparent background · text #fff9f1 · radius 0px · padding 0px · 400 14px Moderat
- **Input**: transparent background · text #171717 · border 1px solid #171717 · radius 5px · padding 20px 32px · 400 16px Moderat
- **Card** (“We are taking a break By Ted Oladele”): background #b5b5b5 · text #171717 · radius 0px · padding 0px · 400 14px Moderat
- **Navigation item** (“Stories Vibes About us Events”): transparent background · text #171717 · radius 0px · padding 0px · 400 18px Moderat

## Do

- Keep the page canvas bright white and uncluttered.
- Use Millik-style heavy display lettering for the hero statement.
- Use Moderat-style sans-serif text for navigation and editorial details.
- Let story artwork provide vivid color instead of adding extra interface hues.
- Separate Vibes with the measured peach section band.
- Reserve amber for the newsletter action.
- Use thin outlines and flat surfaces for controls.

## Don't

- Don’t turn the interface into a dark theme.
- Don’t use artwork colors as global buttons or navigation colors.
- Don’t crowd the centered hero with extra controls or copy.
- Don’t add heavy shadows or glossy card effects.
- Don’t replace the editorial artwork with generic product photography.
- Don’t use rounded, pill-like cards where the measured cards are square-edged.

## Agent prompt

Build a new editorial page in the Flutterwave Design visual style. Keep the main canvas Gallery White (#ffffff), with Soft Ink (#171717) navigation and outlines, and use a bold, expressive display face similar to Millik for the main heading. Set supporting copy and metadata in a clean Moderat-like sans serif. Give the hero centered alignment and generous breathing room, then feature large, colorful editorial artwork in a curated carousel or image-led feed. Use Peach Band (#fcd2ba) only for a distinct gallery section, and Signal Amber (#f5a623) sparingly for a primary newsletter-style action with Button Black (#000000) text. Keep cards flat, let imagery supply its own color, use restrained hairlines, and avoid heavy shadows or decorative gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single long page: minimal top navigation, centered intro, curved story carousel, editorial feed, peach gallery band, newsletter, and sparse footer. | top-level navigation, carousel arrows, view-all links, newsletter signup | centered display headline, artwork-led cards, full-width peach band, outlined form controls |

## Source CSS custom properties (selected)

```css
--color-dark-blue: #12122c;
```

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