Pular para o conteúdo
Design System · Realm ◍

Criativo design system

Multiverso comic — tinta grossa, halftone e nada perfeitamente reto.

Fonte única em src/design-system/realms.ts. A escala compartilhada (spacing, z-index, breakpoints, durações) vive em tokens.ts e não é repetida por realm — repetir três vezes é como a inconsistência começa. Rota do realm: /criativo.

01Introduction

Objetivo

Dar a O Criativo uma linguagem visual que se possa aplicar sem adivinhação: as decisões já foram tomadas e estão escritas, então quem constrói uma tela nova não recomeça do zero nem inventa uma variação a mais do mesmo botão.

Filosofia

Multiverso comic — tinta grossa, halftone e nada perfeitamente reto. Este guia documenta o que existe no código, não o que seria bom existir: cada exemplo abaixo usa os componentes e classes reais. Se um quebrar, quebra aqui — é assim que a documentação evita mentir.

Princípios

  1. 01

    Contorno preto sempre. É o que segura a página inteira — sem ele a cor satura e some.

  2. 02

    Nada alinhado a 0°. Os tilts (.sv-tilt-1/2/3) existem para o layout parecer colado à mão.

  3. 03

    A sombra é dura, não difusa: deslocamento sólido em preto, nunca blur. Isso é impressão, não elevação de UI.

  4. 04

    Cor é acento, não fundo. O papel é escuro; a saturação entra em pedaços pequenos.

  5. 05

    Halftone e grão são textura de impressão — decoram, mas nunca competem com o texto.

Para quem é

  • Designers — para escolher token em vez de inventar valor, e saber o que já está resolvido.
  • Desenvolvedores — para importar o componente existente em vez de reescrever, e ver os estados que precisam existir.
  • Quem chega agora — para entender por que o projeto tem três universos e o que muda entre eles.

Como usar

  1. 1. Procure a seção no índice à esquerda — ele é o sumário deste documento.
  2. 2. Prefira sempre o token à constante: var(--r-accent) em vez do hex.
  3. 3. Se algo não existe aqui, provavelmente não deveria existir na tela. Proponha antes de criar.

Estrutura da documentação

As 16 seções são as mesmas nos três realms — é o que torna possível comparar “Motion no Criativo” com “Motion no Anfitrião” e ver que um usa spring e o outro não se move. O esqueleto é comum; a carne, não. Neste guia, 20 das 20 já têm conteúdo.

#SeçãoRespondeAqui
01IntroductionObjetivo, filosofia, princípios, como usar, contribuição e versionamento.pronto
02FoundationsAs decisões visuais de base: cor, tipo, espaço, forma, elevação.pronto
03Design TokensOs valores atômicos em tabela: HEX, RGB, HSL, CSS var e Tailwind.pronto
04TypographyA escala completa — família, peso, corpo, entrelinha e tracking.pronto
05ColorsPaletas, superfícies, estados e contraste medido sobre o fundo real.pronto
06GridContainer, colunas, margens, medianiz e breakpoints.pronto
07IconographyGrade, tamanhos, peso e área segura dos ícones.em obra
08MotionDuração, curva e gesto — cada entrada toca com as curvas do realm.pronto
09ComponentsA biblioteca: variantes, estados, anatomia, código e acessibilidade.em obra
10PatternsComposições resolvidas: login, busca, multi-step, FAQ.em obra
11TemplatesPáginas inteiras montadas com o kit.pronto
12AccessibilityWCAG 2.2, contraste, foco, teclado, leitor de tela e motion reduzido.pronto
13Content DesignMicrocopy: botões, erros, vazios e voz de cada realm.em obra
14BrandLogo, área de proteção, redução e aplicações.em obra
15ResourcesDownloads: SVG, JSON de tokens e config do Tailwind.em obra
16ChangelogHistórico de versões: o que mudou, quando e por quê.em obra
17Seções de páginaOs blocos que montam uma página: hero, faixa de métricas, CTA.pronto
18Retro OS · TemasVariações de tema — o SO retrô do Criativo, os temas de terminal do _Dev.pronto
19LabExperimentos: ferramentas internas antes de virarem componente.em obra
20DocumentaçãoPonteiros para o código e os docs reais, não prosa duplicada.em obra

Fluxo de contribuição

  1. 1. Existe? Procure no índice e no catálogo antes de propor. Quase toda “necessidade nova” é uma variante de algo que já está aqui.
  2. 2. Token primeiro. Se a peça exige um valor que não é token, o problema é o valor, não a peça.
  3. 3. Fonte única. Componha o que existe; não copie. Duas cópias divergem em silêncio — é sempre uma questão de tempo.
  4. 4. Documente aqui. Um componente sem seção neste guia é um componente que ninguém vai achar.

Versionamento

Semântico, aplicado ao que quebra consumo, não ao que muda pixel:

  • major — remover token ou variante, renomear classe: quebra quem usa.
  • minor — acrescentar componente, variante ou token.
  • patch — corrigir valor, contraste ou texto.

O histórico vive nos commits do repositório; a seção 16 · Changelog vai destilá-lo.

02Brand Foundation

01 + 03 · Brand & Style

Fundação de marca

Brand Foundation e Style Guide: a identidade visual do Design System e as regras que traduzem os Design Tokens em linguagem consistente.

// Brand Foundation

Identidade visual: logo, princípios e voz do Design System.

Brand Guidelines

Pronto

Logo & Marca

Ver Pronto

Ícones

Ver Pronto

Ilustrações

Ver Pronto

Fotografia

Planejado

Texturas

Ver Pronto
HalftoneBen-DaySpeedlines

Backgrounds

Ver Pronto
Canvas por dimensãoGradientes

Ícones Sociais

Ver Pronto

// Style Guide

Regras visuais fundamentais que derivam dos tokens.

Paleta de Cores

Pronto

Tipografia

Pronto

Grid System

Ver Pronto

Espaçamento

Pronto

Border Radius

Pronto

Sombras (Elevation)

Pronto

Gradientes

Pronto

03Design Tokens

Token é o contrato: o nome dura, o valor pode mudar. Abaixo, cada cor deste realm em todas as notações que alguém pode precisar copiar — e o contraste medido sobre #0a0612, o fundo real desta interface. RGB, HSL e razão são derivados do hex por função testada, nunca digitados: número escrito à mão envelhece calado.

Color Tokens · escalas semânticas

Duas camadas, e confundi-las é o erro clássico. Estas escalas são de significado e atravessam os três universos: perigo é vermelho no comic, no terminal e no jornal. As paletas de realm, mais abaixo, são de identidade — é ali que os três divergem. Fonte em src/design-system/tokens.ts, espelhada em tokens.css e mapeada no tailwind.config.ts.

PrimaryAção principal, marca, destaque

--c-primary-* · bg-primary-*
50
100
200
300
400
500
600
700
800
900
950
PassoHEXRGBHSLCSS VariableTailwind
50#fff0f7255, 240, 247332, 100%, 97%--c-primary-50bg-primary-50
100#ffd6ea255, 214, 234331, 100%, 92%--c-primary-100bg-primary-100
200#ffadd4255, 173, 212331, 100%, 84%--c-primary-200bg-primary-200
300#ff85bf255, 133, 191331, 100%, 76%--c-primary-300bg-primary-300
400#ff5aa8255, 90, 168332, 100%, 68%--c-primary-400bg-primary-400
500#ff2d95255, 45, 149330, 100%, 59%--c-primary-500bg-primary-500
600#e01a7d224, 26, 125330, 79%, 49%--c-primary-600bg-primary-600
700#b31363179, 19, 99330, 81%, 39%--c-primary-700bg-primary-700
800#850e49133, 14, 73330, 81%, 29%--c-primary-800bg-primary-800
900#5c0a3392, 10, 51330, 80%, 20%--c-primary-900bg-primary-900
950#33061c51, 6, 28331, 79%, 11%--c-primary-950bg-primary-950

SecondaryAção de apoio, foco, links

--c-secondary-* · bg-secondary-*
50
100
200
300
400
500
600
700
800
900
950
PassoHEXRGBHSLCSS VariableTailwind
50#e6feff230, 254, 255182, 100%, 95%--c-secondary-50bg-secondary-50
100#b8fbff184, 251, 255183, 100%, 86%--c-secondary-100bg-secondary-100
200#7df6ff125, 246, 255184, 100%, 75%--c-secondary-200bg-secondary-200
300#3deffb61, 239, 251184, 96%, 61%--c-secondary-300bg-secondary-300
400#00e5ff0, 229, 255186, 100%, 50%--c-secondary-400bg-secondary-400
500#00c4e00, 196, 224188, 100%, 44%--c-secondary-500bg-secondary-500
600#009cb30, 156, 179188, 100%, 35%--c-secondary-600bg-secondary-600
700#0075870, 117, 135188, 100%, 26%--c-secondary-700bg-secondary-700
800#004f5c0, 79, 92188, 100%, 18%--c-secondary-800bg-secondary-800
900#002e360, 46, 54189, 100%, 11%--c-secondary-900bg-secondary-900
950#00171b0, 23, 27189, 100%, 5%--c-secondary-950bg-secondary-950

AccentProfundidade, gradientes

--c-accent-* · bg-accent-*
50
100
200
300
400
500
600
700
800
900
950
PassoHEXRGBHSLCSS VariableTailwind
50#f3ecff243, 236, 255262, 100%, 96%--c-accent-50bg-accent-50
100#e0ccff224, 204, 255264, 100%, 90%--c-accent-100bg-accent-100
200#c4a0ff196, 160, 255263, 100%, 81%--c-accent-200bg-accent-200
300#a570ff165, 112, 255262, 100%, 72%--c-accent-300bg-accent-300
400#8c47fb140, 71, 251263, 96%, 63%--c-accent-400bg-accent-400
500#7b2ff7123, 47, 247263, 93%, 58%--c-accent-500bg-accent-500
600#6417d6100, 23, 214264, 81%, 46%--c-accent-600bg-accent-600
700#4e11a878, 17, 168264, 82%, 36%--c-accent-700bg-accent-700
800#380c7856, 12, 120264, 82%, 26%--c-accent-800bg-accent-800
900#23074c35, 7, 76264, 83%, 16%--c-accent-900bg-accent-900
950#13042819, 4, 40265, 82%, 9%--c-accent-950bg-accent-950

NeutralTexto, superfície, borda

--c-neutral-* · bg-neutral-*
0
50
100
200
300
400
500
600
700
800
900
950
PassoHEXRGBHSLCSS VariableTailwind
0#ffffff255, 255, 2550, 0%, 100%--c-neutral-0bg-neutral-0
50#f7f5fb247, 245, 251260, 43%, 97%--c-neutral-50bg-neutral-50
100#ece8f2236, 232, 242264, 28%, 93%--c-neutral-100bg-neutral-100
200#d6cfe0214, 207, 224265, 22%, 85%--c-neutral-200bg-neutral-200
300#b3a9c4179, 169, 196262, 19%, 72%--c-neutral-300bg-neutral-300
400#8b7fa0139, 127, 160262, 15%, 56%--c-neutral-400bg-neutral-400
500#6a5f7d106, 95, 125262, 14%, 43%--c-neutral-500bg-neutral-500
600#4f466079, 70, 96261, 16%, 33%--c-neutral-600bg-neutral-600
700#382f4756, 47, 71263, 20%, 23%--c-neutral-700bg-neutral-700
800#241d3036, 29, 48262, 25%, 15%--c-neutral-800bg-neutral-800
900#140a2420, 10, 36263, 57%, 9%--c-neutral-900bg-neutral-900
950#0a061210, 6, 18260, 50%, 5%--c-neutral-950bg-neutral-950

SuccessConfirmação, estado saudável

