/design-system

SOI UI v2 — Design System

Locked tokens, typography, and patterns. Living reference for product development and client reviews. Not linked from production navigation.

Colours

18 tokens, shadcn-compatible. Brand colours extracted from soi-lernwelt.ch.

Brand (5)

Navy + teal pair, plus a text-safe teal variant.

#2A354F

Primary navy

--color-primary

Header, footer, primary CTAs, brand surfaces, focus rings.

#FFFFFF

On-primary

--color-primary-foreground

Text on navy. AAA contrast (12.2:1).

#00AC8E

Accent teal

--color-accent

Brand accent. Fills, icons, illustrations.

Fills only

#FFFFFF

On-accent

--color-accent-foreground

White text on accent. AA-large only. Prefer dark text.

#0B5243

Accent teal deep

--color-accent-deep

Text-safe variant. Links, badge text, inline highlights.

Text onlyCustom

Neutrals (7)

shadcn scale with a navy tint; muted-foreground darkened and navy-tinted for AAA contrast.

#F9FAFD

Background

--color-background

Page background. Faint navy-tinted gray; cards lift above it.

#2A354F

Foreground

--color-foreground

Titles and body text; weight drives hierarchy. Navy, 12.2:1 AAA.

#FFFFFF

Card

--color-card

Cards, panels, raised surfaces. Pure white, lifts above the page.

#F2F3F7

Muted

--color-muted

Subtle backgrounds, hover states, disabled fills. Navy-tinted.

#4A5367

Muted foreground

--color-muted-foreground

Secondary text, captions, placeholders. Navy-tinted, AAA (7.7:1).

#E1E4EA

Border

--color-border

Borders, dividers, separators. Navy-tinted.

Semantic (4)

Separated from brand. Each colour means exactly one thing.

#16A34A

Success

--color-success

Successful actions. Form saved, payment received.

Custom

#F59E0B

Warning

--color-warning

Warnings, unsaved changes, action required.

Custom

#DC2626

Destructive

--color-destructive

Delete, withdraw, validation errors.

#FFFFFF

On-destructive

--color-destructive-foreground

Text on destructive backgrounds. AA (4.8:1).

Structural (2)

Referenced by shadcn primitives. Derived from existing tokens.

#E1E4EA

Input

--color-input

Input borders. Same as border.

Derived

#2A354F

Ring

--color-ring

Focus rings. Same as primary.

Derived

Typography

Inter for body, JetBrains Mono for code and numeric values. Variable fonts, all weights available.

Font families

Inter is designed for UI at small sizes; tabular figures align financial data; OFL-licensed.

Inter Sans

--font-sans · 400, 500, 600, 700

The quick brown fox jumps over the lazy dog.

0123456789 — Mortgage capacity assessment.

JetBrains Mono

--font-mono · 400, 500, 600

CHF 1'234'567.89

dossier-id: D-2026-0142 · 12.05.2026

Scale

Tailwind v4 default (modular ratio ~1.125). Tight enough for admin, generous enough for hierarchy.

text-3xl30 / 36

Page title (h1)

text-2xl24 / 32

Section title (h2)

text-xl20 / 28

Subsection (h3)

text-lg18 / 28

Lead paragraph, small heading

text-base16 / 24

Input values, body-large

text-sm14 / 20

Default body, form labels, button text

text-xs12 / 16

Helper text, captions, badges

Default body size: text-sm (14px). Admin tools handle 14px well; 16px feels too generous in dense forms.

Weights

Four weights cover everything. 300 is too thin at small sizes; 800+ is rarely needed in admin UIs.

400 regularThe quick brown fox jumps over the lazy dog.

500 mediumThe quick brown fox jumps over the lazy dog.

600 semiboldThe quick brown fox jumps over the lazy dog.

700 boldThe quick brown fox jumps over the lazy dog.

Tabular figures (financial data)

Currencies, dossier IDs and dates use tabular-nums so digits stay aligned in columns. Compare:

