fiasco.design — Design Reference

1. Visual Theme & Atmosphere

Fiasco Design is a creative agency whose visual identity embodies structured chaos with editorial sophistication. The off-white canvas (#F8F9F3) — slightly green-tinted — creates warmth that differentiates it from clinical whites. The typographic system is the most layered in this collection: three distinct typefaces (Area Normal, HAL Timezone, Gooper) each occupying a strict role, with the serif-sans-serif switching creating constant typographic rhythm.

The color palette is a curated set of bold, named brand hues: yellow, green, blue, pink, orange — each with tint and shade variants. The yellow (#FFF714) appears as a full-page page transition wipe, making the transition itself a brand moment.

2. Color Palette & Roles

Every brand color has tint (+lighter) and shade (+darker) variants, plus an off-black tint at 5% opacity for subtle surfaces.

3. Typography Rules

Three typefaces, three distinct roles — no overlap:

HAL Timezone is a distinctive display serif with clock/timezone associations. Gooper at 700 uppercase is a structural accent — used for short, punchy labels. Area Normal at 20px body copy is unusually generous.

4. Component Stylings

• Cards: Near-flat (3–4px radius), using brand color fills from the full palette
• Pill buttons: 800px radius — fully pill-shaped for CTAs
• Update tiles: Brand-colored backgrounds (orange, blue, pink) — article.tile-update
• Page transition: Full-screen yellow wipe (div.c-PageTransition)
• Forms: Textarea with 5% off-black tint background, 193px border
• CTA buttons: Blue fill (#204CE5) from WordPress form submit
• Small shadows: 1px card shadow (rgba(18,25,97,0.08)) and large overlay shadow (28px, rgba(0,0,0,0.16))

5. Layout Principles

• 24 breakpoints — extremely granular, hand-crafted responsive system
• Spans from 200px (narrow) to 1600px+
• Section padding minimal (0px) — content is flush, controlled by inner padding
• Typography-led composition — section areas defined by type blocks, not card grids
• 44px large pill used for primary interactive elements

6. Depth & Elevation

• Cards: 1px ambient shadow in brand blue-tinted dark (rgba(18,25,97,0.08))
• Overlays: 28–80px deep drop shadows for floating/popup elements
• No backdrop blur — shadows are decisive, not diffuse
• Surfaces are defined by background color fills, not elevation shadows in the flat sense

7. Do’s and Don’ts

Do:

• Alternate between Area Normal and HAL Timezone for heading hierarchy
• Use the full brand color palette — each color has a designated context
• Apply the yellow page transition wipe as a brand signature
• Use Gooper uppercase at 700 for short, high-impact labels
• Set body copy at 20px — the generous size is part of the identity

Don’t:

• Mix typefaces beyond the three-family system
• Use rounded corners on cards — keep radius at 3–4px (near-flat)
• Apply brand colors arbitrarily — orange for updates, blue for links, yellow for transitions
• Reduce body type below 20px — the generous scale is intentional

8. Responsive Behavior

• 24 breakpoints from 200px to 1600px — one of the most granular systems possible
• Typography scales through multiple stages — not just mobile/desktop
• Tile layouts reflow from multi-column to single-column progressively
• Brand color assignments are preserved across all breakpoints

9. Agent Prompt Guide

“Design in the style of fiasco.design: green-tinged off-white canvas (#F8F9F3), three-typeface system — Area Normal for display body, HAL Timezone serif for editorial headings, Gooper bold uppercase for labels. Rich named brand palette: yellow, green, blue, pink, orange — each used in specific contexts. Near-flat card corners (3–4px). Pill-shaped CTAs (800px radius). Yellow full-screen page transitions. Shadow using brand-tinted dark.”

Generated by Sparkbites — extracted from live CSS analysis