# Flutterwave · Design system migration spec

> Source: https://www.flutterwave.design  ·  Curated by OpenDesign  ·  en

> A clean, typographically-driven editorial layout that uses curated imagery rather than UI elements to create visual richness.

## 1. Identity DNA

Flutterwave's design system is structured like a sophisticated digital magazine, showcasing the creative output of a corporate design team through editorial restraint and curated imagery. The identity is warm and typographic, letting the work itself provide the color and visual energy rather than interface decoration.

**One-liner:** A warm, editorial showcase for the Flutterwave design team's stories, vibes, and portfolio work.
**Keywords:** Design team · Creative · Editorial · Curation · Flutterwave
**Analogy:** A sophisticated digital magazine showcasing the creative output of a corporate design team.

## 2. Color

The color system is deliberately spare: a stark white canvas and a warm peach accent, with deep near-black text for high contrast. This palette recedes to let curated photography and illustration carry the emotional weight.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#FCD2BA` | quiet area |
| `--ink` | `#171717` | body text |
| `--line` | `rgba(23,23,23,0.2)` | divider |

**Color principle:** Warm neutral base with stark dark text, relying on colorful imagery rather than interface accents for visual interest.

The principle is that the interface is a neutral frame; the portfolio content provides the visual richness.

## 3. Typography

Two typefaces establish a clear hierarchy: Millik, a high-contrast transitional serif, commands display headlines with compact negative tracking, while Moderat, a clean geometric sans-serif, handles body and UI text with reliable readability. The pairing reads as editorial and intentional without feeling decorative.

- **Display:** transitional-serif
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.05 | 700 | -1px | Hero headline |
| display-sm | 32px | 1.2 | 700 | -0.8px | Section headings |
| body | 18px | 1.5 | 400 | normal | Intro text and paragraphs |
| caption | 12px | 1.4 | 400 | normal | Bylines and small metadata |

**Type rules:**
- Display text uses a high-contrast transitional serif (Millik) for strong visual impact.
- Body and UI text use a clean geometric sans-serif (Moderat) for excellent readability.
- Large display text should tightly track negative values (-0.8px to -1px) for a compact, editorial feel.

## 4. Spacing

Spacing follows a generous rhythm, allowing generous whitespace to frame content blocks and prevent the dense, claustrophobic feel of typical corporate layouts.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous

## 5. Surfaces

Surfaces are flat and shadowless, with minimal borders defining edges only where necessary. The visual depth comes from the typographic scale and the imagery itself, not from layered elevation effects.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** minimal

## 6. Layout

The layout skeleton is a centered, single-column reading flow that expands into horizontal scrolling carousels for visual content browsing. This structure maintains the focused, editorial pace of a magazine spread while enabling dynamic exploration of portfolio pieces.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** centered column for text, horizontal scrolling carousels for visual content

## 7. Motion & Interaction

Motion is smooth and deliberate, using 0.8s cubic-bezier transitions for layout shifts and carousel movements that feel considered rather than immediate. The interaction model uses 'grab' cursors for draggable carousels, reinforcing the physical, tactile quality of browsing a curated collection.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.16, 1, 0.3, 1)`
- **Patterns:**
  - horizontal scroll
  - smooth transitions

- **Hover:** pointer cursor on interactive elements
- **Click:** grab cursor for draggable carousels
- **Transition:** smooth 0.8s cubic-bezier transitions
- **Keyboard:** standard tab navigation

## 8. Voice & Don'ts

The editorial voice is friendly and direct—bold, slightly playful headlines in uppercase minimal CTAs, avoiding corporate jargon and stiff formality. The tone matches the warmth of the palette: approachable without being casual, professional without being sterile.

- **Tone:** friendly
- **Headline style:** bold, direct, slightly playful
- **CTA style:** uppercase, minimal, text-based
- **Avoid:** corporate jargon / stiff formality / aggressive sales language / complex visual clutter

### Don'ts
- ❌ don't use a sterile, all-grey corporate palette — screenshot shows warm peach (#FCD2BA) and vibrant imagery.
- ❌ don't use thin, light typefaces for headlines — screenshot shows bold, high-contrast serif display font.
- ❌ don't apply tight padding and dense layouts — screenshot shows generous whitespace around elements.
- ❌ don't rely solely on UI color for emotion — screenshot shows the mood is driven by curated photography and illustration.
- ❌ don't use sharp, square corners for interactive elements — screenshot shows 5px rounded borders.
- ❌ don't flatten the visual hierarchy — screenshot maintains a clear distinction between large display type and body text.

The system deliberately avoids using a single accent color to drive UI emotion, instead trusting curated imagery and typography to define the visual character.

## System Prompt (paste into AI tool)

```
Design a friendly, editorial-style website for a creative studio or design team. The layout should feel like a curated digital magazine, using a stark white background and a secondary warm peach tone (#FCD2BA) for section differentiation. Rely on a bold transitional serif (like Millik) for display headlines and a clean geometric sans-serif (like Moderat) for body text, using tight negative letter-spacing on large type. The core interaction model should feature horizontal scrolling carousels for showcasing visual work, using a 'grab' cursor. Strictly avoid: heavy shadows, dense/claustrophobic layouts, sterile corporate palettes, or using a single accent color to drive the UI—the visual interest must come from the rich, colorful imagery of the portfolio pieces.
```