Twinkle AI Labs

TWINKLE AI LABS · DESIGN SYSTEM

Aurora
Ledger.

Pequeñas pautas coherentes
para herramientas agradables de usar.

Color, texto, espacio y movimiento.
Una experiencia que conecta todos nuestros productos.

Explorar colores Principios de diseño
Aurora Ledger0102 / 02
AaPretendard
Diseño para la luz y los números8 pt
Espacios equilibrados
MIST · Los colores de una mañana claraDUSK · Los colores de una noche tranquila

Cambia el tema del sitio para pasar de Mist a Dusk.

Modos de color
2
Grupos de tokens
7
Cuadrícula base
8pt
Principios
6

Identidad

Diseño para la luz y los números

Aurora Ledger nació con nuestro primer producto en agosto de 2026. Su nombre refleja dos cualidades que buscamos en cada pantalla.

  • Aurora

    Luz que orienta en la oscuridad

    El violeta profundo y luminoso define la marca y guía la atención hacia la información y la siguiente acción.

  • Ledger

    Un registro claro de valores complejos

    Empezamos con una calculadora de inversión. Seguimos mostrando cifras completas, resultados primero y cambios con palabras, símbolos y color.

El sistema se llama Aurora Ledger. En el código usamos el prefijo Twinkle* para conectar la marca con su implementación.

Fundamentos

Elegir colores por su función

colors

Usamos funciones en vez de colores fijos. Cada función se adapta al modo claro y oscuro, conservando contraste e identidad. El violeta vivo guía la siguiente acción.

Modos de color · Mist

Fondos y superficies

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

Tipografía

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

Marca

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

Estados y énfasis

  • danger#B42318Acciones irreversibles
  • warm#D92D20Énfasis cálido
  • cool#2763C4Énfasis frío

Efectos

  • glow · primary 20%
  • shadow · violeta profundo
  • scrim · 52%
  • outlineLifted

Modos de color · Dusk

Fondos y superficies

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

Tipografía

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

Marca

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

Estados y énfasis

  • danger#FF9B91Acciones irreversibles
  • warm#FF9B91Énfasis cálido
  • cool#8DB9FFÉnfasis frío

Efectos

  • glow · accent 14%
  • shadow · negro
  • scrim · 62%
  • outlineLifted · ninguno
  • Fondos y superficies — Mist aporta calidez violeta a superficies claras. Dusk tiene brillo y contraste propios para la noche, sin invertir Mist.
  • Marca — primary se usa en botones rellenos; accent, en texto, iconos y bordes. En modo oscuro necesitan contrastes distintos.
  • Estados y énfasis — danger indica acciones peligrosas; warm y cool distinguen información. El texto y los iconos explican su significado. Los fondos suaves usan 8% en claro y 12% en oscuro.

Fundamentos

Seis niveles de énfasis

alpha

Seis niveles de opacidad regulan la jerarquía y profundidad, con un énfasis coherente entre productos.

  • strong.88Texto atenuado
  • soft.70Información secundaria
  • half.50Divisores interiores
  • ring.35Bordes de énfasis
  • tint.20Fondos suaves y tiradores
  • wash.08Fondo más tenue · oscuro .12

Fundamentos

El ritmo de una cuadrícula de 8pt

spacing

El espaciado usa múltiplos de 8. Reservamos 2, 4 y 6px para alineación y ajustes finos.

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

Fundamentos

Pautas de tamaño y forma

iconSize · elevation · shapes · controlSize · stroke

Iconos

  • xs12
  • sm16
  • md20
  • lg26

Elevación

  • raised4Tarjetas estándar
  • floating10Elementos flotantes y al pasar el cursor
  • drawer20Paneles laterales e inferiores

Formas

  • small11Campos de entrada
  • medium14Paneles interiores y teclas
  • large18Tarjetas estándar
  • extraLarge24Paneles y diálogos
  • drawer20Panel del teclado numérico
  • pill999Insignias y botones redondeados

Controles

  • rowHeight48Altura de fila estándar
  • primaryButtonHeight48Altura del botón principal
  • keypadKeyHeight52Altura de teclas numéricas
  • keypadGap8Espacio entre teclas

Trazos

  • hair1Divisores estándar
  • ring1.5Foco y selección

Interacción

Movimiento rápido y natural

motion

