Design System

Tinker Corps

A kids’ game with its own two typefaces, its own palette and its own icon rules. None of it applies to any other FDT surface.

Tinker Corps is a combining game for children. It is the one FDT product that does not wear the FDT brand: no navy, no Inter, no Barlow Condensed, no tactical register. Everything on this page is for Tinker Corps only.

Tinker Corps only. Fredoka and Nunito are not FDT typefaces. Never use them on a corporate, GRIDWATCH, Ghost Grid, QRF or SECTOR surface, and never use Inter, Barlow Condensed or JetBrains Mono inside Tinker Corps. The two sets do not mix on one screen.

Typefaces

Two rounded families, each with one job.

Fredoka

Two parts. One surprise.

The display face: the game's name, headings, buttons and the names of discoveries.

Medium 500 · SemiBold 600 · Bold 700

Attribute	Value
Role	Display: titles, headings, buttons, item names
Weights	500, 600, 700
Case	Sentence case. Never all capitals.
Rule	Never used for a paragraph. Two lines is the limit.
Source	Google Fonts · SIL Open Font License 1.1
File	`/fonts/tinker-corps/fredoka-latin-wght.woff2` (variable, weight 300 to 700, Latin subset)
Fallback stack	`Fredoka, Nunito, ui-rounded, system-ui, sans-serif`

Nunito

Drag two things together and see what you invent.

The reading face: descriptions, real facts, labels and everything a grown-up reads in settings. Its round terminals sit with Fredoka without competing with it.

Regular 400 · SemiBold 600 · Bold 700 · ExtraBold 800

Attribute	Value
Role	Body, labels, small print
Weights	400, 600, 700, 800
Case	Sentence case. Small labels may be capitals at 800, tracked 0.08em, set by the stylesheet and never typed.
Rule	Body text is at least 16 pixels, with a line height of 1.5 or more.
Source	Google Fonts · SIL Open Font License 1.1
File	`/fonts/tinker-corps/nunito-latin-wght.woff2` (variable, weight 200 to 1000, Latin subset)
Fallback stack	`Nunito, ui-rounded, system-ui, sans-serif`

Hosting

Both files are self-hosted. A product for children makes no request to a third-party font service, so nothing loads them from Google Fonts. The copies here are the reference; the website serves its own from the CDN.

Icons

Every discovery in the game has one drawing, used at every size: on the workbench, in the drawer, on the website and as an alternate app icon.

Drawing

Attribute	Value
Canvas	`viewBox="0 0 48 48"`, exported at 192 by 192
Format	SVG, `path` elements only: no groups, text, gradients, filters or embedded images
Root element	Sets `stroke-linecap="round"` and `stroke-linejoin="round"` once, and nothing else: no stroke, no fill
Outline	The shapes that make the silhouette carry `stroke="#34405E"` at `stroke-width="2"`, set on each `path`. It is by far the most common stroke in the set.
Inner lines	The same colour, thinner: 1 to 1.8 units, for detail inside a shape
Inner fills	A highlight or a panel inside an outlined shape may have no stroke at all
Heavy strokes	2.2 units and up are for a line that is itself the object (a rope, a beam, a wisp of steam) and for the carrier described below
Fill	Flat colour, set on the `path`, or `fill="none"` for a line. Never a gradient. Start from the palette below.
Safe area	Keep paths about 4 units in from the edge, so the outline never touches it
Background	Transparent. The plate supplies the colour.
File name	The discovery’s name as a kebab-case slug: `Ship's Cat` is `ships-cat.svg`
Size	About 2 KB at most. The average is 800 bytes.

A drawing shows one idea: usually a single object, front-on or three-quarter. It may stand on a ground line, and one small companion may name it, as the Moon does behind the Moon Tree above. No cast shadow and no scene. If it needs a label to be understood, redraw it.

A light stroke on a light plate gets a carrier: draw the stroke twice, first in the outline colour, then in the light colour, narrower, on top. Steam, above, is drawn that way, at 6 units under 3.2. This is the one place a stroke is not the outline colour.

Palette

