fishies-ui/handbook/README.md

# The Fishies Handbook

How Fishies looks, reads, sounds and what its world holds, generated from the game's own sources. The living version, with every component drawn, is at https://fishies.lol/ui.

## Brand

### Brand

The five colours every store page, capsule, banner, the site and the Reef Journal sit on.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-ground` | `#0d4c78` | The ocean-blue ground behind the site, the Reef Journal and every brand picture. |
| `--fx-ground-ink` | `#edf5ed` | Words on the ground: headings and links on the site. |
| `--fx-on-gold` | `#06283f` | Dark words on a gold or other light fill: the current news tab, the go button of the installer. |
| `--fx-gold` | `#ffc46b` | The one warm accent: the thing to press, the coin, the playhead, a focus ring. |
| `--fx-sea` | `#83cfbd` | Sea-green for links and quiet highlights on the ground. |
| `--fx-muted` | `#adc3c7` | Body copy on the ground, a step quieter than the headings. |

### Gold

The toy gold of the HUD: a face, a rim and a darker foot that makes a button sit up.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-gold-light` | `#ffe2a6` | Gold words on glass: window titles, the clock, numbers that matter. |
| `--fx-gold-face` | `#ffe4a8` | The lit top of a gold button. |
| `--fx-gold-deep` | `#e59a3e` | The far end of a gold fill: a progress bar, the played part of a video. |
| `--fx-gold-foot` | `#c88a3d` | The solid edge under a gold button, its toy thickness. |
| `--fx-gold-warm` | `#ff9a6b` | Gold leaning to coral, where a fill runs warm (sunrise, a streak). |
| `--fx-amber` | `#f4c656` | The landing’s amber: the wordmark’s gleam and the reel’s titles. |

### Type

Baloo 2 for the game’s voice (numbers, labels, buttons, titles), Nunito for sentences; nothing under 12px.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-font-display` | `var(--font-display), "Baloo 2", ui-rounded, sans-serif` | Titles, numbers, buttons, labels. |
| `--fx-font-ui` | `var(--font-ui), Nunito, ui-rounded, sans-serif` | Sentences and anything read as text. |
| `--fx-t-xs` | `12px` | The floor: units, captions, a badge’s count. |
| `--fx-t-sm` | `13px` | Chips, list details, helper lines. |
| `--fx-t-md` | `15px` | Buttons, list titles, body copy in the game. |
| `--fx-t-lg` | `19px` | A panel’s title. |
| `--fx-t-xl` | `24px` | A stat’s value, a window’s hero number. |
| `--fx-t-2xl` | `31px` | A page heading. |
| `--fx-t-3xl` | `40px` | A moment’s headline (level up, a new fish). |
| `--fx-track-tight` | `-.015em` | Display type at size. |
| `--fx-track-label` | `.14em` | Upper-case eyebrows above a group. |

## UI

### Water

The deep blues under the glass; each one is the water a few metres further down.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-abyss` | `#04101b` | The deepest water: behind full-screen moments and the video frame. |
| `--fx-deep` | `#08202f` | A sunken well inside a panel: inputs, tracks, empty slots. |
| `--fx-deep-2` | `#0d2c3f` | A raised well: a hovered row, a chosen tab’s ground. |
| `--fx-deep-3` | `#14435c` | The lightest deep: dividers that need to show on glass. |
| `--fx-navy` | `#173d63` | The body of a round toy button (window controls, the player’s buttons). |

### Ink

Words on glass, in three weights; the quietest still reads at 6.7:1 on a panel.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-ink` | `#eef6ff` | Everything a player reads on glass: titles, values, labels. |
| `--fx-ink-2` | `rgb(238 246 255 / 80%)` | Sentences under a title. |
| `--fx-ink-3` | `rgb(238 246 255 / 62%)` | Captions, units and hints; never anything a player must act on. |
| `--fx-ink-blue` | `#a9c9ea` | Labels that name a value beside it (Level, Coins, Fish). |
| `--fx-ink-on-gold` | `#12304a` | Words on a gold button or a gold chip. |

### Tones

