Twinkle AI Labs

TWINKLE AI LABS · DESIGN SYSTEM

Aurora
Ledger.

Pequenos padrões consistentes
para ferramentas agradáveis de usar.

Cor, texto, espaço e movimento.
Uma experiência que conecta nossos produtos.

Explorar cores Princípios de design
Aurora Ledger0102 / 02
AaPretendard
Design para luz e números8 pt
Espaçamento equilibrado
MIST · As cores de uma manhã claraDUSK · As cores de uma noite tranquila

Mude o tema do site para alternar entre Mist e Dusk.

Modos de cor
2
Grupos de tokens
7
Grade base
8pt
Princípios
6

Identidade

Design para luz e números

Aurora Ledger nasceu com nosso primeiro produto em agosto de 2026. O nome expressa duas qualidades que buscamos em cada tela.

  • Aurora

    Luz que orienta no escuro

    O roxo profundo e luminoso define a marca e guia a atenção para informações úteis e a próxima ação.

  • Ledger

    Um registro claro de valores complexos

    Começamos com uma calculadora de investimentos. Ainda mostramos números completos, resultados primeiro e mudanças com palavras, símbolos e cores.

O sistema se chama Aurora Ledger. No código, o prefixo Twinkle* conecta a marca à implementação.

Fundamentos

Escolher cores pela função

colors

Funções substituem cores fixas e se adaptam aos modos claro e escuro, preservando contraste e identidade. O roxo vivo indica a próxima ação.

Modos de cor · Mist

Fundos e superfícies

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

Tipografia

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

Marca

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

Estados e destaque

  • danger#B42318Ações irreversíveis
  • warm#D92D20Destaque quente
  • cool#2763C4Destaque frio

Efeitos

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

Modos de cor · Dusk

Fundos e superfícies

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

Tipografia

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

Marca

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

Estados e destaque

  • danger#FF9B91Ações irreversíveis
  • warm#FF9B91Destaque quente
  • cool#8DB9FFDestaque frio

Efeitos

  • glow · accent 14%
  • shadow · preto
  • scrim · 62%
  • outlineLifted · nenhum
  • Fundos e superfícies — Mist acrescenta calor roxo às superfícies claras. Dusk usa brilho e contraste próprios para a noite, sem apenas inverter Mist.
  • Marca — primary é usado em botões preenchidos; accent em texto, ícones e bordas. No modo escuro, exigem contrastes diferentes.
  • Estados e destaque — danger indica ações arriscadas; warm e cool diferenciam informações. Texto e ícones explicam o significado. Fundos suaves usam 8% no claro e 12% no escuro.

Fundamentos

Seis níveis de destaque

alpha

Seis níveis de opacidade controlam hierarquia e profundidade, mantendo o destaque consistente entre produtos.

  • strong.88Texto discreto
  • soft.70Informações secundárias
  • half.50Divisórias internas
  • ring.35Bordas de destaque
  • tint.20Fundos suaves e alças
  • wash.08Fundo mais suave · escuro .12

Fundamentos

O ritmo de uma grade de 8pt

spacing

O espaçamento segue múltiplos de 8. Valores de 2, 4 e 6px ficam para alinhamento e 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

Padrões de tamanho e forma

iconSize · elevation · shapes · controlSize · stroke

Ícones

  • xs12
  • sm16
  • md20
  • lg26

Elevação

  • raised4Cartões padrão
  • floating10Elementos flutuantes e sob o ponteiro
  • drawer20Painéis laterais e inferiores

Formas

  • small11Campos de entrada
  • medium14Painéis internos e teclas
  • large18Cartões padrão
  • extraLarge24Painéis e diálogos
  • drawer20Painel do teclado numérico
  • pill999Selos e botões arredondados

Controles

  • rowHeight48Altura padrão da linha
  • primaryButtonHeight48Altura do botão principal
  • keypadKeyHeight52Altura das teclas numéricas
  • keypadGap8Espaço entre teclas

Traços

  • hair1Divisórias padrão
  • ring1.5Foco e seleção

Interação

Movimento rápido e natural

motion

O movimento começa pelo propósito. Entradas e deslocamentos desaceleram suavemente; saídas aceleram por pouco tempo.