--c-success-* · bg-success-*
50
100
200
300
400
500
600
700
800
900
PassoHEXRGBHSLCSS VariableTailwind
50#edfce8237, 252, 232105, 77%, 95%--c-success-50bg-success-50
100#d0f7c4208, 247, 196106, 76%, 87%--c-success-100bg-success-100
200#a6ee8f166, 238, 143105, 74%, 75%--c-success-200bg-success-200
300#74e057116, 224, 87107, 69%, 61%--c-success-300bg-success-300
400#4bc72f75, 199, 47109, 62%, 48%--c-success-400bg-success-400
500#2ea81846, 168, 24111, 75%, 38%--c-success-500bg-success-500
600#21801233, 128, 18112, 75%, 29%--c-success-600bg-success-600
700#19600f25, 96, 15113, 73%, 22%--c-success-700bg-success-700
800#12400c18, 64, 12113, 68%, 15%--c-success-800bg-success-800
900#0b260611, 38, 6111, 73%, 9%--c-success-900bg-success-900

WarningAtenção, ação reversível

--c-warning-* · bg-warning-*
50
100
200
300
400
500
600
700
800
900
PassoHEXRGBHSLCSS VariableTailwind
50#fffde6255, 253, 23055, 100%, 95%--c-warning-50bg-warning-50
100#fff8b3255, 248, 17954, 100%, 85%--c-warning-100bg-warning-100
200#fff073255, 240, 11554, 100%, 73%--c-warning-200bg-warning-200
300#ffe600255, 230, 054, 100%, 50%--c-warning-300bg-warning-300
400#f5c400245, 196, 048, 100%, 48%--c-warning-400bg-warning-400
500#d9a600217, 166, 046, 100%, 43%--c-warning-500bg-warning-500
600#a67e00166, 126, 046, 100%, 33%--c-warning-600bg-warning-600
700#735700115, 87, 045, 100%, 23%--c-warning-700bg-warning-700
800#40300064, 48, 045, 100%, 13%--c-warning-800bg-warning-800
900#1f170031, 23, 045, 100%, 6%--c-warning-900bg-warning-900

DangerErro, ação destrutiva

--c-danger-* · bg-danger-*
50
100
200
300
400
500
600
700
800
900
PassoHEXRGBHSLCSS VariableTailwind
50#fff0eb255, 240, 23515, 100%, 96%--c-danger-50bg-danger-50
100#ffd6c7255, 214, 19916, 100%, 89%--c-danger-100bg-danger-100
200#ffb199255, 177, 15314, 100%, 80%--c-danger-200bg-danger-200
300#ff855a255, 133, 9016, 100%, 68%--c-danger-300bg-danger-300
400#ff5a1f255, 90, 3116, 100%, 56%--c-danger-400bg-danger-400
500#e63c00230, 60, 016, 100%, 45%--c-danger-500bg-danger-500
600#b32f00179, 47, 016, 100%, 35%--c-danger-600bg-danger-600
700#852300133, 35, 016, 100%, 26%--c-danger-700bg-danger-700
800#57170087, 23, 016, 100%, 17%--c-danger-800bg-danger-800
900#2e0c0046, 12, 016, 100%, 9%--c-danger-900bg-danger-900

InfoInformação neutra

--c-info-* · bg-info-*
50
100
200
300
400
500
600
700
800
900
PassoHEXRGBHSLCSS VariableTailwind
50#e6f1ff230, 241, 255214, 100%, 95%--c-info-50bg-info-50
100#b8d6ff184, 214, 255215, 100%, 86%--c-info-100bg-info-100
200#7db0ff125, 176, 255216, 100%, 75%--c-info-200bg-info-200
300#4a90ff74, 144, 255217, 100%, 65%--c-info-300bg-info-300
400#1f6fff31, 111, 255219, 100%, 56%--c-info-400bg-info-400
500#0078ff0, 120, 255212, 100%, 50%--c-info-500bg-info-500
600#0060cc0, 96, 204212, 100%, 40%--c-info-600bg-info-600
700#0048990, 72, 153212, 100%, 30%--c-info-700bg-info-700
800#0030660, 48, 102212, 100%, 20%--c-info-800bg-info-800
900#0018330, 24, 51212, 100%, 10%--c-info-900bg-info-900

Espaçamento

Escala compartilhada pelos três realms — repetir três vezes é como a inconsistência começa. Fonte em src/design-system/tokens.ts.

TokenValorTailwindDemonstração
--space-00p-0 · m-0 · gap-0
--space-10.25remp-1 · m-1 · gap-1
--space-20.5remp-2 · m-2 · gap-2
--space-30.75remp-3 · m-3 · gap-3
--space-41remp-4 · m-4 · gap-4
--space-51.25remp-5 · m-5 · gap-5
--space-61.5remp-6 · m-6 · gap-6
--space-82remp-8 · m-8 · gap-8
--space-102.5remp-10 · m-10 · gap-10
--space-123remp-12 · m-12 · gap-12
--space-164remp-16 · m-16 · gap-16
--space-205remp-20 · m-20 · gap-20
--space-246remp-24 · m-24 · gap-24
--space-328remp-32 · m-32 · gap-32

Raio

TokenValorTailwindDemonstração
--radius-none0rounded-none
--radius-sm0.25remrounded-sm
--radius-md0.5remrounded-md
--radius-lg0.75remrounded-lg
--radius-xl1remrounded-xl
--radius-2xl1.5remrounded-2xl
--radius-3xl2remrounded-3xl
--radius-full9999pxrounded-full

Elevação

TokenValorUsoDemonstração
elevation.12px 2px 0 0 #000Stickers, chips
elevation.24px 4px 0 0 #000Botões, painéis padrão
elevation.36px 6px 0 0 #000Painéis em destaque, FAB
elevation.48px 8px 0 0 #000Hero, overlays
elevation.510px 10px 0 0 #000Modal

Atalho de classe: os tokens deste realm são consumidos como bg-[var(--sv-magenta)] · text-[var(--sv-magenta)]. A camada semântica --r-* (ver Tokens de realm) é a que atravessa os três universos com o mesmo nome.

// Tokens de realm

Acima estão as primitivas deste realm. Aqui está a camada semântica: --r-* tem o mesmo nome nos três universos e resolve no valor de cada um, escopado pela classe do realm em src/styles/realm-tokens.css. É o que permite escrever um componente que atravessa os três sem um if.

--r-bg

Fundo da página

--r-bg-2

Fundo de painel

--r-ink

Tinta

--r-ink-mut

Tinta secundária

--r-accent

Ação primária

--r-accent-2

Ação secundária

--r-accent-3

Chamada

--r-border

Traço

// Elevação

elevation.1
elevation.2
elevation.3
elevation.4
elevation.5
elevation.12px 2px 0 0 #000Stickers, chips
elevation.24px 4px 0 0 #000Botões, painéis padrão
elevation.36px 6px 0 0 #000Painéis em destaque, FAB
elevation.48px 8px 0 0 #000Hero, overlays
elevation.510px 10px 0 0 #000Modal

// Raio

radius.none0Painéis recortados, scraps
radius.md0.5remBotões, cards — o padrão
radius.full9999pxPílulas, chips, FAB

04Typography

Bangers

--font-display · .sv-display

Display

Títulos, onomatopeias, números grandes. Sempre em CAIXA ALTA.

Archivo Black

--font-heavy · .sv-heavy

Heavy

Rótulos, kickers, texto de apoio em caixa alta. Peso sem grito.

Geist

--font-sans · .font-sans

Body

Texto corrido. O único papel que não é caixa alta.

JetBrains Mono / SF Mono

--font-mono · .font-mono

Mono

Código, tokens, valores.

04.1Comic FX — efeitos de título

32 tratamentos nomeados para texto de capa, cada um uma classe .kfx-* reutilizável. Todos escalam pelo font-size (medidas em em), então a mesma classe serve na manchete e no rótulo. Fundo escuro de propósito: é onde a tinta e o brilho ganham contraste.

Ação / Heróis

HEROMODE
MULTIVERSO
PODERMÁXIMO

Combinações de tipografia

LeituraeTrilha
Artes&Ilustra
MultiExpansão
Boom!Nova

32 efeitos tipográficos

  • COMIC01. Contorno preto grosso
  • COMIC02. Contorno duplo
  • COMIC03. Sombra deslocada
  • COMIC04. Sombra longa
  • COMIC05. Extrusão 3D
  • COMIC06. Gotejamento de tinta
  • COMIC07. Halftone (pontilhado)
  • COMIC08. Textura papel antigo
  • COMIC09. Metal escovado
  • COMIC10. Cromado
  • COMIC11. Neon brilhante
  • COMIC12. Letras rachadas
  • COMIC13. Spray / graffiti
  • COMIC14. Pincel seco
  • COMIC15. Letras derretendo
  • COMIC16. Explosão atrás
  • COMIC17. Faíscas e partículas
  • COMIC18. Offset de cores
  • COMIC19. Efeito glitch
  • COMIC20. Perspectiva inclinada
  • COMIC21. Pixel / 8-bit
  • COMIC22. Ouro elegante
  • 23. Ransom / recorte
  • COMIC24. Pincel / graffiti
  • COMIC25. HUD neon
  • COMIC26. Graffiti coroa
  • COMIC27. Retro 3D dourado
  • COMIC28. Escova branca
  • COMIC29. Teia de aranha
  • COMIC30. Dupla-exposição
  • COMIC31. Holograma
  • COMIC32. Neon-tubo animado

Biblioteca de assets — MULTIVERSO

  • MULTIVERSOInfinito em todas as direções.
  • MULTIVERSORealidades que colidem. Destinos que se cruzam.
  • MULTIVERSOExistem mais mundos do que você imagina.
  • MULTIVERSONovos mundos carregando…
  • Tantas versões. Tantas verdades.
  • MULTIVERSOQuebre as regras. Crie seu universo.
  • MULTIVERSONenhum limite. Infinitas histórias.
  • MULTIVERSOCada escolha cria um novo mundo.
  • MULTIVERSOUm universo não basta para tantas ideias!

Uso: <span className="kfx kfx-chrome text-5xl">TÍTULO</span>. O glitch (19) precisa de data-text igual ao conteúdo. As faces do 3D (05) recolorem via --k-yellow / --k-orange, como nas manchetes acima.

04.2Web kit 8-bit

A dimensão videogame: um kit de interface em pixel — janela, painéis, botões que afundam ao clicar, barras de vida, badges e input. Tudo com .bit-*, a fonte Pixelify e cantos serrilhados. Paleta de neon limitada, sombra dura, nada arredondado.

MULTIVERSO.EXE

Bem-vindo à dimensão 8-bit. Aperte START para atravessar a fenda.

Status do jogador

HP

XP

Nível 8Combo x3+500 pts

Botões

Clique: o botão afunda --bit-s e some a sombra — o feedback físico do arcade.

Entrar na fenda

Pausa
Guardião da Fenda

Poucos atravessam a Terra-138 e voltam para contar…

Inventário

9
3
2

High scores

#HeróiPontos
1LUC138000
2AAA92500
3BOB77010

Controles

Balões

Aperte ▶ para atravessar!
+50 XP · combo mantido

Uso: <button className="bit-btn bit-corners">Start</button>. A classe .bit-corners aplica o canto serrilhado a qualquer peça do kit. O diálogo (.bit-dialog__text) usa animação de máquina de escrever e o balão (.bit-balloon) traz o rabicho serrilhado — ambos respeitam prefers-reduced-motion.

04.3Templates de zona

Zonas de página prontas, montadas com as peças do realm — efeitos de título, cores de dimensão, retícula e botões. Copie o bloco e troque o conteúdo.

A · Hero de dimensão (split arte + texto)

Terra-1610 · Dimensão

Novo mundo

Um subtítulo curto que explica a dimensão em uma frase e convida a atravessar a fenda.