Six hues that tell kinds apart (an app tile, a chip, a chart line) and two that mean good and bad.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-tone-sky` | `#6cc8ff` | Sky blue: water, visits, anything about other keepers. |
| `--fx-tone-coral` | `#ff8f87` | Coral: reports, a count that wants you, the close button. |
| `--fx-tone-kelp` | `#7fdc8f` | Kelp green: live, online, growing. |
| `--fx-tone-violet` | `#b8a2ff` | Violet: rare things and night. |
| `--fx-tone-lagoon` | `#5cd8c6` | Lagoon: the landing’s shallow water. |
| `--fx-tone-mute` | `#8fa7b5` | Grey-blue: off, empty, not yet. |
| `--fx-good` | `#6fe3b0` | Done, fed, clean, saved. |
| `--fx-alarm` | `#ff8478` | Hungry, dirty, failed: what needs a hand now. |
| `--fx-pearl` | `#fff4d6` | Pearl: the warm white of a badge rim and the landing’s cream. |
| `--fx-cream` | `#f3dfb2` | Cream: the shaded side of a pearl knob, warm sand. |
| `--fx-plum` | `#36203f` | Plum: the landing’s deep warm shadow under cream. |

### Paper

The warm card the game writes on when a room opens a sheet over its painting: paper, three weights of brown ink, and the tan edge that gives it a foot.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-paper` | `#fbf1da` | The card itself: a room sheet, a close button, a small mark. |
| `--fx-paper-white` | `#fffaf0` | A field written into: the lightest paper. |
| `--fx-paper-lift` | `#fff8e6` | Paper lit from above: a card button under the pointer. |
| `--fx-paper-well` | `#e9d6ad` | A pressed-in place on paper: a button, a mark, a tile. |
| `--fx-paper-hover` | `#f1e2c0` | A well under the pointer. |
| `--fx-paper-edge` | `#b98d55` | The tan foot under a card or button, and its hairlines. |
| `--fx-paper-rim` | `#f6d987` | The pale gold ring round a tag standing off a card. |
| `--fx-paper-ink` | `#3b2414` | Brown ink: titles and values on paper. |
| `--fx-paper-ink-2` | `#6b4a2e` | Sentences on paper. |
| `--fx-paper-ink-3` | `#8a6a4a` | Captions and labels on paper. |
| `--fx-paper-tag` | `#c0392b` | A red tag on a shelf: a count, a warning. |
| `--fx-paper-ready` | `#5c8a3a` | A green tag: ready, on offer. |
| `--fx-paper-gold` | `linear-gradient(#ffe08a, #f2b23c)` | A gold button or chip on paper: the chosen kind, the way forward. |
| `--fx-paper-gold-edge` | `#a86f12` | The foot under that gold. |
| `--fx-paper-gold-ring` | `#f2b23c` | The ring round a chosen tag or an own listing. |
| `--fx-paper-alarm` | `#8a2c17` | A warning in ink on paper: held back, refused. |
| `--fx-paper-teal` | `#2d9682` | The band of recent sales over a price slider. |
| `--fx-focus-glow` | `#ffe08a` | The pale gold of a focus ring or a lit hover on a painted room. |

### Wood

