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-950
#0f1520
navy-800
#253145
navy-700
#3a4a63
navy-600
#44546c
navy-500
#5a6a80
navy-300
#aeb7c5
navy-200
#d8dee8
navy-400
#8490a2
navy-100
#eceef4
navy-50
#f7f8fa
sky-300
#8fe0ef
sky-400
#5ec8dc
sky-500
#3fa9c4
yellow-300
#ffe08a
yellow-400
#ffd23f
yellow-600
#d69b0a
yellow-950
#4a3300
yellow-50
#fefce8
yellow-100
#fef9c3
yellow-900
#713f12
green-100
#ebf8ef
green-500
#22c55e
green-700
#15803d
coral-50
#fdedf1
coral-100
#fce7ed
coral-300
#f6a7bb
coral-400
#f06a8a
coral-600
#c2334a
blue-500
#2f6fed
Screen roles in both themes
Components use these job names. The brand hues above stay literal; only the screen role changes with the reader's appearance.
light
surface-base
#fffaf0
surface-raised
#ffffff
surface-subtle
#fff3dc
surface-muted
#ffe9bd
surface-neutral
#f7f8fa
surface-neutral-strong
#eceef4
surface-selected
#d8dee8
ink-strong
#1e293b
ink-body
#3a4a63
ink-secondary
#43536b
ink-muted
#5a6a80
ink-faint
#8490a2
line-faint
#eceef4
line-quiet
#d8dee8
line-strong
#aeb7c5
line-prominent
#5a6a80
line-ink
#3a4a63
action-strong
#1e293b
action-strong-hover
#3a4a63
on-action
#fffaf0
on-bright
#1e293b
on-deep
#fffaf0
overlay-strong
#1e293b
overlay-ink
#ffffff
shadow-color
#1e293b
- ink-strong on surface-base: 14.06 AAA
- ink-strong on surface-raised: 14.63 AAA
- ink-strong on surface-subtle: 13.31 AAA
- ink-body on surface-base: 8.63 AAA
- ink-body on surface-raised: 8.98 AAA
- ink-body on surface-subtle: 8.17 AAA
- ink-secondary on surface-base: 7.51 AAA
- ink-secondary on surface-raised: 7.81 AAA
- ink-secondary on surface-subtle: 7.11 AAA
dark
surface-base
#171d29
surface-raised
#1f2736
surface-subtle
#242e40
surface-muted
#2b3750
surface-neutral
#20283a
surface-neutral-strong
#2a3550
surface-selected
#33405a
ink-strong
#f2ecdd
ink-body
#e6e0d2
ink-secondary
#d7d4ca
ink-muted
#c9c8c0
ink-faint
#b9bbc0
line-faint
#2a3550
line-quiet
#33405a
line-strong
#60708c
line-prominent
#8490a2
line-ink
#c9c8c0
action-strong
#f2ecdd
action-strong-hover
#c9c8c0
on-action
#171d29
on-bright
#1e293b
on-deep
#fffaf0
overlay-strong
#10151f
overlay-ink
#ffffff
shadow-color
#080b11
- ink-strong on surface-base: 14.32 AAA
- ink-strong on surface-raised: 12.71 AAA
- ink-strong on surface-subtle: 11.57 AAA
- ink-body on surface-base: 12.83 AAA
- ink-body on surface-raised: 11.38 AAA
- ink-body on surface-subtle: 10.36 AAA
- ink-secondary on surface-base: 11.38 AAA
- ink-secondary on surface-raised: 10.10 AAA
- ink-secondary on surface-subtle: 9.20 AAA
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-950 | 17.58AAA | 16.64AAA | 1.25fill only | 12.66AAA |
| navy-800 | 12.58AAA | 11.91AAA | 1.12fill only | 9.07AAA |
| 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-300 | 1.94fill only | 1.84fill only | 7.23AAA | 1.40fill only |
| navy-200 | 1.30fill only | 1.23fill only | 10.82AAA | 1.07fill only |
| navy-400 | 3.11large text only | 2.94fill only | 4.52AA | 2.24fill only |
| navy-100 | 1.11fill only | 1.06fill only | 12.61AAA | 1.24fill only |
| navy-50 | 1.02fill only | 1.03fill only | 13.77AAA | 1.36fill 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 |
| yellow-50 | 1.01fill only | 1.06fill only | 14.14AAA | 1.40fill only |
| yellow-100 | 1.03fill only | 1.02fill only | 13.62AAA | 1.34fill only |
| yellow-900 | 8.33AAA | 7.89AAA | 1.69fill only | 6.00AA |
| green-100 | 1.05fill only | 1.01fill only | 13.38AAA | 1.32fill 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-50 | 1.09fill only | 1.03fill only | 12.93AAA | 1.28fill only |
| coral-100 | 1.13fill only | 1.07fill only | 12.39AAA | 1.22fill 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 may carry words, on their own badge fill
green-700 and coral-600 also carry text directly on a tinted fill, one layer in from the page — a badge, a chip, a role= "alert". The fill, not the text, moved to clear 4.5:1 here (B1841).
| Token (on fill) | Ratio |
|---|---|
| green-700 on green-100 #ebf8ef | 4.59AA |
| coral-600 on coral-50 #fdedf1 | 4.80AA |
| coral-600 on coral-100 #fce7ed | 4.60AA |
What may carry words, in the dark
Only the hues declared under :root[data-theme="dark"] have a value of their own here; everything else repeats its light-theme hex and, being unused as text in dark mode, is left off this table.
| Token (dark value) | on surface-base | on surface-raised | on surface-subtle |
|---|---|---|---|
| green-700 #22c55e | 7.41AAA | 6.57AA | 5.99AA |
| coral-600 #f38ba6 | 7.28AAA | 6.46AA | 5.88AA |
| green-700 on green-100 #1c3327 | 5.94AA — the badge fill these hues sit on in dark mode | ||
| coral-600 on coral-50 #2b141a | 7.44AAA — the badge fill these hues sit on in dark mode | ||
| coral-600 on coral-100 #33191f | 6.97AA — the badge fill these hues sit on in dark mode | ||
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: you write the trip in your own studio, and an agent of your own, or this instance's built-in assistant, is an optional second way to get words onto the page.
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 iPhone app's icon and launch screens under ios/App/App/Assets.xcassets
are derived the same way, by the same script (B2124), and are not listed
above because they are not lockups.
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 — and the iPhone app's icon and launch screens, which the same
script writes — 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 defined but not wired to anything yet —
its glow is yellow (rgba(255, 210, 63, …)), not the green the leading dot
is supposed to breathe in. Fix the colour before using it anywhere. Until
then, everything 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 Apache-2.0. The name and the drawings are outside that
licence — see BRAND-LICENSE for exactly which files, 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.