Twinkle AI Labs

TWINKLE AI LABS · DESIGN SYSTEM

Aurora
Ledger.

Kleine, klare Standards
für Werkzeuge, die sich gut anfühlen.

Farbe, Schrift, Raum und Bewegung.
Ein vertrautes Erlebnis in allen unseren Produkten.

Farben entdecken Designprinzipien
Aurora Ledger0102 / 02
AaPretendard
Design für Licht und Zahlen8 pt
Ausgewogene Abstände
MIST · Die Farben eines klaren MorgensDUSK · Die Farben einer stillen Nacht

Wechsle das Farbschema der Seite, um zwischen Mist und Dusk zu wechseln.

Farbmodi
2
Token-Gruppen
7
Grundraster
8pt
Prinzipien
6

Identität

Design für Licht und Zahlen

Aurora Ledger entstand im August 2026 mit unserem ersten Produkt. Der Name beschreibt zwei Eigenschaften, die jede Oberfläche prägen sollen.

  • Aurora

    Licht, das im Dunkeln führt

    Tiefes und helles Violett prägen die Marke und lenken den Blick auf wichtige Informationen und den nächsten Schritt.

  • Ledger

    Komplexe Werte klar erfassen

    Am Anfang stand ein Anlage-Rechner. Noch heute zeigen wir vollständige Zahlen, stellen Ergebnisse voran und erklären Änderungen mit Worten, Symbolen und Farbe.

Das System heißt Aurora Ledger. Im Produktcode verbindet das Präfix Twinkle* die Marke mit ihrer Umsetzung.

Grundlagen

Farben nach ihrer Rolle wählen

colors

Rollen statt fester Farbwerte passen sich dem hellen und dunklen Modus an. So bleiben Kontrast und Identität erhalten. Kräftiges Violett führt zur nächsten Aktion.

Farbmodi · Mist

Hintergründe und Flächen

  • bg#F8F6FC
  • surface#FFFFFF
  • sunken#F5F4F8
  • lifted#FFFFFF
  • key#FFFFFF
  • divider#EAE4F0

Typografie

  • text#21182D
  • textSub#71687D
  • textFaint#A79EAF

Marke

  • primary#7040D9
  • accent#7040D9 · Text
  • primarySoft#EEE7FC
  • gradient→ #8550E4

Zustände und Betonung

  • danger#B42318Unumkehrbare Aktionen
  • warm#D92D20Warme Betonung
  • cool#2763C4Kühle Betonung

Effekte

  • glow · primary 20%
  • shadow · tiefes Violett
  • scrim · 52%
  • outlineLifted

Farbmodi · Dusk

Hintergründe und Flächen

  • bg#110D19
  • surface#1B1526
  • sunken#251D32
  • lifted#2C233A
  • key#20182C
  • divider#352A42

Typografie

  • text#FAF7FF
  • textSub#AEA3BA
  • textFaint#746A80

Marke

  • primary#986CF4
  • accent#B79AFF · Text
  • primarySoftaccent · 12%
  • gradient→ #8550E4

Zustände und Betonung

  • danger#FF9B91Unumkehrbare Aktionen
  • warm#FF9B91Warme Betonung
  • cool#8DB9FFKühle Betonung

Effekte

  • glow · accent 14%
  • shadow · Schwarz
  • scrim · 62%
  • outlineLifted · keiner
  • Hintergründe und Flächen — Mist verleiht hellen Flächen violette Wärme. Dusk nutzt eigene Helligkeit und Kontraste für die Nacht statt umgekehrter Farben.
  • Marke — primary ist für gefüllte Schaltflächen, accent für Text, Symbole und Ränder. Im dunklen Modus brauchen sie unterschiedliche Kontraste.
  • Zustände und Betonung — danger steht für riskante Aktionen, warm und cool unterscheiden Informationen. Text und Symbole erklären die Bedeutung. Getönte Flächen nutzen 8% im hellen und 12% im dunklen Modus.

Grundlagen

Sechs Stufen der Betonung

alpha

Sechs Deckkraftstufen regeln Hierarchie und Tiefe, damit Betonung in allen Produkten gleich wirkt.

  • strong.88Zurückhaltender Fließtext
  • soft.70Zusatzinformationen
  • half.50Innere Trennlinien
  • ring.35Betonte Ränder
  • tint.20Dezente Flächen und Griffe
  • wash.08Zarteste Fläche · dunkel .12

Grundlagen

Rhythmus im 8pt-Raster

spacing

Abstände folgen Vielfachen von 8. 2, 4 und 6px dienen nur der Ausrichtung und Feinabstimmung.

  1. tight2
  2. s04
  3. s0h6
  4. s18
  5. s1h12
  6. s216
  7. s2h20
  8. s324
  9. s432
  10. s540
  11. s648

Grundlagen

Standards für Größe und Form

iconSize · elevation · shapes · controlSize · stroke

Symbole

  • xs12
  • sm16
  • md20
  • lg26

Höhe

  • raised4Standardkarten
  • floating10Hover- und schwebende Elemente
  • drawer20Seitliche und untere Panels

Formen

  • small11Eingabefelder
  • medium14Innere Panels und Tasten
  • large18Standardkarten
  • extraLarge24Panels und Dialoge
  • drawer20Ziffernblock-Panel
  • pill999Abzeichen und runde Schaltflächen

Bedienelemente

  • rowHeight48Standardhöhe einer Listenzeile
  • primaryButtonHeight48Höhe der Hauptschaltfläche
  • keypadKeyHeight52Höhe der Zahlentasten
  • keypadGap8Abstand zwischen Tasten

