Twinkle AI Labs

TWINKLE AI LABS · DESIGN SYSTEM

Aurora
Ledger.

Piccole regole coerenti
per strumenti piacevoli da usare.

Colore, testo, spazio e movimento.
Un’esperienza che unisce tutti i nostri prodotti.

Esplora i colori Principi di design
Aurora Ledger0102 / 02
AaPretendard
Design per luce e numeri8 pt
Spazi equilibrati
MIST · I colori di una mattina limpidaDUSK · I colori di una notte tranquilla

Cambia il tema del sito per passare da Mist a Dusk.

Modalità colore
2
Gruppi di token
7
Griglia di base
8pt
Principi
6

Identità

Design per luce e numeri

Aurora Ledger è nato con il nostro primo prodotto nell’agosto 2026. Il nome esprime due qualità che cerchiamo in ogni schermata.

  • Aurora

    Una luce che guida nel buio

    Il viola profondo e luminoso dà forma al marchio e guida lo sguardo verso le informazioni utili e l’azione successiva.

  • Ledger

    Leggere con chiarezza valori complessi

    Il primo strumento calcolava investimenti. Mostriamo ancora numeri completi, risultati in primo piano e cambiamenti con parole, simboli e colori.

Il sistema si chiama Aurora Ledger. Nel codice, il prefisso Twinkle* collega il marchio alla sua implementazione.

Fondamenti

Scegliere i colori per ruolo

colors

I ruoli sostituiscono i colori fissi e si adattano alle modalità chiara e scura, mantenendo contrasto e identità. Il viola acceso guida l’azione successiva.

Modalità colore · Mist

Sfondi e superfici

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

Tipografia

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

Marchio

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

Stati ed enfasi

  • danger#B42318Azioni irreversibili
  • warm#D92D20Enfasi calda
  • cool#2763C4Enfasi fredda

Effetti

  • glow · primary 20%
  • shadow · viola profondo
  • scrim · 52%
  • outlineLifted

Modalità colore · Dusk

Sfondi e superfici

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

Tipografia

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

Marchio

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

Stati ed enfasi

  • danger#FF9B91Azioni irreversibili
  • warm#FF9B91Enfasi calda
  • cool#8DB9FFEnfasi fredda

Effetti

  • glow · accent 14%
  • shadow · nero
  • scrim · 62%
  • outlineLifted · nessuno
  • Sfondi e superfici — Mist aggiunge calore viola alle superfici chiare. Dusk usa luminosità e contrasti propri per la notte, senza invertire Mist.
  • Marchio — primary serve per i pulsanti pieni; accent per testo, icone e bordi. In modalità scura richiedono contrasti diversi.
  • Stati ed enfasi — danger indica azioni rischiose; warm e cool distinguono le informazioni. Testo e icone ne spiegano il senso. Gli sfondi tenui usano l’8% in chiaro e il 12% in scuro.

Fondamenti

Sei livelli di enfasi

alpha

Sei livelli di opacità regolano gerarchia e profondità per un’enfasi coerente tra i prodotti.

  • strong.88Testo attenuato
  • soft.70Informazioni secondarie
  • half.50Divisori interni
  • ring.35Bordi in evidenza
  • tint.20Sfondi delicati e maniglie
  • wash.08Sfondo più tenue · scuro .12

Fondamenti

Il ritmo di una griglia da 8pt

spacing

La spaziatura segue multipli di 8. Riserviamo 2, 4 e 6px ad allineamenti e piccoli aggiustamenti.

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

Fondamenti

Regole per dimensioni e forme

iconSize · elevation · shapes · controlSize · stroke

Icone

  • xs12
  • sm16
  • md20
  • lg26

Elevazione

  • raised4Schede standard
  • floating10Elementi al passaggio e flottanti
  • drawer20Pannelli laterali e inferiori

Forme

  • small11Campi di input
  • medium14Pannelli interni e tasti
  • large18Schede standard
  • extraLarge24Pannelli e finestre di dialogo
  • drawer20Pannello del tastierino
  • pill999Badge e pulsanti arrotondati

Controlli

  • rowHeight48Altezza standard delle righe
  • primaryButtonHeight48Altezza del pulsante principale
  • keypadKeyHeight52Altezza dei tasti numerici
  • keypadGap8Spazio tra i tasti

Tratti

  • hair1Divisori standard
  • ring1.5Focus e selezione

Interazione

Movimenti rapidi e naturali

motion

Il movimento parte dallo scopo. Entrata e spostamento rallentano dolcemente; l’uscita accelera brevemente.

