Design Guidelines

Palette

• Primary: sky-600 (hover sky-700) on white
• Subtle: sky-50 backgrounds, sky-100 borders, sky-900 headings
• Text: slate-800 body, slate-500 meta
• Status-only: green-600 success, red-600 error

Typography

• Font: Inter (via next/font)
• Base: 16px / 1.5 line-height
• H1: 28–32px, H2: 22–24px, labels: 12–13px medium

Whitespace

24–32px vertical rhythm on desktop; slightly tighter on tablet/phone. Components are airy, with rounded-2xl corners and soft shadows only on cards.

SVG Backgrounds

Subtle geometry (2–4% opacity grid/noise/diagonal) applied only to the page shell, never inside cards.

Components

• Cards: border sky-100, background sky-50/40–60, title in sky-900
• Buttons: primary bg-sky-600 hover:bg-sky-700 text-white
• Breadcrumbs: slim separators, muted text except final crumb

@theme in CSS

Define tokens in app/globals.css using Tailwind’s @theme and reference via utilities. (Not included here since you asked for TS/TSX only.)