Explorar →Ver tudo

B · Grade de mundos (cards de dimensão)

01

Ateliê

Arte, vetor e pixel.

Explorar →
02

Oficina

Código e componentes.

Explorar →
03

Rádio

Trilha e visualizador.

Explorar →

C · Faixa de chamada (CTA)

Bora criar?

Uma frase de fecho que empurra para a ação — curta, direta, com um único botão.

Começar agora →

D · Faixa de estatísticas (contadores animados)

Dimensões

Efeitos de título

Anomalias mapeadas

Feito à mão

E · Depoimentos (balão de fala comic)

“Cada dimensão parece um mundo inteiro. Nunca vi um portfólio assim.”
— Visitante da Terra-1610
“O nível de capricho no detalhe é absurdo. Vira referência.”
— Colega de design

F · Galeria masonry (grade irregular)

ART
ART
ART
ART
ART
ART

G · Timeline de dimensões (linha do tempo em quadros)

  1. 01

    A fenda abre

    O portal de entrada e os três realms.

  2. 02

    O multiverso

    Oito dimensões criativas ganham cor.

  3. 03

    A anomalia

    Terra-138 quebra a grade — o glitch.

H · Split art + texto invertível (alterna o lado)

A

Lado A

Arte à esquerda, texto à direita.

B

Lado B

O bloco seguinte inverte: texto à esquerda, arte à direita.

I · Rodapé de dimensão (links + selo + redes)

CRIATIVO

Uma dimensão do multiverso. Feita à mão, faixa por faixa.

Redes

  • GitHub
  • Instagram
  • E-mail

Cada template herda a cor da dimensão por --k-zone-bg e usa os efeitos .kfx-* nos títulos — troque o efeito para mudar a “voz” da zona.

05Colors

A camada de identidade: o que faz este realm parecer ele mesmo. Cada linha traz o contraste real sobre #0a0612 — não sobre um branco imaginário —, porque contraste aprovado no fundo errado é contraste reprovado no site.

Acentos

AmostraNomeTokenHEXRGBHSLContrastePapel
Magenta--sv-magenta#ff2d95255, 45, 149330, 100%, 59%5.79:1 · AAAcento primário, destaque, hover
Cyan--sv-cyan#00e5ff0, 229, 255186, 100%, 50%13.03:1 · AAAAcento secundário, foco, links
Yellow--sv-yellow#ffe600255, 230, 054, 100%, 50%15.82:1 · AAAChamada para ação, números
Orange--sv-orange#ff5a1f255, 90, 3116, 100%, 56%6.43:1 · AAAlerta, calor, gradientes
Violet--sv-violet#7b2ff7123, 47, 247263, 93%, 58%3.43:1 · só título grandeProfundidade, gradientes
Lime--sv-lime#b6ff00182, 255, 077, 100%, 50%16.51:1 · AAASucesso, carimbos

Superfícies

AmostraNomeTokenHEXRGBHSLContrastePapel
Ink--sv-ink#0a061210, 6, 18260, 50%, 5%1.00:1 · reprovaFundo dominante
Ink 2--sv-ink-2#140a2420, 10, 36263, 57%, 9%1.05:1 · reprovaSuperfície elevada, painéis
Paper--sv-paper#fff8e7255, 248, 23142, 100%, 95%18.93:1 · AAATexto e superfícies claras

Leitura da coluna de contraste: AA serve texto normal; só título grande exige ≥24px (ou ≥18.66px em peso bold); reprova é ornamento, nunca texto. Razões calculadas pela fórmula do WCAG 2 em color-utils.ts.

06Grid & Responsividade

01 · Foundations

Grid system

12 colunas, gutter e container derivados dos tokens. Ajuste as colunas e ligue o overlay para ver a estrutura por trás de cada tela.

// Colunas & Gutter

1
2
3
4
5
6
7
8
9
10
11
12

// Layout composto

principal · 8
lateral · 4
4
4
4

// Baseline (4px)

0
1
2
3
4
5
6
8
10
12
16
20
24
32

// Containers

sm
640px
md
768px
lg
1024px
xl
1200px

// Grelha do realm

Containermax-w-containerLargura máxima do conteúdo (.sv-canvas)
Bentogrid-cols-2 md:grid-cols-4Home — blocos de 1, 2 ou 4 colunas
Cardsgrid-cols-1 sm:grid-cols-2 lg:grid-cols-3Listagens (portfólio, galeria)
Guttergap-5 md:gap-6Respiro entre blocos

07Iconography

Ícone aqui é marca de quadrinho: traço grosso (2–3px), canto reto e área segura larga para a tinta não encostar na moldura. Grade de 24px, escala em 16/24/32. Onde o _Dev usa glifo de terminal, o Criativo usa o gesto desenhado.

★AçãoDestaque, clique, impacto
✦BrilhoNovo, em destaque
❯AvançaNavegação, próximo
◉HalftoneTextura, profundidade impressa
✕FechaDescartar, cancelar
✚AdicionaCriar, incluir
☰MenuPainéis, índice
✺ThwipOnomatopeia — a voz do gesto
Grade 24pxTraço 2–3px, pretoÁrea segura 2px em voltaTamanhos 16 · 24 · 32

08Motion

Cada gesto abaixo toca de verdade, com as mesmas curvas do realm. Documentar movimento em texto é o jeito mais fácil de a documentação mentir — o easing muda no código e a tabela continua igual. Registro em src/design-system/realm-motion.ts.

pop

spring · stiffness 260 · damping 18

pop

Entrada de cards — o salto de quadrinho

↳ BentoGrid, cards do miolo

heroPop

spring · stiffness 260 · damping 20 · sem fade

hero

Elemento LCP: só transform, nunca opacity 0

↳ Matéria de capa (primeiro bloco)

tilt no hover

-translate-y-1 · rotate(-2deg)

tilt

Botões e cards ganham vida ao passar o mouse

↳ ComicButton, BentoCard, cards de dimensão

ease.spring

cubic-bezier(0.34, 1.56, 0.64, 1)

spring

Padrão do realm — sempre passa do ponto e volta

↳ Todas as transições do Criativo

parallax 3D

spring · stiffness 140 · damping 18 · ±7deg

tilt

A capa inclina seguindo o ponteiro, como objeto na mesa

↳ ComicCover (capa da home)

glitch burst

steps(1) · 6.5s · rajadas de ~65ms

glitchBurst

Fatias do masthead saltam; 90% do ciclo é repouso

↳ Masthead LUCAS RIBOLDI

sv-shake

steps(2) · 4.5s

shake

Tremor de impacto no texto com glitch

↳ .sv-glitch

onoma pop

spring · escala 0 → 1 com overshoot

pop

Onomatopeia estoura na tela

↳ THWIP!, BAM! na home

08.1Motion (catálogo)

Fase 5 · Motion

Movimento com estalo

Biblioteca de motion do Design System, com motion/react. As durações e easings espelham os tokens. Clique em replay para reexecutar.

P

popTilt

Entrada com tilt que assenta (spring)

--ease-spring
P

popIn

Pop de escala com estalo

--ease-spring
F

fadeRise

Sobe e aparece (reveal de seção)

--ease-out
T

tiltStack

Cards inclinam em direções alternadas

--ease-spring
G

glitchIn

Deslize com aberração cromática

--duration-fast
D

dimSwap

Troca de dimensão (skew + fade)

--duration-slow
S

slamIn

Impacto: entra grande e crava

--ease-spring
S

shake

Tremor lateral (POW!)

--duration-slow
S

swing

Balança pendurado e assenta

--ease-out
V

vibrate

Vibração contínua (energia)

--duration-fast
F

flicker

Piscada de neon

--duration-slow
P

popBurst

Estoura do zero com overshoot

--ease-spring
S

slideRip

Rasga da esquerda com skew

--ease-spring
S

spinPop

Gira 180° e cresce

--ease-spring
E

elastic

Elástico (squash & stretch)

--ease-spring
D

drift

Sobe suave com leve overshoot

--ease-out
R

rubberBand

Estica e volta (rubber band)

--ease-bounce
J

jello

Gelatina (skew oscilante)

--ease-smooth
D

dropIn

Cai do topo e quica

--ease-out
Z

zoomIn

Zoom de longe até assentar

--ease-spring
R

rollIn

Rola da esquerda girando

--ease-spring
import { motion } from "motion/react"
import { popTilt } from "@/design-system/motion"

<motion.div variants={popTilt} initial="hidden" animate="visible" custom={i}>
  Conteúdo
</motion.div>

09Components

A biblioteca do Criativo em seis galerias, cada uma compondo a página que já serve a rota — fonte única, sem segunda cópia para divergir em silêncio.

09.1Componentes · Botões

Componentes
04 · Botões

Ações que estalam

// Playground

Cor

Tamanho

Estados

// Variantes × Cores

primary
secondary
ghost
outline
link

// Estados

Normal
Hoverpasse o mouse
Focususe Tab
Activesegure o clique
Loading
Disabled

// FAB & Icon — em ação

// Como usar

import { SvButton } from "@/components/ui/sv-button"

<SvButton variant="primary" color="magenta" icon={<Rocket />} pop="ZAP!">
  Deploy
</SvButton>

<SvButton variant="fab" color="cyan" aria-label="Novo"><Plus /></SvButton>
<SvButton variant="outline" color="lime" isLoading>Enviando…</SvButton>

09.2Componentes · Inputs & Forms

Componentes
04 · Inputs & Forms

Campos que reagem

// Máscaras BR & validação ao vivo

Digite para ver a validação por dígito verificador.

Clique no olho para revelar.

// Tipos

Redimensionável na vertical.

// Estados

Tudo certo!

// Como usar

import { SvInput } from "@/components/ui/sv-input"

// Máscara BR automática por tipo
<SvInput label="CPF" type="cpf" value={cpf} onChange={e => setCpf(e.target.value)} />

// Estados
<SvInput label="E-mail" type="email" error="Formato inválido." />
<SvInput label="OK" success="Tudo certo!" />

Máscaras exportadas como masks.cpf / masks.cep / masks.phone para reuso — ex.: (11) 99999-8888.

09.3Componentes · Seleção

Componentes
04 · Seleção

Escolhas que carimbam

Checkbox

Radio

Switch

Rating

3 de 5 teias

Slider

65

// Como usar

import { SvCheckbox, SvSwitch, SvRating } from "@/components/ui/sv-choice"

<SvCheckbox label="Aceito os termos" />
<SvSwitch label="Modo escuro" defaultChecked />
<SvRating value={rating} onChange={setRating} />

09.4Componentes · Data Display

Componentes
04 · Data Display

Dados com atitude

// Chips & Tags

ReactTypeScriptTailwindNext.js
NovoBetaEstávelBadge shadcn

// Breadcrumb

// Pagination

Página 1 de 6

// Tabs

Conteúdo da aba Visão geral.

// Accordion

Um design system comic-first construído sobre tokens.

Via classes Tailwind mapeadas ou CSS vars diretas.

Sim — todos os componentes seguem WCAG 2.2 AA.

09.5Componentes · Overlays

Componentes
04 · Overlays

Camadas que saltam

// Modal & Drawer

// Tooltip

Passe o mouse ou use Tab!o que é isto?Informação extra aqui

// Popover / Dropdown

// Context Menu (clique direito)

Clique com o botão direito aqui

09.6Componentes · Feedback

Componentes
04 · Feedback

O sistema fala

// Alert

Dica

Você está no multiverso do Design System.

Deploy concluído

Sua página foi publicada com sucesso.

// Toast / Snackbar

// Progress

Carregando assets20%
Cobertura de testes72%
Sincronizando…

// Loading / Skeleton

// Empty State

WHOOSH!

Nada por aqui ainda

Nenhum projeto encontrado nesta dimensão. Que tal criar o primeiro?