Passa il puntatore o porta il focus sulla scheda per confrontare tre durate.

  • fast150ms
  • base250ms
  • slow350ms

Passa il puntatore o porta il focus sulla scheda per confrontare entrata e uscita.

  • easecubic-bezier(.25, 1, .5, 1) · Elementi in entrata o movimento
  • exitcubic-bezier(.4, 0, 1, 1) · Elementi in uscita rapida

Fondamenti

Numeri chiari e testo leggibile

typography · Pretendard

Quindici ruoli Pretendard coprono numeri, titoli, testo ed etichette. I caratteri grandi presentano i risultati, quelli piccoli il contesto. Usa dimensioni e pesi definiti, senza spezzare le parole coreane.

  • Un po’ di luce nella giornatadisplayLarge40 · 700 · 1.25 · -0.03em · Messaggio principale
  • 12 nuove vocidisplayMedium36 · 700 · 1.25 · -0.03em · Risultato chiave
  • I cambiamenti della settimanadisplaySmall32 · 700 · 1.25 · -0.03em · Titolo di riepilogo
  • Iniziamo un progetto?headlineLarge28 · 700 · 1.25 · -0.03em · Titolo della pagina
  • Attività recenteheadlineMedium24 · 700 · 1.25 · -0.02em · Titolo di sezione
  • 24 agosto 2026headlineSmall24 · 500 · 1.25 · -0.02em · Titolo secondario
  • Una nuova ideatitleLarge20 · 700 · 1.25 · -0.02em · Titolo della scheda
  • Revisione del design completatatitleMedium16 · 600 · 1.35 · -0.01em · Titolo dell’elemento
  • Oggi alle 15titleSmall14 · 600 · 1.35 · -0.01em · Titolo piccolo
  • Trova ciò che ti serve e concentrati sulle cose importanti.bodyLarge16 · 400 · 1.65 · Testo in evidenza
  • Le modifiche si sincronizzano su tutti i dispositivi.bodyMedium14 · 400 · 1.65 · Testo standard
  • Salvato 2 minuti fabodySmall12 · 400 · 1.35 · Aiuto e descrizioni
  • ContinualabelLarge14 · 600 · 1.35 · -0.01em · Pulsanti e schede
  • In corso · 8labelMedium12 · 500 · 1.35 · Stato e metadati
  • NEWlabelSmall11 · 500 · 1.35 · Badge e didascalie

Principi

Sei principi per schermate chiare

  • Concentra gli effetti forti su un’azione principale. Usa una sfumatura per schermata.
  • Spiega stati e cambiamenti con testo e icone, oltre al colore.
  • Riserva i colori di pericolo alle azioni irreversibili. Evita allarmi per scelte annullabili.
  • Mostra le relazioni con spaziatura e allineamento. Le strutture semplici si leggono meglio.
  • Il testo più grande mostra la risposta cercata. Rendi i risultati più visibili degli input.
  • Mostra importi e numeri chiave per intero. Se lo spazio manca, scegli una dimensione definita più piccola.

Storia

Conservare decisioni e lezioni

  1. 2026-08-09La prima schermata

    Un prototipo viola di calcolatrice per investimenti è diventato Aurora Ledger. Numeri chiari e completi sono stati il punto di partenza.

  2. Primi esperimentiDare identità ai neutri

    Il grigio puro era pulito ma anonimo. Una punta di viola profondo ha restituito carattere ai colori neutri.

  3. Primi esperimentiRipristinare colori significativi

    Il solo viola rendeva difficile leggere rialzi e ribassi. Sono tornati rosso e blu secondo la convenzione del mercato coreano.

  4. Primi esperimentiConcentrarsi sull’azione

    Abbiamo spostato la sfumatura dai grandi numeri ai pulsanti principali per guidare l’azione successiva.

  5. 2026-08-18Un linguaggio condiviso

    Abbiamo definito colori e contrasti e li abbiamo applicati al primo prodotto. Un tema è diventato un sistema comune.

  6. 2026-08-22Completare i token

    Opacità, spaziatura, dimensioni, elevazione, forme e movimento hanno ampliato il vocabolario dei colori.

  7. 2026-08-23Pubblicare i principi

    Abbiamo documentato motivi e usi di ogni scelta per mantenere criteri coerenti mentre i prodotti crescono.

  8. 2026-09-25Ampliare i colori di enfasi

    Rosso e blu diventano warm e cool. I colori restano, ma nomi neutri permettono significati diversi in altri prodotti.