---
name: Flutterwave
description: "A clean, typographically-driven editorial layout that uses curated imagery rather than UI elements to create visual richness."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#171717"
  bg-quiet: "#FCD2BA"
  line: "rgba(23,23,23,0.2)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 64px
    lineHeight: 1.05
    fontWeight: 700
    letterSpacing: "-1px"
  display-sm:
    fontFamily: transitional-serif
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.8px"
  body:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A warm, editorial showcase for the Flutterwave design team's stories, vibes, and portfolio work.

*A sophisticated digital magazine showcasing the creative output of a corporate design team.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#171717`)** — uses `ink` token
- **Borders (`rgba(23,23,23,0.2)`)** — uses `line` token

## Typography

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

- 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.

## Layout

centered column for text, horizontal scrolling carousels for visual content

*Rhythm:* generous

## Elevation & Depth

- Borders: minimal

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** rounded outline buttons with minimal weight
- **card:** large, image-forward cards with overlay text
- **hero:** large centered headline with subtext

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```