Guidelines

The written design language, from the Flashquotes Design System export (Claude Design). The full source lives in public/design-reference/.

Hard rules

  • No gradients, no glassmorphism, no decorative imagery. Surfaces are white on slate-50 with hairline slate-200 borders.
  • Indigo #4F46E5 is reserved — primary CTA, focus ring, booked status, signature blocks. Never as a large fill in the operator app. The public booking flow swaps indigo for the operator's saved brand color.
  • Status dots, not colored backgrounds, for the quote lifecycle (Draft / Sent / Booked / Expired).
  • Avatars are rounded-lg (8px), not circular — a distinctive Flashquotes choice.
  • No trailing periods on button labels, badges, or short headings. Sentence case for descriptions.
  • Title Case for nav items and primary buttons; sentence case for everything else. No all-caps.
  • Hour format h:mm a (11:00 AM). Dates EEE, MMM d or MMM d, yyyy. Relative day labels: Today / Tomorrow / Yesterday.
  • Lucide icons only. No emoji, no hand-rolled SVGs, no unicode glyphs (⌘/Ctrl appear only inside <Kbd>).
  • No filler. No feature-highlight sections, no inspirational copy, no decorative stats. Every element earns its place.

Voice & behavior

Voice
Functional, professional, neutral. Direct, terse, never cute. Reads like Linear or Notion, not Mailchimp. No exclamation points except in success toasts.
Person
Mostly imperative (“Share via Email”, “Mark as sent”) and noun-headers (“Events today”, “Open Inquiries”). The operator app rarely says “you”; the public booking flow does (“Get started”, “Finish”).
Status language
Quote lifecycle is Draft / Sent / Booked / Expired. Empty states are matter-of-fact: “No events today”. Loading uses skeletons, not spinner text.
Interaction
Hover darkens color slightly (primary → indigo-700, ghost → slate-100); no shrink or scale transforms on press. Animation is sparing — Tailwind transitions and Radix fade-zoom only. No bounce, no spring, no scroll reveals.

Reference kits

Static HTML kits from the export, served as-is with the brand fonts and --fq-* tokens.

Operator app UI kit
Authenticated dashboard vocabulary: buttons, badges, cards, sidebar, tables, signature blocks, toasts, empty states, skeletons.
Public booking UI kit
Customer-facing flow: header, stepper, quote view, details form, contract, payment, receipt — themed by operator brand color.
Token stylesheet (--fq-*)
colors_and_type.css from the export — every token as a CSS variable, plus semantic type classes.
Full design-system README
Content fundamentals, visual foundations, iconography — the complete written spec.