O sistema, documentado dentro do próprio sistema
Esta página não descreve a marca, ela é feita com a marca. Todo valor mostrado aqui vem do mesmo arquivo de tokens que constrói o restante do site.
Lockup
Assinatura
Símbolo
O símbolo é um eclipse: disco cheio com um disco menor recortado acima e à direita. A assinatura é composta em Geist semibold com tracking fechado, que é o que mantém as cinco letras como um bloco só.
Base e superfícies
paper
#F7F5F0
Base clara
ink
#000000
Texto e contraste
surface-900
#181818
Superfície escura
surface-800
#1F1F1F
Superfície escura
surface-700
#272727
Cartão no escuro
surface-600
#313131
Borda no escuro
Aurora
A aurora só existe como peça gráfica delimitada, dentro de um recorte com forma própria. Nunca no fundo da página, nunca atrás de texto corrido. O grão é calculado pixel a pixel e exportado como imagem, então não custa nada em tempo de execução.
aurora-void
#17151A
aurora-indigo
#4B2FD6
aurora-violet
#7C4DF0
aurora-magenta
#F06CC8
aurora-cream
#F0E6B4
aurora-mint
#C3E4A2
Geist, uma família só
Geist Mono aparece apenas onde a monoespaçada tem função: legenda em caixa alta, dado numérico e rótulo de interface. Sem itálico e sem peso acima de semibold em nenhum lugar.
- Título de página
- text-5xl · 48px
- Título de seção
- text-4xl · 36px
- Subtítulo
- text-2xl · 24px
- Corpo de destaque
- text-lg · 18px
- Corpo padrão
- text-base · 16px
- Apoio
- text-sm · 14px
- Legenda em mono
- text-xs · 12px
Treze valores, nada entre eles
- 2px
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
- 40px
- 48px
- 64px
- 80px
- 96px
Uma curva só no projeto inteiro
Toda transição usa cubic-bezier(0.32, 0.72, 0, 1). Sai rápido e chega devagar, como um objeto com massa. Nenhum elemento usa a curva padrão do navegador, e quem pede movimento reduzido no sistema recebe só a variação de opacidade.
Passe o cursor, clique e navegue por teclado nos quatro botões acima. Todos têm hover, estado ativo com recuo de escala, foco visível e desabilitado.