Seilschaft · design system · direction C, Aare
Drenched in glacier water, quiet at work.
One brand hue, the milky turquoise of the Aare, drives everything. The product site speaks in full-bleed bands and a big serif. The workspace uses the same bands only at the top of each page, then settles onto mist for the work.
Five voices, one rope.
Seilschaft is the roped party of climbers: people and agents moving up the same mountain on one line. The rope is the product. It carries hand-offs between agents, it holds when a person says no, and the owner learns to tie the knots herself.
Anti-reflex, at both altitudes
First-order reflexes: an AI tool would get a purple gradient and glass; Swiss tourism would get sky blue, a snowy peak and a red cross. Both are rejected.
Second-order reflexes: an AI tool that avoids purple lands on cream editorial serif, which is Claude's own look. Swiss design that avoids kitsch lands on red-and-white Helvetica. Both are rejected too.
What remains is a specific Swiss material: the milky Aare turquoise under a night sky. Sun yellow appears only where a person decides.
The scene: Andrea at 06:40 above the Dorfstrasse, grey-blue light off the Eiger, twenty minutes to see what her team did overnight.
Colour, measured.
Every text colour is shown with its contrast ratio against the surface it sits on, computed live from the tokens. The strategy is drenched bands on the product site and restrained colour inside the workspace.
Status vocabulary
One pill per state, used identically everywhere. Sun yellow means a person must decide, and it is never used as decoration.
Two voices in type
Gloock is the big voice, used only at 28px and above. Albert Sans says everything plainly, from 11px table labels to 21px leads. Tool calls use the system monospace, so no third font is loaded.
Gewitter am Donnerstag. Elf Gäste, eine ruhige Lösung.
Good morning, Andrea. Two things need you.
The team, as five voices
Decisions
Group offer · Roche Diagnostics, Basel
The Sales agent drafted this from an Outlook enquiry, the 2026 price list in SharePoint and the guide roster.
Reto, Nina and Jonas are free on Thursday. The forecast is dry until 17:00, which leaves a safe window for the glacier and a late fondue at Bäregg.
CHF 4'968.00 · 24 × CHF 175.00 + 24 × CHF 32.00 · MWST 8.1 % incl.
bexio.offers.create_draft(contact="Roche Diagnostics", lines=2) → AN-2026-0418
Built with you, not for you.
Form: Sheet
Colour divides the page, not boxes. Controls are round pills on square sheets. There are no card shadows; depth comes from bands and tinted fills. Only floating layers lift off the page.
Three radii
Elevation
- Control height
- 44px · --h-ctl
- Row height
- 52px · --h-row
- Hairline
- 1px · --bw
- Focus underline
- 1.5px · --bw-strong
- Pane padding
- 32px · --pad-card
- Section rhythm
- 72–144px · --section
Controls
Every variant, size and state. Fields are underlined like a line drawn on the sheet, and the underline thickens on focus. Try them.
Buttons
Choice
Segmented, search, upload
PDF, Word or Excel, up to 50 MB
Surfaces & data
Tables have hairline rows and no boxes. The pane is the only container: a square, tinted fill. Every layer below opens.
| Tour | Date | Pax | Amount | Status | ||
|---|---|---|---|---|---|---|
| Familie StuderThun | Canyoning Grimsel | 16.10.2026 | 4 | CHF 780.00 | Weather risk | |
| Roche DiagnosticsBasel · group | Glacier walk + fondue | 16.10.2026 | 24 | CHF 4'968.00 | Waits for you | |
| Hannah & Tom WhitfieldLeeds, UK | Private tour Jungfraujoch | 17.10.2026 | 2 | CHF 1'240.00 | Confirmed | |
| Kenji WatanabeOsaka | Glacier walk | 18.10.2026 | 1 | CHF 175.00 | Waitlist |
What can the Booking agent change in TrekkSoft?
Where does the price list come from?
Layers
Every agent has a voice you can recognise.
This is the voice row, the product's signature component. Press play: the agent reports in its own words, and its waveform is its sound signature. With sound on, the waveform is the live signal.
The decision sheet
An approval shows the number that matters in large type, the facts in plain rows, and the trail the agent followed. Nothing is sent before sun yellow clears.
Waits for youSALSales agent · 07:14
Group offer for Roche Diagnostics, Basel.
4'968.00CHF incl. 8.1 % MWST · bexio draft AN-2026-0418
- Group
- 24 people, team day
- Tour
- Glacier walk Oberer Grindelwaldgletscher + fondue at Bäregg
- Date
- Tuesday 21.10.2026, 08:30–16:00
- Guides
- Reto Zurbrügg, Nina Gertsch, Jonas Bohren
Sent at 07:21. The Booking agent has taken the rope and holds the slot in TrekkSoft.
- 07:02 · OutlookRead the enquiry from Dr. Sabine Keller: "on the glacier, back by four".
- 07:03 · SharePointPreisliste 2026.xlsx: group glacier walk CHF 175 per person, fondue CHF 32.
- 07:04 · Operations agentThree of three guides are free on 21.10.
- 07:05 · MeteoSchweizLong-range: stable, 11 °C.
- 07:11 · Waiting for Andreabexio draft saved. Nothing has left the building.
Tool-call trace
What Claude actually did, one call per line. Rendered as it streams.
Autonomy dial
The owner raises trust one agent at a time. Click a level.
The rope: a hand-off
Agents pass work along one line. The sun knot is the person.
Connector rows
bexio
Offers, invoices, contactsoffers.readoffers.writeConnectedTrekkSoft
Bookings, availabilitybookings.readslots.holdExpires in 3 daysSpend meter
Briefing prose
Numbers are set inside sentences instead of a row of metric tiles.
Yesterday brought CHF 6'140 in new bookings. Thursday's storm touches 11 guests, and two decisions are waiting for you.
Ledger of figures
- Booked this week
- 38'420CHF +12 % vs. week 41
- Guide utilisation
- 78% −4 pts
- Open invoices
- 3· CHF 8'240 1 over 30 days
States nobody asks for
Empty, loading, error, offline, no permission, no results and first run are all designed, because this is what a real week looks like.
Nothing waits for you.
The agents are working. New decisions appear here with a soft bell.
Loading: skeletons keep the page's shape, so nothing jumps.
No results for "Firmenlauf 2025".
Try the guest's surname or the booking number from TrekkSoft, e.g. TS-88213.
One icon family
24px grid, 1.5px stroke, round caps. Drawn for this product and inlined as a sprite. No emoji and no icon font.
A sound palette, not sound effects.
Everything is synthesised live in the browser: no files, works offline. It is off until the visitor turns it on. Each agent has its own pitch, a person's decision is a rising fifth, and weather is two falling bells.
Motion follows the river: things arrive slowly and leave quickly (ease-out expo, 420ms). Strands braid continuously but calmly. Nothing bounces. With reduced motion, every animation is replaced by its final state and the sound still works.
Micro-interactions last 140–220ms. Waveforms pulse only while an agent is speaking. Canvases pause when they scroll off screen, so a laptop fan never spins up during a demo.
What we will not ship.
- __I:x__Purple or blue gradients, glass cards, glow, and gradient text: the AI-tool reflex.
- __I:x__Sky blue with adventure orange, snowy peak heroes, the red cross: the tourism reflex.
- __I:x__Cream "editorial" backgrounds. Our light ground is mist, tinted toward the Aare.
- __I:x__Rows of three equal cards, a hero-metric row, and tracked eyebrows over every section.
- __I:x__Shadows on content, radius on containers, or coloured side-stripes on callouts.
- __I:x__Sun yellow as decoration. It always means a person decides.
- __I:x__Gloock below 28px. Below that size, the serif shouts instead of speaking.
- __I:x__Autoplaying sound. Sound is always opt-in and remembered.
- __I:x__Emoji icons, stock handshakes, lightbulbs, or robots with faces.
- __I:x__Chat bubbles as the whole product. Agents act; the console shows how.