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.

Fiasco design system
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
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7











