Nash LLM
O harness de modelo. Onde a conversa acontece.
Harness⌘8
NASH · Design system · v1.0 · 2026-09-08
Preto, branco, vidro. Uma curva por família.
A versão final do que o Nash Workspace já usava em três arquivos — cor, grade e movimento — mais o que o site pediu: os degraus de display, o accent Império preparado, o orbe e o canal de som. Cada valor desta página é lido do token em vigor, não digitado.
Princípios
Cinco frases. Uma regra entra depois de uma falha real.
- A verdade é o pixel. Um token declarado que não bate com o que a tela pinta está errado, não a tela. Mede-se antes de documentar.
- Toda medida sai de um token. Um valor cru no CSS de uma página é uma medida que ninguém mais consegue repetir.
- Uma curva por família; sem mola. A de saída em tudo que chega ou volta, a espacial no que percorre distância real, linear nos laços. Nada tem overshoot.
- Preto e branco; o accent é uma decisão. A cor entra por um token só, quando o dono decidir. Até lá, o que está vivo é branco.
- Cada movimento responde a uma pergunta. O que este movimento diz a quem usa? O que não responde, não entra.
Cor
Um preto, um branco em degraus, e um ponto de troca.
O chão do site é preto absoluto; a casca do app é #0a0a0f. Texto, borda, campo e placa saem de um branco só, em alfas. Nenhuma superfície declara um rgba(255,255,255) próprio.
O chão
O branco em degraus
Papéis
O accent e o Império
--accent é o único ponto de troca da marca: branco hoje. O Império é o vermelho preparado — forte, saturado — que entra com data-accent="imperio" no <html>. Strokes, pontos, halos, o arco e o orbe leem dele. Ligue abaixo para ver esta página trocar.
O sinal (app) e as abas
O sinal é a cor do que está vivo no Nash Workspace — o arco, a aresta ativa; âmbar por ora, decisão em aberto desde 2026-09-07. Os accents por aba são identidade de cada aba, não da marca; o site os usa só como o ponto de cada peça.
Tipo
Archivo, local, variável de 100 a 900.
Um arquivo de 34.940 bytes servido do disco; nenhuma página busca tipo na rede (regras da casa §1). Sete degraus do app e três de display que nasceram no site. Nada abaixo de 11px, nada entre os degraus. Mono do sistema para meta e rótulo técnico.
Os degraus
Pesos
Aa300 · leve
Aa400 · corpo
Aa500 · destaque
Aa600 · título
Aa800 · display
Aa900 · wordmark
Entrelinha e aperto
Grade
Base 8. Doze colunas. Quatro cortes.
Doze porque divide por 2, 3, 4 e 6 — as únicas divisões que as telas usam. Quatro cortes, e só quatro: se um layout precisa de outro ponto, o layout está errado, não a grade.
Espaço
Colunas
Cortes
| Corte | O que muda |
|---|---|
| 640 | janela estreita; uma coluna só; a Barra de prompt perde o Voz |
| 900 | duas colunas cabem; goteira 20, margem 32; o índice desta página desce |
| 1200 | o painel lateral cabe junto; goteira 24, margem 40 |
| 1600 | a grade já bateu no teto de 1440 e para de crescer |
Raio
Cinco degraus e a cápsula.
O raio acompanha o tamanho da peça: r1 num chip, r5 num painel grande. Tudo que é cápsula — segmentado, ponto, toggle, botão — leva o pill.
Vidro
A placa: uma receita, medida, para toda superfície.
Fill escuro a 32%, blur 28 com saturação 1,85, dois strokes de 1,5px por dentro — branco 15 › 6 › 2 › 0 e accent 45 › 18 › 6 › 0, apagado até um estado pedir. É a aproximação em CSS do efeito GLASS do Figma (refração 0,8, profundidade 20, luz a −45°). Em 2026-09-07 havia quatro receitas em circulação; agora é uma.
Placa de vidro
O que está atrás passa, borrado e saturado.
Passe o ponteiro: o lampejo atravessa pelo lado por onde ele entrou.
Tokens
Figma → CSS
| Figma (GLASS) | CSS | Nota |
|---|---|---|
| Refração 0,8 · profundidade 20 | backdrop-filter: blur(28px) saturate(1.85) | o CSS não refrata; o blur com saturação é a aproximação da casa |
| Luz a −45° · intensidade 0,8 | ::before — stroke branco 15 › 6 › 2 › 0 | o gradiente vertical faz a luz vir de cima |
| Dispersão 0,5 · splay 0,37 | .nash-lampejo + .nash-luz | a dispersão vira o traço de luz que atravessa uma vez |
| Fill | rgba(13, 15, 18, 0.32) | hover #1F2128 a 40%, pressionado #080A0D a 32% |
Movimento
Um efeito por classe. Cada um diz uma coisa.
A duração segue a distância percorrida, não a importância. A maioria fica abaixo de 300 ms; os que passam percorrem a tela inteira, mudam de tamanho de verdade ou são laço ambiente. Movimento só em transform e opacity; a exceção é o texto que ganha linha. Teclado nunca anima. Conte os quadros antes de escolher a duração.
Tempo
Curvas
A bancada
Cada cartão é um efeito real, com o CSS e o JS da casa. Nada aqui é uma cópia para demonstração.
Pressão · Subida · Lampejo
registrou · dá pra apertar · é vidro. Escala 0,98 em 100 ms; hover em 140 ms; a luz atravessa uma vez, em 640 ms.
Arco · Ocupado
a ação principal, viva · trabalhando. Uma por tela; 5,5 s por volta; ocupado acelera 3× pelo playbackRate, sem pular.
Acende
este é o modo. O ponto acende em 160 ms, o halo em 260. A placa não desliza entre abas: troca de modo acontece dezenas de vezes por dia.
Clarão · Concluído
disparou · terminou. O anel sobe a 40% em 50 ms ao apertar; ao soltar, acende, segura e apaga em 700 ms.
Deslize · Desperta
mudou de estado · pode escrever. A bolinha viaja 24px em 180 ms; no foco o stroke sobe a 45% e os ícones vão a 100%.
Cresce · Digita
aceita mais · está chegando. A única peça que muda de tamanho: texto não dá pra fingir com transform. 32 ms por letra.
Chega · Some
a IA gerou isto, agora · deu lugar. 520 ms, 12px de subida, escala 0,97; irmãos a 90 ms. O que sai só apaga, em 160.
Conta
0
a IA calculou. Sobe pela curva de saída em 520 ms, com tabular-nums para nada mudar de lugar.
Revela · Cursor
Esta página inteira usa o revela: cada bloco sobe 24px em 800 ms na curva espacial, uma vez, ao cruzar 18% da tela. O cursor — o anel que segue o ponteiro — só existe em ponteiro fino com hover.
este bloco chegou à tela · o ponteiro é parte da cena.
Aura
Só a Barra de prompt tem aura, e só no foco e enquanto gera. Em repouso é a placa comum. Nunca com o arco na mesma tela — são as duas únicas exceções à regra de uma cor em movimento por tela.
O orçamento de quadros
A 60 fps cada quadro dura 16,67 ms: 140 ms são 8 quadros, e esse é o orçamento inteiro que o olho recebe. Cada propriedade que anima gasta o mesmo orçamento, e a viagem custa amostras. Folga a partir de 8 por propriedade; aperto a partir de 5; risco abaixo. Uma hipótese medida num caso, não uma lei.
Regras
- Sem mola. Curva de saída em tudo que chega ou volta; nada tem overshoot. Mola é para arrastar, não para um botão que só troca de estado.
- Frequência decide. Hover e troca de modo acontecem dezenas de vezes por dia: crossfade de cor e opacidade, nada viaja.
- Teclado nunca anima. O anel de foco aparece em 0 ms; a Barra abre em 0 ms quando o foco veio do Tab.
- Movimento só em transform e opacity. A exceção é o texto que ganha linha — cresce e abre — porque não dá pra fingir com transform sem distorcer as letras.
- Uma cor em movimento por tela: o arco, ou a aura — nunca as duas juntas.
- Com prefers-reduced-motion o estado ainda comunica: cor e opacidade em 100 ms, sem escala, sem lampejo, laços parados, o orbe num quadro só. Duração zero seria um corte, e corte também incomoda.
- Um laço ambiente por tela, de 7 s ou mais, e nunca como metrônomo: subida e descida assimétricas, um descanso entre ciclos.
Componentes
Moléculas: vidro mais movimento, numa composição de classes.
Cada peça é uma lista de classes. Os efeitos só declaram estados; a lista única de transições mora em .nash-botao. Se cada efeito trouxesse a própria transition, a última classe apagaria as outras.
Botão
nash-botao nash-btn nash-placa nash-arco nash-pressao nash-subida nash-lampejo nash-clarao + <i class="nash-luz"> + <i class="nash-anel"> ← primário, uma por tela nash-botao nash-btn nash-placa nash-pressao nash-subida nash-lampejo + nash-luz ← secundário nash-btn--cheio · nash-btn--miudo (32) · nash-btn--largo (56) · nash-placa--vazia (fantasma)
Botão de ícone
nash-botao nash-placa nash-icone-btn nash-pressao nash-subida nash-giro ← fechar: o × inclina 15° nash-botao nash-placa nash-icone-btn nash-pressao nash-subida nash-lampejo nash-realce + nash-luz ← ação: o ícone cresce 5%
Chip · Aba · Trilho
nash-botao nash-chip nash-placa nash-pressao nash-subida nash-trilho-abas nash-placa > nash-botao nash-aba nash-placa nash-placa--vazia nash-pressao nash-subida nash-acende + nash-ponto (aria-pressed)
Campo · Toggle
label.nash-campo nash-placa nash-desperta > svg.nash-icone + input label.nash-toggle > input[type=checkbox] + span.nash-trilho > i.nash-bolinha
Cartão de vidro
article.nash-placa nash-cartao nash-lampejo nash-subida [style="--accent: …"] + nash-luz ← r4, padding e4; o ::after acende no hover
Barra de prompt · Cartão gerado
form.nash-prompt nash-placa nash-desperta nash-lampejo nash-aura › slots [data-nash-viaja]: marca, campo, mic, envia · convite irmão do campo · nash-halo · nash-luz
estados: --aberta (abre, 320 ms) · --com-texto · data-estado="ocupado" · evento nash-envia {detail.texto}
article.nash-placa nash-cartao nash-chega [--nash-ordem] › filhos nash-entra / nash-brota / nash-conta ← chega em fila, 90 ms entre irmãosMarca
Quatro paralelogramos. O N está no vazio entre eles.
Cortes retos de 90°, as lâminas que separam sinal de ruído. Sem curva, sem gradiente, sem sombra, sem artifício escondendo a estrutura. Traçada do PNG em 2026-09-08 e servida como SVG, em currentColor.
NASH
Seek truth. Prevail.
- Respiro mínimo: metade da altura da marca, de cada lado.
- Branca sobre preto é a forma; preta sobre branco é a inversa. Nenhuma outra cor na marca — nem o accent.
- O wordmark é Archivo 900 com −6% de aperto e entrelinha 0,85. No herói ele fica em blend de diferença sobre o orbe: o N no espaço negativo, agora na palavra.
- O slogan é Archivo 500 em caixa alta com +18% de abertura. Sempre com os dois pontos finais: "Seek truth. Prevail."
- A metáfora — o equilíbrio, as variáveis fantasmas — nomeia e diagnostica. O manifesto do site a usa; uma peça de cliente, não.
Orbe
Partículas em WebGL 2, sem biblioteca. Dez formas.
O elemento vivo da marca, portado da bancada de 2026-09-03 e da orb do Nash Workspace. Cada partícula guarda duas posições e uma semente; a GPU faz o morfo escalonado, a deriva, o respiro, o áudio, a onda do toque e o campo do ponteiro. Clique em uma forma abaixo.
API · criarOrbe(canvas, opções)
| Chamada | O que faz |
|---|---|
| forma(nome) | morfa para uma das formas: caos, esfera, harmonico, no, hopf, thomas, lorenz, super, anel, marca. Uma por vez; a próxima espera na fila. |
| enquadro({ x, y, escala }) | onde o orbe cai na tela, em coordenadas normalizadas (−1..1), e o tamanho. Cada seção da landing declara o seu em data-enquadro (e data-enquadro-movel). |
| audio([grave, media, aguda], nivel) | três bandas 0..1 e o nível geral. O grave empurra para fora, a média respira, a aguda acende. |
| ocupado(bool) | "trabalhando": deriva e brilho sobem — o mesmo estado da Barra de prompt. |
| tinta([r, g, b]) | a cor, 0..1. Branco; vermelho com o Império. A landing lê --accent e passa aqui. |
| onda(x, y) | uma onda parte do ponto — o clique no vazio do herói. |
| pausa(bool) · destruir() | para o laço (a aba escondida para sozinha) e solta o contexto. |
- 160.000 partículas no desktop, 60.000 no toque; devicePixelRatio limitado a 2; o governador de quadros desce a resolução e depois a contagem quando a média passa de 24 ms por quadro, e volta com folga.
- Aditivo: a luz vem da densidade. O halo — 5% das partículas, seis vezes maiores, a 5% do brilho — é o neon, sem passe de bloom.
- Com prefers-reduced-motion: um quadro parado por forma, câmera fixa, sem laço. Sem WebGL 2: a página mostra a marca sobre um brilho estático.
- O giro ambiente dá uma volta a cada 48 s; nas figuras posadas — anel, marca — ele se desliga, e a figura encara a câmera.
Som
Um canal preparado. Nada toca sozinho.
A trilha entra por um toggle, sobe em 1,8 s pela rampa exponencial e desce no mesmo tempo. Um analisador de 1024 pontos lê três bandas — 20–160 Hz, 160–2.000 Hz, 2–9 kHz — e alimenta o orbe a cada quadro.
| Peça | Onde | Nota |
|---|---|---|
| A faixa | site/assets/audio/trilha.mp3 | ainda não gravada. Enquanto o arquivo não existe, o canal toca um drone de teste sintetizado — quatro osciladores e um sopro filtrado — para a imersão já existir. |
| O toggle | #som-toggle · #som-topo | estado persistido em localStorage; a página nunca retoma sozinha, só lembra e avisa. |
| O medidor | .medidor · --nivel por banda | três barras no accent, transform só. |
| Reduzido | prefers-reduced-motion | o som toca; o orbe não reage (quadro parado). |
Acessibilidade
O estado comunica com ou sem movimento.
- Contraste: o texto de corpo é
#e8e8easobre preto (17,2:1); o texto médio, branco a 55% (6,25:1); o fraco, branco a 30% (2,45:1), não atinge AA em nenhum tamanho: reservado a meta decorativa que repete informação disponível em outro lugar. - Foco: anel de 2px no accent, deslocado 2px, sem animação. Toda peça clicável é um botão ou um link de verdade; o cursor próprio nunca esconde o foco de teclado.
- Alvos: 32px numa barra densa, 44px isolado; dois alvos vizinhos nunca a menos de 8px.
- Reduzido: transições em 100 ms, sem escala, laços parados, o orbe num quadro, a entrada pulada. Nenhuma duração zero.
- Rótulos: todo campo tem label (visível ou oculta); o convite da Barra não é o placeholder nativo, e o textarea tem label própria.
- Som: nunca automático; o estado é anunciado em aria-live e o botão do topo carrega aria-pressed.
Como usar
Quatro arquivos de CSS, nesta ordem, e dois de JS — o segundo só onde há orbe.
<link rel="stylesheet" href="css/nash-tokens.css" /> ← cor, tipo, espaço, raio, vidro, tempo, o Império
<link rel="stylesheet" href="css/nash-base.css" /> ← a fonte local, o reset, a Grade, os papéis de tipo
<link rel="stylesheet" href="css/nash-vidro.css" /> ← a placa e os efeitos (átomos de movimento)
<link rel="stylesheet" href="css/nash-componentes.css" /> ← botão, chip, campo, toggle, aba, cartão, barra de prompt
<script src="js/nash-motion.js"></script> ← nashMotion.ligar() liga lampejo, cresce, prompt e revela
<script type="module">import { criarOrbe } from './js/orb.js'</script> ← só onde há orbe
De onde veio
| Aqui | No Nash Workspace | Nota |
|---|---|---|
| nash-tokens.css | src/renderer/style-guide.css · grade.css · motion.css (:root) | consolidação; mesmos nomes |
| nash-base.css | src/renderer/fonte.css · grade.css (classes) | a Archivo local e a Grade |
| nash-vidro.css | src/renderer/motion.css | porte; o arco e o anel leem o accent; entram revela e cursor |
| nash-componentes.css | src/renderer/genui.css (Barra de prompt) | as moléculas nomeadas |
| nash-motion.js | src/renderer/motion.js | os nove efeitos originais mais revela e cursor |
| orb.js | lab/particulas.html · src/renderer/orb/orb-shaders.js | WebGL 2 puro, com áudio, enquadro e a marca como forma |
Figma
O mesmo sistema, como biblioteca.
Variáveis por coleção (Primitivos, Cor com os modos Branco e Império, Espaço, Raio, Tipo, Movimento), text styles em Archivo, effect styles do vidro e do glow, um componente por página, a marca, o orbe e as telas da landing. Cada variável carrega o nome CSS em code syntax, para o Dev Mode devolver var(--…).
NASH · Design system · v1.0 · 2026-09-08 nash.dmnzs.com