Identity

The mark and the palette, read off the files that define them — the lockups from docs/branding/, the colours from app/globals.css, the contrast computed rather than claimed. Nothing here is a second copy, so changing a hex changes this page and nothing else needs editing.

The lockups

Never redraw these. Reference the file, or copy its paths verbatim — the geometry is tested, and a re-typed lozenge is always slightly wrong.

  • Fernscout — logo (chosen direction: the waymark) Fernscout

    fernscout-logo.svg

    primary, horizontal, on cream

  • Fernscout — logo, inverse (for navy and photographic grounds) Fernscout

    fernscout-logo-inverse.svg

    on navy or photography — container dropped

  • Fernscout — logo, one colour (print, embossing, fax-grade reproduction) Fernscout

    fernscout-logo-mono.svg

    one ink; currentColor, recolour at point of use

  • Fernscout — wordmark only Fernscout

    fernscout-wordmark.svg

    where the mark already appears nearby

  • Fernscout — mark only (app icon, avatar, stamp)

    fernscout-mark.svg

    96px — app icon, avatar, favicon source

  • icon-waymark.svg

    32px viewBox — the wired favicon

At the sizes a browser tab uses

Rendered from the same file, at 16, 24 and 32 CSS pixels. A mark that reads at 64 can dissolve into noise here. For a true raster — node .claude/skills/apply-the-brand/favicon-check.mjs.

16
24
32

The palette

The palette is unchanged from Reisepost — it was already good, and the rebrand is identity, not redesign. What changes is the ranking: yellow is now the brand colour rather than one accent among several, because it is the waymark.

Tokens are defined once in app/globals.css. Use the token, never the hex — which is also why no hex is written below. What each colour is for:

RoleToken
Brand / waymarkyellow-400
Ink / groundnavy-900
Papercream-50
The scout, live positiongreen-500
Distance, watersky-400
Accent, used sparinglycoral-400
Keyboard focusblue-500 — the one palette colour clearing 3:1 on every surface a control sits on, yellow included

Which of these may carry words is measured, not remembered. /docs/branding/identity renders every token against every ground text is set on, computed from the stylesheet at request time. Two names lie and the page is where you find that out: yellow-600 is not a text yellow and green-500 is a dot, not a label — for green text on cream use green-700.

It used to be written out here as well, and a third time in the apply-the-brand skill — three copies of a measured number, and three chances that the one somebody reads is the one nobody updated (B575).

  • cream-50

    #fffaf0

  • cream-100

    #fff3dc

  • cream-200

    #ffe9bd

  • navy-900

    #1e293b

  • navy-700

    #3a4a63

  • navy-600

    #44546c

  • navy-500

    #5a6a80

  • navy-200

    #d8dee8

  • sky-300

    #8fe0ef

  • sky-400

    #5ec8dc

  • sky-500

    #3fa9c4

  • yellow-300

    #ffe08a

  • yellow-400

    #ffd23f

  • yellow-600

    #d69b0a

  • yellow-950

    #4a3300

  • green-100

    #ddf3e4

  • green-500

    #22c55e

  • green-700

    #15803d

  • coral-300

    #f6a7bb

  • coral-400

    #f06a8a

  • coral-600

    #c2334a

  • blue-500

    #2f6fed

What may carry words

Every token against every ground text is ever set on, computed from the hexes above. The verdict is the number, not an opinion about it: AAA is 7:1, AA is 4.5:1, and below 3:1 a colour is a fill and nothing else — which is where yellow-600 and green-500 land, despite what their names suggest.

Tokenon cream-50on cream-100on navy-900on yellow-400
cream-501.00fill only1.06fill only14.06AAA1.39fill only
cream-1001.06fill only1.00fill only13.31AAA1.31fill only
cream-2001.14fill only1.08fill only12.29AAA1.21fill only
navy-90014.06AAA13.31AAA1.00fill only10.13AAA
navy-7008.63AAA8.17AAA1.63fill only6.22AA
navy-6007.39AAA7.00AA1.90fill only5.33AA
navy-5005.30AA5.02AA2.65fill only3.82large text only
navy-2001.30fill only1.23fill only10.82AAA1.07fill only
sky-3001.43fill only1.36fill only9.81AAA1.03fill only
sky-4001.87fill only1.77fill only7.50AAA1.35fill only
sky-5002.63fill only2.49fill only5.35AA1.89fill only
yellow-3001.24fill only1.17fill only11.34AAA1.12fill only
yellow-4001.39fill only1.31fill only10.13AAA1.00fill only
yellow-6002.36fill only2.23fill only5.96AA1.70fill only
yellow-95011.44AAA10.83AAA1.23fill only8.24AAA
green-1001.12fill only1.06fill only12.55AAA1.24fill only
green-5002.19fill only2.07fill only6.42AA1.58fill only
green-7004.82AA4.56AA2.92fill only3.47large text only
coral-3001.81fill only1.71fill only7.78AAA1.30fill only
coral-4002.83fill only2.68fill only4.97AA2.04fill only
coral-6005.22AA4.94AA2.69fill only3.76large text only
blue-5004.37large text only4.14large text only3.22large text only3.15large text only

What is already settled

Rendered from docs/branding/BRAND.md at request time, so the manual and this page cannot disagree.

The name

Fernscoutfern (German: far, distant) + scout.

The old name, Reisepost, described mail arriving: news from far away, landing at home. Fernscout describes the opposite direction of travel. A scout goes out ahead of you, covers ground you have not covered, and reports back. That is what the product actually is now: an agent that walks the trip with you, keeps the record, and hands it back written.

