Skip to content
Library

Fiasco. Warm off-white canvas with confident black type and single-color project cards.

  • Studio
  • Light theme
  • 13 colors
  • 4 typefaces

Fiasco operates in an editorial, gallery-like register: a warm off-white canvas (#f8f9f3) with near-black text (#1d1e19) creates a hushed paper feel, while every project card introduces a single vivid color field that acts as wayfinding rather than decoration. The type system pairs a geometric sans (area-normal) for body and interface with a more characterful display family (Gooper) for headlines, giving the page an italic, magazine-like confidence. Components are deliberately unembellished — pill-shaped buttons (800px radius), 8px-cornered cards, 3px input fields, and a 40px radius reserved for hero and feature surfaces. Color appears as sparse, deliberate punctuation: yellow, pink, blue, orange, green blocks behind work, while the rest of the system stays in warm neutrals so the colored surfaces read as the loudest thing in the room.

Screenshot of Fiasco
Captured from fiasco.design on October 11, 2026

Fiasco design system

Fiasco

Brand2

  • Featured project card fill, callout blocks — the loudest accent, reserved for hero-grade emphasis

  • Filled button background — the only chromatic action in the system, used sparingly

Accent4

  • Project card background, soft accent block

  • Project card background, cool accent block

  • Project card background, warm accent block

  • Project card background, rare accent block

Neutrals7

  • Footer background, deep surface for dark sections

  • Primary text, nav borders, link borders, all structural outlines

  • Input text, deep navy utility for form labels

  • Input border, muted form fields

  • Card and hero box-shadow base, low-contrast elevation

  • Nav borders, icon strokes, subtle dividers, secondary borders

  • Page background, button borders, soft surface

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Carbon on Sulfur Yellow

16.07 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.