Heute
Auf Ihrem Tisch
3 Vorgänge warten · 1 dringend
Vertrag · Anya Volkova
Heute
Brief · Stiftung Kunstfonds
+ 2 Tage
Funding · Atelier-Stipendium
10 Tage
Design System · Stand 27.5.2026
Papier statt Plattform.
ato läuft auf warmem Off-White, spricht in DM Mono und nutzt Coral nur dort, wo wirklich gehandelt wird. Dieser Guide zeigt die Tokens, Komponenten und Regeln, die jedes neue Interface tragen — kompakt zum Nachschlagen, nicht zum Auswendiglernen.
Vier Grundsätze
01
Nicht verhandelbar. Wenn ein Entwurf gegen einen dieser Sätze arbeitet, ist meistens der Entwurf falsch — nicht das System.
01
Papier statt Plattform
Warmes Off-White als Canvas, weiße Karten mit Haarlinie. Keine Glasflächen, keine Gradients, keine dramatischen Schatten.
02
Mono ist die Stimme
Sämtlicher UI-Text läuft in DM Mono — Listen, Meta, Buttons, Tabellen. Nur Headlines wechseln zu DM Sans.
03
Eine laute Farbe
Coral ist die einzige Akzentfarbe und nur für aktive Zustände und primäre Aktionen. Modul-Tags kategorisieren, sie schreien nicht.
04
Pill und Hairline
Interaktives ist border-radius 999px. Container haben 14–18 px. Trennungen sind 1 px auf --ink-200, nie dicker.
Farben
02
Surfaces
Canvas + Karten · warm, papierhaft
paper
#F4F1E8
--paper
paper-soft
#EFEBE0
--paper-soft
card
#FFFFFF
--card
card-inset
#F6F3EC
--card-inset
Tinte
Texthierarchie + Hairlines
ink-1000
#14120F
Headings · Primär
ink-800
#2A2722
Body kräftig
ink-600
#5A554B
Sekundärtext
ink-400
#8E887C
Captions · Meta
ink-300
#B4AEA2
Sehr leise Meta
ink-200
#DCD6C8
Hairlines
ink-100
#E8E2D4
Track · Skeleton
Akzent · Coral
Nur für aktive Zustände und Primary-Aktionen
coral-600
#F26757
Default · Action
coral-700
#E1503F
Hover
coral-100
#FBDBD4
Wash · selten
Status
Separate Tokens · niemals Coral für Fehler missbrauchen
success-600
#2C6E4F
Bestätigt · Erfolg
warning-600
#B07A1A
Achtung · Frist
danger-600
#B23A2C
Fehler · Validierung
info-600
#2A4F7A
Hinweis
Modul-Tags
Pastellige Paare · kategorisieren ruhig
Künstler:in
kuenstler
BG #EAD9F2FG #4B2A5C
Brief
brief
BG #D6E1EEFG #2A3F62
Funding
funding
BG #F5D7D2FG #6B2A24
Talk
talk
BG #DCE2DEFG #2C3D34
Vernissage
vernissage
BG #D3DCE4FG #2A3B4C
Radar
radar
BG #C9D7D3FG #1F3A35
Vergabe
vergabe
BG #E2DDD0FG #4A4234
Themenfelder · Agentur
Linien-Marker für Stadt · Transfer · Werte · Kultur
Stadt
stadt
BG #F0BAA8FG #4C2517
Transfer
transfer
BG #A8C5D4FG #1F3848
Werte
werte
BG #B5CDB8FG #1F3A26
Kultur
kultur
BG #E8D0A8FG #4A361A
Typografie
03
Zwei Schriften, klare Rollen. DM Sans nur in Headlines und großen Zahlen, DM Mono überall sonst — auch dort, wo es ungewöhnlich wirkt. Genau das ist das Markenelement.
Schriftpaarung
Google Fonts · DM Sans + DM Mono
Aa
Headline · Display
DM Sans · 400 / 500 / 600 / 700
Aa
UI · Body · Meta
DM Mono · 300 / 400 / 500
Type Scale
9 Stufen · von 10.5px bis 56px
Papier statt Plattform.
Verträge generieren
Heute auf Ihrem Tisch
Welches Dokument möchten Sie erstellen?
11 offene Antworten warten auf eine Reaktion.
Vertrag · Künstler:in · Stand 19.05.2026 · 20:35
Sekundärer Fließtext für Helper-Strings.
Eyebrow · Section-Label
Spacing
04
4px-Basis. --s-3 (12px) ist die häufigste Lücke zwischen Zeilen, --s-6 (24px) das Karten-Padding, --s-12 (48px) der Abstand zwischen Sektionen.
--s-1
4 px
--s-2
8 px
--s-3
12 px
--s-4
16 px
--s-5
20 px
--s-6
24 px
--s-8
32 px
--s-10
40 px
--s-12
48 px
--s-16
64 px
--s-20
80 px
Radius & Shadow
05
Pill für interaktive Pillen (Buttons, Steps), --r-md und --r-lg für Container. Schatten extrem dezent, und nur in Bewegung — ruhende Karten bleiben flach.
Radius
--r-xs
6 px · Badges
--r-sm
10 px · Small Btn
--r-md
14 px · Rows · Tiles · Inputs
--r-lg
18 px · Cards
--r-pill
999 px · Buttons · Steps
Shadow
Resting
Hairline, kein Schatten
shadow-card
Kaum sichtbar · Default-Anhebung
shadow-lift
Hover · Drag · Tile-Lift
Buttons
06
Pro Screen exakt eine Coral-Aktion. Alles andere ist Secondary, Ghost oder Small. Buttons sind immer Pill-radius, DM Mono Medium, mit weichem Hover.
Varianten
Mit Pfeil + Größe
Disabled · Inaktiv
Auf dunklem Grund
Modul-Badges
07
Sieben pastellige Paare. Sie kategorisieren ruhig — kein Hover, keine Aktion. Wenn ein Tag wirken soll wie ein Button, hast du die falsche Komponente.
Modul-Tags
Künstler:in Brief Funding Talk Vernissage Radar Vergabe
Themenfeld-Marker
Stadt Transfer Werte Kultur
Links
08
Plain links übernehmen die Textfarbe; Arrow-Links bekommen einen dezenten Pfeil-Suffix. Hover wechselt nach Coral.
Eyebrows
09
Kleines Kapitel-Label über Section-Headlines. Mono, 10.5px, tracking 0.10em, uppercase.
Themenfelder
Heute · 19.05.2026
Cards
10
Weißer Karton auf Papier, Hairline-Border, --r-lg. Eyebrow oben, Titel in DM Sans, optionaler „Alle →“-Link rechts. Padding --s-6 (24px).
Stand
Offene Antworten
Künstler:innen melden sich
11 offene Antworten
Anya V.
4
Mira S.
3
Linus B.
2
Jonas K.
2
Stepper
11
Pill-Container mit Pill-Steps. Der aktive Step ist Coral — und nur er. Erledigte Steps wechseln auf ink-1000 auf paper-soft, kommende bleiben grau.
Rows & DocRows
12
.ato-row ist die dichteste Liste — gepunktete Trenner, zwei Spalten. .ato-doc-row ist die Karte mit Aktionen rechts, für Listen wie Verträge oder Briefe.
Row · Dashboard-Liste
Antrag · Atelier-Stipendium 2026
10 Tage
Vertrag · Anya Volkova
Heute
Talk · „Zwischen den Räumen“
+ 4 Tage
Tiles
13
Auswahl-Kacheln in Flows: erste Frage „Welches Dokument?“, „Welche Vorlage?“. Auf Hover heben sie sich leicht — sonst flach.
Progress & Stats
14
Vergleichende Balken bleiben ink-600 auf ink-100 — kein Coral. Stats kombinieren DM Sans 40px (Zahl) mit DM Mono Meta (Label) auf einer Grundlinie.
Antworten · letzte 30 Tage
Anya V.
12
Mira S.
8
Linus B.
5
Jonas K.
3
11 offene Antworten
04 Verträge in Arbeit
26 Sachen archiviert
Alerts
15
Status-Hinweise nutzen separate Status-Tokens — Coral bleibt für Aktion reserviert. Vier Töne: Info, Erfolg, Warnung, Fehler.
Hinweis
Förderzeitraum bis 31.05.2026 — neue Anträge ab 01.06. zur kommenden Runde.
Bestätigt
Vertrag wurde an Anya Volkova versendet. Bestätigung erwartet bis 22.05.2026.
Frist nähert sich
Antrag Atelier-Stipendium 2026 — noch 10 Tage bis zur Frist (31.05.2026).
Fehler
Beim Speichern ist ein Fehler aufgetreten. Bitte erneut versuchen oder den Entwurf duplizieren.
Accordion · FAQ
16
Native <details>-Element mit gestyltem Summary. Plus-Indikator rechts wird zu Minus, wenn offen.
Wie lange dauert ein typisches Mandat?
Zwischen 6 Wochen (Strategie-Sparring) und 18 Monaten (Reallabor). Wir scopen jedes Mandat in drei Phasen — Klarheit, Konzept, Umsetzung — mit eigenen Outcomes pro Phase.
Arbeitet ihr auch mit kleineren Budgets?
Ja. Das untere Ende ist ein 45-Minuten-Sparring-Format für 480 €. Daraus entstehen oft Mandate, manchmal auch Klarheit, dass kein Mandat nötig ist.
Welche Förderungen lassen sich kombinieren?
Wir arbeiten mit Städtebauförderung, BAFA Unternehmensberatung, BMBF-Programmen und einzelnen Stiftungsmitteln. Förderlogik klären wir vor dem Angebot, nicht danach.
Gibt es Garantien für die Wirkung?
Keine Wirkungsgarantie — die wäre unredlich. Sehr wohl aber feste Outcomes (Strategie-Charter, Konzept, Bericht) und ein klares Eskalationsfenster im Mandat.
Quote
17
Pull-Quote als Linien-Variante oder als ruhige Karte. DM Sans, fluide Größe — Headline-Charakter, aber leiser als eine Section-Title.
Linie
Wir scopen jedes Mandat in drei Phasen — Klarheit, Konzept, Umsetzung — mit eigenen Outcomes pro Phase.
Karte
ato denkt nicht in Workshops, sondern in Outcomes. Das ist der Unterschied zu vielen anderen Beratungen, mit denen wir gearbeitet haben.
Tabs
18
Pill-Container mit Pill-Tabs auf paper-soft. Aktiver Tab hebt sich mit weißem Hintergrund und sehr dezentem Schatten.
Table
19
Mono-Tabelle mit Hairline-Trennern. Header in Micro/Uppercase. Spalten nur so breit wie nötig, Inhalt nicht zerteilen.
| Mandat | Linie | Status | Frist |
|---|---|---|---|
| Flora Momentum | Stadt | Umsetzung | 31.12.2026 |
| ARTCOM · KIT | Transfer | Reallabor läuft | 30.06.2026 |
| Inoteq Wertearbeit | Werte | Abgeschlossen | — |
| Orange Days | Kultur | In Vorbereitung | 25.11.2026 |
Logo-Cloud
20
Platzhalter für Logo-Reihen — Partner, Förderer, Kunden. Im Produktiveinsatz monochrome SVGs; hier als Schrift-Stub.
BMBF
KIT
Stadt Karlsruhe
BAFA
Berliner Bausenat
Stiftung Kunstfonds
Person
21
Team-Zeile mit Name (DM Sans), Rolle (Mono Meta) und Mail-Link. Funktioniert auf hellem und dunklem Grund.
Hell
Norina Quinte
Gründerin · Stadt, Reallabore, Kultur
Adam
Partner · Strategie & Wertearbeit
Hannah Klein
Ansprechpartnerin
Dunkel
Norina Quinte
Gründerin · Stadt, Reallabore, Kultur
Adam
Partner · Strategie & Wertearbeit
Inputs
22
Text-Felder folgen dem Card-Radius (14px), DM Mono Body. Focus zieht den Coral-Ring — denn Coral steht für aktive Zustände.
Default · Disabled · Error
Wir antworten innerhalb 48 h.
Inkl. Vorwahl
Bitte nur Kleinbuchstaben, Zahlen und Bindestriche.
Sizes
Textarea
23
Mehrzeiliges Texteingabefeld. Min-Höhe 110 px, vertikal resize-bar.
Zwei Sätze reichen.
Select
24
Native <select> mit eigenem Chevron — akzeptiert dieselben States wie Inputs.
Welche Linie passt?
Checkbox & Radio
25
Coral-Fill im aktiven Zustand — derselbe Akzent wie der aktive Step im Stepper. Checkbox eckig, Radio rund.
Checkbox
Radio
Switch
26
Boolean-Toggle für Settings. 38×22 px Pille, Coral wenn an. Für Sofort-Wirkung (kein „Speichern“-Klick nötig).
Form-Layout
27
.ato-form-grid stapelt Felder in zwei Spalten, fällt unter 640 px auf eins zurück. Innerhalb der Spalte trennt .ato-form die Felder mit --s-5 (20 px).
Stimme & Copy
28
Wir siezen — freundlich, auf Augenhöhe, professionell. Kein Konzern-Sprech, aber auch kein erzwungenes Du.
So spricht ato
- Sie-Form, mit Wärme. „Welches Dokument möchten Sie erstellen?“
- Freundlich und konkret — keine Floskeln, keine Beraterphrasen.
- Knapp, aktive Verben statt Substantivketten.
- Genderform mit Doppelpunkt: „Künstler:in“.
- Datum/Zeit ungekürzt:
19.05.2026 · 20:35. - „Wir haben uns für Sie umgehört“ statt „Es wurden Recherchen durchgeführt“.
So nicht
- Ungefragtes Duzen — auch wenn es jünger klingen könnte.
- „KünstlerIn“, Binnen-I, generisches Maskulinum.
- „Vor 3 Tagen“ wenn das Datum wichtig ist.
- Slogans: „Effizient verwalten — jetzt einfacher denn je!“.
- Steifer Beamtenton: „Hiermit teilen wir Ihnen mit, dass…“.
- Emoji im UI (außer der User wünscht es).
Do / Don't · Visuell
29
Tun
- Eine Coral-Aktion pro Screen — die wichtigste.
- Hairline 1 px auf
--ink-200trennt. - Karten ruhen flach, heben sich nur bei Hover/Drag.
- DM Mono für alles außer Headlines.
- Pill-Buttons mit weichem 140 ms Hover-Übergang.
Lassen
- Coral für Status (z. B. Fehler) — Status-Rot ist separat.
- Schatten auf ruhenden Karten.
- Mehr als 2 Schriften pro Screen.
- Gradients, Glasflächen, Drop-Shadows mit hohem Y-Offset.
- Container mit linkem Border-Accent in Coral.