Design System
fiskce.com is drawn in a notebook: dotted paper, a blue pen, sticky notes and bits of tape, with everything a little crooked. The games are drawn in the same hand. This page shows the kit they're all made from, and you can download every icon for free.
Colours
Every colour is a custom property on :root in app/globals.css. The site is light only, like a real notebook.
Paper & ink
Dotted paper, dark ink, a grey pencil for the quiet bits and a blue ballpoint for anything you can click.
- paper
--paper#fbf8f1the page - card
--card#ffffffindex cards, photos - ink
--ink#2b2a33text, headings - pencil
--pencil#6b6a75secondary text - pen
--pen#2f5bd3links, accents, doodles - margin
--margin#eaa7a7the red margin line - dot
--dotrgba(43, 42, 51, .14)the paper's dot grid - rule
--rulergba(47, 91, 211, .16)ruled lines
Sticky notes
Four pads of sticky notes. Each sits on its own and never carries meaning alone.
- yellow
--yellow#fff1a8.sticky.yellow - pink
--pink#ffd6e2.sticky.pink - mint
--mint#cfeedd.sticky.mint - sky
--sky#d3e7ff.sticky.sky
Tape & highlighter
Translucent, so the paper shows through.
- tape
--tapergba(255, 238, 170, .75).taped, .photo - hl
--hlrgba(255, 222, 80, .75)<mark>
Markers & pens
The washes laid in under the icons' ink, and the pens they're drawn with: Sebastian's red felt-tip and Ms. Margin's green.
- yellow
#ffe57amarker wash - pink
#ffc2d4marker wash - mint
#b6e6cbmarker wash - sky
#bcd9ffmarker wash - peach
#ffd2b0marker wash - lilac
#dccbf5marker wash - red
#d1343bpen - green
#2e8a57pen
Type
Two families from Google Fonts, served by the site itself (next/font).
Caveat · var(--hand) · 500, 600, 700
Hi, I'm Mathias!
Section titles, 46 to 68 px
Margin notes, menus and sticky notes, 22 to 36 px
The handwriting: headings, navigation, notes in the margin. Never for body text.
Nunito · var(--sans) · 400, 600, 700
The quick brown fish jumps over the lazy herring.
Body text is 17 px on a 1.7 line height, at most 60 characters a line. Meta lines are 14 px, 600, in pencil. Bold is 700.
The print: everything you read, and every label on a form or a button.
Paper props
The pieces every page is built from. Each is one class, and they combine.
.sticky.yellow .taped .tilt.card .taped.ruled
a taped photo.photo .tilt--r sets the angle. It straightens on hover and tilts a third as much on phones.style="--r: 1deg"Text with a highlighter stroke and a pen link that wiggles when you point at it.
<mark> aDoodles
(10)Pen strokes for the margins: <Doodle name="arrow" />. They take the pen colour and stretch to any box.
squiggleunderlinearrowarrowLeftarrowUpLeftarrowUpRightcircletickcaretperson
Icon pack
(302)Every icon on the site, drawn by hand. Download the lot, or click any icon to save just that one. Two exceptions: Merger Moo's company logos are parodies drawn for the game, shown here but not part of the free pack, and the julekalender's clues stay taped shut until their doors open.
<symbol> in one file, for <use>.fiskce-icons.svgScribbles (155)
Every icon in Fiskilization: units, buildings, resources, buttons, faces and memes. Pen strokes on a 40 × 40 grid, a few with a marker wash laid in under them.
Merger Moo scribbles (55)
Every drawing in Merger Moo: cows, dice, the product cards, the news, the screens and the four dairy bosses (all made up), in the same pen on the same grid. Its buttons are Fiskilization's, so they're above.
Merger Moo logos (12)
The twelve dairies of Merger Moo, drawn the same way. Each one keeps a single small cue of a real dairy's logo, adds a twist on its parody name and has no lettering at all. A parody. Not affiliated with any real dairy.
Not in the pack. These logos are parodies drawn for the game, so they're shown here but aren't part of the free pack: there's no file to download, and they're not in the ZIP or the sprite.
River Horse scribbles (4)
Every drawing in River Horse: the hippo having its bath, the eye you peek with, a roll of masking tape and the glue diary, in the same pen on the same grid. Its How to play book is Fiskilization's, so it's above.
Tight Lines scribbles (14)
Every drawing in Tight Lines: the Danish fish (the herring in its sunglasses, the garfish with its green bones and without), the mystery catches (an old boot, a shopping trolley and a sea trout, which is the fiskce fish on the line), the rod, the reel, the float and the angler's diary. Its How to play book is Fiskilization's, so it's above.
Ink & Dust scribbles (6)
What the site draws Ink & Dust with: the cowboy hat on its box on the games shelf, and its cover's cast, a smiling saguaro, a tumbleweed in a hurry, a wanted poster with a friendly face to pin on it, and the blue ballpoint the whole Notebook West is drawn in. The game's own drawings live in the game.
Julekalender (12)
The props of Hvem tog stjernen?, the julekalender: the tree in green biro, pressed far too hard, its gold glitter star and the empty tape it leaves behind, the paper doors, the sealed envelope and the nisse who sits on the shut ones. The suspects' portraits come from their own games.
Julekalender clues (24)
The 24 clues of Hvem tog stjernen?, one drawn for every door and pinned to the evidence board, in the same pen on the same grid.
Not in the pack yet. Each clue gives a little of the story away, so each one stays taped shut here until its door opens by your own calendar, the same day as on the julekalender. They all join the free pack after Christmas.
Games shelf (6)
The props of the games shelf, where every game on the site sits: the shelf, its plank (drawn long, to stretch) and a bracket, today's ticket for each daily game, and the cupboard the julekalender waits in, taped shut until December and swung open in it.
Network (14)
Everything drawn for the network page: the comic's house, parcel, gossip, signed note, binned fib, big switch and handshake, then the prefix tag, the drawing pins, the seal, the tally marks and the jetty with its boats. The narrator, the cat in the router box, is Fiskilization's, so it's above.
Seasons (1)
Drawings for the days the homepage marks, like the goose that turns up on its Mortensaften note every 10 November, cackling.
Covers (20)
What the homepage's project covers are drawn with: a security camera that boxes, a pigeon that boxes back, a hippo made of masking tape, routers gossiping, gauges in the green, a monk who keeps the books, a pencil for a rod, a corner of a hex map, and Denmark in Merger Moo's 34 districts, drawn lighter. The words on the covers are lettering, so they aren't here.
404 (2)
The page you get when a page is missing: the page itself, torn out of the notebook, and the logo fish looking for the one you wanted through a magnifying glass.
Logo (3)
The fiskce wordmark with the fish as the dot of its i, the fish on its own, and the favicon's sticky note.
No icons match that. Try fish, arrow or cheese.
Using the icons
As an image
Each file stands alone. In an <img> the ink is black.
<img src="fish.svg" width="40" height="40" alt="A fish">From the sprite
Inline, the ink is currentColor, so it follows your text colour. The marker washes keep theirs.
<svg width="24" height="24" style="color: #2f5bd3">
<use href="fiskce-icons.svg#fish"/>
</svg>Credit
Put this somewhere people can see it, such as a footer, an about page or your credits. If you changed the icons, say so.
Icons by Mathias Fiskbæk (fiskce), https://fiskce.com/design-system/, CC BY 4.0The scribbles are drawn on a 40 × 40 grid and read best from 16 px up. A few strokes reach just past the edge, so give them a pixel of room or overflow: visible.