Design system
The visual rules for ilovethatfish.com. Field-guide clarity with a warm, hobbyist tone. Two fonts, one accent, one warm counter-accent, light and dark themes.
Color
Type
Sora for headings (500–700). Public Sans for everything else (400–600). Scientific names always italic, muted.
Spacing & shape
Page gutter 40px desktop, 20px mobile. Cards 6px radius, images 4px, chips and buttons full pill. Borders 1px var(--line); no drop shadows inside the page.
Light and dark
Dark is a separate palette, not an inversion. Accent lightens to keep 4.5:1 on dark surfaces; the accent-ink flips to near-black so buttons stay legible.
Mobile
One breakpoint at 700px. Below it every template becomes a single column. The type scale is unchanged except the hero heading; touch targets are 44px; the page gutter is 20px.