Array Ui Review

Array UI Review (array-ui-review)

Audit technical frontend code and running pages against the Array UI design rules. Do not restyle code while auditing; list every violation with file and line number, state the invariant it violates, and provide a one-line fix.

1. Automated Code Searches

Run these audit commands across src/ (or the project root):

bashCopy code
# 1. Custom CSS files (Violates Invariant 1: 0% Custom CSS)
find src/ -name "*.css" ! -name "globals.css" ! -name "styles.css" ! -name "tokens.css" ! -name "shadcn.css"

# 2. Page-level <style> blocks (Violates Invariant 1: 0% Custom CSS)
grep -rnE "<style" src/

# 3. Ad-hoc inline margin/padding hacks (Must use <Gutter> or Layout primitives)
grep -rnE "style=\{\{[^}]*(margin|padding|background|color)" src/

# 4. Heavy drop shadows (Array UI uses flat card surfaces with 1px hairlines)
grep -rnE "shadow-(md|lg|xl|2xl)" src/

# 5. Arbitrary gradients (Gradients are strictly prohibited)
grep -rnE "bg-gradient-to|from-[a-z]+-[0-9]+|to-[a-z]+-[0-9]+" src/

# 6. Bouncy / pill buttons (Buttons must be machined with radius-md / 6px)
grep -rnE "rounded-full|rounded-2xl|rounded-3xl" src/

# 7. Unwrapped action buttons or status indicators (Must be wrapped in <Tooltip>)
# Check for bare <Button>, <ThemeToggle>, or <PingStatus> without a parent <Tooltip>
grep -rnE "<Button|<ThemeToggle|<PingStatus" src/

# 8. Outdated dark crimson (#e60012 must be #ff3344 in dark mode)
grep -rnE "#e60012" src/

2. Visual & Architectural Invariants Checklist

1. Font Enforcement:
   • Is Google Fonts (Assistant, IBM Plex Mono, Lora) imported in globals.css or <head>?
   • Does body have font-family: var(--font-sans)?
   • If missing, text defaults to system Inter/Arial, breaking the editorial look.
2. PageShell Usage:
   • Is the page framed inside <PageShell navbar={<Navbar ... />} footer={<Footer ... />}>?
   • If a page has custom ad-hoc layout wrappers or manual margins, flag for replacement with PageShell.
3. Footer Elegance:
   • Is the footer rendered on flat canvas (bg-background) with border-t border-border?
   • Are links inline with subtle hints (hint), without heavy box badges stretching the row?
   • Are social handles rendered using <SocialPill>s with tooltips?
4. Visual Rhythm (Anti-Card-Soup):
   • Are there consecutive stacks of identical cards or symmetric blocks?
   • Did the page alternate prose with dense telemetry (Terminal, DiffBlock, ParamTable) and editorial quotes (Maxim)?
5. Action Clarity (Tooltip Wrapping):
   • Is every action button, icon trigger, theme toggle, and status dot wrapped in <Tooltip content="...">?

3. Reporting Format

Output findings as a prioritized numbered list:

Copy code
1. src/pages/index.tsx:34  Bare icon button without <Tooltip>.
   Rule: Every interactive control must be wrapped in <Tooltip>.
   Fix: Wrap <Button size="icon"> in <Tooltip content="Copy commit SHA (⌘C)">.

2. src/app/globals.css:1  Missing Google Fonts import for Assistant and IBM Plex Mono.
   Rule: Mandatory Font Enforcement.
   Fix: Add @import url("https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700;800&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lora:ital,wght@0,400..700;1,400..700&display=swap");

3. src/components/Footer.tsx:18  Footer uses bg-card/60 with heavy padding.
   Rule: Footer must sit on flat canvas (bg-background) with hairline top border.
   Fix: Replace background with bg-background and ensure links are inline with subtle hints.