Tokens

The law, rendered

Colors

paper

…

ink

…

muted

…

hairline

…

surface-raised

…

surface-sunken

…

status-neutral

…

status-info

…

status-active

…

status-warn

…

status-warn-ink

…

status-danger

…

status-sim

…

Typography

General Sans — the site voice

Body text on paper. Weights 400 / 500 / 600.

ui-monospace — numerals 0123456789

The mono uppercase eyebrow label

Motion tokens

--ease-dawn: … — everything
--ease-spring: … — micro only

Brand

HexMark & Wordmark

Sizes

On ink

Lockup + hover micro-rotation

Hover the lockup — the mark rotates 30° with --ease-spring, exactly as in the site header.

Motion

Reveal & PageTransition

Everything is gated on the .motion class — with prefers-reduced-motion content appears instantly.

Reveal — directions

up

Enters from below.

left

Enters from the left.

right

Enters from the right.

Reveal — stagger

One — children animate 0.12s apart

Two — children animate 0.12s apart

Three — children animate 0.12s apart

Four — children animate 0.12s apart

PageTransition

First pane — fades and lifts in.

Apps wrap their routed content once; every navigation gets this entrance.

SmoothScroll

Exported but not mounted here — it takes over document scrolling (Lenis) and belongs to immersive pages like the marketing site. Sections opt into soft snap points with data-snap.

Chrome

Header, LocaleSwitcher, Footer, LuminousGround

Header — full (nav + locale switcher + account slot)

Set active:locale: en

Header — minimal (no end slot)

Footer — CTA + legal

Footer — legal bar only

Primitives

Buttons, badges, feedback

Button — variants × sizes × disabled

primary

contrast

secondary

ghost

danger

link

as linkAnchor styled via buttonClasses()

Button — press interactions

pressAnchor press

press-lift

no-press

Label & Badge

Eyebrow label12 openv0.1.0

StatusBadge — all tones

neutralinfoactivewarndangersim

Divider

Spinner

Verifying session

Skeleton

ProgressBar

Migration64%

Zero state0%

Done100%

RowButton — a whole row is the button

ToggleChip — on/off filters

TextButton — a link inside text

The run finished in session . — opened: —

Loaders

Spinners & the code marquee

Ten monochrome, single-purpose loaders. Every one inherits its colour from currentColor, so it takes on the ink of whatever surface it sits on.

CodeSpinner — the grid marquee

Thinking

On ink

Loader — all variants

variant="ring"

variant="sweep"

variant="wedge"

variant="fade-ring"

variant="orbit-dots"

variant="trail"

variant="bars"

variant="bounce"

variant="squares"

variant="equalizer"

variant="wave"

variant="pulse-bars"

On ink — currentColor adapts

ring

sweep

wedge

fade-ring

orbit-dots

trail

bars

bounce

squares

equalizer

wave

pulse-bars

With labels

CompilingVerifying sessionUploading

Markdown

Rendered model output

GFM tables, KaTeX, highlighted code, Mermaid, task lists — the pipeline every chat surface shares.

Full answer

4. Wie dir ein ängstlicher Geschäftsführer trotzdem vertraut

Kernwahrheit: Der GF hat keine Angst vor „20 Jahre alt" — er hat Angst vor vier
konkreten Risiken. Neutralisiere die, und das Alter wird irrelevant.

Seine Angst	Dein Instrument	Kosten
„Was, wenn es leakt?"	Externer Penetrationstest + Security-Audit vor Go-live	4.500
„Was, wenn er verschwindet?"	Quellcode-Hinterlegung (Escrow) + Exit-Klausel	900
„Ärger mit dem Garante?"	Compliance-Paket: AVV + TOMs + Informativa (DE/IT)	1.200
„Wer haftet?"	Cyber-Versicherung + Haftungscap (Art. 1229 CC)	2.100

Das Setup kostet einmalig $8.700, die Wartung $3.400 im Jahr — beides plain text, keine Formel.

Der Deckungsbeitrag

Die Bruttomarge ist $\frac{p - c}{p}$ , und der Kundenwert über die Laufzeit:

\text{LTV} = \frac{ARPU \times m}{1 - r}

Die Prüfung im Code

python
def lifetime_value(arpu: float, margin: float, churn: float) -> float:
    """Kundenwert über die Laufzeit."""

    if churn <= 0:
        raise ValueError("churn muss positiv sein")
    return (arpu * margin) / churn

Aufruf mit lifetime_value(89, 0.72, 0.04). Schritte:

Angebot mit Pentest-Zusage
Escrow-Vertrag
- Hinterlegung bei einem Notar
- Jährliche Aktualisierung
Compliance-Paket übergeben

