Twinkle AI Labs

TWINKLE AI LABS · DESIGN SYSTEM

Aurora
Ledger.

Des repères simples et cohérents
pour des outils agréables à utiliser.

Couleur, texte, espace et mouvement.
Une même expérience à travers nos produits.

Explorer les couleurs Principes de design
Aurora Ledger0102 / 02
AaPretendard
Du design pour la lumière et les chiffres8 pt
Des espaces équilibrés
MIST · Les couleurs d’un matin clairDUSK · Les couleurs d’une nuit calme

Changez le thème du site pour passer de Mist à Dusk.

Modes de couleur
2
Groupes de tokens
7
Grille de base
8pt
Principes
6

Identité

Un design pour la lumière et les nombres

Aurora Ledger est né avec notre premier produit en août 2026. Son nom exprime deux qualités recherchées dans chaque écran.

  • Aurora

    Une lumière qui guide dans le noir

    Le violet profond et lumineux incarne la marque et guide le regard vers l’information utile et l’action suivante.

  • Ledger

    Lire clairement les valeurs complexes

    Notre premier outil calculait des investissements. Nous affichons toujours les nombres en entier, les résultats en premier et les changements avec des mots, des symboles et des couleurs.

Le système s’appelle Aurora Ledger. Dans le code, le préfixe Twinkle* relie la marque à sa mise en œuvre.

Fondations

Choisir les couleurs par rôle

colors

Les rôles remplacent les valeurs fixes et s’adaptent aux modes clair et sombre. Contraste et identité restent cohérents. Le violet vif guide l’action suivante.

Modes de couleur · Mist

Fonds et surfaces

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

Typographie

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

Marque

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

États et accentuation

  • danger#B42318Actions irréversibles
  • warm#D92D20Accent chaud
  • cool#2763C4Accent froid

Effets

  • glow · primary 20%
  • shadow · violet profond
  • scrim · 52%
  • outlineLifted

Modes de couleur · Dusk

Fonds et surfaces

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

Typographie

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

Marque

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

États et accentuation

  • danger#FF9B91Actions irréversibles
  • warm#FF9B91Accent chaud
  • cool#8DB9FFAccent froid

Effets

  • glow · accent 14%
  • shadow · noir
  • scrim · 62%
  • outlineLifted · aucun
  • Fonds et surfaces — Mist apporte une chaleur violette aux surfaces claires. Dusk possède sa propre luminosité et ses contrastes pour la nuit, sans inverser Mist.
  • Marque — primary sert aux boutons pleins ; accent au texte, aux icônes et aux bordures. Le mode sombre exige des contrastes distincts.
  • États et accentuation — danger signale les actions risquées ; warm et cool distinguent les informations. Texte et icônes expliquent leur sens. Les fonds teintés utilisent 8% en clair et 12% en sombre.

Fondations

Six niveaux d’accentuation

alpha

Six niveaux d’opacité règlent la hiérarchie et la profondeur pour une accentuation cohérente entre produits.

  • strong.88Texte atténué
  • soft.70Informations secondaires
  • half.50Séparateurs internes
  • ring.35Bordures accentuées
  • tint.20Fonds doux et poignées
  • wash.08Fond le plus léger · sombre .12

Fondations

Le rythme d’une grille de 8pt

spacing

Les espacements suivent des multiples de 8. Les valeurs 2, 4 et 6px servent aux alignements et ajustements fins.

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

Fondations

Des repères de taille et de forme

iconSize · elevation · shapes · controlSize · stroke

Icônes

  • xs12
  • sm16
  • md20
  • lg26

Élévation

  • raised4Cartes standard
  • floating10Éléments au survol et flottants
  • drawer20Panneaux latéraux et inférieurs

Formes

  • small11Champs de saisie
  • medium14Panneaux internes et touches
  • large18Cartes standard
  • extraLarge24Panneaux et dialogues
  • drawer20Panneau du pavé numérique
  • pill999Badges et boutons arrondis

Commandes

  • rowHeight48Hauteur de ligne standard
  • primaryButtonHeight48Hauteur du bouton principal
  • keypadKeyHeight52Hauteur des touches numériques
  • keypadGap8Espace entre les touches

Traits

  • hair1Séparateurs standard
  • ring1.5Focus et sélection

Interaction

Un mouvement rapide et naturel

motion

Le mouvement répond à un but. L’entrée et le déplacement décélèrent doucement ; la sortie accélère brièvement.

