Wie dieses Erscheinungsbild entstanden ist: ein Briefing, 3 verworfene Richtungen, eine vierte, die trug. Was auf dieser Seite zu sehen ist, sind keine Abbildungen — es sind die Werte, aus denen jede Seite dieses Auftritts gebaut wird.
Am Anfang stand kein Moodboard, sondern ein Briefing: wer die Seite liest, was sie beweisen muss, was sie nicht sein darf. Positionierung, Zielgruppe und Tonalität wurden festgelegt, bevor eine einzige Farbe gewählt war.
Danach entstanden 3 Richtungen, jede als vollständige statische Vorschau von Startseite und /studio, gebaut auf dem echten deutschen Text statt auf Blindtext. Alle 3 kamen ohne Webfonts und ohne einen einzigen Fremdaufruf aus — das stand vor der ersten Skizze fest.
A war editorial: warmes Papier, tiefes Tintenblau als Akzent, Palatino und Optima aus dem Systemstapel, dazu eine mitlaufende Marginalspalte, die die Kennzahlen aus dem Text aufnahm.
B war betont technisch: kühles Schiefergrau, blauschwarze Tinte, Ultramarin nicht als Akzent, sondern als große Fläche. Eine Grotesk in 3 Registern. Als Signatur ein randabfallender Balken, der mitten durch einen Satz schneidet und die Schrift umkehrt — an genau 2 Stellen über beide Seiten. Projekte standen als Kontobuch, der Status als reine Schrift statt als Plakette.
C war zurückhaltend klassisch: Lodengrün als einzige chromatische Stimme, wieder eine Marginalspalte als Rückgrat, und die Behauptung im Titel trug ihren Bedeutungswechsel in der Farbe.
Verworfen wurden alle 3 mit demselben Befund: handwerklich sauber, inhaltlich daneben. Sie liegen weiter im Repository, jede auf ihrem eigenen Zweig — ein verworfener Entwurf, den man wegwirft, ist als Beleg verloren.
Die vierte Richtung saß. Von dort an ging es nicht mehr um Geschmack, sondern um Präzision: Typo-Stufen, Abstände, Kontraste, Verhalten auf dem Telefon.
In den Build ging am Ende kein Bild, sondern das System dahinter — Farbwerte, Schriftstufen, Abstandsraster, Komponenten. Deshalb kann diese Seite ihr eigenes Erscheinungsbild darstellen, ohne es zu illustrieren.
Jeder Block rendert die echten Werte aus dem Build, keine Abbildungen.
Das Zeichen besteht aus 2 Teilen: einem Geflecht, das über alle Kanten hinausläuft, und einem Quadrat darin. Das Geflecht ist der KI-Stack, das Quadrat das Studio — die eine feste Stelle, die nicht driftet und nicht blinkt, während ringsum alles rechnet. Sichtbar ist immer nur ein Ausschnitt, denn das Netz endet nicht am Rand.
Bewegung gibt es nur am Bildschirm, nur einmal pro Ansicht und nie in Schleifen unter 3 Sekunden. Signale laufen von Knoten zu Knoten, niemals durch das Quadrat. Wer im System reduzierte Bewegung eingestellt hat, sieht die ruhende Fassung — dieselbe festgelegte Momentaufnahme, die auch auf Papier gedruckt wird.
Ein Akzent pro Anwendung, nie 2 nebeneinander. Studio Grün (#8BF716) ist die Hausfarbe; die 4 Kampagnenfarben ersetzen sie vollständig, statt sie zu ergänzen. Der Akzent trägt nie längeren Text. Dunkel ist der Standard für den Bildschirm, hell der für Druck, Rechnungen und E-Mail — dort abgedunkelt, damit Text lesbar bleibt. Fließtext hält mindestens 4,5:1, Labels 3:1.
| Dunkel | Hell | |
|---|---|---|
| Studio Grün (Hausfarbe) | #8bf716--studio-green13.81:1 | #4d7a00--studio-green-dark4.65:1 |
| Signalgelb | #f7e016--campaign-signalgelb14.00:1 | #8a7500--campaign-signalgelb-dark4.12:1 |
| Türkis | #16f7c8--campaign-tuerkis13.59:1 | #0a8a70--campaign-tuerkis-dark3.90:1 |
| Lehm | #c98a3d--campaign-lehm6.44:1 | #8a5a1e--campaign-lehm-dark5.35:1 |
| Magenta | #e0119d--campaign-magenta4.24:1 | #b00c7a--campaign-magenta-dark5.99:1 |
| Dunkel | Hell | |
|---|---|---|
| --bg | #0c0e0c | #e9e6da |
| --panel | #101210 | #f6f4ea |
| --line | #22241f | #d7d4c5 |
| --text | #e8e6df15.07:1 | #181a1215.93:1 |
| --muted | #a5a3997.44:1 | #5c5a4e6.29:1 |
| --mid | #8f8d845.65:1 | #6d6b5f4.86:1 |
| --dim | #61645a3.12:1 | #8f8c7f3.06:1 |
| --fliess | #c9c7bd11.10:1 | #33352a11.31:1 |
| --on-ac | #101210 | #101210 |
2 Schriften mit klarer Aufgabenteilung: Archivo spricht, Fragment Mono protokolliert. Mono steht nie im Fließtext, Archivo nie in Statuszeilen. Fließtext 16 px auf 1,6, Zeilenlänge höchstens 34 em, Flattersatz, keine Silbentrennung im Display. Beide Familien sind quelloffen und liegen auf dem eigenen Server — kein Zeichen lädt bei Dritten.
Archivo Variable
--font-display
'Archivo Variable', 'Archivo', ui-sans-serif, system-ui, sans-serif
Fragment Mono
--font-mono
'Fragment Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace
Das Netz freistellen, sodass es innerhalb der Fläche endet. Das Quadrat vergrößern, drehen, abrunden oder in den Schriftzug schieben. Knoten farbig durchmischen. Das Zeichen auf Fotos, Verläufen oder Mustern platzieren. Regeln, die man aufschreibt, ohne sie zu prüfen, sind Dekoration — diese hier stehen im Prüfskript.
Wenige Tage, inklusive 3 verworfener Richtungen. Der Zeitgewinn lag nicht im schnelleren Zeichnen, sondern darin, dass Verwerfen nichts mehr kostete.
Der Mensch. Die Entwürfe entstanden in Minuten, die Entscheidung darüber nicht: Sie verlangte ein Urteil darüber, warum eine Richtung trägt und 3 andere nicht.
Das System als Code: Farbwerte, Schriftstufen, Abstände und Komponenten. Damit gibt es keine Lücke zwischen Entwurf und Umsetzung.
Nein. Schriften und Grafiken liegen auf dem eigenen Server, die Seite setzt keine Cookies und speichert nichts auf dem Gerät.
Was folgt, ist kein Auszug. Es ist das Regelwerk, nach dem jede Fläche dieses Studios gebaut wird — Bildschirm, Papier, Postfach, Textil. Die Werte stehen nicht daneben, sie sind es: Jede Farbfläche auf dieser Seite trägt die Farbe, die sie benennt, jede Schriftprobe läuft in der Stufe, die über ihr steht.
Präzise in der Sache, zugewandt im Ton. Wir schreiben in ganzen Sätzen, nennen Dinge beim Namen und verzichten auf Superlative. Wer uns liest, soll den Eindruck haben, mit einem erfahrenen Menschen zu sprechen.
Das Zeichen besteht aus 2 Teilen: einem Geflecht, das über alle Kanten hinausläuft, und einem Quadrat darin. Das Geflecht ist der KI-Stack, das Quadrat das Studio — die eine feste Stelle, die nicht driftet und nicht blinkt, während ringsum alles rechnet. Sichtbar ist immer nur ein Ausschnitt, denn das Netz endet nicht am Rand.
Ein Akzent pro Anwendung, nie 2 nebeneinander. Grün ist die Hausfarbe; die übrigen 4 sind Kampagnenfarben und ersetzen Grün vollständig, statt es zu ergänzen. Der Akzent trägt nie längeren Text.
Jede ersetzt die Hausfarbe vollständig. Die abgedunkelte Variante trägt Text auf hellen Flächen.
| Dunkel | Hell | |
|---|---|---|
| Signalgelb | #f7e016--campaign-signalgelb | #8a7500--campaign-signalgelb-dark |
| Türkis | #16f7c8--campaign-tuerkis | #0a8a70--campaign-tuerkis-dark |
| Lehm | #c98a3d--campaign-lehm | #8a5a1e--campaign-lehm-dark |
| Magenta | #e0119d--campaign-magenta | #b00c7a--campaign-magenta-dark |
Die 7 Neutralen des Manuals, jede mit ihrem Token.
#0c0e0c--ink-bg#101210--ink-panel#22241f--ink-line#e8e6df--ink-text#f6f4ea--paper-panel#e9e6da--paper-bg#d7d4c5--paper-lineJeder Build rechnet die Werte neu.
| Dunkel | Hell | |
|---|---|---|
| Fließtext · mindestens 4,5:1 | 11.10:1 | 11.31:1 |
| Label · mindestens 3:1 | 3.12:1 | 3.06:1 |
| Akzent · mindestens 3:1 | 13.81:1 | 4.65:1 |
2 Schriften mit klarer Aufgabenteilung: Archivo spricht, Fragment Mono protokolliert. Mono niemals im Fließtext, Archivo niemals in Statuszeilen.
Archivo Variable — 'Archivo Variable', 'Archivo', ui-sans-serif, system-ui, sans-serif
Status · Live · In Arbeit
0123456789 ÄÖÜ ß & % → ↗
Fragment Mono — 'Fragment Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace
Aus den Tokens gelesen und in Prozent umgerechnet, nicht abgeschrieben.
Papier ist hell, der Akzent bleibt ein Detail. Gedruckt wird auf ungestrichenem Naturpapier: 120 g für Bögen, 600 g Duplex für Karten.
Der Fließtext beginnt 2 Zeilen unter dem Betreff. Ränder oben 25 mm, links 25 mm, rechts 20 mm, unten 20 mm. Falz- und Lochmarken bei 87 mm, 105 mm und 192 mm.
Angebot, Rechnung, Vertrag und Protokoll folgen einem Raster. Pflichtangaben stehen vollständig im Fuß, damit der Kopf ruhig bleibt.
| Position | Betrag |
|---|---|
| Beratung, Tagessatz | 0,00 € |
| Umsetzung, pauschal | 0,00 € |
| Gesamt | 0,00 € |
Signatur und Newsletter laufen hell, weil Postfächer hell sind. Keine Bilder in der Signatur, kein Logo als Anhang, keine Zitatkaskaden.
Guten Tag,
anbei die Unterlagen wie besprochen. Bei Rückfragen jederzeit gern.
Beste Grüße
Ein Absatz, eine Sache. Der Akzent erscheint im Newsletter ausschließlich im Quadrat und als Linkfarbe.
Weiterlesen ↗16:9, 4 Layouts, keine Aufzählungspunkte und keine Folienübergänge. Eine Aussage pro Folie, Belege in der Fußzeile.
Vorne der Punkt auf der linken Brust, hinten das vollständige Logo. Objekte tragen nur den Punkt. Siebdruck, ein Durchgang, keine Effektfarben.
Profile zeigen das Quadrat, geteilte Seiten die Wortmarke auf Anthrazit. Die Website bleibt die Referenz für alle digitalen Anwendungen.
Was an Druckerei, Konfektionär oder Agentur geht, geht vollständig oder gar nicht. Diese Angaben stehen jedem Auftrag bei.
Sie sprechen mit einem KI-System. Die Antworten werden automatisch erzeugt.
Ich bin Curtis. Welches KI-Modell antwortet, entscheiden Sie. Mit jeder Antwort sehen Sie, was so ein Gespräch kostet.
Antwortet: Studio wählt
Curtis ist ein KI-Agent. Zusagen macht nur der Mensch.Dieser Chat speichert nichts über die Sitzung hinaus, dennoch keine personenbezogenen Daten hier eingeben.
Sitzung beendet. Neue Frage: Panel schließen und wieder öffnen.