Style guide · v0.4
The look of the Parks Tour: warm paper, soft pastel fills, deep slate ink and one terracotta accent. Things are rounded, they lean a little, and they press down when you touch them. Plain CSS and a few vanilla helpers, ready to carry into any framework.
What makes it feel like a postcard, and what keeps it easy to read.
Terracotta marks the thing to do next and where you are. Everything else is paper, ink and soft pastels.
Stamps sit at −4°, cards wobble when you reach for them, the mark tips its hat. A little tilt, used in a few places.
Buttons and pills sit on a short hard shadow and sink into it when pressed, like a key.
Body and muted text reach 7:1 contrast in every theme. Targets are at least 44px. Motion stops when you ask it to.
Every colour is a token. Switch to Dusk at the top to see them all change together.
Each pastel has an -ink that reaches 7:1 on it. They double as meanings: success is sage, info sky,
warning butter and danger rose.
dayColor(i, total) spreads items round the hue wheel from terracotta through sage and sky to lilac. Set the result as
--pc-c and stamps, cards, tags and the rail tint themselves from it.
Fraunces at its softest, with a touch of wonk, for headings. Figtree for everything else.
Fraunces · SOFT 100 · WONK 1
Wild & wonky
Rounded terminals and a few wayward letters. Use it for titles and numbers on stamps, never for long text.
Figtree · 400 to 750
Plain, friendly, clear.
For reading and for controls. Weights: 400 for text, 600 for labels, 650 for buttons, 750 for small capitals.
--pc-text-3xlA tour of the parks--pc-text-2xlSnowdonia, day two--pc-text-xlOver the Horseshoe Pass--pc-text-lg18 days from Pembrokeshire to the Cairngorms and back--pc-text-readLong reading sits at 17px with 1.6 line height--pc-text-baseInterface text, 16px--pc-text-smControls and chips, 13px--pc-text-xsDates and small facts, 12px.pc-labelGroup labels, 11px capitalsDay 7 · Tue 15 Sept
The morning started in drizzle at Hawes and finished in sunshine on the shore of Ullswater. In between: Buttertubs Pass, a tea stop in Sedbergh, and a long climb out of Kirkby Stephen with the whole of the Eden valley below.
The Dales do a very particular green after rain.
Line drawings on a 24px grid with 2px rounded strokes, drawn like the round mark. They take the text colour and size.
<svg class="pc-icon" aria-hidden="true"><use href="icons/icons.svg#pc-globe" /></svg>Each icon is also a separate file in dist/icons/ after a build. An icon with no visible label needs one on its button: aria-label="Search".
Round corners, short hard shadows, a little tilt and a little bounce.
--pc-ease-bounce overshoots a little: for things that arrive. Everything else eases plainly in 0.15 to 0.4s. With
reduced motion switched on, it all stops.
Pills on a pressed shadow. One primary per view.
Facts in pastels, filters you can toggle, counts.
Visible labels, a hint where it helps, and errors that say how to fix them.
Submit it empty. The summary takes focus so it's read out first, and each link puts you in its field.
You can enter up to 120 characters
The postage stamp is the signature piece. Cards you can open lift and wobble.
For a form, a note, a group of settings. A border and nothing else.
Pressed into the page: for something secondary, like code or a summary.
The striped edge, for one special thing: the welcome, a thank-you.
For real tabular data. Numbers line up; a wide table scrolls inside its card on a phone.
| Day | Date | Miles | Riding | Photos |
|---|---|---|---|---|
| Week one | 701 | 27 h 15 | 198 | |
Built on the native details element: it opens with the keyboard and works without JavaScript.
From the GPS track, after dropping every point inside a privacy zone. Ferry crossings aren't counted.
Up the Llanberis Pass in cloud, down the other side in sun. Lunch at Pen-y-Gwryd.
A loop of the Lleyn peninsula and the coast road to Barmouth.
Horseshoe Pass, Llangollen, then the long way round Manchester to Edale.
Facts as labels and values, and a panel to say something's done.
We've sent a link to you@example.com. Click it to confirm, and the next story will come to you.
A figure with a caption, a printed snapshot, and a gallery that opens in a lightbox.
Click a photo: ← and → move through them, swipe on a phone, Esc closes and puts you back on the photo you opened.
Colours for data that stay apart from each other and readable on paper and dusk.
Categories: riding time by road
Sequential: photos per hour
Diverging: gradient
--pc-chart-1 to -6 for categories, --pc-seq-1 to -5 for amounts, --pc-div-1 to
-5 for above and below a middle. Every mark reaches 3:1 on paper. A chart library can read them with token('chart-1').
Notes, toasts, tooltips, waiting and empty states. Said plainly.
Tiles are loading. The terrain sharpens as you zoom in.
Subscribed. Check your inbox and click the link to confirm.
No signal on day 11. The route between Glencoe and Fort William is drawn from the plan, not GPS.
That photo didn't upload. It's over 20 MB. Resize it and try again.
Tip: press ← and → to move between days.
Stories you write from the road show up here, in the order you rode them.
The native dialog, softened backdrop and all, and a bottom sheet for phones.
Over Shap, up the A68 through the Borders, and down to the coast at Dunbar for fish and chips.
Panels over the 3D globe swap to hologram colours. Add pc-theme-night to any container.
Customise the globe
Built in, so each app doesn't have to remember it.
Press Tab on this page: a "Skip to main content" pill drops in at the top. Put .pc-skip-link first in the body.
Text reaches 7:1 in Paper and Dusk, and npm run check fails the build if a change breaks that.
In Windows Contrast themes, pills, tags and cards get real borders, and selected things use the system highlight.
Every control has a visible focus ring and a 44px target. Tabs and menus follow the arrow-key patterns. Reduced motion stops the wobble.
On paper: black ink on white, no floating bars or buttons, every section open, and cards that don't split across pages.
Plain CSS classes and custom properties, so any framework can use them as they are.
npm install @jonibach/postcard or <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jonibach/postcard@0.2/dist/postcard.css">
<a class="pc-postcard" href="/day/1" style="--pc-c: #d97757">
<span class="pc-postcard__art">
<span class="pc-stamp pc-stamp--solid"><small>Day</small>1</span>
</span>
<span class="pc-postcard__body">
<span class="pc-postcard__meta">Wed 9 Sept</span>
<span class="pc-postcard__title pc-display">Setting off</span>
</span>
</a>The README covers the whole kit, and docs/porting.md shows the same card in React, Svelte, Vue and Tailwind.