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

# Flying Papers · Design System

> Oversized type meets a playful, color-blocked world

**Theme:** dark · **Industry:** ecommerce · **Source:** https://www.flyingpapers.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._

Flying Papers pairs oversized, tightly packed display lettering with vivid full-width color fields and a playful age-check opening. The long storefront uses centered category and product content, with a small set of illustration-led accents against a consistent lavender-blue visual field.

## North star

Let oversized, tightly composed lettering and uninterrupted color fields define the page, with commerce details kept secondary and graphic.

## Overview

The identity is driven by expansive color fields and oversized display type rather than conventional storefront chrome. The first viewport uses a muted indigo-violet canvas, warm yellow headline lettering, and a tiny centered wordmark; age-check controls sit beneath the headline. Across the page, lavender-blue and magenta fields are paired with warm yellow, pale pink, and off-white accents. ObviouslyVariable supplies heavy, compressed-feeling uppercase display statements, while Bergen Mono gives navigation and small labels a compact, poster-like cadence. Degular adds a bold supporting text voice. Layouts are centered and spacious, with large stretches of uninterrupted background between content moments; category links and product cards provide the more functional rhythm. Imagery is sparse in the measured sections and should remain graphic and illustrative, not polished lifestyle photography. Borders are dark and conspicuous where cards appear, while most of the page stays flat and unshadowed.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Black | `#1a1a1a` | `--color-soft-black` | neutral | Near-black typography and strong card outlines; also appears in graphic details. |
| Paper Magenta | `#ac4f98` | `--color-paper-magenta` | brand | Measured canvas color across major page sections; a core saturated brand field. |
| Warm Marigold | `#f9cc73` | `--color-warm-marigold` | accent | Signature headline and link color, age-check emphasis, and warm card or media accents. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Inverse surface in measured palette; use sparingly for light areas and card contrast. |
| Paper Cream | `#f9f5f2` | `--color-paper-cream` | neutral | Light body and navigation text, plus pale age-check link text. |
| Blush Pink | `#f8c1ba` | `--color-blush-pink` | accent | Muted heading accent; use as a secondary highlight rather than a page canvas. |
| Electric Lemon | `#f4ed36` | `--color-electric-lemon` | accent | Bright yellow heading text in the lower-page illustration-like display treatment. |
| Indigo Slate | `#61609a` | `--color-indigo-slate` | surface | Prominent blue-violet section and card surface, dominant in the first viewport screenshot. |
| Cloud Blue | `#a7b5cc` | `--color-cloud-blue` | surface | Pale blue section band separating areas in the long-page screenshot. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Age-check and navigation text; graphic detail, not a primary canvas color. |
| Sage Leaf | `#b5c995` | `--color-sage-leaf` | semantic | Measured heading color with limited occurrence; treat as a small decorative accent. |
| Periwinkle | `#8584bd` | `--color-periwinkle` | surface | Card surface behind category-shopping content, not the dominant page field. |
| Poppy Red | `#c94245` | `--color-poppy-red` | semantic | Small card or illustration color only; avoid promoting it to a brand-wide UI color. |

### Semantic aliases

`--color-canvas` → `#ac4f98` (Paper Magenta) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#f9cc73` (Warm Marigold) · `--color-surface-3` → `#61609a` (Indigo Slate) · `--color-surface-4` → `#a7b5cc` (Cloud Blue) · `--color-text` → `#f9f5f2` (Paper Cream) · `--color-text-muted` → `#1a1a1a` (Soft Black) · `--color-text-subtle` → `#f8c1ba` (Blush Pink) · `--color-border` → `#1a1a1a` (Soft Black) · `--color-accent` → `#ac4f98` (Paper Magenta) · `--color-accent-2` → `#f9cc73` (Warm Marigold) · `--color-accent-3` → `#f8c1ba` (Blush Pink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f9f5f2` | `#ac4f98` | 4.48:1 | AA-large |
| `#f9f5f2` | `#ffffff` | 1.08:1 | fail |
| `#f9f5f2` | `#f9cc73` | 1.39:1 | fail |
| `#f9f5f2` | `#61609a` | 5.31:1 | AA |
| `#1a1a1a` | `#ac4f98` | 3.59:1 | AA-large |
| `#1a1a1a` | `#ffffff` | 17.4:1 | AAA |
| `#1a1a1a` | `#f9cc73` | 11.53:1 | AAA |
| `#1a1a1a` | `#61609a` | 3.02:1 | AA-large |
| `#f8c1ba` | `#ac4f98` | 3.08:1 | AA-large |
| `#f8c1ba` | `#ffffff` | 1.58:1 | fail |