Passe o ponteiro ou dê foco ao cartão para comparar três durações.

  • fast150ms
  • base250ms
  • slow350ms

Passe o ponteiro ou dê foco ao cartão para comparar entrada e saída.

  • easecubic-bezier(.25, 1, .5, 1) · Elementos entrando ou se movendo
  • exitcubic-bezier(.4, 0, 1, 1) · Elementos saindo rapidamente

Fundamentos

Números claros, texto legível

typography · Pretendard

Quinze funções em Pretendard cobrem números, títulos, texto e rótulos. Letras grandes mostram resultados; pequenas dão contexto. Use tamanhos e pesos definidos, sem quebrar palavras coreanas.

  • Um pouco de luz no seu diadisplayLarge40 · 700 · 1.25 · -0.03em · Mensagem principal
  • 12 novos registrosdisplayMedium36 · 700 · 1.25 · -0.03em · Resultado principal
  • Mudanças desta semanadisplaySmall32 · 700 · 1.25 · -0.03em · Título de resumo
  • Vamos começar um projeto?headlineLarge28 · 700 · 1.25 · -0.03em · Título da página
  • Atividade recenteheadlineMedium24 · 700 · 1.25 · -0.02em · Título da seção
  • 24 de agosto de 2026headlineSmall24 · 500 · 1.25 · -0.02em · Título secundário
  • Uma nova ideiatitleLarge20 · 700 · 1.25 · -0.02em · Título do cartão
  • Revisão do design concluídatitleMedium16 · 600 · 1.35 · -0.01em · Título do item
  • Hoje às 15htitleSmall14 · 600 · 1.35 · -0.01em · Título pequeno
  • Encontre o que precisa e foque no que importa.bodyLarge16 · 400 · 1.65 · Texto em destaque
  • As mudanças são sincronizadas em todos os dispositivos.bodyMedium14 · 400 · 1.65 · Texto padrão
  • Salvo há 2 minutosbodySmall12 · 400 · 1.35 · Ajuda e descrições
  • ContinuarlabelLarge14 · 600 · 1.35 · -0.01em · Botões e abas
  • Em andamento · 8labelMedium12 · 500 · 1.35 · Estado e metadados
  • NEWlabelSmall11 · 500 · 1.35 · Selos e legendas

Princípios

Seis princípios para telas claras

  • Concentre efeitos fortes em uma ação principal. Use um gradiente por tela.
  • Explique estados e mudanças com texto e ícones, além da cor.
  • Reserve cores de perigo para ações irreversíveis. Evite alarmar com escolhas que podem ser desfeitas.
  • Mostre relações com espaçamento e alinhamento. Estruturas simples são mais fáceis de ler.
  • O maior texto mostra a resposta procurada. Destaque resultados antes das entradas.
  • Mostre valores e números importantes por inteiro. Se faltar espaço, use um tamanho menor da escala definida.

História

Registrar decisões e aprendizados

  1. 2026-08-09A primeira tela

    Um protótipo roxo de calculadora de investimentos deu origem ao Aurora Ledger. Números claros e completos foram o ponto de partida.

  2. Primeiros experimentosDar identidade aos neutros

    O cinza puro era limpo, mas anônimo. Um toque de roxo profundo devolveu personalidade às cores neutras.

  3. Primeiros experimentosRestaurar cores com significado

    Só o roxo dificultava distinguir altas e baixas. Voltamos ao vermelho e azul, conforme a convenção do mercado coreano.

  4. Primeiros experimentosFocar na ação

    O gradiente saiu dos números grandes e foi para os botões principais, indicando a próxima ação.

  5. 2026-08-18Uma linguagem compartilhada

    Definimos cores e contrastes e aplicamos ao primeiro produto. Um tema virou um sistema para todos.

  6. 2026-08-22Completar os tokens

    Opacidade, espaçamento, tamanhos, elevação, formas e movimento ampliaram o vocabulário das cores.

  7. 2026-08-23Publicar os princípios

    Documentamos motivos e usos de cada decisão para manter critérios consistentes conforme os produtos crescem.

  8. 2026-09-25Ampliar as cores de destaque

    Vermelho e azul passam a se chamar warm e cool. As cores ficam, mas os nomes neutros permitem novos significados.