Dossier	Without tabular-nums	With tabular-nums
D-2026-0142	CHF 1'250'000	CHF 1'250'000
D-2026-0143	CHF 845'000	CHF 845'000
D-2026-0144	CHF 2'100'000	CHF 2'100'000
D-2026-0145	CHF 11'750'000	CHF 11'750'000
D-2026-0146	CHF 685'000	CHF 685'000

Right column: digits form clean vertical lines regardless of value. Left column: ragged. Financial tables must use tabular-nums.

Hierarchy demo

Representative page layout. Shows that the scale produces clear hierarchy in context.

Dossiers / New Financing / D-2026-0142

New Financing for Müller AG

Purchase price CHF 1'250'000 · Equity CHF 250'000 · Mortgage CHF 1'000'000

Equity

Breakdown of equity by source and availability. We verify plausibility and source documentation.

Bank / savings account

CHF 80'000 · UBS Switzerland · since 2018

Last updated: 12 May 2026 · Proof uploaded

Components in Use

shadcn primitives with locked tokens. Real examples from the broker workflow.

Buttons

Soft default for everyday actions; navy primary marks the one main action per screen. 7 variants, 4 sizes.

Inputs

Fields with label, helper text, and error state.

Applicant name

Full company name or individual.

Email address

Please enter a valid email address.

Contract number

Notes

Selection

Checkbox, Radio Group, Select.

Table

With tabular-nums for aligned amounts.

Dossier	Applicant	Status	Purchase price
D-2026-0142	Müller AG	Submitted	CHF 1'250'000
D-2026-0143	Bertschi Family	In Progress	CHF 845'000
D-2026-0144	Steiner GmbH	Open	CHF 2'100'000
D-2026-0145	Egli Construction AG	Offered	CHF 11'750'000
D-2026-0146	Wenger Private	Contract	CHF 685'000

Cards

Header + Content + Footer composition.

Dossier D-2026-0142

Müller AG · New financing

Purchase price: CHF 1'250'000

Status: Submitted

Received: 12 May 2026

New feature

Automatic affordability check available in beta.

Enable automatic checks for faster dossier processing.

Tabs

Content grouping within a card or section.

General overview of the dossier with key data and status.

Alerts

Status messages with icon indicator and semantic colour.

Dossier successfully submitted

Dossier D-2026-0142 has been forwarded to UBS Switzerland.

Unsaved changes

You have unsaved changes. Leaving this page will discard them.

Validation failed

Please correct the highlighted fields before submitting the dossier.

Notice

Your session expires in 5 minutes. Please save your work.

Badges

Status indicators, short labels.

SubmittedIn progressOpenRejectedArchived

Dialog

Modal confirmation for critical actions.

Toasts (Sonner)

Short-lived notifications at the edge of the screen.

Brand Patterns

Specific pairings we use, with contrast verification.

Brand pair: Navy + Teal

The two signature brand colours. Navy carries structure, teal carries accent.

bg-primary · text-primary-foreground

Primary Navy

Header, CTAs, brand surfaces · 12.2:1 AAA

bg-accent · text-foreground

Accent Teal

Accent fills with dark text · 4.2:1 AA-large

On-accent: not white

shadcn's default text-accent-foreground (white) fails AA (2.9:1). The dark navy foreground reaches 4.2:1, enough for large text only: keep small text off accent fills.

Dark on accent · 4.2:1 AA-large ✓

White on accent · 2.9:1 ✗

Accent-deep: text-safe

When brand teal should appear as text (links, inline highlights), use accent-deep.

Dossier submitted to UBS Zurich for processing. Estimated response time: 5 business days.

text-accent-deep · 9.1:1 AAA on white

Accent as icon

Most common production use: icons in the accent colour paired with a text label.

New

Confirmed

Verified

Selected card

Active or chosen state: a teal border marks the selected card, echoing the brand accent. For selection lists and active options.

Standard option

Resting card with the neutral border.

Selected option

Teal border (border-accent) marks the active choice.

18 colour tokens · 4 weights · 7-step scale · Inter + JetBrains Mono. See docs/spec/design-tokens.md.