### Gradients

- `radial-gradient(rgb(26, 26, 26) 30%, rgba(0, 0, 0, 0) 30%), radial-gradient(rgb(26, 26, 26) 30%, rgba(0, 0, 0, 0) 30%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ObviouslyVariable | `--font-display` | webfont | 900, 800 | Display headlines and oversized hero statements | Archivo Black |
| bergen_monoregular | `--font-mono` | webfont | 600, 400 | Navigation, captions, and compact labels | Space Mono |
| DegularDisplay-Bold | `--font-body` | webfont | 700 | Bold body copy and eyebrow text | Barlow Condensed |
| DegularVariable | `--font-degularvariable` | webfont | 400 | Small controls and interface text | Barlow |

- **ObviouslyVariable:** Very heavy weights; uppercase display lines are tightly stacked and occupy much of the composition.
- **bergen_monoregular:** Monospaced, small uppercase labels with a compact, poster-like feel.
- **DegularDisplay-Bold:** Bold uppercase supporting copy; measured body styling uses noticeable tracking.
- **DegularVariable:** Lightweight variable sans for compact controls; keep interface copy subordinate to display type.

### Type scale — Custom (ratio ≈ 1.724, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 244px | 900 | 0.8 | 0 | uppercase | ObviouslyVariable | Oversized uppercase hero and section display statements. |
| h1 | 241px | 900 | 0.9 | 0 | — | ObviouslyVariable | Primary hero statement, set at monumental scale. |
| h2 | 149px | 900 | 0.8 | 0 | uppercase | ObviouslyVariable | Large uppercase section headline. |
| h3 | 145px | 900 | 0.8 | 0 | uppercase | ObviouslyVariable | Secondary oversized product or editorial headline. |
| h4 | 133px | 800 | 0.8 | 0 | uppercase | ObviouslyVariable | Smaller but still emphatic uppercase headline. |
| body | 16px | 700 | 1 | 0.05em | uppercase | DegularDisplay-Bold | Bold uppercase supporting copy and short descriptions. |
| caption | 14px | 600 | 0.8 | 0 | uppercase | bergen_monoregular | Compact uppercase product and content labels. |
| nav | 14px | 400 | 0.8 | 0 | uppercase | bergen_monoregular | Small uppercase navigation labels. |
| eyebrow | 16px | 700 | 1 | 0.05em | uppercase | DegularDisplay-Bold | Short bold uppercase introductory labels. |
| code | 14px | 600 | 0.8 | 0 | uppercase | bergen_monoregular | Monospaced utility labels where needed. |

OpenType features in use: `"calt" 0`.

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 2, 7, 9, 11, 14, 15, 17, 20, 25, 27, 29, 30, 37, 40, 60, 70 px.
- Section rhythm 80px · element gap 20px · card padding 7px · max content width 1120px.

The page is organized as a long sequence of centered, full-width color fields with generous vertical breathing room. Measured content uses a four-column pattern in category and product areas, with other sections adapting to three columns. The measured maximum content width is 1120px. Headlines align centrally and act as the principal anchors; product and category content sits beneath them. Keep the density comfortable and avoid adding persistent conventional storefront chrome that competes with the broad color fields.

## Shape & elevation

- Radius: card `6px` · xs `6px` · pill `9999px`
- No box shadows measured: the page is flat.

The visual system is mostly flat: large color surfaces meet directly without gradients or prominent shadows. Where cards appear, use a conspicuous dark outline and a subtle measured corner treatment rather than soft floating elevation. The age-check control is a compact, high-contrast outlined element that reads as a deliberate graphic object.

## Imagery

The first viewport is primarily typography and a small monochrome character illustration peeking over the hero lettering. Measured product areas contain only a few images, and the full-page screenshots show long, largely uninterrupted color surfaces rather than dense photography. Keep any image treatment graphic, playful, and high-contrast; use product or character imagery as a focused accent instead of filling every section with lifestyle photography.

## Components

### Age-check hero

Centered, oversized uppercase greeting or age prompt over a broad color field, with a compact primary confirmation control and a secondary text link.

### Centered wordmark

Small yellow Flying Papers mark placed centrally above the main hero statement.

### Category links

A centered section heading followed by four concise shopping-category links in a four-column arrangement.

### Outlined product cards

Product or category cards use strong #1a1a1a outlines, a measured 6px card radius, and colored surfaces including #8584bd.

### Oversized editorial statement

Large uppercase display copy is centered and treated as a visual event against an uninterrupted section background.

### Promotion tiles

Three centered promotional blocks for discount, affiliate, and holiday content, each with a short learn-more action.

### Measured component styles

- **Primary button** (“MENU MENU”): transparent background · text #000000 · radius 0px · padding 0px · 400 10px DegularVariable
- **Link** (“ROLLS ROLLS”): transparent background · text #f9cc73 · radius 0px · padding 0px · 400 10px DegularVariable
- **Card** (“PRE-ROLLED CONES SHOP”): background #8584bd · text #f9cc73 · border 3px solid #1a1a1a · radius 0px · padding 7px · 400 10px DegularVariable
- **Navigation item** (“MENU MENU”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px bergen_monoregular · uppercase

## Do

- Use broad, uninterrupted color fields as the main composition.
- Set major statements in huge, heavy uppercase display type.
- Center hero and section headlines.
- Use Warm Marigold #f9cc73 for key headlines and links.
- Keep navigation and utility labels small and monospaced.
- Use dark outlines to give product cards a poster-like edge.

## Don't

- Do not introduce unmeasured palette colors.
- Do not fill every section with lifestyle photography.
- Do not shrink display headlines into ordinary page headings.
- Do not add gradients or soft shadows as a default treatment.
- Do not crowd the page with dense navigation or interface chrome.
- Do not treat illustration-only colors as primary brand surfaces.

## Agent prompt

Build a new Flying Papers page as a graphic, playful storefront rather than a conventional catalog. Use Paper Magenta #ac4f98 and Indigo Slate #61609a for broad color fields, with Warm Marigold #f9cc73 as the primary headline and link accent; reserve Paper Cream #f9f5f2 and Soft Black #1a1a1a for readable contrast. Compose centered, oversized uppercase statements in a heavy display face, then keep navigation, captions, and shopping labels small and monospaced. Use spacious full-width sections, simple three- or four-column content groupings, and sparse illustrative imagery. Product cards may use colored surfaces and strong dark outlines, but keep most sections flat and unshadowed. Preserve the brand’s poster-like scale and playful age-check sensibility without copying the existing page’s exact content.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered oversized prompt and wordmark on a full-width color field, with stacked confirmation actions. | age confirmation, primary and secondary choice | oversized display type, centered wordmark, high-contrast control |
| 2 | category-nav | Centered section heading above four evenly distributed category links. | category shortcuts | uppercase section heading, four-column links |
| 3 | product-grid | Centered headline followed by a four-column product or category card area. | shop by category, view all | outlined cards, colored card surfaces, short shop links |
| 4 | product-grid | Centered oversized heading above a three-column set of accessory content. | shop accessories, view all | large uppercase headline, colored product cards, compact links |
| 5 | cta | Sparse full-width statement, centered in a spacious color field. | brand introduction | oversized display statement, high-contrast accent lettering |
| 6 | feature-grid | Three centered promotional blocks arranged in a three-column row. | learn more actions, promotional discovery | three-column tiles, bold headings, compact links |

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