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.svg
primary, horizontal, on cream
fernscout-logo-inverse.svg
on navy or photography — container dropped
fernscout-logo-mono.svg
one ink; currentColor, recolour at point of use
fernscout-wordmark.svg
where the mark already appears nearby
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.
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:
| Role | Token |
|---|---|
| Brand / waymark | yellow-400 |
| Ink / ground | navy-900 |
| Paper | cream-50 |
| The scout, live position | green-500 |
| Distance, water | sky-400 |
| Accent, used sparingly | coral-400 |
| Keyboard focus | blue-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.
| Token | on cream-50 | on cream-100 | on navy-900 | on yellow-400 |
|---|---|---|---|---|
| cream-50 | 1.00fill only | 1.06fill only | 14.06AAA | 1.39fill only |
| cream-100 | 1.06fill only | 1.00fill only | 13.31AAA | 1.31fill only |
| cream-200 | 1.14fill only | 1.08fill only | 12.29AAA | 1.21fill only |
| navy-900 | 14.06AAA | 13.31AAA | 1.00fill only | 10.13AAA |
| navy-700 | 8.63AAA | 8.17AAA | 1.63fill only | 6.22AA |
| navy-600 | 7.39AAA | 7.00AA | 1.90fill only | 5.33AA |
| navy-500 | 5.30AA | 5.02AA | 2.65fill only | 3.82large text only |
| navy-200 | 1.30fill only | 1.23fill only | 10.82AAA | 1.07fill only |
| sky-300 | 1.43fill only | 1.36fill only | 9.81AAA | 1.03fill only |
| sky-400 | 1.87fill only | 1.77fill only | 7.50AAA | 1.35fill only |
| sky-500 | 2.63fill only | 2.49fill only | 5.35AA | 1.89fill only |
| yellow-300 | 1.24fill only | 1.17fill only | 11.34AAA | 1.12fill only |
| yellow-400 | 1.39fill only | 1.31fill only | 10.13AAA | 1.00fill only |
| yellow-600 | 2.36fill only | 2.23fill only | 5.96AA | 1.70fill only |
| yellow-950 | 11.44AAA | 10.83AAA | 1.23fill only | 8.24AAA |
| green-100 | 1.12fill only | 1.06fill only | 12.55AAA | 1.24fill only |
| green-500 | 2.19fill only | 2.07fill only | 6.42AA | 1.58fill only |
| green-700 | 4.82AA | 4.56AA | 2.92fill only | 3.47large text only |
| coral-300 | 1.81fill only | 1.71fill only | 7.78AAA | 1.30fill only |
| coral-400 | 2.83fill only | 2.68fill only | 4.97AA | 2.04fill only |
| coral-600 | 5.22AA | 4.94AA | 2.69fill only | 3.76large text only |
| blue-500 | 4.37large text only | 4.14large text only | 3.22large text only | 3.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
Fernscout — fern (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:
| Element | Colour | Reads as |
|---|---|---|
| Bent trail | cream-50 | the route — bent, never straight, because trips are not |
| Lozenge | Wanderweg yellow-400 | the waymark planted on it: you are here |
| Leading dot | green-500 | the 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
.chproduct 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
| File | Use |
|---|---|
fernscout-logo.svg | primary, horizontal, on cream |
fernscout-logo-inverse.svg | on navy or photography — container dropped |
fernscout-logo-mono.svg | one ink; currentColor, recolour at point of use |
fernscout-wordmark.svg | where the mark already appears nearby |
fernscout-mark.svg | 96px — app icon, avatar, favicon source |
icon-waymark.svg | 32px viewBox — the wired favicon |
fernscout-avatar-640.png | derived — 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.