// Erros: 404 · 500 · Offline

404OOPS!

Página perdida no multiverso.

500KRAK!

Algo quebrou no servidor.

ZzZ…

Você está offline.

// UI Kit

Os componentes reais, não capturas — se um quebrar, quebra aqui também, que é o ponto. Troque a versão para reimprimir o kit inteiro noutra chapa.

Dimensão:

Terra-HUB · Mashup geral — glitch, arco-íris, 90s

Botões — variantes

Botões — tamanhos e formatos

Inputs

Escolha

0

Chips & tags

cyanmagentalimetag

Tabs

Acento é acento, não fundo.

Navegação

Feedback

Deu certo

Tokens sincronizados.

Superfícies & decoração

stickercyanmagentalime

Botões

SvButton

primary · secondary · ghost · outline · link · fab · icon

Tamanhos sm/md/lg, formatos box/pill. Cor via prop color.

@/components/ui/sv-button

Inputs

SvInput

Com máscaras (masks) e estados de erro.

@/components/ui/sv-input
SvTextarea

Texto longo.

@/components/ui/sv-input
SvSelect

Seleção única.

@/components/ui/sv-input
SvCheckbox · SvRadio · SvSwitch

Escolha binária e múltipla.

@/components/ui/sv-choice
SvSlider · SvRating

Faixa e nota.

@/components/ui/sv-choice

Chips & navegação

SvChip

Pílula dismissível, cor configurável.

@/components/ui/sv-data
SvTag

Rótulo estático.

@/components/ui/sv-data
SvTabs

Sticker marca a aba ativa. role=tablist.

@/components/ui/sv-data
SvBreadcrumb · SvPagination

Navegação secundária.

@/components/ui/sv-data
SvAccordion

Disclosure com spring.

@/components/ui/sv-data

Feedback

SvAlert

Mensagem inline.

@/components/ui/sv-feedback
SvProgress

Barra de progresso.

@/components/ui/sv-feedback
SvEmptyState

Vazio com propósito.

@/components/ui/sv-feedback
SvToaster · useToast

Notificação efêmera.

@/components/ui/sv-feedback

Superfícies & decoração

.sv-panel

cyan · lime · violet · yellow

Painel com contorno e sombra dura.

css
.sv-sticker

cyan · lime · magenta · orange · violet

Etiqueta colada.

css
.sv-bubble

spiky · thought

Balão de fala.

css
.sv-onoma

cyan · lime · magenta · orange · violet · pop

Onomatopeia.

css
.sv-tilt-1/2/3

Inclinação — o layout nunca é reto.

css
.sv-dots · .sv-lines · .sv-grain

Texturas de impressão.

css
.sv-glitch · .sv-rainbow

Efeitos de texto.

css

Comic FX — títulos (.kfx-*)

.kfx-outline · -double · -shadow-*

Contorno e sombra de capa.

css
.kfx-3d · -chrome · -gold · -retro-gold

Extrusão e metais.

css
.kfx-neon · -hud · -neon-anim

Neon; -anim pulsa (reduz com reduced-motion).

css
.kfx-glitch · -offset · -doubleexpose

Datamosh; glitch precisa de data-text.

css
.kfx-drip · -melt · -brush · -whitebrush · -crown

Tinta e pincel.

css
.kfx-pixel · -halftone · -web · -holo · -burst · -sparks

Texturas e efeitos; -holo anima.

css

Web kit 8-bit (.bit-*)

.bit-window · .bit-panel · .bit-corners

Janela, painel e canto serrilhado.

css
.bit-btn · .bit-badge · .bit-input

Botão com afundar, badge e campo.

css
.bit-progress · .bit-menu · .bit-dialog

Barra, menu de pause e diálogo RPG.

css
.bit-inventory · .bit-slot · .bit-score

Inventário e placar high-score.

css
.bit-ico--coin/star/mushroom/key/potion

Ícones pixel em CSS.

css
.bit-toggle · .bit-check · .bit-radio · .bit-balloon

Controles e balão de fala.

css

09.7As dimensões

Dezenove linguagens visuais completas — mais o Multiverso, que é o hub e não tem classe própria, somando as vinte entradas do catálogo. Cada uma cita uma referência canônica do filme, e nenhuma é apenas tema de cor: a dimensão troca o fundo, a tinta, a retícula, as linhas de velocidade e a maneira como o painel reage ao ponteiro — o Noir inverte a sombra para branco, o Punk entorta os painéis alternadamente, o Portal é a única que gira. É o sistema mais elaborado deste design system e estava inteiramente fora do guia.

o contrato — as nove variáveis que uma dimensão declara

Uma dimensão não estiliza componentes um a um: ela declara variáveis no wrapper, e o .sv-canvas as consome. É isso que permite escrever um componente uma vez e vê-lo atravessar as dezenove sem um if.

--c-bgO fundo base. Cor chapada ou gradiente — é a última camada.
--c-glow1Primeira luz, empilhada sobre o fundo. Geralmente radial.
--c-glow2Segunda luz, no canto oposto. Cria a diagonal do ambiente.
--c-glow3Terceira luz, opcional. `none` quando a dimensão é seca.
--c-inkA tinta do texto sobre esse fundo. 16 das 19 redefinem.
--c-dotA cor da retícula de meio-tom que cobre o canvas.
--c-dot-opacityQuanto a retícula aparece. É o botão de volume da textura.
--c-dot-blendComo a retícula se mistura. Só 8 das 19 precisam mexer.
--c-speedlinesAs linhas de velocidade do fundo, quando a dimensão as tem.

background: var(--c-glow1), var(--c-glow2), var(--c-glow3), var(--c-bg)

as vinte — cada uma renderizando de verdade

Multiverso

Terra-HUB

Mashup geral — glitch, arco-íris, 90s

(sem classe — é o hub)

Mumbattan

Terra-50101

Neon fluorescente, glow, saturação

sv-dim-neon

Renascença

Terra-65 · Abutre

Pergaminho sépia, hachura Da Vinci

sv-dim-renaissance

Gwen / Nouveau

Terra-65

Aquarela wet-on-wet, ornamento

sv-dim-nouveau

Noir

Terra-42

P&B alto contraste, granulado

sv-dim-noir sv-grain

Spider-Punk

Terra-138B

Xerox zine, papel rasgado

sv-dim-punk

Nueva York 2099

Terra-928

Brutalismo, grid holográfico

sv-dim-2099

Manga

Terra-14512 · Peni

Screentone P&B, blush anime

sv-dim-manga

Spider-Ham

Terra-8311

Looney Tunes, primárias, rubber-hose

sv-dim-cartoon

Graffiti

Terra-1610 · Miles

Spray, tijolo, tags, drips

sv-dim-graffiti

8-bit

Terra-PIXL

Retro game, dither, CRT

sv-dim-pixel

Blueprint

Terra-BYTE

Wireframe técnico, guias tracejadas

sv-dim-blueprint

The Spot

Terra-VOID

Tinta viva, linhas de construção, vazios

sv-dim-spot

LEGO

Terra-13122

Tijolos plásticos, studs, brilho ABS

sv-dim-lego

Prowler

Terra-42 · Aaron

Roxo + ouro, garras, sombra urbana

sv-dim-prowler

Evento Canônico

Terra-ANOM

Datamosh vermelho-ciano, VHS

sv-dim-glitch

Colisor

Terra-RIFT

Caleidoscópio arco-íris, fenda

sv-dim-portal

Spider-Society

Terra-HQ

Branco clean, holo-ciano, brutalismo

sv-dim-society

Risografia

Terra-RISO

Impressão 2 cores, offset, granulado

sv-dim-riso

Horror

Terra-???

Vermelho sangue, colapso

sv-dim-horror

como se usa

<SvCanvas dimension="noir">
  <h2 className="sv-display">Manchete</h2>
  <div className="sv-panel">…</div>
</SvCanvas>

O wrapper é a única coisa que muda. Os componentes lá dentro — .sv-panel, .sv-display, .sv-glitch, .sv-sticker — não sabem em que dimensão estão, e é justamente isso que faz o sistema escalar.

como se escreve a vigésima

  1. 01 — Declare as nove variáveis no seletor .sv-dim-nome. Só isso já entrega uma dimensão funcional.
  2. 02 — Re-vista .sv-panel se o material exigir. É o que todas as 19 fazem, porque o painel é a superfície que mais fala.
  3. 03 — Ajuste .sv-display quando a tinta do título precisar destoar do corpo (13 das 19 ajustam).
  4. 04 — Só então mexa em .sv-glitch, .sv-sticker ou .sv-rainbow — são exceções, não rotina.

Registre em src/design-system/realm-variants.ts para a dimensão aparecer no seletor do kit.

quando NÃO trocar de dimensão

✕ Por variedade

Dimensão não é enfeite de seção. Ela diz onde o leitor está — trocar sem motivo é ruído com cara de riqueza.

✕ Em fluxo de leitura

Trocar no meio de um artigo destrói a continuidade. Portal se atravessa entre páginas, não entre parágrafos.

✕ Horror e Glitch em rotina

As duas são deliberadamente agressivas. Servem a 404 e a estados de anomalia; em página comum, cansam em três segundos.

acessibilidade — o preço de dezenove paletas

Dezenove fundos significam dezenove contextos de contraste, e a mesma tinta não passa em todos. --c-ink existe exatamente por isso: é a tinta que a dimensão declara sabendo sobre qual fundo vai cair. Ao escrever a vigésima, meça o par --c-ink × --c-bg com src/design-system/color-utils.ts antes de aprovar no olho — o Noir e o Society são quase brancos, o Prowler e o Horror são quase pretos, e o mesmo cinza que serve a um reprova no outro.

A retícula (--c-dot) some com --c-dot-opacity: 0, e várias dimensões têm movimento no hover do painel. Ambos respondem a prefers-reduced-motion pelo bloco global de animations.css — mas o transform de hover não: quem precisa de movimento reduzido ainda recebe o deslocamento do painel. Lacuna conhecida, registrada aqui em vez de escondida.

.sv-dim-* (19) · --c-bg · --c-glow1..3 · --c-ink · --c-dot · --c-dot-opacity · --c-dot-blend · --c-speedlines

09.8Superfícies e texturas

Doze texturas de impressão e quatro retículas de meio-tom, todas construídas em CSS puro — nenhuma imagem, nenhum arquivo para carregar. Cada uma cita um acidente real da impressão em massa: o fora de registro é a chapa que não alinhou, o foxing é o papel guardado por décadas, o moiré é a interferência que os impressores passaram um século a tentar evitar. Aqui os defeitos são o material.

as doze texturas

Leia o substrato antes de escolher. Metade destas texturas é tinta — screentone é preto a 55%, respingo é quase preto, concreto é overlay a 9%. Sobre fundo escuro elas desaparecem, e a classe parece quebrada quando não está. As marcadas · tinta abaixo aparecem sobre a amostra clara justamente por isso; as marcadas · luz trazem cor própria e funcionam sobre qualquer fundo.

Ben-Day· luz

A retícula original do gibi barato: pontos grossos e regulares.

.art-tex-benday

Screentone· tinta

A folha adesiva do mangá, aplicada à mão sobre a arte.

.art-tex-screentone

Papel-jornal· tinta

Fibra e absorção — traz o próprio bege, é a única que define fundo.

.art-tex-newsprint

Fora de registro· luz

A chapa que não alinhou. O erro de impressão que virou estética.

.art-tex-misregister

Risografia· luz

Duas cores sobrepostas, com a terceira nascendo do encontro.

.art-tex-riso

Moiré· luz

A interferência entre duas retículas. Use com intenção, nunca por acidente.

.art-tex-moire

Linhas de velocidade· luz

O movimento desenhado, herdado do mangá de ação.

.art-tex-speedlines

Respingo· tinta