Pentest beauftragt
Escrow unterschrieben

Ohne laufende Referenz bleibt jedes Argument Theorie. ~~Zeugnisse~~ zählen nicht.

mermaid
flowchart LR
  A[Erstgespräch] --> B{Bedenken?}
  B -->|Sicherheit| C[Pentest anbieten]
  B -->|Bus-Faktor| D[Escrow anbieten]
  C --> E[Angebot]
  D --> E

Details im Vertragsmuster.

Structure

Sections, cards, tabs

Active tab: overview

Section

A titled section

The site's rhythm: hairline top rule, mono eyebrow, tight title, content below.

Cards

Gruber und GriesseractiveDigital office rollout — accounts, logins, printed credentials.gruber-und-griesser

Last card action: none yet

Credentials

OpenAI

Production

active

Email: emmerich@gruber-griesser.com
Password

Hetzner Cloud

invariance-prod

rotate

User: claude@157.173.115.116
Token
Region: Falkenstein

Empty state

No projects yet

Empty regions always say so — never blank space.

Data

Stats, charts, tables, lists

Stat row

€12.4k

+8%

MRR

17

Active agents

3

+2

Failed runs

last 24h

€86k

±0

Pipeline

Part to whole

84Trades

Won47
Lost21
Breakeven9
Open7

Table

Application	Status	Region	Uptime	Requests
invariance-site	Healthy	eu-central	42d	128,034
invariance-agents	Healthy	eu-central	12d	40,233
invariance-brain	Degraded	eu-central	3d	8,112
invariance-mail	Healthy	eu-central	1d	953
legacy-gateway	Down	eu-west	—	0

Table — sortable, with row state

		Last run
Heartbeat	scout	ok	4,380
Nightly digest	ops	ok	212
Weekly brief	writer	ok	18
Workspace backup	ops	failed	31

Table — dense + empty

No deploys

The dense table with zero rows renders this instead of a blank grid.

DescriptionList

Package: @invariance/components
Distribution: git dependency, ships raw TS + CSS
Fonts: General Sans 400/500/600, self-hosted
Law: radius 0 · hairlines · paper/ink · dawn & spring

Forms

Field + controls

Text controls

Workspace name

Shown in the header lockup.

Primary domain

This domain is not on the approved-origin list.

Disabled

Search

Type to filter; × clears.

Notes

Region

Switches

Notifications onAuto-archiveLocked by policy

Submit row

Overlays & feedback

Modal, Drawer, Menu, Toast

Modal & Drawer

Menu

Last action: —

Context menu

Right-click a row, or use its ⋯. The same Menu, opened with an anchor: a point or an element.

Command palette

or press ⌃k

Tooltip

Toast

Alert — all tones

Neutral

Plain information on a raised surface.

Info

The components repo is consumed as a git dependency.

Healthy

All screenshot baselines match.

Heads up

Coolify needs a read token for private repo builds.

Failed

The origin is not on the approved list.

Simulated

Mock data — not connected to a live gateway.

12

Unread

34

Today

3

Flagged

Every piece on this screen is a library import — nothing app-specific except the content.

Auth

Sign-in, password setup and registration

Try the shared auth flows with demo credentials.

Sign in or sign up

One account. Every workspace.

INVARIANCE SYSTEMS / AUTHENTICATION

The law, rendered

Colors

Typography

Motion tokens

HexMark & Wordmark

Sizes

On ink

Lockup + hover micro-rotation

Reveal & PageTransition

Reveal — directions

Reveal — stagger

PageTransition

SmoothScroll

Header, LocaleSwitcher, Footer, LuminousGround

Header — full (nav + locale switcher + account slot)

Header — minimal (no end slot)

Footer — CTA + legal

Footer — legal bar only

Buttons, badges, feedback

Button — variants × sizes × disabled

Button — press interactions

Label & Badge

StatusBadge — all tones

Divider

Spinner

Skeleton

ProgressBar

RowButton — a whole row is the button

ToggleChip — on/off filters

TextButton — a link inside text

Spinners & the code marquee

CodeSpinner — the grid marquee

Loader — all variants

On ink — currentColor adapts

With labels

Rendered model output

Full answer

4. Wie dir ein ängstlicher Geschäftsführer trotzdem vertraut

Der Deckungsbeitrag

Die Prüfung im Code

Sections, cards, tabs

Projects

A titled section

Stats, charts, tables, lists

Field + controls

Modal, Drawer, Menu, Toast

Inbox

Sign in or sign up

AccountMenu