Linien

  • hair1Standardtrennlinien
  • ring1.5Fokus und Auswahl

Interaktion

Schnelle, natürliche Bewegung

motion

Bewegung folgt ihrem Zweck. Beim Eintritt und Verschieben sanft abbremsen, beim Austritt kurz beschleunigen.

Bewege den Zeiger auf die Karte oder fokussiere sie, um drei Zeitspannen zu vergleichen.

  • fast150ms
  • base250ms
  • slow350ms

Bewege den Zeiger auf die Karte oder fokussiere sie, um Ein- und Austrittskurven zu vergleichen.

  • easecubic-bezier(.25, 1, .5, 1) · Eintretende oder bewegte Elemente
  • exitcubic-bezier(.4, 0, 1, 1) · Schnell austretende Elemente

Grundlagen

Klare Zahlen, lesbarer Text

typography · Pretendard

15 Pretendard-Rollen decken Zahlen, Überschriften, Fließtext und Beschriftungen ab. Große Schrift zeigt Ergebnisse, kleine liefert Kontext. Nur definierte Größen und Stärken verwenden; koreanische Wörter bleiben ungetrennt.

  • Ein heller Moment am TagdisplayLarge40 · 700 · 1.25 · -0.03em · Hauptbotschaft
  • 12 neue EinträgedisplayMedium36 · 700 · 1.25 · -0.03em · Wichtiges Ergebnis
  • Änderungen dieser WochedisplaySmall32 · 700 · 1.25 · -0.03em · Zusammenfassende Überschrift
  • Bereit für ein neues Projekt?headlineLarge28 · 700 · 1.25 · -0.03em · Seitentitel
  • Letzte AktivitätenheadlineMedium24 · 700 · 1.25 · -0.02em · Abschnittstitel
  • 24. August 2026headlineSmall24 · 500 · 1.25 · -0.02em · Nebenüberschrift
  • Eine neue IdeetitleLarge20 · 700 · 1.25 · -0.02em · Kartentitel
  • Designprüfung abgeschlossentitleMedium16 · 600 · 1.35 · -0.01em · Eintragstitel
  • Heute um 15 UhrtitleSmall14 · 600 · 1.35 · -0.01em · Kleine Überschrift
  • Finde benötigte Informationen und konzentriere dich auf das Wesentliche.bodyLarge16 · 400 · 1.65 · Betonter Fließtext
  • Änderungen werden auf allen Geräten synchronisiert.bodyMedium14 · 400 · 1.65 · Standardfließtext
  • Vor 2 Minuten gespeichertbodySmall12 · 400 · 1.35 · Hilfe und Beschreibungen
  • WeiterlabelLarge14 · 600 · 1.35 · -0.01em · Schaltflächen und Tabs
  • In Bearbeitung · 8labelMedium12 · 500 · 1.35 · Status und Metadaten
  • NEWlabelSmall11 · 500 · 1.35 · Abzeichen und Bildunterschriften

Prinzipien

Sechs Prinzipien für klare Oberflächen

  • Starke Effekte betonen eine Hauptaktion. Pro Ansicht nur einen Farbverlauf verwenden.
  • Zustände und Änderungen mit Text und Symbolen erklären, zusätzlich zur Farbe.
  • Warnfarben bleiben unumkehrbaren Aktionen vorbehalten. Rückgängig machbare Schritte sollen nicht beunruhigen.
  • Zusammenhänge durch Abstände und Ausrichtung zeigen. Einfache Strukturen sind leichter zu lesen.
  • Die größte Schrift zeigt die gesuchte Antwort. Ergebnisse sollen vor Eingaben ins Auge fallen.
  • Beträge und wichtige Zahlen vollständig anzeigen. Bei Platzmangel eine kleinere definierte Schriftgröße wählen.

Geschichte

Entscheidungen und Erkenntnisse festhalten

  1. 2026-08-09Die erste Oberfläche

    Ein violetter Entwurf für einen Anlage-Rechner wurde zu Aurora Ledger. Klare, vollständige Zahlen waren der Ausgangspunkt.

  2. Frühe VersucheNeutrale Farben mit Identität

    Reines Grau wirkte sauber, aber anonym. Ein Hauch tiefes Violett gab den neutralen Farben ihren Charakter zurück.

  3. Frühe VersucheBedeutungsvolle Farben zurückholen

    Violett allein erschwerte das Erkennen von Kursänderungen. Nach koreanischer Börsenkonvention wurden Gewinne wieder rot und Verluste blau.

  4. Frühe VersucheAktionen in den Fokus rücken

    Der Verlauf wanderte von großen Zahlen auf Hauptschaltflächen und macht den nächsten Schritt erkennbar.

  5. 2026-08-18Eine gemeinsame Designsprache

    Wir legten Farben und Kontraste fest und nutzten sie im ersten Produkt. Aus einem Thema wurde ein gemeinsames System.

  6. 2026-08-22Das Token-System vervollständigen

    Deckkraft, Abstände, Größen, Höhe, Formen und Bewegung ergänzten die Farben als gemeinsame Designsprache.

  7. 2026-08-23Prinzipien veröffentlichen

    Wir dokumentierten Gründe und Anwendung jeder Entscheidung, damit die Maßstäbe mit dem Angebot wachsen können.

  8. 2026-09-25Akzentfarben vielseitiger nutzen

    Rot und Blau heißen nun warm und cool. Die Farben bleiben, neutrale Namen erlauben neue Bedeutungen in anderen Produkten.