A quiet, considered design system, made for a careful idea.
Warm vernacular Tasmanian × editorial. Built for a community proposal that wants to be inviting and trustworthy without ever overpromising. Type does the heavy lifting. Colour is restrained. The guardrails are part of the design.
Three convictions.
Before any token, three convictions about what this design is for.
Stage 1 means we don’t pretend. Real photos when real photos exist. Labelled placeholders when they don’t. No stock-imagery launch shine.
Hierarchy is built from serif weight, scale, and rule lines — not colour, gradient, or icon. The result reads like a regional newspaper, on purpose.
Touch targets are large. Body type is generous. The guardrails — “what this isn’t” — get equal billing with the invitation.
One palette, three temperatures.
Paper for daylight reading. Cream for warmth and a hand-press feel. Dark for evenings and low light. The accent — leatherwood oxblood on light, aged brass on dark — is the only saturated colour in the system.
Could we do this together?
An expression of interest is not a commitment to invest. It’s a way to test whether this idea is worth proper feasibility work.
Could we do this together?
An expression of interest is not a commitment to invest. It’s a way to test whether this idea is worth proper feasibility work.
Could we do this together?
An expression of interest is not a commitment to invest. It’s a way to test whether this idea is worth proper feasibility work.
Tokens (current mode)
Two serifs and a mono.
Newsreader for display — old-style figures, generous italics, warm. Source Serif 4 for body — modern, very legible at 20px. JetBrains Mono for small-cap labels and meta only — never for prose.
Pull quote
“Could Cygnet explore a different path — and decide, together, whether this place is worth keeping?” — A question, not a campaign
An eight-point spine.
Tight steps for inline rhythm. Generous steps for editorial breathing room. Section padding scales fluidly with the viewport.
Reading width
Body copy is held to --measure: 38rem (~608px). Pull quotes and ledes share that measure. Long lists and forms widen to 44rem.
Rules, not boxes.
The system divides space with horizontal rules — hair, thin, medium, thick. Cards exist, but they’re plain rectangles bordered by the rule. Drop shadows are reserved for the floating tweaks panel.
Warm. Inviting. Always careful.
The proposal is at Stage 1. The voice never runs ahead of that. Use “could”, “may”, “subject to”, “indicative only”, “to be tested”. Avoid promises, returns, dates, and certainty.
“If viable, one possible path could be a community-owned co-operative. Subject to legal advice and proper feasibility work.”
“We’re raising capital to buy the pub and deliver returns to investors by spring.”
“Submitting this form does not commit you financially. It helps us understand whether the idea is worth exploring.”
“Join the Bottom Pub family today and unlock exclusive member perks!”
Small library, used carefully.
Each component does one thing. Buttons are rectangular. Forms are large. Image placeholders are honestly labelled.
Buttons
Tags
Stage pill
Image placeholder
Honest by default. Each placeholder declares what it’s a placeholder for.
Form fields
Disclosure
01Is the owner willing to sell?
It has not been confirmed whether the property is for sale. Any conversation with the current owner or their agent should be respectful, slow, and only happen if it’s appropriate to make contact.
02What would the purchase price be?
Unknown. A proper independent valuation would be required before any number is shared publicly.
Guardrail callout
An expression of interest is not an offer to invest.
It is a way to test whether the idea is worth proper feasibility work.
Editorial lists
- The Bottom Pub is privately owned.
- It is not currently operating.
- There is no purchase agreement in place.
- It is not confirmed whether the property is for sale.
- Hold a community meeting.
- Form a steering group.
- Commission early feasibility work.
- Seek legal and accounting advice.
Patterns the components combine into.
The two-up editorial section
A small mono label-column on the left names the section; the main column carries an eyebrow, h2, lede, and content. The label collapses on mobile.
A heading sits here.
A lede follows. Italic, slightly larger, restrained. It sets the temperature for the body that follows.
Then body type. Twenty-pixel Source Serif 4 at line-height 1.62. Generous, but not pompous. Built to be read by people who aren’t inside the design industry.
Stage progress
Five steps for the Cygnet path. The current step is filled and softly haloed; future steps are quiet.
AAA where it matters most.
This proposal goes to an older-skew audience in a small town. The design choices below aren’t optional — they’re what keeps the document trustworthy and readable.
- Body type 20px minimum. Captions and footnotes hold to 17px. Nothing in real prose drops below that.
- Contrast tested in all three modes. Body text against ground meets or exceeds AAA in Paper and Cream; the Dark mode is AAA for body and AA-strong for the brass accent.
- Touch targets 44–60px. Form inputs are 56px tall. The primary CTA is 60px. Nav links pad to 36px including underline reach.
- Native semantics first. Disclosures use
<details>. The form uses nativerequiredandaria-invalid. No custom widgets where the platform already has one. - Visible focus. Every interactive element has a 3px accent outline at 3px offset. The skip-to-content link slides in on focus.
- Reduced-motion respected. All transitions and reveals collapse to static when the user prefers reduced motion.
- Print stylesheet. The site prints cleanly — sticky bars and panels are hidden, type goes to ink-on-white.