schema-apps: visual design overhaul

[melvincarvalho]

By Charlie 🤖. A bolder visual pass on app.css — Linear / Stripe / Vercel docs aesthetic.

Design direction: refined depth, tighter typography, cohesive accent-driven palette.

What changed

Header band

• Added a subtle dot-grid texture overlay (mask-faded, not distracting)
• Stronger sheen highlight for depth
• Refined icon: smaller (48→24), tighter radius, glassmorphism with blur
• Tighter type label: .65rem, wider tracking (.16em), heavier weight

Typography scale

• Body: 15px (down from 16) for tighter feel, line-height 1.65
• Row labels: .78rem uppercase with tracking — clearly secondary
• Row values: .92rem, ink-2 color for softer read
• Title: 1.55rem, tighter letter-spacing (-.02em), 800 weight

Spacing & rhythm

• Card body: 1.75rem padding (up from 1.6)
• Row gaps: tighter .75rem grid gap
• New surface color for inputs/rows instead of hardcoded values
• Consistent radius system: 20px card, 10px small elements

Color & elevation

• New ink-2, muted-2, line-2 for layered depth
• Darker code block (#0d1117) with border — matches GitHub dark
• Softer background gradients (10% opacity, down from 14%)
• Card hover: -3px lift with eased cubic-bezier

Inputs

• Surface background instead of near-white
• Hover state: slightly darker border
• Focus: surface → white transition, tighter ring shadow

Footer

• muted-2 color, smaller .78rem, slight letter-spacing

No HTML/JS touched. All 7 apps pass gate.