Survolez la carte ou donnez-lui le focus pour comparer trois durées.

  • fast150ms
  • base250ms
  • slow350ms

Survolez la carte ou donnez-lui le focus pour comparer entrée et sortie.

  • easecubic-bezier(.25, 1, .5, 1) · Éléments entrants ou mobiles
  • exitcubic-bezier(.4, 0, 1, 1) · Éléments sortant rapidement

Fondations

Des nombres nets, un texte lisible

typography · Pretendard

Quinze rôles Pretendard couvrent nombres, titres, texte et libellés. Les grands caractères présentent les résultats, les petits apportent le contexte. Utilisez les tailles et graisses définies, sans couper les mots coréens.

  • Une touche de lumière aujourd’huidisplayLarge40 · 700 · 1.25 · -0.03em · Message principal
  • 12 nouvelles entréesdisplayMedium36 · 700 · 1.25 · -0.03em · Résultat clé
  • Les changements de la semainedisplaySmall32 · 700 · 1.25 · -0.03em · Titre de synthèse
  • Prêt à lancer un projet ?headlineLarge28 · 700 · 1.25 · -0.03em · Titre de page
  • Activité récenteheadlineMedium24 · 700 · 1.25 · -0.02em · Titre de section
  • 24 août 2026headlineSmall24 · 500 · 1.25 · -0.02em · Titre secondaire
  • Une nouvelle idéetitleLarge20 · 700 · 1.25 · -0.02em · Titre de carte
  • Revue du design terminéetitleMedium16 · 600 · 1.35 · -0.01em · Titre d’élément
  • Aujourd’hui à 15 htitleSmall14 · 600 · 1.35 · -0.01em · Petit titre
  • Trouvez ce qu’il vous faut et concentrez-vous sur l’essentiel.bodyLarge16 · 400 · 1.65 · Texte mis en avant
  • Les modifications se synchronisent sur tous vos appareils.bodyMedium14 · 400 · 1.65 · Texte courant
  • Enregistré il y a 2 minutesbodySmall12 · 400 · 1.35 · Aide et descriptions
  • ContinuerlabelLarge14 · 600 · 1.35 · -0.01em · Boutons et onglets
  • En cours · 8labelMedium12 · 500 · 1.35 · État et métadonnées
  • NEWlabelSmall11 · 500 · 1.35 · Badges et légendes

Principes

Six principes pour des écrans clairs

  • Réservez les effets forts à une action principale. Un seul dégradé par écran.
  • Expliquez les états et changements avec du texte et des icônes, en plus de la couleur.
  • Réservez les couleurs de danger aux actions irréversibles. Évitez d’inquiéter pour un choix annulable.
  • Exprimez les relations par l’espace et l’alignement. Une structure simple se lit plus vite.
  • Le plus grand texte montre la réponse attendue. Rendez les résultats plus visibles que les saisies.
  • Affichez les montants et chiffres clés en entier. Si l’espace manque, utilisez une taille définie plus petite.

Histoire

Garder une trace des choix et des leçons

  1. 2026-08-09Le premier écran

    Un prototype violet de calculatrice d’investissement a donné naissance à Aurora Ledger. Des nombres clairs et complets étaient le point de départ.

  2. Premiers essaisDonner une identité aux neutres

    Le gris pur semblait propre mais anonyme. Une pointe de violet profond a rendu leur caractère aux couleurs neutres.

  3. Premiers essaisRetrouver des couleurs porteuses de sens

    Le tout-violet compliquait la lecture des variations. Nous avons rétabli le rouge pour les hausses et le bleu pour les baisses, selon l’usage coréen.

  4. Premiers essaisSe concentrer sur l’action

    Le dégradé est passé des grands nombres aux boutons principaux pour guider l’action suivante.

  5. 2026-08-18Un langage partagé

    Les normes de couleur et de contraste ont été appliquées au premier produit. Un thème est devenu un système commun.

  6. 2026-08-22Compléter les tokens

    Opacité, espacement, tailles, élévation, formes et mouvement ont rejoint les couleurs dans un vocabulaire commun.

  7. 2026-08-23Publier les principes

    Nous avons documenté les raisons et les usages de chaque choix pour garder un jugement cohérent à mesure que les produits se multiplient.

  8. 2026-09-25Élargir les couleurs d’accent

    Rouge et bleu deviennent warm et cool. Les couleurs restent, mais des noms neutres permettent de nouveaux usages.