Nanquim sacudido do pincel — tiles de 97 e 61px, primos entre si, para o acaso não virar xadrez.

.art-tex-spatter

Hot foil· luz

O relevo metálico da capa de edição especial.

.art-tex-foil

Foxing· tinta

As manchas de umidade do papel guardado por décadas.

.art-tex-foxing

Hachura cruzada· luz

Volume feito só de linha, como na gravura.

.art-tex-crosshatch

Concreto· luz

Superfície bruta em overlay a 9% — pede um fundo com cor para reagir.

.art-tex-concrete

as quatro retículas — meio-tom parametrizado

Pontos· luz

A retícula padrão. Tamanho e cor por --ht-size / --ht-color.

.art-ht-dots

Linhas· luz

Meio-tom em traço diagonal, mais duro que o ponto.

.art-ht-lines

Losango· luz

As duas diagonais cruzadas — mais densa, boa para sombra.

.art-ht-diamond

Hexagonal· luz

Retícula de favo, a mais moderna das quatro.

.art-ht-hex

As retículas leem duas variáveis: --ht-color e --ht-size. É o que as separa das texturas fixas — a mesma classe serve a um fundo escuro e a um claro, bastando trocar a tinta. Combine com .art-ht-overlay para aplicar a retícula por cima do conteúdo em vez de atrás dele.

contornos

cyanmagentavioletlimeredwhite

.art-outline-* troca só a cor da borda, com !important — serve para destacar um painel sem reescrever a peça inteira.

sombras impressas

dotshatchcross

A sombra não é desfoque: é uma segunda chapa deslocada 7px, preenchida com ponto, hachura ou cruzado. É assim que o gibi fazia profundidade sem meio-tom.

bordas irregulares

deckletornrough