Say it as one word. Never FernScout, Fern Scout, or fern-scout, and never split the halves across two colours or two weights — the name is one thing, not a compound to be pulled apart.

Domain: fernscout.ch.

The mark

A Swiss Wanderweg waymark: the painted yellow lozenge that tells a hiker both that they are on the route and which way it runs.

Three elements, and each one means something:

ElementColourReads as
Bent trailcream-50the route — bent, never straight, because trips are not
LozengeWanderweg yellow-400the waymark planted on it: you are here
Leading dotgreen-500the scout, already further along than you are

Two of these are inherited verbatim from the Reisepost envelope mark — the bent route line and the green dot. The rebrand is a change of metaphor, not a break in visual lineage, and the navy rounded-square container (rx 21 at 96px) is unchanged so the icon drops into every existing slot without relayout.

Why this one

Three directions were drawn and rendered at a true 16×16 raster before the choice was made (alt-farsight.svg, alt-cairn.svg are kept alongside):

  • farsight — a scout's lens, the land curving away inside it. The most explicitly agentic of the three, and the best of them at large sizes. At 16px it collapsed into a pale disc with every interior element below one pixel, and it reads as a generic "search" glyph.
  • cairn — stacked stones, one per logged day. Structurally the truest metaphor. It survived 16px, but reads as a layers or database icon, and a mark that needs explaining is not doing its job.
  • waymark — the only one whose silhouette is a single convex shape with no interior detail to lose. It is also the only one that is specifically Swiss, which a .ch product should not waste.

The lozenge was enlarged (half-diagonal 21 → 23 on the 96 grid) after the first render came back under-weight at favicon size. Re-test at 16px before changing its geometry again; do not eyeball it.

Lockups

FileUse
fernscout-logo.svgprimary, horizontal, on cream
fernscout-logo-inverse.svgon navy or photography — container dropped
fernscout-logo-mono.svgone ink; currentColor, recolour at point of use
fernscout-wordmark.svgwhere the mark already appears nearby
fernscout-mark.svg96px — app icon, avatar, favicon source
icon-waymark.svg32px viewBox — the wired favicon
fernscout-avatar-640.pngderived — for slots that refuse SVG

The PNG is the one file here that is not a source. Some slots refuse SVG — a WhatsApp Business profile picture is the case that forced it — and they also crop to a circle, so it is flattened onto the plate's own navy rather than left transparent. The mark's extremities sit 44.9 units from centre against a 48 radius, so nothing is clipped by that crop.

Regenerate it with npm run avatar, in the same commit that changes the mark. It is a fourth copy of geometry that BRAND.md otherwise keeps in one place, it cannot be diffed, and it will not complain when it goes stale — which is exactly how a logo update ships everywhere except the avatar nobody thought to re-export.

Clear space: one lozenge half-diagonal (23 units at 96 scale) on all four sides. Nothing enters it, including page edges.

Minimum sizes: mark 16px. Full lockup 120px wide — below that the wordmark counter shapes fill in and you should switch to the mark alone.

Never: recolour the lozenge; straighten the trail; separate the dot from the trail's leading end; add a gradient, bevel or shadow; set the wordmark in anything but Fredoka; place the cream trail on a ground lighter than navy-700.

Outline the wordmark text before sending any of these files outside the repo. Fredoka is not installed on a stranger's machine, and the SVGs fall back to Trebuchet MS, which is not the brand.

Typography

  • Display / wordmark — Fredoka 700. Rounded and warm; it kept the product from reading as a dashboard under the old name and it still does.
  • Body — Plus Jakarta Sans.

Fredoka is used with restraint: the wordmark, page titles, and the big numbers on the overview. It is not a UI font — buttons, labels and body copy are Jakarta.

Fredoka was chosen for a friendlier, postcard-ish brand. Fernscout is a little more purposeful, and a narrower, more technical display face is a legitimate future question — but changing it is a site redesign, and is deliberately out of scope for the rebrand.

Iconography

So later icons look related rather than merely adjacent:

  • 24px grid, 2px strokes, round caps and joins — the trail in the logo is the reference stroke.
  • Geometric, not illustrative. No outlines around filled shapes except where the mark itself does it, for separation on navy.
  • Yellow marks a place or a state. Green marks something live or ahead. Navy is structure. Do not use green and yellow decoratively; in this system they carry meaning.

Motion

path-pulse in app/globals.css is the house animation: the leading dot breathing on the trail. It is the one piece of ambient motion — the scout is alive and ahead of you. Everything else animates on interaction only, and all of it respects prefers-reduced-motion.

Voice

Plain, specific, unhurried. The product tells someone where they went and what it cost; it does not sell them the trip back to themselves.

  • Say what happened: "Bus to Hoi An, 4h 20m." Not "An unforgettable journey."
  • Sentence case everywhere, including buttons.
  • German and English both read naturally — the name is half of each, and so is the audience. Avoid idiom that only survives in one.

Trademark

The code is PolyForm Shield 1.0.0. The name is outside that licence and the drawings are narrowed inside it — see the BRAND ASSETS section of LICENSE, and TRADEMARK.md for the policy. Forks are welcome and must rebrand: unregistered word mark Fernscout™ and the waymark device, no implication of endorsement.

Every asset in this folder carries a copyright notice inside the file, the PNG in its metadata. Keep it there when you edit one — it is the only claim that travels with a copy that has left the repository. B657.

Back to the workbenches