| .. | ||
| 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;
labelis 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 · Swim out as one of your fish and meet other keepers.
- Sea folk · Ollie, Marlo, Captain Shelby, Pip and Lumen live out in Open Water. Talk to them, make friends and hear their stories.
- Characters · The neighbours out in the sea: where each one lives, how they talk, what they give and what they ask for.
- Creatures · The wild creatures of the sea that are not fish: the jellyfish and the golden shoal.
- Lore · The stories of the sea, told by the game: the Lantern Keepers and what they left behind.
- 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 · Join another keeper's aquarium as one of your own fish.
- Halloween · Trick-or-treating at other keepers’ aquariums while the Halloween party runs.
- 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 · The seasonal parties, the weekly contests and the things that happen out in the sea, with their dates, places and prizes.
Places
- Kelp Forest · A coral garden that runs into a kelp forest, home to the Gallery and the Pineapple House. Bite the kelp for Kelp Fibre.
- Wreck · An old ship asleep on the sand, lanterns still lit. A chest is hidden along it every week, and its crates give Driftwood.
- Harbour · Stalls in the sunny shallows where keepers trade fish, eggs and food. The wanted board asks for new fish every week.
- Lagoon · Warm, bright shallows of seagrass and white sand. Play Pearl Catch at the oyster bed and open the clams for Lagoon Shells.
- Arena · An open stadium of coral stands round a start gate. Race the week's course for a place on the board.
- 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 · A sunken temple among fallen columns, its door sealed. Six lost tablets are hidden across Open Water, and the columns give Stone Shards.
- Trench · The dark deep at the reef's edge. Send a fish on an expedition into it from the diving bell.
- Vents · Warm volcanic chimneys glowing in the dark. Send a fish on an expedition from the outpost.
- 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 · Keepers' aquariums, framed on the wall. Swim close to look inside.
- The Temple · Inside the sunken temple, where the first light is kept.
- Cove · Your school's own bay, with its banner and notice board.
Catalogues
- Collection pages (24) · Every Reef Journal collection page: its pieces, where each one comes from and what finishing it pays.
- Species catalogue (107) · Every fish in the game with its growth time, unlock level, egg price and sale value.
- Quest log (166) · Every quest in the game with its goals, its place in its chain and its reward.
- 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 (40) · Every achievement with its tier and reward. The hidden ones stay behind a spoiler.
- Badges (13) · Every badge a keeper can wear on a profile and how it is earned.
- Decorations catalogue (74) · Every plant and ornament, what it costs and how long it keeps algae away.
- Equipment catalogue (10) · Every filter, auto-feeder and heater with its price, unlock level and what it does.
- 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 (31) · Every mix the Workshop's bowl makes, with its ingredients, time, level and what comes out.
- Research tree (45) · Every study and crown in the Research tree, with its branch, level, Notes, coins and what it opens.
- Rooms, themes and floors (23) · Every Room around the glass, every water theme and every floor, with how each one is unlocked.
- Upgrades (5) · The bench tiers, the expedition kits, more aquariums, enlarging and the slot gains, tier by tier.
- Characters (6) · The neighbours out in the sea: where each one lives, how they talk, what they give and what they ask for.
- Creatures (2) · The wild creatures of the sea that are not fish: the jellyfish and the golden shoal.
- Lore (1) · The stories of the sea, told by the game: the Lantern Keepers and what they left behind.
- 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 (11) · The seasonal parties, the weekly contests and the things that happen out in the sea, with their dates, places and prizes.