As três usam filter: url(#art-rough) — um filtro SVG de turbulência que precisa existir no documento. Sem ele, degradam para borda reta em silêncio.

.art-tex-* (12) · .art-ht-* (5) · .art-outline-* (6) · .art-shadow-* (3) · .art-deckle · .art-torn · .art-line-rough

09.9Anomalias

O nome não é meu: sv-effects.css se declara “Anomalias do Aranhaverso” na primeira linha. São os efeitos que rompem a superfície — glitch, aberração cromática, holograma, neon, VHS e o portal que gira. No filme, uma anomalia é um corpo que não pertence àquela dimensão e por isso pisca; aqui a metáfora é literal, e é ela que dita quando usar: a anomalia marca o que está fora do lugar, não o que é importante.

os efeitos de texto, ao vivo

MultiversoAberraçãoAnomaliaHolográficoNeon

o glitch pede um atributo

<span className="fx-glitch" data-text="Anomalia">
  Anomalia
</span>

Os dois clones saem de content: attr(data-text). Esquecer o data-text não quebra nada — o efeito simplesmente não aparece, que é a pior espécie de falha: silenciosa. Se o glitch não apareceu, é isto.

superfície e forma

stickervhs

.fx-portal é o anel cônico girando; .fx-sticker dobra o canto inferior direito; .fx-vhs sobrepõe scanlines em multiply. Todos exigem position: relative no elemento.

as quatro fontes experimentais

NablaVariável cromática — vem colorida da própria face
MonotonTraço vazado de letreiro neon
GlitchMonoespaçada corrompida
ShadeSombreada, de cartaz antigo

Carregadas por next/font no layout, não por @import. São faces de display: uma palavra, um título — nunca um parágrafo.

movimento reduzido — tratado, e é a regra

As oito animações desta biblioteca (fx-chroma, fx-glitch, fx-holo, fx-neon, fx-vhs, fx-portal, fx-float) desligam em prefers-reduced-motion — e o texto continua legível em todas, porque nenhuma delas carrega informação no gesto.

É o teste que vale para qualquer anomalia nova: desligue a animação e leia. Se algo se perdeu, o efeito estava a carregar significado que devia estar escrito.

Cuidado à parte com fx-chroma e fx-glitch: o deslocamento de canais reduz legibilidade mesmo parado. Título curto, nunca corpo de texto.

.fx-3d · .fx-chroma · .fx-glitch[data-text] · .fx-holo · .fx-neon · .fx-vhs · .fx-portal · .fx-sticker · .fx-float · .fx-grain · .fx-font-* (4)

09.10O vocabulário do gibi

As peças que dão nome ao realm — balão, painel, onomatopeia, adesivo, legenda — e que o guia de um design system inteiro construído sobre quadrinhos não mostrava. É o léxico que qualquer leitor de gibi reconhece sem precisar de explicação, e é justamente por isso que cada peça carrega uma regra de uso: o balão diz quem fala, a onomatopeia diz o que soa, o adesivo diz o que foi colado depois. Trocar as funções desfaz a leitura.

balões — quem fala, e como

O balão redondo é fala normal. O rabicho aponta para quem fala.

O espinhoso é grito, rádio ou voz mecânica — som que corta.

O de pensamento é nuvem: o que não foi dito em voz alta.

As variantes desligam o rabicho (::before e ::after viram display: none) e desenham a própria borda — por isso .sv-bubble-spiky e .sv-bubble-thought vêm sempre acompanhadas de .sv-bubble, nunca sozinhas.

Acessibilidade: o balão é forma, não semântica. Diálogo real vai em <blockquote> com <cite>; o balão só o veste.

onomatopeias — o som desenhado

THWIP!BAM!POW!CRASH!ZAP!

Cinco tintas, e a escolha não é decorativa: a onomatopeia herda a cor do que a produz — teia em magenta, impacto em ciano, elétrico em violeta. Duas onomatopeias no mesmo painel competem pelo mesmo ouvido; use uma.

Acessibilidade: som desenhado é decoração para quem ouve a página — aria-hidden="true", salvo quando a palavra É o conteúdo (um título "BAM!", por exemplo).

painéis — a moldura e a inclinação

tilt-1 · −3°

Passe o ponteiro: endireita e desloca.

tilt-2 · +3,4°

Ângulos diferentes de propósito.

tilt-3 · −2°

Nenhum é múltiplo do outro.

Os três ângulos são deliberadamente irregulares — −3°, +3,4°, −2°. Se fossem múltiplos entre si, a grade leria como erro de alinhamento; sendo primos, lê como colagem. A sombra do painel é chapada e deslocada, nunca desfocada: quadrinho impresso não tem penumbra.

.sv-panel-* muda só a cor da sombra no hover. As quatro existem para o painel poder pertencer à seção onde está sem trocar de componente.

Lacuna conhecida: a inclinação é transform e não é desligada por prefers-reduced-motion — o endireitar no hover chega a quem pediu menos movimento. Mesma lacuna registrada em 09.7.

adesivos e etiquetas

magentacyanlimevioletorange

O adesivo é o que foi colado depois — promoção, selo, aviso de capa. Por isso vem torto e com borda preta grossa. Se a informação nasceu com a página, não é adesivo: é legenda.

legendas e explosões

MEANWHILE…EARTH-1610NEW!#1

A legenda (.sv-caption) é a voz do narrador, não de um personagem — vai no canto, em caixa retangular.

A distinção que engana: .sv-badge-burst é o componente completo — traz fundo, respiro e a fonte de display. .sv-burst é só um clip-path, sem cor nenhuma: aplicado a um elemento sem fundo, ele recorta o nada e some. Use o primeiro para selo pronto, o segundo para dar forma de estrela a algo que já tem preenchimento.

peças de multiverso — só existem porque há dimensões

Fenda

A rasgadura entre dimensões. .sv-rift

Vazio

O buraco do Spot. .sv-void

Garra

O corte do Prowler. .sv-claw

DUPLO

Dupla exposição

Dois you da mesma pessoa. .sv-doubleexpose

.sv-split merece nota à parte: divide o bloco em duas metades de dimensões diferentes (.sv-split-a e .sv-split-b) com o conteúdo por cima em .sv-split-content. É a peça que mostra duas realidades no mesmo quadro — a imagem central do filme, e a única do sistema que exige três filhos com papéis fixos.

.sv-doubleexpose lê data-text, como o glitch de 09.9 — sem o atributo, não desenha nada e não avisa.

.sv-bubble (+2) · .sv-onoma (+5) · .sv-panel (+4) · .sv-tilt-1..3 · .sv-sticker (+5) · .sv-caption (+2) · .sv-burst · .sv-badge-burst · .sv-rift · .sv-void · .sv-claw · .sv-split · .sv-doubleexpose · .sv-outline-text · .sv-underline · .sv-divider · .sv-studs

09.11A capa de revista

Um sistema inteiro de capa de gibi — nameplate, faixa de preço, tarja lateral, selo de edição, código de barras — que existia em comic-cover.css e não aparecia no guia. Cada peça corresponde a um elemento obrigatório da banca: a capa de revista é um dos layouts mais regulamentados que existem, porque precisa ser lida de relance num expositor com outras cinquenta ao lado.

a capa montada — a peça real da home, não uma reprodução

LR ComicsNº 1 · 2026 · R$ 7,90 · novos experimentos toda semana

Criando interfaces, ferramentas e experimentos digitais.

#1

Edição #1

7 projetos · 7 ferramentas

LucasRiboldi

Product Designer & Developer

KRAK!
GitHub ↗
Criar • Inspirar • Comunicar • Transformar

o nameplate em três camadas

.cc-masthead-fill é o nome preenchido; -ghost e -ghost-2 são duas cópias deslocadas atrás, criando a profundidade impressa sem uma única sombra. É a mesma técnica do .fx-3d de 09.9, feita com elementos em vez de text-shadow — aqui cada camada precisa de cor e recorte próprios.

As cópias levam aria-hidden: são a mesma palavra três vezes, e sem isso o leitor de tela anuncia o nome em triplicado.

as faixas obrigatórias

.cc-band no topo carrega número e etiquetas; .cc-band-bottom fecha com o código de barras. .cc-spine é a lombada à esquerda — a tarja que aparece quando a revista está empilhada.

O código de barras é decoração: .cc-barcode-bars é um gradiente repetido, não um EAN real. Se algum dia precisar de código válido, ele terá de virar imagem — o gradiente não codifica número nenhum.

fundo e movimento

.cc-aura é o halo radial atrás do título; .cc-speed são as linhas de velocidade que saem do centro. Os dois são ::before absolutos e exigem position: relative + overflow: hidden no .cc-cover, senão vazam para fora da capa.

.cc-cover · .cc-aura · .cc-speed · .cc-spine · .cc-band · .cc-band-bottom · .cc-strip · .cc-masthead · -fill · -ghost · -ghost-2 · .cc-line-title · .cc-issue · .cc-burst · -yellow · .cc-tag · -pop · .cc-barcode · -bars

09.12Interação e Retro OS

Quatro utilidades de hover que cabem em quatro linhas de CSS cada e decidem a personalidade inteira do realm — e a janela de sistema operacional que a seção 18 usa como tema, cujas peças nunca foram catalogadas. Passe o ponteiro em tudo abaixo: é a única seção do guia em que ler não basta.

as quatro utilidades — experimente

hover-jitterhover-inkart-link — a sublinha que cresceart-kinetic

.art-hover-jitter gira −1,2° e sobe 2px com curva spring: é o desalinho de colagem, não elevação de card. .art-link cresce a sublinha de 0 a 100% e responde também a :focus-visible — o teclado recebe o mesmo gesto que o mouse, que é o detalhe que a maioria esquece.

tratamentos de texto

Chroma softRGB offsetOutlineSublinhado desenhado

.art-chroma-soft é a aberração cromática em 0,6px — a versão que dá para usar em texto corrido, ao contrário do .fx-chroma de 09.9, que pulsa e só serve a título. .art-rgb-offset faz o mesmo por drop-shadow, o que preserva a seleção de texto.

a janela de sistema — três eras

portfolio.exe

Uma janela de verdade, com as peças reais do tema.

Windows 95

Bisel duro, cinza 3D, botões com relevo invertido no clique.

.os-window .os-95
portfolio.exe

Uma janela de verdade, com as peças reais do tema.

Windows XP

Azul Luna, cantos arredondados, gradiente na barra.

.os-window .os-xp
portfolio.exe

Uma janela de verdade, com as peças reais do tema.

Mac OS clássico

Listras na barra de título, borda fina, tipografia condensada.

.os-window .os-mac

A estrutura é sempre a mesma — .os-window > .os-titlebar (com .os-title e .os-btns) + .os-body. A era é só uma classe a mais, exatamente como as dimensões de 09.7 fazem com o canvas. Dois sistemas de tema no mesmo realm, com a mesma arquitetura.

Acessibilidade: os botões da barra são <button> com aria-label — "_" e "×" não dizem nada a quem ouve a página. Se a janela for decorativa e não funcional, o conjunto inteiro leva aria-hidden em vez de botões falsos tabuláveis.

.art-hover-jitter · .art-hover-ink · .art-link · .art-kinetic · .art-chroma-soft · .art-rgb-offset · .art-underline · .sv-outline-text · .os-window · .os-titlebar · .os-title · .os-btns · .os-body · .os-btn · .os-inset · .os-95 · .os-xp · .os-mac

09.13Colagem e letras de resgate

sv-punk.css era outra biblioteca inteira fora do guia: doze classes de colagem herdadas do Spider-Punk — spray, papel rasgado, fita cruzada, contorno de marcador. No centro delas estavam as letras de resgate, que existiam cruas: borda preta e sombra, todas iguais. Uma nota de resgate real é feita de revistas diferentes, e é o desencontro de papéis, cores e ângulos que faz a leitura funcionar. As variantes de recorte abaixo são novas.

as letras de resgate — oito papéis de recorte

ARANHAVERSOANOMALIACANON

Nenhuma letra leva classe de rotação. Os ângulos saem de :nth-child com passos primos entre si (3n+1, 3n+2, 5n+3, 7n+5), então numa palavra curta eles nunca repetem em fase — escreva a palavra e ela já sai torta do jeito certo. É a mesma lógica dos três ângulos de painel em 09.10 e dos tiles de respingo em 09.8.

os papéis, um a um

Aa--papermiolo cremeAa--newspapel-jornalAa--glossyrevistaAa--poprevista popAa--coldrevista friaAa--kraftpardoAa--negativenegativoAa--tapedcom fitaAa--cuttesoura

o resto da colagem — o que já existia

colagemfita Xslapmarcadorrisopunk

.fx-spray e .fx-screentone usam currentColor: a tinta do spray é a cor do elemento, então uma classe serve a todas as dimensões.

.fx-ransom · .fx-ransom-piece + 9 variantes · .fx-spray · .fx-collage · .fx-marker · .fx-zigzag · .fx-riso · .fx-screentone · .fx-slap · .fx-tape-x · .fx-chroma-punk · .fx-bolts

09.14A camada extrapolada

Peças novas, escritas em sv-extras.css para engrossar o material do realm: mais oito anomalias, seis tratamentos de texto, sete texturas, treze fundos e três portais. O arquivo é removível — nada aqui corrige nada, tudo é acréscimo deliberado, e essa separação é o que impede a camada extrema de contaminar a base.

anomalias — segunda leva

Anomalia age sobre conteúdo. Ao contrário das texturas de 09.8, que pintam a superfície, estas distorcem o que está dentro — chuvisco sobre um quadrado vazio não mostra nada, e xerox de um vazio devolve um branco. Por isso cada amostra abaixo carrega uma cena, e não um quadrado. A primeira versão desta página errou exatamente isso.

SINAL

Chuvisco

TV sem sinal, em steps(3).

.fx-static
SINAL

Rasgo

A página partida ao meio.

.fx-tear
SINAL

Xerox

Fotocópia estourada e suja.

.fx-xerox
SINAL

Queimado

A borda que o fogo comeu.

.fx-burn
SINAL

Salto de sinc.

A faixa que escorrega e volta.

.fx-scanjump
ECO

Eco

O rastro de quem atravessou.

.fx-echo
DITHER

Dither 1-bit

Trama ordenada em multiply — precisa de camada própria.

.fx-dither

.fx-echo lê data-text, como .fx-glitch (09.9) e .sv-doubleexpose (09.10) — a terceira peça do sistema com esse contrato, e a terceira que falha em silêncio sem o atributo. Se for escrever a quarta, considere um componente React que garanta o par.

tratamentos de texto — segunda leva

Sombra longaContorno duploRecortadoEmpilhadoRelevo secoOndulado

.fx-warp exige um <span class="ch"> por caractere — é o preço de ondular sem JavaScript. Para texto que muda em runtime, gere os spans no componente; para título fixo, escreva à mão. .fx-emboss deixa a letra transparente: sobre fundo liso ela some, e é assim mesmo — relevo seco é ausência de tinta, precisa de textura por baixo.

texturas — segunda leva

Linho

A trama da capa dura.

.art-tex-linen

Ondulado

A onda do papelão.

.art-tex-corrugated

Fita

Faixa translúcida com brilho.

.art-tex-tape

Picote

A perfuração do bloco.

.art-tex-perforation

Milimetrada

A folha técnica.

.art-tex-grid-fine

Pontilhismo

Gravura só de pontos.

.art-tex-stipple

Xilogravura

O sulco da goiva.

.art-tex-woodcut

gradientes — sete novos, somando doze

Aurora

.bg-grad-aurora

Brasa

.bg-grad-ember

Ultravioleta

.bg-grad-ultraviolet

Óleo

.bg-grad-oil

Crepúsculo

.bg-grad-dusk

Papel-jornal

.bg-grad-newsprint

Mono

.bg-grad-mono

fundos padronados — e os que desvanecem

Raios

Leque cônico de 6°.

.bg-rays

Xadrez

Damas de 22px.

.bg-checker

Listras

Diagonais a 45°.

.bg-stripes-diag

Pontos que somem

Máscara vertical.

.bg-dots-fade

Grade radial

Máscara circular.

.bg-grid-fade

Retícula em fuga

Máscara diagonal.

.bg-halftone-fade

Os três fade usam mask-image em vez de sobrepor um gradiente do fundo por cima. A diferença é prática: com máscara, o padrão desaparece de verdade e deixa passar o que estiver atrás — troque a dimensão e ele continua correto. Com gradiente sobreposto, você teria de repintar a máscara em cada uma das vinte.

portais — três formas novas

.fx-portal — o anel cônico girando, que já existia. É o portal genérico do colisor.

.fx-portal-hex — o hexágono limpo da Spider-Society: tecnologia, não acidente.

.fx-portal-shatter — o estilhaço, para quando a fenda foi aberta à força.

.fx-portal-slit — o corte fino, o mais discreto dos quatro. Cabe em linha de texto.

Só o primeiro anima. Os três novos são forma pura em clip-path — combine com .fx-float ou .sv-blend se quiser movimento, em vez de embutir animação em cada um.

.fx-static · .fx-tear · .fx-xerox · .fx-burn · .fx-dither · .fx-scanjump · .fx-echo · .fx-shadow-long · .fx-outline-double · .fx-cut · .fx-stack · .fx-emboss · .fx-warp · .art-tex-linen · -corrugated · -tape · -perforation · -grid-fine · -stipple · -woodcut · .bg-grad-* (7) · .bg-rays · .bg-checker · .bg-stripes-diag · .bg-dots-fade · .bg-grid-fade · .bg-halftone-fade · .fx-portal-hex · -shatter · -slit

09.15Peças de vitrine

Componentes caros de renderizar, difíceis de justificar numa tela de produto e exatamente o que um portfólio existe para mostrar. O que as mantém honestas é serem objetos físicos citados, não efeitos genéricos: o holograma vira com o ângulo, o tubo escurece nos cantos porque a curvatura afasta o feixe, a polaroide tem a margem de baixo maior porque é onde se escreve.

Terra-1610

Miles

RARA001/020

Carta holográfica

Passe o ponteiro: o brilho corre. Duas camadas — o arco-íris em color-dodge e a retícula fina que o revela. Sem a segunda, vira gradiente comum.

.fx-holo-card

> LOADING DIMENSION
> EARTH-42 OK
> _

Tela de tubo

Moldura de 10px, raio elíptico (22px/16px) e vinheta radial. A curvatura não é filtro — é o raio assimétrico que finge o vidro.

.fx-crt-screen

Mixtape · Vol. 1

gravado da rádio, 1994

Fita cassete

As duas janelas de carretel saem de ::before e ::after — o componente não precisa de filho nenhum para parecer fita.

.fx-cassette
Aberto

Letreiro de neon

Brilho por dentro e por fora da moldura, ambos em currentColor — troque a cor do texto e o tubo inteiro acompanha. Três tintas.

.fx-neon-sign
o dia em que tudo mudou

Polaroide

Margem de baixo de 42px contra 12px nos outros lados. É essa assimetria — e não a sombra — que faz o olho reconhecer a peça.

.fx-polaroid
THWIPCANONGO!

Folha de adesivos

O tracejado é o corte de faca. Os filhos herdam a mesma borda, então qualquer conteúdo vira adesivo destacável sem classe extra.

.fx-sticker-sheet

quando NÃO usar

Nenhuma destas peças serve a uma interface de trabalho. São caras (a carta empilha três camadas com mix-blend-mode, o tubo tem duas sobreposições e sombra interna) e todas roubam atenção por desenho — que é o objetivo numa vitrine e o defeito num formulário. Use uma por tela, no máximo: duas competem, e a página perde o ponto focal que elas existiam para criar.

.fx-holo-card · .fx-crt-screen · .fx-cassette · .fx-neon-sign (+2) · .fx-polaroid · .fx-sticker-sheet

10Patterns

Composições que já vêm resolvidas: autenticação, busca, formulário em etapas e FAQ. Não são telas — são arranjos que se repetem.

10.1Pattern · Login / Auth

Patterns
05 · Pattern

Fluxo de login

Bem-vindo de volta

Entre no multiverso.

Esqueceu?
ou

Não tem conta? Cadastre-se

10.2Pattern · Busca & filtros

Patterns
05 · Pattern

Busca & filtros

8 resultado(s)

SvButtonAção
SvInputForm
SvModalOverlay
SvToastFeedback
SvTabsDados
SvPricingSeção
SvTimelineSeção
SvAccordionDados

10.3Pattern · Multi-step

Patterns
05 · Pattern

Formulário multi-step

1
2
3

10.4Pattern · FAQ

Patterns
05 · Pattern

Perguntas frequentes

Pattern de FAQ construído sobre o SvAccordion — um item aberto por vez, acessível por teclado.

Um design system comic-first construído sobre design tokens, com componentes, patterns e templates prontos.

Sim. Todos os componentes têm estados, acessibilidade WCAG 2.2 AA e build validado.

Rode npm run tokens:export — gera design-tokens.figma.json (Tokens Studio) e o formato W3C DTCG.

Sim. É dark-first, com override .light para superfícies e texto.

Crie em src/components/ui/, registre em registry.ts e siga docs/design-system/component-structure.md.

11Templates

Páginas inteiras montadas com o kit — as oito que o portfólio realmente usa. Template aqui não é maquete: é a página que existe.

11.1Template · Landing

Templates
06 · Template

Landing page

Novo · Terra-2026

Construa em outra dimensão

Um layout de landing pronto, montado com componentes e efeitos do Design System.

20+
Dimensões
40+
Componentes
16
Motions
98%
Acessível

Planos

Origem

R$0/mês
  • 1 dimensão
  • Tokens base
Popular

Multiverso

R$49/mês
  • Tudo ilimitado
  • Export Figma
  • Suporte

Corp

Custom
  • SSO
  • SLA

Confiado por realidades do multiverso

Oscorp
Alchemax
Horizon
Stark
Wayne
Bugle

Pronto para saltar?

Comece hoje no Design System.

11.2Template · Dashboard

Templates
06 · Template

Layout de dashboard

42
Componentes
88%
Cobertura
12
Tokens
6
Categorias

Cobertura por componente

ComponenteCategoriaCoberturaStatus
SvButtonAção
ready
SvInputForm
ready
SvModalOverlay
ready
SvTabsDados
wip

11.3Template · Artigo

Templates
06 · Template

Página de artigo

Design SystemTokens 5 min de leitura

Como construir um Design System comic-first

LR
Lucas Riboldi
13 de julho de 2026

Um design system nasce dos tokens. Antes de qualquer componente, você define os valores atômicos — cor, espaço, forma e movimento — em uma fonte única de verdade.

1. Comece pelos tokens

Três camadas: primitivos, semânticos e de componente. Cada nível referencia o anterior, garantindo consistência e temas trocáveis.

2. Componha com composição

Prefira subcomponentes compostos a props booleanas infinitas. Use CVA para variantes e mantenha a lógica de negócio fora da UI.

“Um bom design system é invisível: ele acelera sem impor.”

Assine o multiverso

Receba mais artigos como este.

11.4Template · Pricing

Templates
06 · Template

Pricing & planos

MensalAnual -17%

Origem

R$0/mês
  • 1 dimensão
  • Tokens base
  • Comunidade
Popular

Multiverso

R$49/mês
  • Dimensões ilimitadas
  • Todos os componentes
  • Export Figma
  • Suporte prioritário

Corporativo

R$199/mês
  • SSO & auditoria
  • SLA dedicado
  • Onboarding

Todos os planos incluem atualizações do Design System.

11.5Template · Perfil

Templates
06 · Template

Perfil / conta

LR

Lucas Riboldi

Product Designer & Dev · Terra-2026

Design SystemFrontendMotion
42
Projetos
1.2k
Estrelas
89
Seguidores
5
Dimensões
Designer no cruzamento entre arte e código. Construo design systems e experimentos.

11.6Template · Documentação

Templates
06 · Template

Documentação técnica

EstávelAtualizado hoje

Design Tokens

Tokens são os valores atômicos do sistema — a única fonte de verdade de cor, tipografia, espaçamento, forma e movimento.

Três camadas

  • Primitivo — valor cru (--c-primary-500)
  • Semântico — intenção (--color-primary)
  • Componente — aplicado via Tailwind
Componentes consomem semânticos, nunca hexadecimais soltos.

Export

Rode npm run tokens:export para gerar os formatos W3C DTCG e Figma Tokens Studio.

11.7Template · Changelog

Templates
06 · Template

Changelog // releases

  1. v1.514 jul 2026LabAssets
    • Expansão Spider-Punk: 11 efeitos, 14 ilustrações, 10 logos
    • 16 motions e 14 ícones próprios
  2. v1.414 jul 2026BlogGrid
    • Blog funcional file-based (markdown)
    • Grid System documentado + demo
  3. v1.313 jul 2026Direção de Arte
    • Camada .art-* (texturas, halftones, contornos)
    • Universo visual por rota
  4. v1.213 jul 2026TemplatesPatterns
    • Login, busca, multi-step, FAQ
    • Dashboard e artigo
  5. v1.012 jul 2026Fundação
    • Design Tokens (CSS + TS + export)
    • 40+ componentes

11.8Template · Coming soon

Templates

em breve

SOON

Uma nova dimensão está sendo desenhada. Deixe seu e-mail e seja o primeiro a saber.

Avise-me

Sem spam. Só o salto.

Terra-2026

11.9Arquétipos de landing

O template 11.1 mostra como uma landing se monta. Isto é o nível acima: por que ela tem aquela ordem, e o que muda quando o objetivo muda. Quatro páginas cheias de texto de mentira não ensinariam nada — a ordem das seções é a decisão de design, e o conteúdo é consequência dela. As seções citadas são as reais de src/components/sections/, então cada anatomia é copiável como está.

Lançamento

Apresentar algo que ninguém conhece

  1. 1HeroA promessa vem primeiro porque não há reputação que a anteceda.
  2. 2SvStatsNúmeros logo abaixo: substituem a prova que ainda não existe. É o que define o arquétipo.
  3. 3SvLogosGridEmprestar credibilidade de quem já é conhecido.
  4. 4SvPricingPreço depois da promessa, nunca antes.
  5. 5SvCTAFecho único, repetindo a ação do hero.

Quando: Produto novo, sem tração e sem prova social para exibir.

Prova social

Converter quem já ouviu falar

  1. 1Hero curtoUma linha. Quem chega aqui já sabe o que é.
  2. 2SvTestimonialsA prova vem ANTES da promessa — é a inversão que define o arquétipo.
  3. 3SvLogosGridQuem mais usa, em escala.
  4. 4SvStatsO número que sustenta os depoimentos.
  5. 5SvCTAAção com atrito baixo: teste, não compra.

Quando: O produto tem clientes. A dúvida não é o que é, é se funciona.

Captura

Uma conversão, zero distração

  1. 1Hero mínimoSem navegação: todo link daqui é uma fuga.
  2. 2SvNewsletterO formulário acima da dobra. É a página inteira.
  3. 3SvStatsTrês números, só para reduzir o risco percebido.
  4. 4Rodapé curtoPrivacidade e nada mais.

Quando: Campanha paga, isca de conteúdo, lista de espera.

Evento

Vender presença numa data

  1. 1Hero + dataA data É a informação. Sem ela o resto não decide nada.
  2. 2SvTimelineA programação: quem vai investir horas quer saber quais.
  3. 3SvTeamQuem fala. Numa conferência, as pessoas são o produto.
  4. 4SvPricingLotes, com o atual destacado — escassez é honesta aqui.
  5. 5SvCTAInscrição, com a data repetida.

Quando: Lançamento, workshop, encontro — algo que expira.

a regra que atravessa os quatro

Repare no bloco destacado: é o que define cada arquétipo — e em três dos quatro ele é o segundo movimento, não o hero. Todos abrem com um hero; o que os separa é o que vem logo depois. Lançamento põe números, prova social põe depoimento, captura põe o formulário. Trocar essa segunda seção de lugar é trocar de arquétipo sem perceber.

O evento é a exceção honesta: nele o elemento definidor — a data — vive dentro do próprio hero, porque sem ela nenhuma das seções seguintes decide nada.

o que NÃO varia

Uma ação principal por página, repetida no fim com as mesmas palavras do começo — se o hero diz "Começar grátis", o fecho não pode dizer "Saiba mais". E preço nunca antes da promessa: o leitor precisa saber o que está comprando antes de ver quanto custa. Os quatro arquétipos respeitam as duas regras; é o que os torna variações e não sistemas diferentes.

composição — o arquétipo de captura, inteiro

<SvCanvas dimension="graffiti">
  {/* sem <SiteHeader>: navegação é fuga numa landing de captura */}
  <ComicHeader kicker="Lista de espera" title="Entre" highlight="antes" />
  <SvNewsletter />
  <SvStats stats={[…3 números…]} />
</SvCanvas>

Quatro linhas. A landing de captura é a mais curta de escrever e a mais difícil de acertar, porque cada elemento a mais é uma chance de perder a conversão.

Hero · SvStats · SvLogosGrid · SvPricing · SvCTA · SvNewsletter · SvTestimonials · SvTeam · SvTimeline

12Accessibility

07 · A11y

Acessibilidade WCAG 2.2

Acessibilidade não é opcional. Todo componente do Design System deve atender aos critérios abaixo (nível AA). Ver o guia completo em docs/design-system/accessibility-wcag.md.

// Critérios obrigatórios

Contraste

≥ 4.5:1 texto normal · ≥ 3:1 texto grande/ícones (WCAG 1.4.3/1.4.11)

Focus Ring

Sempre visível, ≥ 3:1 vs. fundo, nunca removido sem alternativa (2.4.7/2.4.11)

ARIA

Roles, states e properties corretos; nome acessível em todo controle

Keyboard Navigation

Toda ação alcançável e operável por teclado; ordem lógica (2.1.1)

Skip Links

Link 'pular para conteúdo' no início de cada página (2.4.1)

Alt Text

Texto alternativo significativo; decorativas com alt vazio (1.1.1)

Leitores de tela

Estados anunciados (aria-live, aria-busy, aria-invalid)

// Novidades do WCAG 2.2

2.4.11

Focus Not Obscured (Mínimo)

O elemento focado não pode ficar totalmente escondido por conteúdo fixo (sticky/overlay).

2.4.13

Focus Appearance

Indicador de foco com área e contraste mínimos — anel espesso e visível.

2.5.7

Dragging Movements

Toda ação de arrastar tem alternativa por clique simples (ex.: botões no slider).

2.5.8

Target Size (Mínimo)

Alvos de toque ≥ 24×24px (ou espaçamento equivalente).

3.2.6

Consistent Help

Mecanismos de ajuda (contato, docs) aparecem na mesma ordem em todas as páginas.

3.3.7

Redundant Entry

Não pedir a mesma informação duas vezes no mesmo fluxo (auto-preencher/lembrar).

3.3.8

Accessible Authentication

Login sem teste cognitivo — permitir colar senha, gerenciadores, sem puzzles.

Implementado no projeto: SkipLink (2.4.1), foco espesso (2.4.11/13), slider com alternativa por teclado (2.5.7), colar senha permitido (3.3.8).

// Contraste (auditoria ao vivo)

Razões calculadas dos tokens (WCAG 2.x). O último par mostra deliberadamente uma combinação reprovada — a paleta saturada exige atenção.

AmostraParRazãoNível
AaTexto claro / ink 95018.53:1AAA
AaTexto claro / ink 90017.67:1AAA
AaMuted 400 / ink 9505.38:1AA
AaInk 950 / magenta 5005.79:1AA
AaBranco / magenta 5003.46:1AA Large
AaInk 950 / cyan 40013.03:1AAA
AaInk 950 / yellow 30015.82:1AAA
AaInk 950 / lime 4009.08:1AAA
AaBranco / cyan 400 (RUIM)1.54:1Fail

// Estados & leitores de tela

Cada estado interativo precisa de um equivalente perceptível e anunciável:

NormalHoverFocusActive/PressedSelectedDisabledLoadingErrorSuccessWarningInfoVisited

13Content Design

O Criativo fala como um quadrinho: frase curta, verbo forte, exclamação sem medo. Nunca frio nem burocrático — cada microcopy tem energia. Onde o _Dev escreve como o compilador, aqui se escreve como o balão de fala.

✕ evite✓ prefira
Operação concluída com sucesso.BOOM! Feito.
Nenhum resultado foi encontrado.Nada por aqui… ainda!
Ocorreu um erro inesperado.Opa — algo escapou. Tenta de novo?
Clique no botão para prosseguir.Bora — é só um clique.
Carregando, por favor aguarde.Segura aí…

14Brand

RealmLogoMini com aberração cromática (mundos paralelos). Classes .rl / .rl-cri em realm-logo.css.

15Assets & Resources

Fase 5 · Assets

Biblioteca de assets

Marca, ícones e texturas que compõem a identidade Design System.

LR.
Logo · dark
LR.
Logo · sobre cor
LR
Símbolo

// Logos — 10 lockups

LR.
Rainbow dot
LR
Boxed
LR
Stencil rough
LR
Spray
LR
Glitch
LR
Holo badge
LR
Ransom
L
Bolt
LR
Neon
LR
Taped

// Ilustrações punk

MohawkSpider
Guitar
BoltCluster
Boombox
SafetyPin
SprayCan
StarBurst
Anarchy

// Ícones próprios

Set comic autoral (traço 2.5px, currentColor, variante rough).

Web
Mail
Rocket
Star
Code
Palette
Bolt
Web2
Guitar
Headphone
Mask
Skull
Heart
Pin
Terminal
Layers
Cursor
Sparkle
Bug
Cube

// Ícones Sociais

// Ilustrações — outros estilos

Line-art
Geométrico
Isométrico
Blueprint
Dotwork

// Texturas

Halftone (Ben-Day)
Halftone cyan
Speedlines

// Backgrounds & Gradientes

accent
rainbow
sunset
vapor
toxic
galaxy
inferno
canvas ink

// Texturas de superfície

concrete
crosshatch
dots-grid
scratch
canvas

// 3D de cor

AAfx-3dc-cyan
AAfx-3dc-magenta
AAfx-3dc-rainbow
AAfx-3dc-deep
AAfx-3dc-emboss

// Glitches

GLIfx-gl-slice
GLIfx-gl-rgb
GLIfx-gl-jitter
GLIfx-gl-scan
GLIfx-gl-blocks

15.1Assets em pares

O realm já tinha vinte e três ilustrações espalhadas por quatro arquivos. O que faltava não era a vigésima quarta peça — era sistema. Cada categoria abaixo vem em dois tipos que resolvem problemas diferentes, e o que este capítulo documenta é a regra de escolha entre eles. Um par ensina uma decisão; vinte peças soltas ensinam um catálogo.

ícones — o mesmo desenho, dois tratamentos

Contorno

tipo 1

Interface: menu, botão, tabela, campo. Herda a tinta do texto por currentColor, então atravessa as 20 dimensões sem variante.

Adesivo

tipo 2

Destaque: card de feature, faixa de preço, marcador de seção. Preenchido, borda preta e sombra chapada — é o ícone virado peça colada.

A geometria é idêntica nos dois. Os caminhos SVG saem de uma lista única (GLIFOS), e só o tratamento muda — é isso que faz disto um sistema e não dois conjuntos. O usuário reconhece o mesmo ícone no menu e no card, que é o ponto inteiro de ter uma família.

Grade de 24, traço de 2, cantos vivos (strokeLinejoin: miter) — o mesmo raio 0 do resto do realm. Regra prática: se o ícone está dentro de algo clicável e ao lado de um rótulo, é contorno. Se ele É o elemento, é adesivo.

ilustrações — spot e cena

Spot

tipo 1

Acompanha um parágrafo sem disputar com ele. Uma cor só (currentColor), sem cenário, legível a 32px.

Cena

tipo 2

Ocupa a página: hero, estado vazio, 404. Multi-camada, paleta própria, profundidade.

Os dois tipos são inversos por desenho. O spot funciona a 32px e vira mancha a 400; a cena funciona a 400 e vira mancha a 32. Não existe ilustração que faça as duas coisas — tentar isso é o erro que produz o desenho médio que não serve a nenhum tamanho.

O spot herda currentColor e por isso atravessa as dimensões; a cena traz paleta própria e por isso não atravessa — cada dimensão que a use precisa de uma versão, e é um custo que se aceita conscientemente.

segunda cena — mesma gramática

Fundo em camadas, retícula por cima, silhuetas chapadas e um foco de luz. As duas cenas repetem essa estrutura — é o que as faz parecer do mesmo mundo.

acessibilidade das duas

Toda peça leva role="img" com aria-label — SVG sem rótulo é invisível para leitor de tela, e as 23 ilustrações antigas já seguiam essa regra.

A exceção: quando a ilustração é puramente decorativa e o texto ao lado já diz tudo, o correto é aria-hidden="true" — rótulo redundante é ruído, não acesso. Nas amostras acima elas são o conteúdo, então levam rótulo.

imagens de exemplo — retrato e paisagem

Retrato

tipo 1
LRGSMMPP

Avatar, autor, depoimento, equipe. Sugere uma pessoa sem inventar um rosto — as iniciais resolvem.

Paisagem

tipo 2

Capa de card, topo de artigo, grade de projetos. Preenche área sem competir com o texto por cima.

As duas são geradas, não arquivos: nenhuma requisição de rede, nenhum peso no repositório, e nada para envelhecer. A cor sai de um hash do próprio texto — duas pessoas diferentes nunca recebem a mesma, e a mesma pessoa recebe sempre a sua, entre recarregamentos e entre páginas.

Por que iniciais e não um rosto: placeholder com foto de pessoa inventada cria expectativa falsa no protótipo e constrangimento quando a foto real chega. Inicial é honesta sobre ser provisória.

o que este capítulo NÃO faz

Não substitui as 23 ilustrações existentes (illustrations, illustrations-styles, punk-illustrations, art-graphics), que continuam válidas e documentadas na seção 15. Acrescenta a camada que faltava por cima delas: o critério de escolha. Quem for desenhar a próxima peça agora sabe em qual dos dois tipos ela cai — e se não couber em nenhum, isso é sinal de que o sistema precisa de um terceiro, não de mais uma exceção.

IconeContorno · IconeAdesivo (8 glifos) · SpotMascara · SpotFita · SpotLata · CenaSalto · CenaOficina · ImagemRetrato · ImagemPaisagem

// Folhas deste realm

src/styles/spiderverse.csssrc/styles/spiderverse-dimensions.csssrc/styles/sv-effects.csssrc/styles/sv-artdirection.csssrc/styles/sv-punk.csssrc/styles/sv-surfaces.csssrc/styles/comic-2026.csssrc/styles/comic-fx.csssrc/styles/eightbit.csssrc/styles/zone-band.csssrc/styles/nav-rift.css

16Changelog

Versão aqui é edição: cada lançamento é uma issue da coleção, com número, capa e a manchete do que mudou. Onde o _Dev lê um git log, o Criativo folheia a pilha de quadrinhos.

#4v0.4.0

Portal dos 3 multiversos

Capa nova, três universos, um gate.

#3v0.3.0

Design System em 3 realms

Cada perfil ganhou o seu guia.

#2v0.2.0

Spiderverse art direction

Halftone, tilt e tinta grossa.

#1v0.1.0

Edição de estreia

O primeiro traço no papel.

17Seções de página

Fase 3 · Sections

Blocos de página

Seções reutilizáveis e data-driven que combinam componentes em blocos completos — prontos para montar landing pages e templates.

// Statistics

20+
Dimensões
98%
Acessível
40+
Componentes
12
Categorias token

// Pricing Cards

Origem

R$0/mês
  • 1 dimensão
  • Tokens base
  • Comunidade
Popular

Multiverso

R$49/mês
  • Dimensões ilimitadas
  • Todos os componentes
  • Export Figma
  • Suporte prioritário

Corporativo

Sob consulta
  • SSO & auditoria
  • SLA dedicado
  • Onboarding

// Testimonials

“O melhor design system comic que já usei. Consistente e divertido.”
M
Miles M.
Dev Frontend
“Tokens impecáveis e export pro Figma que funciona de verdade.”
G
Gwen S.
Product Designer
“Acessibilidade e criatividade no mesmo pacote. Raro.”
P
Peter P.
Eng. Manager

// Team

LR
Lucas Riboldi
Fundador & Dev
AL
Ada Lovelace
Arquiteta
AT
Alan Turing
Pesquisa
GH
Grace Hopper
DX

// Timeline

  1. Fase 1

    Fundação

    Tokens, arquitetura e docs.

  2. Fase 2

    UI Components

    Botões, inputs, overlays, feedback…

  3. Fase 3

    Seções

    Blocos de página reutilizáveis.

  4. Fase 4

    Patterns & Templates

    Fluxos e layouts completos.

// Logos Grid / Partners

Confiado por realidades de todo o multiverso

Oscorp
Alchemax
Daily Bugle
Horizon
Stark
Wayne

// CTA Section

Pronto para saltar?

Comece a construir com o Design System hoje.

// Newsletter

Assine o multiverso

Novidades do multiverso direto no seu e-mail.

18Retro OS

Modo dev · Retro

Telas retrô

Homenagem estética a três eras de interface — recriadas com CSS original (sem logos/ícones de marca). No modo dev, um dock flutuante aparece no rodapé e a troca de tema faz uma metamorfose animada.

// Área de trabalho (arraste as janelas)

Sobre.txt — Bloco de Notas
Lucas Riboldi
Product Designer & Developer
---------------------
Do Figma ao deploy.
Meus Projetos
  • 📁 portfolio-2026 — Next.js
  • 📁 design-system — Tokens
  • 📁 sports-widget — React
  • 📁 skill-seekers — CLI
lucas — zsh
➜ ~/portfolio git status
nada a commitar, tudo limpo ✓

Dica: segure a barra de título e arraste. A janela ativa vem para a frente.

// Tela que emite mensagens

terminal — lucas@terra-2026

// Componentes

<RetroWindow os="95|xp|mac" title="…" draggable initial={{x,y}} />
<TypingTerminal lines={["$ npm run build", "✓ ok"]} />
// dock flutuante e metamorfose ativam no modo dev (botão ❯_ DEV no topo)

19Lab

terra-138 · punk

ANOMALIAS

A ala experimental onde o Design System rompe as próprias regras. Colagem, spray, ransom note, screentone e energia punk.

// Letras de resgate

ANOMALIAS

// Fontes adversas

MULTI

Nabla

cromática COLRv1

NEON

Monoton

neon retrô

GLITCH

Rubik Glitch

corrompida

SHADE

Bungee Shade

3D sombra

// Efeitos de texto

AAfx-3d
AAfx-chroma
AAfx-holo
AAfx-neon
AAfx-riso
AAfx-marker
AAfx-chroma-punk
AAart-ghost

// Superfícies: spray · screentone · raios

fx-spray
fx-screentone
fx-bolts

// Colagem & adesivos

Papel rasgado
Sticker slap
Fita cruzada

// Ilustrações vivas (14)

SpiderEmblem
MultiversePortal
POW!ComicBurst
LeapingHero
WebCorner
Bolt
MohawkSpider
Guitar
BoltCluster
Boombox
SafetyPin
SprayCan
StarBurst
Anarchy

// Logos anômalos

LR.
LR
LR
LR
LR
LR
LR
L
LR
LR

// Portal & componentes extrapolados

CARD.EXE

Componente instável entre dimensões.

Extrapolado!

Todas as anomalias respeitam prefers-reduced-motion.

20Documentação

08 · Docs

Documentação técnica

A documentação vive em docs/design-system/ (uma fonte de verdade por tópico). Abaixo, o mapa dos guias.

// Guias

Arquitetura & Hierarquia

Estrutura do Design System e como estender.

docs/design-system/README.md

Brand Foundation

Essência, voz, logo, do/don't e universos.

docs/design-system/brand.md

Convenção de Nomenclatura

BEM + Tailwind + tokens: como nomear tudo.

docs/design-system/naming-conventions.md

Estrutura de Componentes

Anatomia, pastas, CVA e API de props.

docs/design-system/component-structure.md

Estados & Variantes

Matriz de estados interativos canônicos.

docs/design-system/states-and-variants.md

Grid System

12 colunas, gutter, container e baseline 4px.

docs/design-system/grid-system.md

Responsividade

Breakpoints, grid e regras mobile-first.

docs/design-system/responsiveness.md

Acessibilidade (WCAG)

Checklist AA por componente.

docs/design-system/accessibility-wcag.md

Design Tokens

Camadas, sincronização e export Figma/JSON.

docs/design-system/tokens.md

Roadmap por Fases

O que vem depois da fundação.

docs/design-system/roadmap.md

Fim do guia

Cada capítulo acima também existe na própria rota (/design-system/tokens, /design-system/templates/landing, …) — úteis para linkar direto. Aqui elas são compostas, não copiadas: a fonte é a mesma.