Verge

Verge é a linguagem visual do Koder Design System — o mapa fechado de tokens (cor, forma, espaço, sombra, tipografia) que toda UI Koder consome. v0 espelha GNOME Adwaita 1:1; divergência é incremental, guiada pelo feedback do owner sobre widgets renderizados.

Spec do Verge (verge.kmd) → · Preview ao vivo do preset →

Cor

Token	Claro	Escuro	Uso
`--accent`	`#3584E4`	herda do claro	Cor de ação primária (botões, focus rings, links)
`--accent-strong`	`#1c71d8`	herda do claro	Estado hover do accent
`--accent-on`	`#FFFFFF`	herda do claro	Cor de texto/ícone sobre superfícies accent
`--bg`	`#FAFAFA`	`#242424`	Canvas da página — surface mais baixa do stack de elevação
`--surface`	`#FFFFFF`	`#303030`	Superfície de card / form / panel (1 nível acima do canvas)
`--surface-2`	`—`	`#424242`	Superfície aninhada / elevada (2 níveis acima do canvas)
`--on-surface`	`#2e3436`	`#FFFFFF`	Texto corpo e glyphs primários em surfaces
`--label-color`	`#5e6772`	`#cccccc`	Texto secundário — labels, helpers, captions
`--btn-secondary-bg`	`—`	`#3a3a3a`	Background de botões secundários (modo escuro)
`--btn-secondary-fg`	`—`	`#FFFFFF`	Cor de texto de botões secundários (modo escuro)
`--btn-secondary-hover`	`—`	`#4a4a4a`	Background de botões secundários no hover (modo escuro)

Forma & bordas

Token	Claro	Escuro	Uso
`--radius-sm`	`4px`	herda do claro	Radius pequeno — cantos de chip, badge, tag
`--radius-md`	`6px`	herda do claro	Radius médio — cantos de input, card, panel
`--radius-lg`	`8px`	herda do claro	Radius grande — cantos de dialog, sheet, drawer
`--radius-btn`	`6px`	herda do claro	Radius dos cantos do botão (Verge owner decision: quadrados minimamente abaulados)
`--input-border`	`1px solid #c0c0c0`	`1px solid #1b1b1b`	Stroke de borda de input e field
`--btn-secondary-border`	`1px solid #c0c0c0`	`1px solid #1b1b1b`	Stroke de borda de botão secundário

Espaçamento & padding

Token	Claro	Escuro	Uso
`--pad-y`	`8px`	herda do claro	Padding vertical dentro de inputs e botões
`--pad-x`	`12px`	herda do claro	Padding horizontal dentro de inputs e botões
`--gap-field`	`10px`	herda do claro	Gap entre fields adjacentes em um form
`--gap-title`	`14px`	herda do claro	Gap entre título e conteúdo
`--pad-form`	`18px`	herda do claro	Padding interno do card do form

Elevação & sombra

Token	Claro	Escuro	Uso
`--shadow-form`	`0 0 0 1px rgba(0,0,0,0.1)`	`0 0 0 1px rgba(0,0,0,0.5)`	Drop shadow / outline do card do form

Stack de fontes

Token	Claro	Escuro	Uso
`--font`	Aa`'Cabin', 'Cantarell', 'Inter', sans-serif`	herda do claro	Stack de font do body — Cabin / Cantarell / Inter fallbacks

Modos de densidade

Três densidades canônicas em nível de página escalam spacing Verge + mínimos de componente uniformemente. Compacto = −20%, Confortável = +20%. Veja a cascata viva abaixo — as três colunas escopam o próprio data-density e mostram o mesmo trio de botões em cada ritmo.

Compacto

Padrão

Confortável

specs/themes/density.kmd

Como a divergência funciona

Verge inicia como GNOME Adwaita 1:1; tokens divergem gradualmente conforme os produtos Koder evoluem. O fluxo:

Owner renderiza um form ou widget com os tokens Verge atuais em um produto Koder
Owner avalia visualmente e identifica o que deve mudar ("esse botão tá muito largo", "borda do input ficou fina demais")
AI mapeia o pedido pro token correto (`--accent`, `--radius-btn`, `--pad-y`, etc.) e atualiza `tools/design-gen/assets/css/presets.css` + `specs/themes/verge.kmd` §R4
Quando várias divergências acumulam, um release Verge v(N+1) é cortado — changelog e migration guide shipam junto