Calm
olten-50 to olten-100
Default operational page background. Almost imperceptible.
--gradient-civic-calmBrand System · Edition 02 · 2026
Where Switzerland connects.
Olten sits where the Aare bends and the rails of four cantons cross.This is the living brand system for a small Swiss city with a national role: the visual language for everything we publish, build, and put on the street.
47°21′N · 7°54′EAare · Bahnhof · Altstadt · Born18 sections · 28 swatches · 1 cityv 2.7 · 2026
01
// manifesto, pillars, voiceThe Essence
We are Olten. A city that flows between Jura and Mittelland, between platform and old town, between the quiet and the curious.
Voice
- ↗ Direct, never loud.
- ↗ Warm, never sentimental.
- ↗ Precise, never sterile.
- ↗ Local, never small.
01
River
The Aare gives the city its rhythm. Three currents flow through Olten at once: water, rail, and the everyday crossing of people on the old wooden bridge.
02
Junction
Zurich, Basel, Bern and Lucerne are each thirty minutes away. Olten is not a destination. It is the room where Switzerland meets itself.
03
Stage
Nineteen thousand people. A theatre, an art museum, a writers' path. Small enough to know your neighbours. Big enough to keep surprising them.
04
Craft
Jura sandstone, iron bridges, Bauhaus typography. Things made well, made to last, made for the public.
1085
First mention
19.4k
Residents
1856
Railway opens
32
Bahnhof tracks
02
// try the mark on any brand surfaceLogo Lab
Pick a surface and a variant to preview the Olten mark on every approved brand background. Below: misuse examples and clearspace rules to keep the mark legible everywhere it appears.
Variant
Surface
Tap a surface to preview the mark on it.
Clearspace
Minimum margin around the mark equals the height of the Oin “Olten”. Never crowd the river lines.
Misuse
// never · do not · vermeiden✕ Don't stretch
✕ Don't recolor
✕ Don't rotate
✕ Don't outline
03
// signature · complement · sparkColor System
03.A
// 4 stepsSignature — Olten Green
03.B
// 4 stepsComplement — Cyan + Teal
03.C
// 4 stepsSparks — Lime · Coral · Sun
03.D
// 4 stepsNeutrals — Paper · Ink
// green · tonal scale10 steps
04
// atmosphere, depth, contrastGradients and Pairings
gradient 01 of 12
Aare Flow
Hero, web
Pairings
bg · fg · accentSignature
Stadt
Olten.
Olten.
#238463 · #F4F1EC · #C6FF00
Civic
Stadt
Olten.
Olten.
#F4F1EC · #13211E · #238463
Night
Stadt
Olten.
Olten.
#003940 · #F4F1EC · #00E5FF
Festival
Stadt
Olten.
Olten.
#E8743E · #13211E · #C6FF00
Calm
Stadt
Olten.
Olten.
#DCEFE6 · #0E3E2D · #00A3B8
Document
Stadt
Olten.
Olten.
#0E3E2D · #DCEFE6 · #F2B441
mesh 01
mesh 02
mesh 03
04
// rotis ii sans · otl aicher · 1988Typography
Specimen · Display
Olten
Weight 800
Display family
Aa
Rotis II Sans Pro
ABCabc123&!?
Pairing
Display · Rotis II Sans
Body · Rotis II Sans Regular
Mono · JetBrains Mono
Display
120px · 900
Olten
H1
64px · 800
Eine Stadt am Wasser
H2
40px · 700
Bahnhof, Brücke, Bühne
H3
24px · 600
Drei Linien, ein Fluss
Body L
18px · 400
Olten verbindet Gegenden, Generationen und Geschichten — mit Präzision und Wärme.
Body
15px · 400
Olten verbindet Gegenden, Generationen und Geschichten — mit Präzision und Wärme.
Caption
12px · 500
OLTEN · BRAND · v 2.6
05
// aare · three currentsThe Motif
Three lines. One river.
The Aare bends through Olten in three visible currents — the river itself, the rail corridor, and the everyday flow of people across the wooden bridge. The logo's three strokes are the city's geography, distilled.
Wasser
Aare · 7°CSchiene
32 tracksBrücke
1803Dense
Spark
Glow
Quiet
06
// logo mark · graphic elementThree Trees
// growing · 1085 → todayOlten — Stadt am Wasser
Solo · editorial
tree · 03scale ∞
Favicon
Stamp
Sticker
Pin
Tag
Watermark
07
// trees, ridge, contours, railsDecorative Elements
Patterns drawn from the city itself. The three trees of the logo, the Jura ridge above the old town that Franz Hohler called “die Nase im Wind”, topographic contours of the surrounding hills, and the rails that fan out from the Bahnhof. Use them full-bleed, as page accents, or as social stickers.
Three trees01 / 04
Jura ridge — Die Nase02 / 04
Topographic03 / 04
Rail crossroad04 / 04
Image usage
Photo · gradient · mark
Olten am Wasser
Die Aare verbindet Altstadt und Neuzeit, ein Ort zum Verweilen und Erleben.
Split layout
Alte
Holzbrücke
Holzbrücke
Seit 1295
Card overlay
Olten
erleben.
erleben.
Stadtführer 2026
Do
- · Real Olten places, real Olten people.
- · Pair photos with Olten green washes or stamps.
- · Keep the ridge line visible in landscapes.
- · Favour natural light and blue or golden hour.
Don't
- · Heavy filters, vignettes, or off-brand duotones.
- · Generic stock photos from anywhere but Olten.
- · Hide the horizon or landmarks behind type.
- · Crop the Jura ridge out of the frame.
08
// custom set, 24px grid, 1.5 strokeIconography
Specimen
24px
grid1.5
stroke2px
radiusDrawn on a strict 24 by 24 pixel grid with 1.5 unit strokes and rounded caps. Shapes follow the same calm logic as the Olten logo: open forms, no flourishes, civic clarity.
Place
6 iconsAare
Bridge
Tracks
Tree
Hill
Tower
Service
5 iconsBus
Train
Bike
Ferry
Walk
Civic
6 iconsTown hall
Library
Health
School
Theatre
Museum
Action
6 iconsSearch
Calendar
Pin
Mail
Bell
Heart
09
// buttons, cards, inputs, tagsComponents
Buttons
Tags and Badges
LiveNewHinweisSperrung
Inputs
Segmented Tabs
A layout-animated pill follows the active tab.
Kultur21:00
Sommerbühne '26
14. bis 28. Juli, Stadtpark
Two weeks of concerts, theatre and film along the river.
19.4k
Einwohner:innen
47°
Breitengrad
1085
Erste Erwähnung
32
Bahnsteige
10
// states, hover, active, focus, disabledComponents Lab
Buttonsdefault · hover · active · focus · disabled
Primary
Ghost
Spark
Icon
Rating3 / 5
Togglesswitch, check, tabs
Newsletter
Tabs
Fieldsdefault · focus · success · error · disabled
⌘ K
Cardshover · pressable · expandable
Aktuell
Stadtpark öffnet die Sommerbühne
Lesen →
Online-Schalter
24 Dienste, 3 min Ø
7°
Aare
12k
Visits
4
Events
11
// five principles, one easingMotion
M.01principle
Flow, never snap
Easings curve like the Aare: soft entry, soft exit. Default is cubic-bezier(.2, .7, .2, 1).
slide
M.02principle
One thing moves
When something arrives, the world holds still. No competing motion in the same view.
M.03principle
Direction has meaning
Down arrives. Right moves forward. Left returns. Up reveals. Motion is a sentence.
↓
→
←
↑
M.04principle
Time is generous
180ms for response. 600ms for arrival. 1200ms for hero moments. Never the same duration for every job.
180ms
600ms
1200ms
M.05principle
Micro celebrates
Small interactions acknowledge the user. A button press, a toggle flip, a card lift. The tiniest motion carries personality.
12
// poster, business card, wayfinding, appWeb and Signage
14 bis 28 · 07 · 26Stadtpark
Sommer
bühne
bühne
Konzerte, Theater, Filmolten.ch / bühne
Stadt Olten, Verwaltung
Frau Eva Roth
Kommunikation
+41 62 206 12 34
eva.roth@olten.ch
Dornacherstrasse 1, 4600 Olten
Wayfinding
Bahnhof→ 200m
Altstadt→ 400m
Stadttheater→ 600m
Kunstmuseum→ 750m
Olten App9:41
Heute in Olten
Marktstand, Munzingerplatz
Lesung im Stadttheater
Aare-Schwimmen 18°C
13
// poster, brochure, report, ticket, bannerPrint and Editorial
Plakat A109 / 26
Kunst
museum
museum
Eröffnung 14.09kmolten.ch
Broschüre 2026
Leben
in Olten
in Olten
Standortbericht Ausgabe 04
§ 03Mobilität
Der Bahnhof ist die Drehscheibe der Schweiz.
Über 600 Züge täglich, 32 Bahnsteige, Verbindungen in 23 Schweizer Städte. Olten ist eine der wichtigsten Umsteigestationen des Landes.
32
Gleise
600
Züge / Tag
23
Städte
Stadt Olten03 / 24
Geschäftsbericht 2025
Oltenin Zahlen.
Verwaltung, Finanzen, Stadtentwicklung
CHF 312M
Budget
+1.8%
Wachstum
19.4k
Einwohner
94%
Zufrieden
Stadttheater Olten14.09.26 · 20:00
Hamlet
ein Update
ein Update
Sitz 14, Reihe 3
Ticket
CHF 38
Olten Magazin · Ausgabe 12
Die Brücke
erzählt.
Die alte Holzbrücke verbindet zwei Ufer und sieben Jahrhunderte. Eine Reportage über das älteste Bauwerk der Stadt, errichtet 1295, bis heute getragen.
Seite 14
1295
Erste Erwähnung der Brücke
Stadtverwaltung Olten
Dornacherstrasse 1
4600 Olten
Briefpapier A404 / 26
willkommen /zuhause.
City banner 3:1
Sommerfest 2026
Oltner
Stadtturm
Festival
Stadtturm
Festival
21.–23. Juni 2026oltnerstadtturm.ch
Stadt Olten · Werbebanner
Entdecke
Olten.
Olten.
www.olten.ch
Stadtverwaltung Olten
Kultur & Tourismus
Marie Dupont · Leiterin Kommunikation
Olten
Visitenkarte · Rückseite
Telefon
+41 62 327 50 50
E-Mail
info@olten.ch
Web
www.olten.ch
Dornacherstrasse 1 · 4600 Olten
St. Martin · Olten
Postkarte
An
CH
4600
Stadt Olten
Aarefest 2026 ist da!
Vom 4. bis 6. Juli feiert Olten das grösste Stadtfest an der Aare. Musik, Kulinarik und Kultur für die ganze Familie.
Schloss Säli
im Herbst
im Herbst
#olten #saeli #schloss #stadtolten
Event
Olten
Nachtwächter
Rundgang
Nachtwächter
Rundgang
Jeden Freitag, 20:00Ab Stadtturm
14
// festival kit, schedule, badgesEvents Programme
Sommerbühne 202614 bis 28 · 07
Drei
Wochen.
Eine Stadt.
Wochen.
Eine Stadt.
Concerts, plays, film screenings and readings, every evening along the Aare. Free entry to the park; tickets only for the indoor evenings.
KonzertLiteraturSportFilm
Programm
14 bis 28 Juli
- 14.0720:00KonzertSommerbühne · EröffnungStadtpark
- 16.0719:30LiteraturLesung · Schweizer PfadStadttheater
- 19.0710:00SportAare-Schwimmen, geführtHolzbrücke
- 21.0721:00FilmOpen Air Kino · Wim WendersMunzingerplatz
- 28.0718:00KonzertSchlussfest · Drei LinienStadtpark
Crew
Sommer
bühne
bühne
Lanyardolten.ch
Publikum
Sommer
bühne
bühne
Stickerolten.ch
VIP
Sommer
bühne
bühne
Pinolten.ch
10
// charts · maps · numbersData Visualization
// neubauten · pro jahr
Bauliche Entwicklung 2020 — 25
202020212022202320242025
// budget · 2026
Wofür Olten Geld ausgibt
- Wohnen38%
- Mobilität22%
- Kultur14%
- Bildung18%
- Andere8%
// aare · monatlicher pegel
Wasserstand 2025
// quartiere · vergleich
Stadtpuls
Einwohner pro Quartier
Altstadt
4,200
Born
3,800
Weststadt
3,100
Oststadt
2,900
Römerstein
2,400
Hämerkeln
1,800
// einwanderung · herkunft
Einwanderung nach Herkunft
Schweiz32%
82
Deutschland19%
48
Italien14%
35
Türkei11%
28
Portugal9%
22
Andere16%
41
// klima · monatlich
Temperaturverlauf
1.2°C21.7°C
// umfrage · zufriedenheit
Zufriedenheit
Bildung87 %
Kultur82 %
Mobilität74 %
Wohnen69 %
Umwelt61 %
Verwaltung55 %
Einwohner
19'400
+2.1 % seit 2020
Fläche
11.4 km²
6 Quartiere
Betriebe
1'280
+3.4 % Wachstum
Grünfläche
38 %
Stadtgebiet
Part TwoCivic layer
From identity to operation.
The first half of this system is the visual language of Stadt Olten. The second half is the operational framework: accessible by default, calm by default, deployable by any Swiss municipality that themes the tokens.
Phase 2, the image and overlay system, is shown below. Phases 3 through 7, accessibility framework, notifications, content cards, forms, and governance, build on this foundation. The civic layer never imports from the brand layer; both layers share the token foundation. A municipality can fork the civic layer, replace the green with their cantonal colour, and ship.
C.01image, overlay, hierarchy
Civic hero and overlay system
The civic layer leads with photographs of Olten, paired with soft directional overlays that preserve image quality while keeping text legible. No heavy black blocks. The overlay is a token, not an inline style.
Stadt OltenDigitale Dienstleistungen
Verwaltung, klar und zugänglich.
Termine, Anträge, Mitteilungen. Alles an einem Ort, für alle Einwohnerinnen und Einwohner.
Variant · Landing
Willkommen in Olten
Standard landing pattern for the city portal.
Variant · Alert
HIGH
Hochwasserwarnung Aare
Pegel über 4.20 m. Uferweg gesperrt bis Sonntag.
civic-overlay-soft-bottom, calm landing surface.
civic-overlay-directional, draws focus to lower-left.
civic-overlay-atmospheric, ambient depth.
C.02five surfaces, one image
Overlay token reference
The same photograph appears under all five overlays. The civic system does not use a single all-purpose dark block. Each overlay has a documented use case, and is exposed both as a CSS variable and as a utility class.
Overlay
Soft bottom
--overlay-soft-bottomCaption beneath subject. Hero with title in lower section.
Overlay
Soft top
--overlay-soft-topNavigation over photograph. Page header band.
Overlay
Directional
--overlay-directionalAsymmetric. Draws focus to lower-left. Editorial.
Overlay
Atmospheric
--overlay-atmosphericAmbient depth. Very subtle. Background imagery only.
Overlay
Readability
--overlay-readabilityBody text over image. Strongest of the set, still soft.
C.03green ecosystem only
Civic gradients
Six gradients, all within Olten's tonal ecosystem. Calm, restrained, deployable behind operational content. No neon, no rainbow, no oversaturated cyan. Each is exposed as a CSS variable and as a utility class.
Sage
olten-100 to jura-50
Warm-to-cool section divider. Bridges civic green and Jura sandstone.
--gradient-civic-sageStone
jura-50 to bone
Neutral content section. The quietest of the set.
--gradient-civic-stoneAlpine
soft teal to deeper teal
Open-sky feel for information sections, weather, transit.
--gradient-civic-alpineMoss
olten-400 to olten-600
Mid-tone surface for highlighted civic actions and primary cards.
--gradient-civic-mossForest
olten-700 to olten-900
Deep section, footers, hero alternatives in dark contexts.
--gradient-civic-forestC.04brand showcase and framework landing only
Mesh gradients
Soft SVG mesh, three variants, all within the civic colour ecosystem. Reserved for narrative surfaces. Mesh never appears behind operational content because atmospheric mood lighting is not appropriate when a citizen is reading a waste-pickup date or a road closure.
Mesh
Spatial calm
olten-100 · jura-50 · olten-300
Dawn-sky feel. Landing surface for framework documentation.
Mesh
Atmospheric deep
olten-700 · olten-900 · deep-teal
Dusk over the Aare. Hero alternative when no photograph is appropriate.
Mesh
Architectural neutral
bone · jura-50 · jura-200
Museum-lighting feel. Behind editorial content on the framework site.
Part ThreeAccessibility framework
From operation to access.
Phase 1 set the token foundation. Phase 2 made it visible. Phase 3 makes the system structurally accessible: a provider, a motion gate, a focus trap, a skip link, bilingual form patterns, a touch-target audit of the brand layer, and the docs that ship to every theming municipality.
Accessibility lives in tokens, base styles, and component contracts, not in a final pass. Every primitive below is live. Toggle the controls, force reduced motion, open the modal, walk it with the keyboard. Nothing here is a screenshot.
C.05principles, not policy
Six commitments
What the civic layer commits to. Six accessibility principles that govern every component in this system. Together they make it usable by an anxious citizen on a slow phone in poor light, not just by a confident user on a fresh laptop.
01Principle
Structural, not decorative
Accessibility lives in tokens, base styles, and component contracts. Not in a final pass. If a component is not reachable, focusable, and announceable by default, it does not ship.
02Principle
Bilingual where it matters
Civic content stays in the language of the municipality. Form labels, hints, and error messages can be paired with English for the framework documentation, never as a translation of the public surface.
03Principle
Calm by default
Reduced motion is the default for any interface that an anxious citizen will visit. The motion gate is a full swap to static equivalents, not just shorter transitions.
04Principle
Keyboard first
Every interaction is reachable, identifiable, and operable with a keyboard alone. The mouse is a convenience, not a contract. Skip link, focus order, and visible focus ring are non-negotiable.
05Principle
Show focus, always
Focus rings are a 2 px high-contrast civic blue, never removed without an equally visible replacement. The colour passes AA against every civic surface, verified in scripts/verify-contrast.mjs.
06Principle
Forty-four square minimum
Every touchable target on a mobile viewport reaches WCAG 2.5.5 AAA, 44 × 44 px. The recommended civic default is 48. The data-touch attribute enforces this at the base layer.
C.06provider, gate, trap, skip
Four primitives, live
AccessibilityProvider exposes motion, contrast, and text scale as React context. MotionGate swaps motion-rich subtrees for static equivalents. FocusTrap confines and restores focus for any dialog or sheet. SkipLink ships at the top of every page. Everything below is interactive.
Contrast
Pushes foreground to pure black, borders to solid, focus to 3 px dark blue. AAA on every civic surface.
Text scale
Bumps the civic type scale up one notch at every size, including labels. Honours the user's stated need without breaking layout.
Motion
Full
Mirrors your OS setting (prefers-reduced-motion). Override per-page by passing forcedMotion to the provider.
01Skip link
Skip to main content
First focusable element on every page. Press Tab from the very top, it appears in the upper-left.
02Motion gate
The same component renders an animation for full-motion users and a static equivalent for reduced-motion. No flicker, no hidden state.
03Focus trap
Open the modal, press Tab. Focus cycles inside, never escapes. Press Escape to close, focus returns to the trigger button.
04Provider
<AccessibilityProvider forcedMotion="system" > <SkipLink /> <App /> </AccessibilityProvider>
One context. Three controls. Used by everything else. Wrap once in layout.tsx, then call useAccessibility() anywhere.
C.07every pattern, every level
Keyboard navigation
What each key does in the civic layer. The contract a reviewer audits before a municipality ships. If a pattern is not in this table, it does not exist in the system.
Context
Keys
Behaviour
- Page levelTabShift+Tab
Move through every focusable element in DOM order. First Tab hits the skip link.
- Skip linkEnter
Jump focus to the #main landmark, past the sticky header.
- Buttons and linksEnterSpace
Activate. Space only on buttons. Enter on both.
- Nav dropdownEnterSpaceEsc
Toggle group, then arrow keys to choose. Escape closes the menu and restores focus to the trigger.
- Mobile drawerEsc
Closes the drawer. Focus returns to the burger button.
- Modal dialogEscTab
Esc closes and restores focus to the trigger. Tab cycles inside the modal only.
- Table of contentsTabEnter
Tab through groups, Enter on an item smooth-scrolls to its anchor.
- FormsTabEnter
Move between fields. Enter submits the form when focus is on a button or single-line input.
- Severity alertsEnter
Activates the action button. Critical alerts can also be dismissed with Esc by authorised users.
C.08every component, three checks
Touch target and keyboard audit
Each component in the system is verified against three contracts: touch target meets 44 px minimum, keyboard navigation works end to end, focus ring is visible against the component's surface. This table is the audit log.
Component
Touch
Keyboard
Focus
Notes
brand/Nav.tsxPassPassPassDropdowns are keyboard-operable, Escape closes, burger expands the drawer at lg-down.
brand/Hero.tsxPassPassPassTwo CTAs at the bottom, both 44 px minimum on mobile. Focus ring visible against the olten green.
brand/Components.tsxPatchedPassPassForm inputs lifted to min-height 48 px to match civic-comfortable. Buttons already at 44.
brand/Print.tsxNeeds fixPassPassPrint kit icons currently 32 × 32 in showcase tiles. Acceptable for showcase only, must be re-rendered at 44 for any interactive use.
brand/Events.tsxPassPassPassProgramme tiles use card-wrapped anchor pattern with full-area click target.
civic/CivicHero.tsxPassPassPassTwo pill CTAs on the readability overlay, both keyboard-focusable with visible ring on the dark substrate.
civic/OverlayShowcase.tsxPassPassPassNo interactive elements. Decorative figure with aria-hidden overlays.
civic/TableOfContents.tsxPassPassPassAll section items are buttons with aria-current. Mobile sheet is a dialog with Escape close.
C.09every pair, verified at build time
Verified contrast matrix
The civic token pairings used in this system, with their measured WCAG 2.2 contrast ratios. Verified by scripts/verify-contrast.mjs on every change. The script exits non-zero on any AA failure, blocking the build.
Aa
inkon bone17.47AAA
Aa
inkon paper18.51AAA
Aa
olten-500on bone4.72AA Large
Aa
boneon olten-5004.72AA Large
Aa
boneon olten-7008.53AAA
Aa
boneon olten-90016.07AAA
Aa
state-info-fgon state-info-bg11.64AAA
Aa
state-success-fgon state-success-bg11.49AAA
Aa
state-warning-fgon state-warning-bg10.54AAA
Aa
state-error-fgon state-error-bg10.46AAA
Aa
state-info-strongon bone4.76AA
Aa
state-success-strongon bone4.57AA
Aa
state-warning-strongon bone4.58AA
Aa
state-error-strongon bone4.86AA
Aa
boneon accent-civic5.16AA Large
Aa
focus-ring-coloron bone4.89AA
Part FourNotifications
From access to alert.
Public services have to interrupt the citizen, sometimes urgently. The notification system codifies who can interrupt whom, with what severity, and in what visual register. Four components cover the operational range: emergency banner, civic alert, construction notice, transport alert.
Severity is conveyed by colour, icon, and text label, never by colour alone. Critical surfaces use role="alert" for live announcement. Dismissible alerts have a labelled close control with a 44 px touch target.
C.10four components, five severities
Notifications and alerts
The civic notification system. Demonstrated below as live examples, not screenshots. Each component is keyboard-operable, uses tokenised colour, and conveys severity through colour, icon, and text label together. The severity hierarchy at the bottom is the contract reviewers audit before any new alert ships.
01EmergencyBanner
Critical
Pegelwarnung Aare, Olten
The Aare exceeds 4.20 m. The Uferweg and the Holzbrücke are closed until further notice. Avoid the riverside until Sunday.
02CivicAlert, four tones
Information
Office hours changing
The Einwohnerdienst will open at 09:00 instead of 08:00 starting 1 June 2026.
Confirmed
Appointment confirmed
You are registered for Donnerstag, 28.05.2026 at 14:30. A confirmation email has been sent.
Add to calendar Warning
Document close to expiry
Your driving licence expires in 30 days. Renewals can take up to 10 working days.
Error
Payment failed
We could not process your card. No charge was made. Please verify the details or try a different method.
Retry 03ConstructionNotice
Construction
Sanierung Hauptgasse
- From
- 02.06.2026
- Until
- 14.07.2026
- Area
- Hauptgasse, between Klosterplatz and Marktplatz
- Contact
- Bauamt Olten, 062 206 11 11
Construction
Brückenarbeiten Bahnhofbrücke
- From
- 20.06.2026
- Until
- 22.06.2026
- Area
- Bahnhofbrücke, weekend closure
- Contact
- Tiefbauamt, baustelle@olten.ch
04TransportAlert
501
Transport
Delays of 10 to 15 minutes
Reduced frequency between Olten Bahnhof and Trimbach due to roadworks.
ExpectedUntil 18:00 today
IC1
Transport
Replacement bus in service
No train service between Olten and Aarau. SBB replacement buses depart from platform Z.
ExpectedSunday 23:00
Severity hierarchy
The contract for choosing which component to ship. A municipality should not invent new severities outside of this table. Adding one requires sign-off and a re-run of verify-contrast.mjs on the new tokens.
Severity
When to use
Example
Component
- Critical
Imminent threat to life, property, or essential service. The citizen must act now.
Flood warning, evacuation order, water non-potable.
EmergencyBanner - High
Disruption to a normal service. The citizen needs to adjust plans.
Road closure, planned outage, hospital diversion.
TransportAlert, CivicAlert error - Medium
Scheduled work or notice. The citizen should be informed.
Construction window, office closure for holiday.
ConstructionNotice, CivicAlert warning - Low
Minor or upcoming change. No immediate action needed.
Hours change next month, new service available.
CivicAlert info - Routine
Confirmation that a system is operating normally.
Appointment booked, payment received, service operational.
CivicAlert success
C.11six surfaces, real Stadt Olten content
Civic content cards
The cards a municipal portal actually has to ship: the next waste pickup, the public event, the news item, the office that is open right now, the person to contact, the permit working its way through review. Six components, populated with real Olten content. Severity, tone, and language register all sit on the existing token foundation.
01AbfallkalenderCard, EventCard
In 2 days
28
05.2026
AbfallkalenderNext pickup
Papier und Karton, Donnerstag
Type. Paper, cardboard, no plastic bags.
Hauptgasse 7, 4600 Olten
Sa
14
Jun
2026
CultureStadttheater Olten
Oltner Kabarett-Tage, Eröffnungsabend
The 31st edition of the festival opens with a triple bill in the Stadttheater. Doors 18:30, free admission to the courtyard programme.
19:30 to 22:30Stadttheater, Frohburgstrasse 5
02NewsCard
Stadtleben
22.05.20264 min read
Aareufer-Sanierung, dritte Etappe abgeschlossen
The third phase of the Aare embankment restoration is finished a month ahead of schedule. The lower promenade reopens to pedestrians and cyclists on 1 June.
Read articleVerkehr
20.05.20262 min read
Holzbrücke, Restaurierungsplan vorgestellt
Stadtrat presents the conservation plan for the covered wooden bridge. Pedestrian access is preserved throughout the four-year programme.
Read articleVerwaltung
18.05.20263 min read
Online-Schalter, neuer Service ab Juli
Residents can now request certificates of residence, family certificates, and tax statements through the new online counter. Identity verification via SwissID.
Read article03OfficeStatusCard
Office
Einwohnerdienst Olten
Open
Hours today
08:00 to 17:00
- Mo, Di, Do
- 08:00 to 17:00
- Mi
- 08:00 to 18:30
- Fr
- 08:00 to 16:00
- Sa, So
- Closed
Dornacherstrasse 1, 4600 Olten
Office
Bauamt, Bauberatung
Closed
Currently closed
Tomorrow at 09:00
Next opening
- Mo to Fr
- 09:00 to 12:00
- Mo to Do
- 14:00 to 16:00
- Fr Nachm.
- Closed
- Sa, So
- Closed
Hauptgasse 2, 4600 Olten
04ContactCard
Stadtverwaltung Olten
Martin Kissling
Leiter Einwohnerdienst
Bauamt, Hochbau
Sandra Wyss
Bauberaterin
Stadtkanzlei
Dr. Daniel Roth
Stadtschreiber
Bau und Stadtentwicklung
Anna Meier
Tiefbau, Projektleitung
05PermitWorkflowCard, three states
BaugesuchPermit application
BG-2026-0341Dachsanierung Mehrfamilienhaus
A. Bühler, Bifangstrasse 14Submitted 02.04.2026
- 1SubmittedEingereicht
- 2In reviewIn Prüfung
- 3DecidedEntschieden
Decision dueBy 02.07.2026
Standard 90-day review window.
BaugesuchPermit application
BG-2026-0298Anbau Wintergarten, Einfamilienhaus
M. Lüthi, Sälipark 8Submitted 18.03.2026
- SubmittedEingereicht
- 2In reviewIn Prüfung
- 3DecidedEntschieden
Decision dueBy 18.06.2026
Neighbour consultation period closes 28.05.2026.
BaugesuchPermit application
BG-2026-0214Solaranlage, Flachdach Gewerbe
Solothurner Energie AGSubmitted 14.02.2026
- SubmittedEingereicht
- In reviewIn Prüfung
- 3DecidedEntschieden
Decision dueDecided 12.05.2026
Approved with conditions on cable routing and acoustic damping.
C.12wrapper, fields, availability grid
Forms and appointments
Three primitives, one realistic flow. CivicForm wraps the page-level accessibility scaffolding: error summary, live region, fieldset, submit and reset. CivicField extends the bilingual label, hint, error, required pattern across text, email, tel, date, and select. AppointmentPicker is a two-step availability grid with deterministic data so the demo stays predictable on every reload.
01CivicField, five types
Beispiel: Maria.Example: Maria.
Wir antworten innerhalb von 24 Stunden.We reply within 24 hours.
Schweizer Format.Swiss format.
TT.MM.JJJJ.DD.MM.YYYY.
Wählen Sie den Grund.Choose the reason.
Optional. Bis zu 500 Zeichen.Optional. Up to 500 characters.
02CivicForm + AppointmentPicker, live
03Plain-language validation, fourteen entries
Reusable, plain-language messages. Each one carries an exact German civic register and a literal English equivalent. Adopt the list whole, do not reinvent. Messages live next to the field, are wired with aria-describedby, and are announced via aria-live.
Kind
German
English
requiredDieses Feld ist erforderlich.
This field is required.
emailBitte geben Sie eine gültige E-Mail-Adresse ein.
Please enter a valid email address.
phone-chSchweizer Telefonnummer im Format +41 XX XXX XX XX.
Swiss phone number in the format +41 XX XXX XX XX.
date-pastDas Datum liegt in der Vergangenheit.
That date is in the past.
date-futureBitte wählen Sie ein Datum in der Zukunft.
Please choose a date in the future.
date-formBitte verwenden Sie das Format TT.MM.JJJJ.
Please use the format DD.MM.YYYY.
date-windowTermine sind ab Morgen bis 90 Tage im Voraus möglich.
Appointments can be booked from tomorrow up to 90 days ahead.
zip-chSchweizer Postleitzahl, vier Ziffern.
Swiss postal code, four digits.
min-charsMindestens {n} Zeichen erforderlich.
At least {n} characters required.
max-charsMaximal {n} Zeichen erlaubt.
No more than {n} characters allowed.
ahvAHV-Nummer im Format 756.XXXX.XXXX.XX.
Swiss social security number in the format 756.XXXX.XXXX.XX.
select-oneBitte wählen Sie eine Option aus der Liste.
Please choose an option from the list.
slot-takenDieses Zeitfenster ist nicht mehr verfügbar.
This time slot is no longer available.
consentSie müssen den Datenschutzhinweis bestätigen.
You must confirm the privacy notice.
Part FiveContent and governance
From components to contract.
Phases 1 through 6 built the materials. Phase 7 is the rule book that keeps the materials from being misused. Three docs ship: content standards, governance, and the implementation runbook for any municipality that forks this.
A design system without governance becomes a paint store. The three documents below are the contract. They are written for the reviewer, the engineer, and the design lead, in that order. Every change to the system passes through them.
C.13three docs, seven principles, one contract
Content and governance
The rules that govern this system. Content design standards for the words. Governance for the system itself. An implementation runbook for the engineer who forks this. The three documents are linked below; the principles, token rules, and fork sequence are surfaced on this page so a reviewer can audit without leaving.
01The three documents
docs/content.md01Plain-language standards, German readability, civic terminology
Content design
How the system writes. Sentence length, word choice, numbers, dates, voice, tone. Swiss High German conventions. Forms of address. The civic terminology table (Einwohnerdienst, Bauamt, Stadtrat). Bilingual field pattern. The error message contract.
- Plain-language standards
- German readability
- Bilingual fields
- Error messages
- Headings
- Links
- Approval flow
docs/governance.md02Principles, token governance, naming, versioning
Governance
The contract for changing the system. Seven design principles in priority order. Three-layer token model. What counts as patch, minor, or major. Component naming, file naming, class naming. The review record.
- Design principles
- Token governance
- Component governance
- Versioning
- Deprecation
- Review record
- Out of scope
docs/implementation.md03How a Swiss municipality forks and themes
Implementation
The engineer's runbook. What to theme and what to leave. The forking sequence, in order. Hosting targets. Performance budgets. Internationalisation. Accessibility verification on every release. Upstream contribution rules.
- The fork
- What to theme
- Theming in order
- Hosting
- Performance budgets
- Internationalisation
- Accessibility on release
- Upstream
02Seven design principles, in priority order
When two principles conflict, the higher one wins. Clarity outranks aesthetic consistency. If the calm typeface produces an unreadable error message, the error message wins.
- 01
Clarity
The citizen knows where they are, what they can do, and what happens next. Outranks aesthetic consistency.
- 02
Accessibility
WCAG 2.2 AA minimum, AAA where free. EN 301 549 and eCH-0059 baseline. Structural, not an audit step.
- 03
Consistency
The same problem is solved the same way every time. Enforced through tokens, not memory.
- 04
Trust
Reads as competent state infrastructure, not as marketing. No exclamation marks, no emoji, no dark patterns.
- 05
Inclusiveness
Works for the second language, the worse phone, the older eyes, the assistive technology. Not optimised for the median.
- 06
Simplicity
Smallest surface that solves the problem. New tokens, components, and patterns justify themselves against existing ones.
- 07
Civic neutrality
No political, commercial, or cultural editorial. The civic layer is calm. Expressive moments belong to the brand layer.
03Token governance, what changes how
The token foundation is the single source of truth. Components consume tokens; tokens do not consume components. Every value change reruns scripts/verify-contrast.mjs. CI rejects a PR where it fails.
Change
Bump
Sign-off
Rebind a semantic token to a different foundation
minordesign lead
Add a new semantic token
minordesign lead + a11y
Add a new foundation token
majordesign + a11y + steering
Rename any token
majoras above
Remove any token
majoras above + deprecation cycle
Change a value with no rebinding
majoras above + re-run verify-contrast
04How a municipality forks, in order
Olten is the reference implementation. Every other municipality is a theme on top of it. Do these seven steps in order. Skipping a step compounds work later.
Fork and verify
Clone, install, run typecheck, build, and verify-contrast on the unmodified reference. Never theme on top of a broken baseline.
Rebind colour
Replace --olten-* values with your hue. Keep lightness identical; vary hue and chroma within 0.06 of the reference.
Rerun contrast
Every pairing in the matrix must still pass AA. If one fails, your hue is too far from the reference.
Replace marks
Logo SVG, hero photography, decor. Replace files in place; do not rename component exports.
Swap terminology
Replace Stadt Olten everywhere. Most Swiss civic terms (Einwohnerdienst, Bauamt) are standards and stay.
Wire your CMS
Components take props. Pass real content from your CMS or services. Do not edit components to read globals.
Ship and walk
Run the full automated suite plus a manual keyboard, screen reader, reduced motion, high contrast, and touch walk before release.
05Civic terminology, the canonical Swiss table
From content.md. Most terms are Swiss standards and travel between municipalities unchanged. Only the city name and the council titles swap on fork. Variants are not interchangeable.
Concept (English)
Term (German)
City administration
Stadtverwaltung
Residents office
Einwohnerdienst
Building authority
Bauamt
City council (executive)
Stadtrat
City parliament
Gemeindeparlament
Mayor
Stadtpräsident / Stadtpräsidentin
Registration
Anmeldung
Departure (deregistration)
Abmeldung
Certificate of residence
Wohnsitzbescheinigung
Permit application
Baugesuch
Waste calendar
Abfallkalender