Concept E · Design system v0.1

Alpine OS

Mission control for the mountains.

A premium outdoor-tech interface — think high-end GPS watch meets avalanche-transceiver UI. Modular panels, crisp mono readouts, segmented gauges and topographic contours make the organiser view ruthlessly clear, while a live T-minus countdown and graded, HUD-framed photography keep it exciting for everyone else. Dark mountain-night by default, with a crisp light mode.

Typography Colour Signals & status Iconography Photography Controls Forms Progress & data Panels

Participant home Command centre

Typography

Display · Space Grotesk 500T–115 days

H1 · 40 / −0.03emWhat do I still need from whom?

H2 · 20 / 500Three options on the table

Body · 15 / 1.5Compare the quoted package with what it will really cost once lift passes, hire and lessons are added. Clear words, no jargon.

Readout · JetBrains Mono£1,575 · 2,300 m · 20/20

Eyebrow · Mono 11 caps02 · Next up for you

Colour tokens

Mountain-night by default, with a crisp daylight mode (toggle in the rail or top bar). One signal colour carries primary actions; status colours always travel with a shape and a word.

--aos-bgCanvas#070B14 / #ECEFF4

--aos-panelPanels#0D1424 / #FFFFFF

--aos-panel-3Raised / selected#18233B / #EAEEF4

--aos-inkPrimary text#E9EEF7 / #0A1222

--aos-ink-3Labels (AA)#8794AB / #56627B

--aos-signalSignal · primary action#4FE3EC / #00808C

--aos-okDone#46E0A0 / #0A8553

--aos-warnAction needed#FF9A3D / #B04A00

--aos-pendingWaiting#8F9BB2 / #5B677F

--aos-dangerCannot / overdue#FF6B7C / #C4213A

--aos-idealIdeal dates#B79CFF / #6A43D8

--aos-lineHairlines8CA5D2 · 13% / 0C162C · 10%

Signals & status

Status LEDs · shape + colour + word

Done — deposit paidAction needed — equipmentPartly done — sizes missingWaiting — on organisersOverdue / cannotNot applicable

Chips & markers

● Phase 01 · Planning17/20 votedSat → SatDemo price

Demo prices are always tagged with a dashed amber marker. Researched prices instead show their source and “last checked” date, turning amber when stale.

Iconography

A custom 24 px set: 1.6 stroke, square terminals, mitred joins — technical and quiet, like instrument labels. Always paired with a text label in navigation.

Home

Options

Dates

Command

People

Payments

Rooms

Settings

Skis

Board

Insurance

Room key

Vote

Budget

Travel

Resort

Lift

Ideal

Photography

Snowboarder above the clouds, ungraded — Raw

The same photo with the Alpine OS cool grade — Cool grade + fade

Graded photo framed with viewfinder corners and altitude readout — + HUD frame & readout

Real mountains and real people — never stock “office” imagery. CC0 photography, credited.
Desaturate slightly, add a cool blue multiply and a bottom fade so white type always passes contrast.
Frame hero images with viewfinder corners and one factual readout (altitude, lift, temperature) — never decorative fake data.

Controls

Buttons

Tab through this page — every control shows a 2 px signal ring.

Show my room to roommatesOnly once rooms are published

Room preference

A preference, not a guarantee.

Inputs

Preferred nameWhat friends call you.

Comfortable budget

Whole trip, all-in. Private to organisers.

Email Enter a full email address, like name@example.com

Dietary needs

Notes for organisers (optional)

Forms in context

Travel insurance with winter sports cover

I confirm that I have travel insurance that includes appropriate winter sports cover.

We record your confirmation only — organisers don’t see or check your policy. This isn’t advice on what cover you need.

Not confirmed

Form principles

Only ask what the rental shop or organiser actually needs.
Hide irrelevant fields — snowboarders never see poles.
Real input types: numeric keypads for sizes, native selects for long lists.
Errors say what to do, in words, next to the field — plus a ◆ marker, not colour alone.
“No preference / don’t care” is always a first-class answer.

Progress & data

Segmented radial gauge — personal readiness

Headcount bar · one cell per person

Deposits paid17/20

Availability20/20 ✓

Rating · 5 steps

Sparkline · collections£4,250Data viz is always labelled with real numbers — no invented engagement metrics.

Panels

01 · Standard panel

Hairline border, inner highlight

Indexed mono header, content in a disciplined grid.

Signal panel

Voting is open

Used once per screen for the single most important thing.

Needs you

Equipment details needed

Amber edge + diamond marker for things a person must act on.

Photography: CC0 via Wikimedia Commons (credits in /photos/credits.json). All prices in this concept are demo figures.