Implementation
Responsive Density
Mobile (< md): Compact spacing (p-4, gap-3, mb-8) for maximum data visibility. Desktop (≥ md): Consistent spacing (p-4, gap-4, mb-8) maintaining clarity and scannability. Section spacing uses mb-8 consistently across both mobile and desktop for rhythm.
Cards: p-4 padding, rounded corners (not rounded-lg), border with border-neutral-200/800
Grids: gap-3 md:gap-4 for responsive spacing, grid-cols-2 lg:grid-cols-4 for stats
Typography: text-2xl font-normal for data values, text-xs font-light for labels
Sections: mb-8 for consistent vertical rhythm between major sections
Minimal Borders
Use subtle borders (border-neutral-200 dark:border-neutral-800) to define card boundaries and maintain clarity. Elements within cards are separated by space. Borders provide structure without visual weight for input fields. Minimal border-radius on cards and surfaces for subtle refinement.
Hover States
Change opacity (0.8 or 0.6), never change color. Transitions should be 300ms or 500ms. Everything should feel calm and considered.
Dark Mode
Invert the palette. White becomes neutral-950, neutral-50 becomes neutral-900. The emerald accent remains constant. Long transitions (500ms) make the switch peaceful.