Opção de design · linguagem geométrica

Formas,
cor e
movimento.

Um sistema de design alternativo para Nikko Kali: a linguagem de animação do museu virtual, vestida com a paleta extraída das próprias obras do artista. Role para ver tipografia, cores, componentes e motion.

Explorar o sistema
01 · Tipografia

Hierarquia, escala e ritmo.

Display em Space Grotesk (geométrica, no espírito da Neue Machina do museu); rótulos em JetBrains Mono, herdada do sistema atual do Nikko. Tamanhos exatos do padrão de referência.

Heading 1
Nikko Kali
98px / 100px
Heading 2
Formas e cor
64px / 65px
Heading 3
Abstração em movimento
40px / 44px
Heading 4
Pigmentos de pedra
26px / 31px
Eyebrow / Over
Paris · São Paulo
18px · 0.14em
Bold L
A cor como língua materna.
22px · 700
Bold M
Da tela à escultura.
17px · 700
Parágrafo (largo)
Cria com pigmentos que ele mesmo extrai moendo pedras preciosas, minerais e metais.
20px / 32px
Regular M
Quatro décadas de obra entre Paris, São Paulo e o mundo.
16px / 26px
Mono / label
CARROUSEL DU LOUVRE · 2013 · 2015 · 2017
13px · 0.06em
02 · Cores & superfícies

A paleta das obras.

Acentos medidos diretamente das pinturas do Nikko. Os gradientes seguem a estrutura do museu (ângulos e pares), recolorida. Fundos escuros, brilhos radiais e a textura de tela.

Cobalto
#3D5FD0
Cobalto claro
#7E97EC
Vermelho
#E0574D
Laranja
#E8863C
Âmbar
#E4BE4E
Verde
#5FB56E
Magenta
#DE6A97
Osso
#E9E4D8
Gradientes
146° · cobalto → magenta
140° · âmbar → vermelho
146° · verde → cobalto
espectro das obras
Superfícies & overlays
ink · base
ink-2 · card
ink-3 · elevado
brilho radial
vidro / blur
03 · Componentes

Botões, cartões, campos.

Herdados do museu: pílula contornada com ícone circular que preenche no hover, cartões que sobem e acendem o canto gradiente.

Botões · estados

Primário
default → hover (passe o mouse)
Secundário
outline
Slim · ghost
slim
Desativado
disabled

Cartões · hover-lift

01
Pintura

Telas e papéis com pigmentos minerais puros, da linha caligráfica ao campo de cor.

02
Escultura

Volumes pintados que levam a mesma paleta ao espaço.

03
Cerâmica

Peças utilitárias e decorativas transformadas em superfície de pintura.

Campos · default / focus / erro

Endereço inválido
04 · Layout & espaçamento

Contêiner, grade, split.

Largura máxima 1240px, respiro lateral fluido e o espaçamento generoso de seção do museu (clamp 4rem–9rem).

Hero split · texto + composição (1.05fr / .95fr)
texto
arte geométrica
Grade de 3 · cartões auto-fit
01
02
03
Contêiner · 1240px · pad-x fluido
max-width 1240 · margin auto
05 · Movimento & interação

A linguagem de animação.

Os mesmos comportamentos do museu: revelação na entrada (0.8s), formas flutuando com parallax no scroll, hover-lift com brilho, botão que preenche e headings que deslocam por span. Passe o mouse em cada tile.

Reveal · entrada 0.8s ↑ (clique p/ repetir)
Float · flutuação contínua
Spin · rotação (keyframe do museu)
Hover-lift · sobe + brilho 0.2s
Fill
Botão · preenche no hover
Nikko
Heading span · desloca por span 0.8s
06 · Ícones

Sistema de ícones.

O ícone-assinatura do museu: seta em círculo. Traço fino (currentColor), tamanhos S/M/L e herança de cor pela paleta.

Variantes de tamanho
32
48
64 · hover
Herança de cor (currentColor)