Frontend Design — Comanda

Build distinctive, production-grade frontend interfaces. Avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic detail and creative choices.

Editorial line (NON-NEGOTIABLE — Comanda design system)

This skill operates inside the Comanda project. The "bold aesthetic direction" below is bounded by these locked decisions. Creative freedom lives in composition, density, hierarchy, motion register, and surface treatment — NOT in palette/type/iconography substitutions.

Fonts (Google Fonts, no substitution):

• Bricolage Grotesque 700–800 — titles, KPIs, large numbers
• DM Sans 400–600 — body, labels, buttons
• JetBrains Mono 400–500 — order IDs, prices, timestamps

Palette (locked semantic tokens):

• Brasa primary #FF5A1F · Limão accent #C7F23B
• Canvas bg #FBF8F4 · Surface #FFFFFF · Inverse sidebar #0B0B0F
• Sucesso #00A656 · Atenção #FFB020 · Erro #E5304A · Info #2563FF

Surface rules:

• Sidebar always #0B0B0F; active item rgba(255,90,31,0.16)
• Cards: radius 16px, warm shadow (no blue tint), never border + shadow together
• Buttons: radius 12px, min height 44px, primary #FF5A1F
• Numbers: always tabular-nums + font-variant-numeric
• Currency: R$ 1.234,56 (space, comma decimal)
• KDS: bg #0B0B0F, cream text #FBF8F4, max contrast
• Touch targets ≥ 44×44px (56–64px in KDS/PDV)

Forbidden in operational UI:

• Gradients (allowed only in marketing/LP)
• Emoji in interface
• Generic stacks (Inter, Roboto, Arial, default Space Grotesk reach)
• Cliché purple-gradient-on-white aesthetics
• Border + shadow on the same card
• Decimal point with period in currency
• Icons outside Lucide (stroke 2, 24px default)

Copy: Brazilian Portuguese, sentence case.

Motion: max 320ms, ease-out for entries, bounce for positive confirmations. Button press scale(0.97) over 80ms. Card hover translateY(-2px) + larger shadow. Always respect prefers-reduced-motion.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Design thinking (before coding)

Within the locked editorial line above, commit to a clear point of view per surface:

• Purpose — What problem does this interface solve? Who uses it? (operator on the floor, kitchen at distance, owner on the phone, customer at the table…)
• Tone within the line — Pick a register: editorial-restrained, dense-operational, brutalist-dark (KDS), warm-hospitality (cardápio), playful-confident (LP). The palette and fonts don't change; the composition, density, motion, and emphasis do.
• Constraints — Framework, performance, a11y, target device (KDS = monitor at 2m, PDV = touch totem, garçom = phone in motion).
• Differentiation — What makes this surface unforgettable inside the Comanda DS? One signature gesture per screen.

CRITICAL: Intentionality, not intensity. Refined and bold both work — execute with precision.

Then implement code that is:

• Production-grade and functional
• Visually striking and memorable WITHIN the editorial line
• Cohesive with a clear point of view
• Meticulously refined in every detail

Where creative freedom lives

You may push hard on:

• Composition, asymmetry, grid-breaking, overlap, diagonal flow
• Density vs. negative space (controlled density for operational; generous space for marketing)
• Hierarchy and visual weight using the existing token scale
• Motion choreography (within the 320ms / ease-out budget)
• Surface treatment: warm shadows, layered transparencies on canvas, noise/grain ON CANVAS ONLY (never on operational tables)
• Decorative borders, custom cursors, signature micro-moments

Match implementation complexity to the vision. Maximalist marketing surfaces may use elaborate motion and texture. Operational surfaces (KDS/PDV/Pedidos) demand restraint, precision, tabular alignment, instant readability.

Don't hold back — but never break the editorial line to do it.