Ein Workspace. Ein Kontext.
Seiten, Dateien und Gespräche gehören zusammen. Jeder Workspace hat einen Dateibrowser und einen Agenten; ihre Zugehörigkeit muss klar erkennbar sein.
ONO / DesignAusgabe 01 · Ein lebendiges System
Ein gemeinsamer
Rahmen.
Ein Ort für dich,
deine Arbeit und deine Agenten.
Identität und Oberfläche eines Desktop-Browser-Agenten mit eigener Haltung. Geschaffen, um Raum für Neues zu machen.
Designpaket laden
Mensch ↔ AgentVerbunden. Und doch dein eigener Raum.
01 / Prinzipien
Mit Haltung.
Mit Raum für dich.
ONO verbindet Browser, Dateien und Agenten zu einem Desktop-Erlebnis. Das Design macht diese Beziehungen sichtbar und gibt der Arbeit den meisten Raum.
Die Arbeit steht im Vordergrund.
Der Inhalt führt. App-, Workspace- und Fenstersteuerung haben feste Plätze. Dekorative Bedienelemente müssen ihren Raum rechtfertigen.
Zugänglich statt überladen.
Eine ruhige Kopfzeile kann viel leisten. Ergänzende Modell-, Kontext- und Nutzungsinformationen werden über eine klare Aufklappfunktion zugänglich.
Zustände unmissverständlich zeigen.
Arbeiten, Warten und benötigte Antworten müssen unterschiedlich aussehen. Kombiniere Symbole mit Wörtern; Animation und Farbe unterstützen nur.
Material unterstützt das Lesen.
Unschärfe kann eine Fläche mit ihrer Umgebung verbinden. Sie darf Eingaben oder Nachrichten nie zu frei über einem Foto schwebendem Text machen.
Raum für unterschiedliche Menschen.
Tastaturbedienung, reduzierte Bewegung, deckende Flächen und E-Ink gehören zum System. Personalisierung muss die Orientierung erhalten.
Diese erste Ausgabe dokumentiert die aktuelle App und definiert einen einheitlichen Markenauftritt über den Bildschirm hinaus. Neue Gestaltungs- und Produktionsregeln geben die Richtung vor; sie bedeuten nicht, dass alle älteren Ansichten bereits angepasst wurden.
02 / Identität
Der Name steckt
im Zeichen.
Shared Frame ist Symbol und Wortmarke zugleich. Zwei gleiche, offene O-Rahmen teilen sich das diagonale N. Mensch und Agent haben ihren eigenen Raum und eine Verbindung dazwischen.
Die Verbindung bleibt erhalten.
- Behalte das Verhältnis 336:104 und beide offenen Innenräume bei.
- Lasse auf allen Seiten mindestens ein x Schutzraum.
- Beginne bei neuer Kommunikation mit 64 px Breite digital oder 20 mm im Druck; prüfe kleinere Ausnahmen anhand von Proben.
- Füge neben dem Zeichen kein zweites Wort „ONO“ hinzu.
Eine Identität, zwei Kontexte.
Das App-Symbol verwendet eine anthrazitfarbene Kachel mit Innenabstand. Das kleine App-Menüzeichen übernimmt die Farbe seiner Steuerung. Die volle limettengrüne Identität bleibt Dock und Markensignatur vorbehalten.
ONO von smeidu
Immer großgeschrieben: ONO. Schreibe smeidu im Urheberhinweis klein und in Syne. Verwende echten Text für den Hinweis, statt ihn in das Symbol zu pressen.
Die vorhandene 26-px-Menümaske und kleine Favicons sind gezielte optische Ausnahmen von den Kommunikationsgrößen.
Den Rahmen nicht verzerren.
Das Zeichen darf nicht verschwinden.
ONODen Namen nicht wiederholen.
03 / Typografie
Vertraute Buchstaben.
Eine persönliche Stimme.
Roboto trägt Lesetext und Oberfläche. Roboto Mono gibt technischen Informationen einen gleichmäßigen Rhythmus. Syne zeichnet den Namen des Urhebers. Alle drei Schriften werden lokal gehostet.
Schriftprobe / Ausprobieren48 px
Ein Ort zum Weiterdenken.
Aa Bb Cc · 0123456789 · → ⌘ ↔
Roboto
App-Oberfläche, Website, Fließtext und große Überschriften
Variable Schriftschnitte 100–900
WOFF2 ↓Schriftlizenz ↗Roboto Mono
Technische Beschriftungen, Zahlen und Terminal-Metadaten
Variable Schriftschnitte 100–700
WOFF2 ↓Schriftlizenz ↗Syne
Die smeidu-Urhebersignatur
Variable Schriftschnitte 400–800
WOFF2 ↓Schriftlizenz ↗| Rolle | Größe / Schriftschnitt | Verwende |
|---|---|---|
| Metadaten | 11–12 px / 400–500 | Nutzung, Zeitstempel und kompakter Status |
| Oberflächenbeschriftungen | 13 px / 400–600 | Tabs, Einstellungen und Fensteridentität |
| Lesetext | 15–17 px / 400 | Gespräche und erklärende Texte |
| Einführungsüberschrift | 28–46 px / 400–600 | Agentenstart; fließend je nach verfügbarem Raum |
| Markenüberschrift | 48–120 px / 500–650 | Neue Poster und große redaktionelle Gestaltung |
Verwende angenehmen Zeilenabstand für Fließtext und richte kompakte Beschriftungen am Container aus. Nutze gleichbreite Ziffern für Uhren und Zähler. Große Überschriften dürfen eng stehen; kleiner Oberflächentext braucht offene Innenräume.
04 / Farbe
Ruhiger Grund.
Klare Signale.
Limette auf Anthrazit ist die Signatur. Papier und Tinte geben Website und redaktioneller Gestaltung einen warmen Grund. Blau kennzeichnet Aktionen in der Standardoberfläche. Markenfarben und Oberflächenrollen hängen zusammen, erfüllen aber unterschiedliche Aufgaben.
Limette
Signaturzeichen auf Anthrazit; große Kommunikationsakzente
Anthrazit
Zentraler Markenhintergrund
Papier
Grundfläche für Website und redaktionelle Gestaltung
Tinte
Lesetext, Konturen und Zeichen auf hellem Grund
Aktionsblau
Website-Aktionen und Standardakzent der Oberfläche
Weiß
Leseflächen und negative Zeichenversionen
Wähle das Paar, nicht nur die Farbe.
Kombiniere Limette mit Anthrazit, Blau mit Weiß und Tinte mit Papier. Verwende Limette nicht für kleinen Text auf Weiß und dezente Ränder nicht als Textfarbe. Prüfe immer ein tatsächliches Vordergrund-Hintergrund-Paar.
Farbe hat eine Aufgabe.
Verwende Akzent für Fokus, Auswahl und wichtige Aktionen. Ein Status braucht zusätzlich ein Wort oder Symbol. Nicht jedes Bedienelement sollte um Aufmerksamkeit konkurrieren.
05 / Designs & Tokens
Sechs Erscheinungsbilder.
Ein vertrauter Ort.
Diese Werte stammen direkt aus ONOs App-Stilen, nicht aus einer separaten Marketingannäherung. Der Standard ist smeidu’s choice. Die folgende Designauswahl ändert nur dieses Beispiel.
Workspace-AgentBereit
Ein Ort zum Weiterdenken
Wo wollen wir beginnen?
Eine Frage. Eine erste Idee. Etwas, das sich lohnt.
Nachricht an diesen Agenten …
Oberflächenbeispiel · hier läuft kein Agent
smeidu’s choiceNeutralTerminalTageslichtAuroraE-Ink
| Token | Rolle | Aktueller Wert |
|---|---|---|
--bg-base | Workspace-Grundfläche | #f7f5f2 |
--surface-window | Lesefläche | #fff |
--surface-panel | Bereiche & Menüs | #f7f5f2 |
--surface-bar | App- & Workspace-Steuerung | #ebe9e6 |
--text-1 | Primärtext | #1e1919 |
--text-2 | Sekundärtext | #5b5650 |
--accent-solid | Aktionen & Fokus | #0061fe |
--hairline | Dezente Trennung | #d3cec9 |
--state-ok | Abgeschlossener Zustand | #0f503c |
--state-warn | Benötigt Aufmerksamkeit | #9b6400 |
Nutze die Rolle, nicht den Hexwert.
Verwende --surface-window für eine Lesefläche und --accent-solid für Fokus. Feste Markenfarben bleiben Kommunikationsmotiven vorbehalten. Lade die vollständige Token-Momentaufnahme als JSON oder CSS.
E-Ink ist ein ganzes Gestaltungskonzept.
Papier, Tinte und Linien ersetzen Glas, Leuchten und dekorative Bewegung. Text, Symbole und Ränder erhalten die Hierarchie. Website-Stile bleiben pro Website optional, statt jede Seite umzufärben.
06 / Raum & Form
Gib jeder
Beziehung Raum.
Beginne neue Layouts mit einem 4-px-Rhythmus. Nutze Ausrichtung und Abstand, bevor du weitere Container hinzufügst. Optische Korrekturen sind erlaubt, wenn sie kleine Elemente klarer lesbar machen.
Die App hat echte Ausnahmen: 13-px-Schrift, ein 28-px-Adressfeld, 32-px-Fensterzeilen und 36-px-Workspace-Zeilen. Ein Abstandsrythmus ist ein Gestaltungswerkzeug, kein Grund, funktionierende Elemente zu verzerren.
481216243248647px / chip14px / panel20px / window999px / pillDie oben gezeigten Standardradien gehören zu Neutral. smeidu’s choice nutzt 12/10/5 px für Fenster/Bereich/Chip, E-Ink 10/10/5 px. Nutze die Radius-Tokens des aktiven Designs. Die Geometrie des Markenzeichens bleibt unverändert.
48App-Leiste / px
40Browser-Kopfzeile / px
16Streifenabstand / px
280Seitenleiste / px · 220–380
Raum hat Ebenen.
01Grundfläche
Der Workspace-Hintergrund. Ruhig genug, damit Fenster führen.
02Fenster
Ein klarer Rand und eine Lesefläche. Der Fokus ist eindeutig.
03Überlagerung
Menüs und Dialoge über der Arbeit. Schließen und Fokus bleiben verlässlich.
Glas hat Bedingungen.
| Fläche | Designfärbung / Unschärfe | Leseregel |
|---|---|---|
| Einführung | 86% Fenster / 18 px | Primärer Vordergrund über dem Bild |
| Eingabefeld | 88% Bereich / 20 px | Eingegebenen Text und Nutzungsdetails lesbar halten |
| Aktivität | 76% Fenster / 18 px | In Ruhe kompakt; aufgeklappt 94% Färbung |
Dies sind Hintergrundfarbmischungen, keine Deckkraft auf der gesamten Komponente. Der Alpha-Wert eines Designs kann das Ergebnis beeinflussen. Prüfe den Vordergrund über hellen und dunklen Bildern. E-Ink und Bedienungshilfen ersetzen diese Gestaltung durch deckende Flächen.
07 / Komponenten
Kleine Teile.
Klares Verhalten.
Ein Beispiel ist nützlich, wenn es Zustände und Absicht erklärt. Diese Beispiele dokumentieren die Gestaltungssprache; sie sind keine zweite laufende ONO-Instanz.
Aktionen / Standard, Fokus, deaktiviert
Eine primäre Aktion pro Gruppe. Halte deaktivierte Zustände lesbar und erkläre, warum eine Aktion nicht verfügbar ist.
Eingabefeld / Fokusform
Der Fokusring folgt der Pillenform des Felds. Ein Platzhalter ersetzt nie eine hilfreiche Beschriftung.
Agent / Statussprache
Bereit Arbeitet! Deine Antwort wird benötigt Abgeschlossen! Anfrage fehlgeschlagen
Halte den Arbeitsstatus sowohl in der Fensterkopfzeile als auch im Tab sichtbar. E-Ink und reduzierte Bewegung behalten einen ruhigen, eindeutigen Hinweis.
Aufklappen / Zusatzinformationen
Workspace-Kontext wird verwendet 3 Schritte
- Den ausgewählten Workspace identifizieren.
- Den erlaubten lokalen Kontext lesen.
- Einen klaren Rückweg zum Ergebnis behalten.
In Ruhe kompakt. Mehr Details auf Wunsch. Fragen und Berechtigungsanfragen verdienen mehr Aufmerksamkeit als gewöhnliche Werkzeugaktivität.
Symbole teilen eine Linienstärke.
Diese Pfade stammen aus der Umriss-Symbolfamilie der App: 20 × 20 viewBox, 1,5 px Linienstärke und runde Verbindungen. Nutze einheitliche 16–20-px-Symbole, beschrifte reine Symbolaktionen und behalte großzügige Klickflächen. Die durchsuchbare Material-Symbolbibliothek ist eine separate Ressource für Workspace-Auswahlen.
08 / Interaktion & Barrierefreiheit
Bewegung mit Absicht.
Menschen behalten die Kontrolle.
Oberflächen ändern, wie Arbeit angeordnet ist. Ansichten ändern, wie viel davon sichtbar ist. Halte diesen Unterschied in Beschriftung und Navigation klar.
Tab-Oberfläche
Eine vertraute Tab-Leiste mit Übersicht, Streifenansicht und Vollansicht.
Seitenleisten-Oberfläche
Workspaces und benannte Fenster in einer ruhigen, dauerhaften Spalte.
Canvas-Oberfläche · Vorschau
Ordne zusammenhängende Arbeit räumlich an. Der Workspace-Agent bleibt in der Nähe.
Freihändige Oberfläche · Experimentell
Eine einfache Bühne für optionale Sprach- und Kameragesten. Geräte werden ausdrücklich gestartet.
Übersicht → Streifen → Vollansicht
Die Übersicht hilft beim Wählen. Die Streifenansicht hält benachbarte Arbeit erreichbar. Die Vollansicht gibt einem Fenster die Bühne. Aktiver Tab, fokussiertes Fenster und sichtbarer Inhalt müssen zusammenpassen.
⌘⌥1 / Übersicht · ⌘⌥2 / Streifen · ⌘⌥3 / Vollansicht
Escape gehört Menüs, Dialogen und Website-Vollbild.
Bewegung folgt der Aufgabe.
Die Streifenfeder der App nutzt Steifigkeit 320, Dämpfung 38 und Masse 0,9. Kleine Miniaturkarten-Rückmeldungen dauern 160 ms. Neue Markenbewegung soll Verbindung vermitteln, statt dauerhaftes Spektakel hinzuzufügen.
Reduzierte Bewegung und E-Ink entfernen dekorative Animation. Bewegung darf nie das einzige Zeichen eines arbeitenden Agenten sein.
Gestalte auch für den schwierigeren Fall.
- Kontrast: Strebe mindestens 4,5:1 für normalen Text und 3:1 für großen Text und bedeutungstragende Grafiken an. Prüfe das tatsächliche Farbpaar in jedem Design.
- Tastatur: Erhalte eine logische Reihenfolge, sichtbaren Fokus und eine verlässliche Rückkehr aus Menüs und Dialogen.
- Materialien: Verwende deckende Flächen bei reduzierter Transparenz oder erhöhtem Kontrast; prüfe über hellen und dunklen Bildern.
- Klickflächen: Mache den klickbaren Bereich größer als sein Symbol. Beschriftung und Status müssen ohne Farbe verständlich bleiben.
- Berechtigungen: Erkläre Mikrofon- und Kameranutzung beim bewussten Start. Schalte Geräte nicht zur Dekoration ein.
Die Kontrastziele beziehen sich auf die W3C- Richtlinien zum Textkontrast und Richtlinien zum Nicht-Text-Kontrast. Diese Ziele bedeuten nicht, dass die gesamte App ein Barrierefreiheitsaudit abgeschlossen hat.
09 / Sprache & Ton
Ein durchdachtes Werkzeug.
Eine menschliche Stimme.
Direkt, warm und konkret. Erkläre die Aktion und ihr Ergebnis. Die Aufmerksamkeit bleibt bei der Arbeit, nicht bei ONOs Selbstdarstellung.
„Deine Antwort wird benötigt.“
Sage Menschen, was als Nächstes passiert.„Ein Interventionsereignis ist aufgetreten.“
Halte interne Fachsprache aus der Oberfläche fern.„Verbindung fehlgeschlagen. Prüfe die Serveradresse.“
Erkläre den Fehler und einen sinnvollen nächsten Schritt.„Etwas ist schiefgelaufen!“
Vermeide vage Fehler und unnötigen Alarm.Verwende „Workspace“, „Fenster“, „Agent“ und „Streifenansicht“ einheitlich. Schreibe ONO groß und smeidu klein. Kennzeichne Konzepte und Vorschaufunktionen ehrlich. Behaupte nie, ein Modell habe etwas gelesen, geändert oder gesendet, bevor dies tatsächlich geschehen ist.
10 / Die Marke im Alltag
Ein System, das
den Bildschirm verlässt.
Derselbe Rahmen kann einen Gedanken, ein Poster oder einen kleinen Alltagsgegenstand tragen. Nutze Größe, Kontrast und Schutzraum, um die Identität ohne zusätzliche Markenzeichen erkennbar zu machen.
Ein Ort zum DenkenAnthrazit / Limette
SVG ↓
Raum schaffenPapier / Tinte
SVG ↓
Ein gemeinsamer RahmenBlau / Weiß
SVG ↓
Alltagsgegenstände. Derselbe gemeinsame Rahmen.T-Shirt · Stofftasche · Aufkleber
KI-generiertes Konzept / Nicht zum VerkaufEin Zeichen. Ein bewusster Platz.
Halte eine kleine Brustsignatur dezent. Die Tasche darf ein größeres Zeichen tragen. Nutze einfarbige Motive und großzügigen Schutzraum. Prüfe offene Innenräume auf strukturiertem Material vor einem Druckauftrag.
Erst Gestaltung, dann Produktion.
Die herunterladbaren Poster sind bearbeitbare RGB-SVG-Studien mit eingebetteter Roboto. Stimme für die Produktion Größe, Beschnitt, Farbumwandlung, Schriftkonturen und Stoffproben mit dem Hersteller ab. Das Foto ist ein Konzept; die genaue Master-SVG ist der Ausgangspunkt der Produktion.
11 / Ressourcen
Nimm das System
mit.
Ein kompaktes Paket für einen einheitlichen ONO-Auftritt: originale Vektorzeichen, App-Symbol, lokale Schriften und Lizenzen, bearbeitbare Poster und alle sechs Design-Token-Sätze.
Designpaket ladenAusgabe 01 · ZIPDesign-Tokens
JSON ↓Gekapselte DesignvariablenCSS ↓Shared-Frame-MasterSVG ↓Paketinhalt & NutzungshinweiseTXT ↗Schriften behalten ihre mitgelieferten Originallizenzen. Dieses Paket ändert die Quellcode- oder Markenlizenzierung nicht. Tokens sind eine versionierte Momentaufnahme der App 0.1.21-test.1 und können sich mit neuen Versionen weiterentwickeln.
12 / Referenzen & Pflege
Offen lernen.
Eine eigene Sprache entwickeln.
Die Referenzen haben Aufbau und Detailtiefe dieses Systems geprägt. Ihre Logos, Schriften und Anwendungsmotive sind nicht Teil des ONO-Pakets.
Dropbox
Die Marke als ArbeitswerkzeugEine hilfreiche Referenz, um Identität, Sprache, Schrift und reale Anwendungen gleichwertig zu behandeln. ONO behält sein eigenes Zeichen und seine eigenen Motive.
IBM Design Language
Ein wiederholbares GestaltungssystemEine Referenz für klare Beziehungen zwischen Raster, Typografie und Komposition in digitalen und physischen Formaten.
Atlassian Design
Entscheidungen nach ihrem Zweck benennenEine Referenz für die Verbindung von semantischen Tokens, Barrierefreiheit, Interaktion und Komponentenregeln.
Vercel Geist
Tatsächliche Zustände zeigenEin hilfreiches Beispiel dafür, Materialien und Komponenten anhand gezielter, überprüfbarer Beispiele zu erklären.
Wird mit dem ONO-Quellcode gepflegt. Aktualisiere exportierte Tokens aus der tatsächlichen App, prüfe Komponentenzustände in allen Designs und kontrolliere vor der Veröffentlichung schmale Layouts, Tastaturzugang und Bedienungshilfen. Quellcode und Pflegehinweise ↗