El movimiento parte de un propósito. Las entradas y desplazamientos desaceleran suavemente; las salidas aceleran brevemente.

Pasa el cursor o enfoca la tarjeta para comparar tres duraciones.

  • fast150ms
  • base250ms
  • slow350ms

Pasa el cursor o enfoca la tarjeta para comparar las curvas de entrada y salida.

  • easecubic-bezier(.25, 1, .5, 1) · Elementos que entran o se mueven
  • exitcubic-bezier(.4, 0, 1, 1) · Elementos que salen rápidamente

Fundamentos

Números claros y texto legible

typography · Pretendard

Quince funciones de Pretendard cubren números, títulos, cuerpo y etiquetas. El texto grande muestra resultados; el pequeño aporta contexto. Usamos tamaños y pesos definidos, sin cortar palabras coreanas.

  • Un poco de luz en tu díadisplayLarge40 · 700 · 1.25 · -0.03em · Mensaje principal
  • 12 registros nuevosdisplayMedium36 · 700 · 1.25 · -0.03em · Resultado clave
  • Cambios de esta semanadisplaySmall32 · 700 · 1.25 · -0.03em · Título de resumen
  • ¿Empezamos un proyecto?headlineLarge28 · 700 · 1.25 · -0.03em · Título de página
  • Actividad recienteheadlineMedium24 · 700 · 1.25 · -0.02em · Título de sección
  • 24 de agosto de 2026headlineSmall24 · 500 · 1.25 · -0.02em · Título secundario
  • Una idea nuevatitleLarge20 · 700 · 1.25 · -0.02em · Título de tarjeta
  • Revisión de diseño completadatitleMedium16 · 600 · 1.35 · -0.01em · Título de elemento
  • Hoy a las 15:00titleSmall14 · 600 · 1.35 · -0.01em · Título pequeño
  • Encuentra lo que necesitas y concéntrate en lo importante.bodyLarge16 · 400 · 1.65 · Texto destacado
  • Los cambios se sincronizan en todos tus dispositivos.bodyMedium14 · 400 · 1.65 · Texto estándar
  • Guardado hace 2 minutosbodySmall12 · 400 · 1.35 · Ayuda y descripciones
  • ContinuarlabelLarge14 · 600 · 1.35 · -0.01em · Botones y pestañas
  • En curso · 8labelMedium12 · 500 · 1.35 · Estado y metadatos
  • NEWlabelSmall11 · 500 · 1.35 · Insignias y pies

Principios

Seis principios para pantallas claras

  • Concentra los efectos intensos en una acción principal. Usa un degradado por pantalla.
  • Explica estados y cambios con texto e iconos, además del color.
  • Reserva los colores de peligro para acciones irreversibles. No alarmes con opciones que se pueden deshacer.
  • Expresa relaciones con espacio y alineación. Una estructura simple se lee mejor.
  • Usa el texto más grande para la respuesta buscada. Haz que los resultados se vean antes que las entradas.
  • Muestra importes y cifras clave completos. Si falta espacio, usa un tamaño menor dentro de la escala.

Historia

Registrar decisiones y aprendizajes

  1. 2026-08-09La primera pantalla

    Un prototipo violeta de calculadora de inversión dio origen a Aurora Ledger. Mostrar cifras claras fue el punto de partida.

  2. Primeros experimentosDar identidad a los neutros

    El gris puro era limpio pero anónimo. Un toque de violeta profundo devolvió identidad a los tonos neutros.

  3. Primeros experimentosRecuperar colores con significado

    El violeta único dificultaba distinguir subidas y bajadas. Recuperamos rojo y azul según la convención del mercado coreano.

  4. Primeros experimentosCentrarse en la acción

    Trasladamos el degradado de las cifras grandes a los botones principales para orientar la siguiente acción.

  5. 2026-08-18Un lenguaje compartido

    Fijamos color y contraste y los aplicamos al primer producto. Un tema se convirtió en un sistema para todos.

  6. 2026-08-22Completar los tokens

    Añadimos opacidad, espaciado, tamaños, elevación, formas y movimiento al vocabulario común.

  7. 2026-08-23Publicar los principios

    Documentamos las razones y el uso de cada decisión para mantener el criterio al crecer.

  8. 2026-09-25Ampliar los colores de énfasis

    Rojo y azul pasaron a llamarse warm y cool. Conservan el color con nombres que permiten otros significados.