The stall’s own timber: the plaques and buttons that stand on the counter beside paper and gold.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-wood-face` | `linear-gradient(#8f5a2b, #6a3f1c)` | A wooden plaque or button, lit from above. |
| `--fx-wood-edge` | `#43270f` | The dark foot under it. |
| `--fx-wood-rail` | `#6a3f1c` | The frame round a shelf board. |
| `--fx-wood-ink` | `#fff3d6` | Cream lettering on wood. |
| `--fx-wood-cord` | `#7a5a33` | The cord a tag hangs by. |

### Medal

Bronze, silver and gold: a tier’s flag, a rank’s disc, the tint of a tier named in words.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-medal-bronze` | `linear-gradient(180deg, #f0b583, #c47a43)` | Bronze, lit from above. |
| `--fx-medal-bronze-light` | `#f0b583` | Bronze as lettering on dark water. |
| `--fx-medal-bronze-foot` | `#8a5228` | The foot under a bronze disc. |
| `--fx-medal-bronze-ink` | `#3b1d08` | Lettering on bronze. |
| `--fx-medal-silver` | `linear-gradient(180deg, #ffffff, #b9c6d4)` | Silver, lit from above. |
| `--fx-medal-silver-foot` | `#8090a4` | The foot under a silver disc. |
| `--fx-medal-silver-ink` | `#23304f` | Lettering on silver. |
| `--fx-medal-gold` | `linear-gradient(180deg, #fff0bf, #f3b53f)` | Gold, lit from above. |

### Quality

The stone that marks a fish’s quality, one colour per grade, on dark water and (deeper) on paper.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-quality-bronze` | `#cf8f52` | Bronze quality, on water and on paper. |
| `--fx-quality-silver` | `#d6dee6` | Silver quality on water. |
| `--fx-quality-gold` | `#f3c453` | Gold quality on water. |
| `--fx-quality-diamond` | `#a8ecff` | Diamond quality on water. |
| `--fx-quality-purple` | `#c59bff` | Purple quality on water. |
| `--fx-quality-silver-paper` | `#aab7c4` | Silver quality on paper. |
| `--fx-quality-gold-paper` | `#e3ad2f` | Gold quality on paper. |
| `--fx-quality-diamond-paper` | `#58c6e8` | Diamond quality on paper. |
| `--fx-quality-purple-paper` | `#9d68e8` | Purple quality on paper. |

### Brass

The plates a painted room hangs on its walls: a name, a door, a thing to open. A brass face with a dark edge, a solid foot and a bright top line.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-brass-face` | `linear-gradient(180deg, #fff0bf 0%, #f0cd78 22%, #c99a45 60%, #a87a2e 100%)` | The plate itself, lit from above. |
| `--fx-brass-edge` | `#5a3a12` | The dark border round a plate. |
| `--fx-brass-foot` | `#2a170c` | The solid foot under a plate, and the shade of a painted room. |
| `--fx-brass-shine` | `#fff6d8` | The bright line along a plate’s top edge. |
| `--fx-brass-ink` | `#3a2416` | Lettering on a plate, and the dark dot of a door’s arrow. |
| `--fx-brass-glint` | `#ffe8b0` | The arrow on that dark dot. |
| `--fx-brass-wood` | `#3b2a1d` | The wall colour behind a room’s painting while it loads. |
| `--fx-brass-shadow` | `rgb(20 8 2 / 45%)` | The soft shadow a plate throws on the painting. |
| `--fx-brass-plate` | `0 3px 0 #2a170c, inset 0 1px #fff6d8, 0 6px 12px rgb(20 8 2 / 45%)` | A plate’s whole lift: foot, top line and shadow. |
| `--fx-brass-drop` | `0 8px 10px rgb(20 8 2 / 50%)` | The shadow under a painted door or object standing in the room. |

### Glass

The one material everything floats on: tinted water glass with a sheen across its top.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-glass-top` | `rgb(22 58 120 / 70%)` | The upper tint of glass. |
| `--fx-glass-bottom` | `rgb(8 26 66 / 88%)` | The lower tint of glass, darker so words sit on it. |
| `--fx-glass-quiet-top` | `rgb(22 58 120 / 62%)` | Glass over the live tank, a little thinner so the fish show through. |
| `--fx-glass-quiet-bottom` | `rgb(8 26 66 / 82%)` | The lower tint of quiet glass. |
| `--fx-glass-sheen` | `rgb(255 255 255 / 16%)` | The light across the top half of a pane. |
| `--fx-glass` | `linear-gradient(180deg, var(--fx-glass-sheen), transparent 46%), linear-gradient(180deg, var(--fx-glass-top), var(--fx-glass-bottom))` | A pane: windows, panels, menus, the dock. |
| `--fx-glass-quiet` | `linear-gradient(180deg, var(--fx-glass-sheen), transparent 46%), linear-gradient(180deg, var(--fx-glass-quiet-top), var(--fx-glass-quiet-bottom))` | A pane over the tank: HUD capsules, the fish card. |
| `--fx-glass-well` | `rgb(4 16 30 / 55%)` | The darker water inside a window, under its title bar. |
| `--fx-glass-blur` | `blur(14px) saturate(1.2)` | What glass does to the reef behind it (backdrop-filter). |

### Rims

A hairline of light round every pane; gold marks the panes that are yours to use.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-rim` | `rgb(140 200 255 / 34%)` | The blue hairline round glass. |
| `--fx-rim-bright` | `rgb(140 200 255 / 55%)` | The hairline on hover. |
| `--fx-gold-rim` | `rgb(255 196 107 / 58%)` | The gold hairline round windows, the dock, tiles and the chosen tab. |
| `--fx-gold-rim-quiet` | `rgb(255 196 107 / 26%)` | Gold dividers: under a title bar, between dock groups. |
| `--fx-rim-light` | `inset 0 1px rgb(255 240 210 / 30%)` | The lit inner top edge of a gold-rimmed pane. |
| `--fx-ground-rim` | `#9ebfbe26` | Hairlines on the ground: card edges and rules between sections of the site. |

### Depth

Soft lifts for panes over water, and the solid foot that makes a toy control look pressable.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-lift-1` | `0 2px 10px rgb(2 10 18 / 34%)` | A chip or a small button just off the water. |
| `--fx-lift-2` | `0 10px 30px rgb(2 8 20 / 45%)` | A panel, the dock, a menu. |
| `--fx-lift-3` | `0 24px 60px rgb(2 8 20 / 60%)` | A window or a moment that takes the screen. |
| `--fx-foot` | `0 4px 0 rgb(4 18 34 / 55%)` | The toy foot under a glass button or tile; pressing sinks into it. |
| `--fx-foot-deep` | `0 6px 0 rgb(4 18 34 / 55%)` | The foot under a desktop tile, which stands taller. |
| `--fx-plump` | `inset 0 2px rgb(255 255 255 / 40%), inset 0 -6px 12px rgb(0 0 0 / 28%)` | The lit top and shaded belly that make a tile round. |
| `--fx-on-water` | `0 1px 2px #020c1a, 0 4px 16px rgb(2 12 26 / 80%)` | The shadow under words that sit straight on the water. |

### Radii

Round, never sharp: the smaller the thing, the rounder it reads.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-r-sm` | `10px` | Rows, inputs, keys. |
| `--fx-r-md` | `14px` | Cards, menus, tooltips. |
| `--fx-r-lg` | `20px` | Panels and windows. |
| `--fx-r-xl` | `28px` | Desktop tiles and the dock. |
| `--fx-r-full` | `999px` | Buttons, chips, tabs, badges, tracks. |

### Spacing

A 4px grid: every gap, padding and margin is one of these.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-s-1` | `4px` | Inside a chip, between a value and its unit. |
| `--fx-s-2` | `8px` | Between an icon and its label, between chips. |
| `--fx-s-3` | `12px` | Inside a button, between rows. |
| `--fx-s-4` | `16px` | A card’s inset. |
| `--fx-s-5` | `24px` | A panel’s inset, between groups. |
| `--fx-s-6` | `32px` | Between sections of a page. |
| `--fx-s-7` | `48px` | Around a page’s hero. |

### Layers

Named heights, so a toast never slides under a window and a tooltip never under a toast.

| Token | Value | Use |
| --- | --- | --- |
| `--fx-z-raised` | `10` | A card lifted above its siblings (a dragged tile). |
| `--fx-z-sticky` | `100` | Headers and rails that stay as the page scrolls. |
| `--fx-z-dock` | `900` | The menu bar and the dock. |
| `--fx-z-modal` | `1000` | A window or sheet that holds the screen, with its backdrop. |
| `--fx-z-toast` | `1100` | Toasts, above any window. |
| `--fx-z-tooltip` | `1200` | Tooltips and open menus, above everything. |

### Motion

Named slots the motion system fills (apps/web/app/motion/motion.css, where each one is described): arrivals overshoot a little and settle, presses squash, exits get out of the way.

| Token | Value | Use |
| --- | --- | --- |
| `--m-quick` | `120ms` | A press, a hover, a check. |
| `--m-base` | `180ms` | A fade, a chip changing. |
| `--m-move` | `260ms` | Something travelling: a panel arriving, a row sliding. |
| `--m-show` | `400ms` | A moment: a window unfolding, a reward landing. |
| `--m-ease-out` | `cubic-bezier(.2, .8, .2, 1)` | Answers the hand: decelerates hard. |
| `--m-ease-spring` | `cubic-bezier(.34, 1.5, .64, 1)` | The reef-toy arrival: overshoots a little and settles. |
| `--m-ease-calm` | `cubic-bezier(.45, 0, .25, 1)` | Calm, symmetric: crossfades, drift. |
| `--m-ease-in` | `cubic-bezier(.4, 0, 1, 1)` | Leaving: accelerates away. |
| `--m-stagger` | `40ms` | Stagger step for lists. |

### Components

- **SystemIcon** · A painted icon from the system set, by name, at one of the set's sizes.
- **Button** · A plump toy button: glass for everyday actions, gold for the one thing to press, ghost for a quiet third choice, danger for what cannot be undone.
- **ButtonLink** · The same button as a link, for an action that goes somewhere.
- **RoundButton** · A round toy button for window controls, the video player and close; `label` is what it says to a screen reader.
- **Chip** · A small reading or choice: a dot of colour for a kind, an icon, or gold when chosen.
- **Badge** · A coral count bubble that sits on a tile, a dock item or a bell; a dot when the number does not matter.
- **Tag** · A gold-rimmed capsule for a small upper-case word beside a name (Beta, New, Admin).
- **Card** · A glass card: an optional eyebrow, a title and a few lines.
- **Panel** · A gold-rimmed glass panel with a title row (icon, title, actions) and a body.
- **Window** · A Keeper OS window frame: a title bar with round minimise and close buttons over a darker well.
- **Tabs** · A row of pill tabs in a sunken track; the chosen one is gold.
- **List** · A list of rows; each row has an icon, a title, a detail line and a value at its end.
- **ListRow** · One row of a list; a button when it does something, a link when it goes somewhere.
- **Field** · A labelled text field in a sunken pill, with an optional hint under it.
- **Toggle** · An on and off switch with a pearl knob; gold when on.
- **Tooltip** · A designed tooltip, never plain text: an icon and title, a line, and labelled values; it opens on hover and on keyboard focus.
- **Toast** · A notice that slides in at the edge: an icon in a coloured bubble, a title, a line and a close.
- **Stat** · A number a keeper reads at a glance: an icon, the value in gold with its unit, and what it counts.
- **DockTile** · A desktop tile: a plump glass square in its own hue holding an icon, a title under it, a badge and an open mark.
- **Dock** · A dock: a gold-rimmed glass shelf of icons; the app in front wears a gold bar, open ones a dot.
- **DockItem** · One icon on a dock.
- **Spinner** · The Fishies spinner for anything on its way: a glass porthole with a gold arc going round and bubbles rising.
- **Progress** · A progress bar: a glass channel filling with gold, a bubble riding its leading edge; with no value the gold sweeps.
- **Select** · A dropdown that opens a dark panel with a gold check, driven from the keyboard like a native one and never clipped by its panel.
- **Image** · The one way Fishies puts a picture on screen: a drop-in `<img>` that shows the Fishies spinner on a glass placeholder in its own box until the file is fully downloaded and decoded, then fades it in.

## World

### Reef Journal

- [Open Water](https://fishies.lol/wiki/mechanics/open-water) · Swim out as one of your fish and meet other keepers.
- [Sea folk](https://fishies.lol/wiki/mechanics/npcs) · Ollie, Marlo, Captain Shelby, Pip and Lumen live out in Open Water. Talk to them, make friends and hear their stories.
- [Characters](https://fishies.lol/wiki/npcs) · The neighbours out in the sea: where each one lives, how they talk, what they give and what they ask for.
- [Creatures](https://fishies.lol/wiki/creatures) · The wild creatures of the sea that are not fish: the jellyfish and the golden shoal.
- [Lore](https://fishies.lol/wiki/lore) · The stories of the sea, told by the game: the Lantern Keepers and what they left behind.
- [Expeditions](https://fishies.lol/wiki/mechanics/expeditions) · Send a team of your grown fish to the Trench or the Vents and wait for what they bring home.
- [Swimming in a friend's aquarium](https://fishies.lol/wiki/mechanics/swim-visits) · Join another keeper's aquarium as one of your own fish.
- [Halloween](https://fishies.lol/wiki/mechanics/halloween) · Trick-or-treating at other keepers’ aquariums while the Halloween party runs.
- [Places](https://fishies.lol/wiki/places) · Every Open Water place and every room behind a door: what stands there, what you find there and how to get there.
- [Events and seasons](https://fishies.lol/wiki/events) · The seasonal parties, the weekly contests and the things that happen out in the sea, with their dates, places and prizes.

### Places

- [Kelp Forest](https://fishies.lol/open-water/kelp-garden) · A coral garden that runs into a kelp forest, home to the Gallery and the Pineapple House. Bite the kelp for Kelp Fibre.
- [Wreck](https://fishies.lol/open-water/shipwreck) · An old ship asleep on the sand, lanterns still lit. A chest is hidden along it every week, and its crates give Driftwood.
- [Harbour](https://fishies.lol/open-water/market) · Stalls in the sunny shallows where keepers trade fish, eggs and food. The wanted board asks for new fish every week.
- [Lagoon](https://fishies.lol/open-water/lagoon) · Warm, bright shallows of seagrass and white sand. Play Pearl Catch at the oyster bed and open the clams for Lagoon Shells.
- [Arena](https://fishies.lol/open-water/arena) · An open stadium of coral stands round a start gate. Race the week's course for a place on the board.
- [Ice Shelf](https://fishies.lol/open-water/ice-shelf) · Pale water under an ice roof, frost ferns and ice spires. The seasonal parties are thrown here, and the spires give Ice Crystals.
- [Sunken Terrace](https://fishies.lol/open-water/ruins) · A sunken temple among fallen columns, its door sealed. Six lost tablets are hidden across Open Water, and the columns give Stone Shards.
- [Trench](https://fishies.lol/open-water/trench) · The dark deep at the reef's edge. Send a fish on an expedition into it from the diving bell.
- [Vents](https://fishies.lol/open-water/vents) · Warm volcanic chimneys glowing in the dark. Send a fish on an expedition from the outpost.
- [Pineapple House](https://fishies.lol/open-water/pineapple-house) · A house made from a pineapple, deep in the kelp. It is the reading room: tap it to open the Reef Journal.
- [Gallery](https://fishies.lol/open-water/gallery) · Keepers' aquariums, framed on the wall. Swim close to look inside.
- [The Temple](https://fishies.lol/open-water/ruins-temple) · Inside the sunken temple, where the first light is kept.
- [Cove](https://fishies.lol/open-water/cove) · Your school's own bay, with its banner and notice board.

### Catalogues

- [Collection pages](https://fishies.lol/wiki/collections) (24) · Every Reef Journal collection page: its pieces, where each one comes from and what finishing it pays.
- [Species catalogue](https://fishies.lol/wiki/species) (107) · Every fish in the game with its growth time, unlock level, egg price and sale value.
- [Quest log](https://fishies.lol/wiki/quests) (166) · Every quest in the game with its goals, its place in its chain and its reward.
- [Quest chains](https://fishies.lol/wiki/quest-chains) (23) · The storyline and every quest chain, step by step, with what opens each one and what it pays in all.
- [Achievement list](https://fishies.lol/wiki/achievements) (40) · Every achievement with its tier and reward. The hidden ones stay behind a spoiler.
- [Badges](https://fishies.lol/wiki/badges) (13) · Every badge a keeper can wear on a profile and how it is earned.
- [Decorations catalogue](https://fishies.lol/wiki/decorations) (74) · Every plant and ornament, what it costs and how long it keeps algae away.
- [Equipment catalogue](https://fishies.lol/wiki/equipment) (10) · Every filter, auto-feeder and heater with its price, unlock level and what it does.
- [Items](https://fishies.lol/wiki/items) (94) · Every food, material, tool, wardrobe piece and prize: what it does, where it comes from and what it is used in.
- [Workshop recipes](https://fishies.lol/wiki/recipes) (31) · Every mix the Workshop's bowl makes, with its ingredients, time, level and what comes out.
- [Research tree](https://fishies.lol/wiki/research) (45) · Every study and crown in the Research tree, with its branch, level, Notes, coins and what it opens.
- [Rooms, themes and floors](https://fishies.lol/wiki/styles) (23) · Every Room around the glass, every water theme and every floor, with how each one is unlocked.
- [Upgrades](https://fishies.lol/wiki/upgrades) (5) · The bench tiers, the expedition kits, more aquariums, enlarging and the slot gains, tier by tier.
- [Characters](https://fishies.lol/wiki/npcs) (6) · The neighbours out in the sea: where each one lives, how they talk, what they give and what they ask for.
- [Creatures](https://fishies.lol/wiki/creatures) (2) · The wild creatures of the sea that are not fish: the jellyfish and the golden shoal.
- [Lore](https://fishies.lol/wiki/lore) (1) · The stories of the sea, told by the game: the Lantern Keepers and what they left behind.
- [Places](https://fishies.lol/wiki/places) (18) · Every Open Water place and every room behind a door: what stands there, what you find there and how to get there.
- [Events and seasons](https://fishies.lol/wiki/events) (11) · The seasonal parties, the weekly contests and the things that happen out in the sea, with their dates, places and prizes.