frontend-ui-ux-design

name	frontend-ui-ux-design
description	Guide React component design for Fogo using the Fogo design system (Industrial Warmth, dark-first, Fogo amber brand color, Tailwind CSS). Use when designing UI, creating components, styling, or writing frontend code.
allowed-tools	["Read","Grep","Glob"]

Frontend UI/UX Design Skill

Design Authority

ALWAYS read DESIGN.md before any visual work. It is the single source of truth. Full token definitions: frontend/tailwind.config.js Component patterns and Tailwind recipes: docs/v2/fogo-mockups/shared-patterns.md Mockup index: docs/v2/fogo-mockups/README.md

Before building any page: DESIGN.md → shared-patterns.md → {page}-spec.md → {page}.html

Design System: Fogo (Industrial Warmth)

• Dark theme only, base #100F12
• Fogo amber (#D4952A) = brand color, AI presence, active states. Used ONLY for: active nav, Fogo card borders, action buttons in Fogo flows, logo, Fogo character glow.
• Teal (#7EC8D4) = data precision, chart lines, current-week highlight, data callouts. NOT for buttons. NOT the brand color.
• These are DIFFERENT. Amber = "Fogo is here." Teal = "look at this number."
• NEVER interchange them — they have distinct, non-overlapping meanings.

Fonts

• Satoshi (font-display): display headings, page titles
• Instrument Sans (font-body): body text, UI labels, buttons
• Geist Mono (font-mono): financial amounts, percentages, dates, stats

Numbers always in font-mono. Never body font for amounts.

Color Quick Reference

Purpose	Token	Value
Brand / AI presence	fogo-amber	#D4952A
Data precision	teal	#7EC8D4
Budget warning	semantic-caution	#D4A06A
Over budget	semantic-danger	#E8605A
Under budget	semantic-positive	#3DCF85
Income	semantic-income	#60C8B0
Expense (default)	semantic-expense	#9E83BC
FIRE progress (month-end only)	fire-gold	#C8922A

Key Component Rules

• Card radius: rounded-lg (10px) — not bubbly 16px, not stiff 4px
• Card: bg-surface-raised border border-border-subtle rounded-lg shadow-card p-6
• Fogo Card: bg-surface-raised border border-border-subtle border-l-2 border-l-fogo-amber rounded-r-lg p-5 px-6 shadow-[0_0_50px_rgba(212,149,42,0.05)]
• Max content width: 860px typical, 680px for conversational (Fogo messages)
• Sidebar: 200px fixed

Motion Rules

• No spring physics, no elastic bounce, no confetti
• Max duration: 300ms
• Enter: ease-out, Exit: ease-in
• Fogo typing indicator: slow pulse (1.4s), animate-fogo-pulse

Fogo Character Placement

Location	Size	Present?
Dashboard narrative	140px	YES — amber glow
Review (Reflect + Plan)	160px+	YES — full emotional range
Ask Fogo (chat)	48px avatar	YES
Transactions, Analytics, Budget, Settings	—	NO — absence is intentional

Anti-Patterns (Never Do)

• No glassmorphism / backdrop blur on cards
• No gradient buttons
• No spring/elastic animations
• No confetti
• No emoji as design elements in JSX
• No teal on buttons (teal = data only)
• No amber on non-Fogo elements
• No red for expenses (use semantic-expense muted purple)

Surface Hierarchy (in order)

bg-surface-base     #100F12  — app shell
bg-surface-raised   #18171B  — default cards
bg-surface-overlay  #201F24  — hover, expanded rows
bg-surface-float    #28272D  — dialogs, popovers, inputs

Component Patterns

See docs/v2/fogo-mockups/shared-patterns.md for full recipes with Tailwind classes. See docs/v2/fogo-mockups/shared-progress-bars.md for progress bar variants. See docs/v2/fogo-mockups/sidebar-spec.md for sidebar layout and pulse component.

Uppercase Labels

UI chrome labels (e.g., GROCERIES, THIS WEEK) use:

font-mono text-data-sm text-text-tertiary uppercase tracking-label

where tracking-label = 0.08em.

Last Updated

2026-04-02 — Updated for Fogo rebrand and new design system