Usability system
How the site behaves. Rules for navigation, content structure, states, accessibility, ads, and responsive layout.
Principles
Same shape every time
Every entry, card, and category page uses one structure. A reader who has seen one fish knows where everything is on the next.
Answer first
The quick-fact grid sits above the fold on every entry. Long text comes after, never instead.
Plain names, then Latin
Common trade name leads. Scientific name is always present, always italic, always second.
Ads never interrupt data
Ads sit between sections, never inside fact grids, parameter tables, or the first screen of an entry.
Site map & navigation
Accessibility
Body text 15px minimum, 17px in long-form. Contrast 4.5:1 or better in both themes.
All interactive targets 44px minimum height on touch layouts.
Colour is never the only signal: tags carry text, filters carry a border change.
Every image has alt text naming the species and view.
Headings are sequential. One h1 per page, sections are h2, cards are h3.
Search input has a visible label or aria-label and a visible submit button.
Dark theme is a full palette, not an inversion; ads and placeholders re-theme too.
Theme
Two themes, light and dark. Both are full palettes; no component may use a colour outside them except the footer and featured banner.
Default follows the operating system preference (prefers-color-scheme). A visitor who has never pressed the toggle sees their system theme.
Pressing the toggle overrides the system and is remembered in local storage. No account, no cookie.
The toggle is in the header on desktop, in the menu on mobile, and in the footer on both. Its label names the theme you will switch to.
Switching cross-fades colours over 200ms. Nothing moves, nothing reloads, scroll position is kept.
Ads, placeholders, striped image slots, and form fields re-theme with the page. Photos do not change.
Both themes meet 4.5:1 for body text and 3:1 for UI borders.