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

# Fiasco · Design System

> Quiet editorial space, punctuated by a vivid yellow finish.

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

Fiasco’s homepage pairs spacious, restrained typography with a portfolio-led presentation of brand and digital work. An otherwise muted palette gives way to vivid yellow at the opening and closing, creating a distinctive frame around the page.

## North star

Let generous warm-neutral space and confident typography carry the page, reserving vivid yellow for unmistakable bookends.

## Overview

The visual strategy balances a quiet, warm-neutral canvas with near-black typography and generously spaced content. The screenshot shows a muted gray opening field and a large dark media panel; measured section data identifies the brand’s vivid yellow at the opening and final call to action, so reproduce that yellow as a deliberate, high-impact band rather than a pervasive accent. The work section relies on large project imagery, staggered presentation, and concise serif-led labels, giving the portfolio an editorial cadence. Area Normal supplies clean, contemporary sans-serif navigation, body copy, and large statements; HAL Timezone adds a contrasting serif voice to captions and selected headings. Content sits in open, largely borderless layouts with wide gaps between sections. The page moves from a bold introductory frame through selected work, process, client marks, and insights, then closes with a centered yellow contact prompt.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Olive Ink | `#1d1e19` | `--color-olive-ink` | brand | Primary text, navigation, dark media framing, and the filled pill-shaped approach CTA. |
| Gallery White | `#f8f9f3` | `--color-gallery-white` | surface | Main page canvas and light text on dark surfaces and buttons. |
| Soft Stone | `#e9eae2` | `--color-soft-stone` | neutral | Subtle card and tag surfaces against the lighter canvas. |
| Warm Concrete | `#a1a19c` | `--color-warm-concrete` | surface | Muted section band visible in the opening screenshot; not the main content canvas. |
| Electric Citron | `#fff714` | `--color-electric-citron` | accent | High-impact opening and closing section bands; use sparingly as a page frame. |

### Semantic aliases

`--color-canvas` → `#f8f9f3` (Gallery White) · `--color-surface` → `#1d1e19` (Olive Ink) · `--color-surface-2` → `#a1a19c` (Warm Concrete) · `--color-surface-3` → `#e9eae2` (Soft Stone) · `--color-text` → `#1d1e19` (Olive Ink) · `--color-text-muted` → `#f8f9f3` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d1e19` | `#f8f9f3` | 15.84:1 | AAA |
| `#1d1e19` | `#a1a19c` | 6.46:1 | AA |
| `#1d1e19` | `#e9eae2` | 13.84:1 | AAA |
| `#f8f9f3` | `#1d1e19` | 15.84:1 | AAA |
| `#f8f9f3` | `#a1a19c` | 2.45:1 | fail |
| `#f8f9f3` | `#e9eae2` | 1.14:1 | fail |

### Gradients

