UI Review

UI Review

Verify frontend changes comply with Swiss International Style before committing.

Step 1: Run Automated Checks

# Forbidden rounded corners
rg 'rounded-(sm|md|lg|xl|2xl|3xl|full)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden gradients
rg '(bg-gradient|from-|via-|to-)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden soft shadows
rg 'shadow-(sm|md|lg|xl|2xl|inner)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

# Forbidden blur
rg '(blur-|backdrop-blur)' apps/frontend/ --glob '*.{tsx,jsx,css}' --no-heading -n

Step 2: Manual Review

For each changed file check:

Colors

• Background: Canvas #F0F0E8 or white
• Text: Ink #000000
• Links: Hyper Blue #1D4ED8
• Success: Signal Green #15803D
• Error: Alert Red #DC2626
• No colors outside the Swiss palette

Typography

• Headers: font-serif
• Body: font-sans
• Labels: font-mono text-sm uppercase tracking-wider

Borders & Shadows

• All elements: rounded-none
• Borders: border-2 border-black
• Shadows: hard shadow-[Xpx_Xpx_0px_0px_#000000]
• Hover: translate into shadow space

Components

• Buttons: square corners, hard shadow, press effect
• Cards: white bg, black border, hard shadow
• Inputs: rounded-none, black border

Anti-Pattern Quick Scan

Flag immediately if found in changed files:

Step 3: Report

[FAIL] file:line - Description of violation
[WARN] file:line - Potential issue to verify
[PASS] All checks passed

Reference

Full design system: docs/agent/design/style-guide.md

Converted and distributed by TomeVault | Claim this content