Start from this set. It accounts for four fifths of the fills in the 403 drawings so far. The rest are one-off colours an object needed, such as an olive (#A2B28D) or a charcoal (#3B4252): add one when nothing here will do, keep it in the same soft range, and never use pure black.

Outline
#34405E White
#FFFFFF Cream
#F8F3EB Mist
#DDE4EE Steel
#CDD5DF Slate
#8D96A6 Butter
#FAE494 Peach
#F7BC8C Coral
#F2A69F Red
#E0584F Pink
#F7C8D4 Tan
#D1B296 Bark
#BC9F89 Leaf
#B3DDA9 Sage
#BECD9E Sky
#ABD5FF Ice
#E3F1FF

Red is the strongest colour in the set. Use it for the part of a drawing that should be seen first.

Plate

Wherever a discovery is shown as a discovery (the workbench, the drawer, the collection, the website), its drawing sits on a plate that says which era it belongs to. The one exception is an alternate app icon, described below, where the drawing stands alone.

Attribute	Value
Shape	Square, corner radius a quarter of its side
Fill	The era’s tint
Border	The era’s accent, 3 pixels
Drawing	Centred, about three quarters of the plate’s side
Smallest size	44 by 44 pixels where it can be pressed

Each era has one accent and one tint. The game’s data/game.json is the source; this table is a copy of it, in display order.

Era	Slug	Accent (border)	Tint (fill)
Starters	`starters`	`#3E62AD`	`#E4EBF9`
Timeless: Nature	`nature`	`#7C8BA6`	`#F4F6FA`
Timeless: Materials, Camp & Food	`stuff`	`#7C8BA6`	`#F4F6FA`
Timeless: Animals	`animals`	`#7C8BA6`	`#F4F6FA`
Stone Age	`stone`	`#9C846B`	`#F1EBE4`
Ancient World	`ancient`	`#D9824A`	`#FBE8DB`
Medieval	`medieval`	`#8F63B8`	`#EFE6F7`
Gunpowder & Sail	`sail`	`#2F86D6`	`#DDEDFB`
Industrial Age	`industrial`	`#6E7B91`	`#E5E9F0`
World War I	`ww1`	`#B8953E`	`#F6EFDB`
World War II	`ww2`	`#6F8B3C`	`#E6EEDA`
Cold War	`cold`	`#2FA3A8`	`#DAF1F1`
Modern	`modern`	`#CF5C93`	`#F9E2EE`
Space Age	`space`	`#4F55C4`	`#E2E3F8`

The three Timeless groups share one frame. A new era needs a row in data/game.json first.

The accents are not strong borders: against their own tints they measure between 2.4 to 1 (Ancient World, World War I) and 4.9 to 1 (Starters), and four of them fall below 3 to 1. That is acceptable only because the border is decoration.

The era is always named in text beside the plate or in its spoken name. The border colour alone never carries it: several accents are blues that sit close together.

A plate at rest wears its era’s border. Any other state (picked up, hinted, new) wears a wider, dark border, never a different accent colour.

A discovery with no drawing yet shows its first letter on the plate, in Fredoka Bold.

App icons

The alternate app icons reuse the item drawings.

Attribute	Value
Source	The item drawing of the same slug, unchanged
Background	White, edge to edge
Framing	The drawing fills the icon. No plate, no border, no rounded mask of our own: the system applies its mask.
Size	1024 by 1024, rendered from the SVG

Coo

Coo, a pigeon in a flying helmet and goggles carrying a satchel

Coo, the messenger pigeon, is the guide. Coo is drawn on a 200 by 224 canvas, tall enough to hold the outline of the shadow Coo stands on, with the same outline colour at 3 to 5 units, which matches the item outline when Coo is shown about twice the height of a plate. Coo’s lilac greys are Coo’s own and are not item colours. Coo delivers hints and announcements; Coo never appears on a plate and is never an item.

Never

Fredoka or Nunito outside Tinker Corps, or an FDT typeface inside it.
An FDT token (--fdt-*) in a Tinker Corps stylesheet. The game and its website have their own (--tc-*).
Font Awesome glyphs or APP-6D symbols as discoveries. Every discovery is drawn.
A gradient, a drop shadow or a texture on a drawing or a plate.