- `linear-gradient(rgb(29, 30, 25), rgb(29, 30, 25))`
- `linear-gradient(rgb(248, 249, 243), rgb(248, 249, 243))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| area-normal | `--font-body` | webfont | 400, 600 | Display statements, navigation, body copy, and primary buttons. | DM Sans |
| HAL Timezone | `--font-display` | webfont | 500, 400, 100 | Editorial headings, project labels, captions, and small category links. | Cormorant Garamond |

- **area-normal:** Use clean sans-serif forms and regular weights for large statements; semibold navigation and CTA text. Keep tracking subtly tight.
- **HAL Timezone:** Use serif contrast for selected headings and small metadata; keep captions lightly tracked and avoid making the whole page feel traditionally formal.

### Type scale — Perfect Fourth (ratio ≈ 1.348, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1.1 | -0.005em | — | area-normal | Large introductory agency statement. |
| h1 | 60.5px | 400 | 1.1 | -0.02em | — | area-normal | Primary page headline and prominent closing call to action. |
| h2 | 34px | 400 | 1.2 | -0.012em | — | HAL Timezone | Editorial section statements and featured project titles. |
| h3 | 30px | 400 | 1.2 | -0.013em | — | area-normal | Work, insight, and process section headings. |
| h4 | 22px | 500 | 1.2 | -0.018em | — | HAL Timezone | Secondary project and editorial headings. |
| body | 18px | 400 | 1.6 | -0.022em | — | area-normal | Project descriptions and agency explanatory copy. |
| caption | 12px | 400 | 2 | 0.01em | — | HAL Timezone | Project categories, metadata, and small editorial labels. |
| button | 18px | 600 | 1 | -0.022em | — | area-normal | Filled approach CTA and prominent action links. |
| nav | 18px | 600 | 1.5 | -0.022em | — | area-normal | Header navigation links. |
| link | 12px | 400 | 2 | 0.01em | — | HAL Timezone | Small category links and insight metadata links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 4, 8, 10, 12, 16, 18, 20, 24, 30, 32, 36, 120 px.
- Section rhythm 120px · element gap 4px · card padding — · max content width 940px.

Use a spacious, mostly single-column page with content constrained to the measured 940px maximum width. Keep the header unobtrusive and let a centered, oversized statement establish the opening. The portfolio uses a loose two-column rhythm with varied image placements; later client marks form a three-column grid and insights run as a compact horizontal feed. Maintain generous vertical separation between major bands, using the measured 120px section gap as the rhythm reference and small, deliberate gaps within components.

## Shape & elevation

- Radius: button `9999px` · card `8px` · link `9999px` · xs `8px` · sm `12px` · pill `9999px`
- Shadow `xl` (section): `rgba(0, 0, 0, 0.16) 0px 28px 80px 0px`
- Motion: standard transition `0.1s ease-in-out` on interactive elements.

Favor flat, borderless surfaces over card chrome. Portfolio images and insight thumbnails provide the primary visual layering; use clear whitespace instead of outlines to separate content. The measured extra-large shadow is confined to a section-level treatment, so avoid applying prominent shadows to every card. Keep tags and the approach CTA pill-shaped.

## Imagery

Treat project imagery as the main visual content: large, crisp portfolio photographs and branded project visuals sit directly within open layouts. Let each project retain its own color and identity rather than applying a shared filter. Use staggered image placement and concise adjacent captions to create an editorial gallery; client logos remain monochrome marks. The opening dark media panel is a prominent framed feature, not a cue to make the whole site dark.

## Components

### Header navigation

Compact wordmark at left with inline dark links across the top; use semibold Area Normal navigation on the light canvas.

### Hero statement

Large centered sans-serif agency statement with tight tracking, generous surrounding space, and a broad dark media panel below.

### Project gallery

A loose two-column portfolio presentation with large image-led work, short serif project labels, concise descriptions, and small rounded category tags.

### Approach CTA

Centered supporting statement followed by a dark, rounded pill with light semibold text.

### Client logo grid

Monochrome client marks arranged in an airy three-column grid without decorative card borders.

### Insights feed

Compact row of image-led editorial cards with serif headlines and small category and reading-time metadata.

### Contact close

Centered project invitation on the vivid yellow closing band, with dark text and a simple line of action.

### Measured component styles

- **Primary button** (“Our Approach”): background #1d1e19 · text #f8f9f3 · radius 800px · padding 8px 20px · 600 18px area-normal
- **Secondary button**: background #e9eae2 · text #1d1e19 · radius 44px · padding 0px · 400 20px area-normal
- **Link** (“Technology”): background #eceee8 · text #1d1e19 · radius 800px · padding 0px 12px · 400 12px HAL Timezone
- **Card** (“Building tomorrow, together: A new kind ”): transparent background · text #1d1e19 · border 1px solid · radius 0px · padding 0px · 400 20px area-normal
- **Navigation item** (“Work”): transparent background · text #1d1e19 · radius 0px · padding 0px · 600 18px area-normal

## Do

- Preserve the warm off-white canvas across content sections.
- Use Olive Ink for primary text and dark filled actions.
- Reserve Electric Citron for emphatic page framing.
- Pair sans-serif statements with selective serif editorial details.
- Let portfolio imagery retain its own colors and character.
- Use whitespace instead of borders to separate most content.

## Don't

- Do not turn the whole page into a dark theme.
- Do not use yellow as a routine link or button color.
- Do not surround every project with a bordered card.
- Do not force all portfolio images into uniform crops or treatments.
- Do not replace the loose portfolio rhythm with a dense dashboard grid.
- Do not use serif styling for every text role.

## Agent prompt

Build a new agency page in Fiasco’s editorial visual style. Use Gallery White (#f8f9f3) as the spacious content canvas and Olive Ink (#1d1e19) for navigation, copy, and dark pill CTAs. Introduce Electric Citron (#fff714) only as a bold framing band or decisive closing section; use Soft Stone (#e9eae2) for quiet tags and occasional light surfaces. Set large statements and practical UI in a clean sans-serif close to Area Normal, with a restrained serif such as Cormorant Garamond for project labels and editorial details. Keep layouts open, mostly borderless, and aligned to a measured 940px content maximum. Use generous vertical section spacing, image-led project work, an airy client-logo grid, and a compact insights feed. Avoid generic card chrome and do not recolor project imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Introductory canvas with a centered agency statement above a broad, dark media panel. | clear agency positioning, prominent media feature | oversized centered headline, dark media band, muted opening field |
| 2 | other | Centered section introduction on the light canvas. | sets portfolio context | centered serif-led copy, wide whitespace |
| 3 | gallery | Open two-column project gallery with varied image placements and captions. | project discovery, category labels | large project images, short serif titles, rounded metadata tags |
| 4 | gallery | Two-column visual section with a centered heading and a sequence of process imagery. | shows creative craft | centered section title, image-led content |
| 5 | cta | Centered explanatory copy with a compact pill CTA beneath. | approach introduction, single next step | centered text, dark rounded button |
| 6 | logo-cloud | Three-column client logo grid on the light canvas. | client credibility | monochrome logos, airy grid |
| 7 | content-feed | Compact horizontal row of image-led editorial items with a section heading. | article discovery, view-all link | thumbnail images, serif headlines, small metadata |
| 8 | cta | Centered closing contact prompt on a full-width vivid yellow band. | project inquiry, contact link | yellow section background, large dark heading |

## Source CSS custom properties (selected)

```css
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
--color-dark: #1d1e19;
--color-light: #e9eae2;
--color-accent: #1d1e19;
--color-success: #008000;
--color-error: #ee351c;
--text-color: #1d1e19;
--link-color: inherit;
--placeholder-color: #1d1e19;
--textselect-color: #fff714;
--background: #1d1e19;
--button-bg: #1d1e19;
--button-text: #f8f9f3;
```

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