DS Studio

Crie um Koder Design System completo — não só uma paleta — sem escrever código. Forke um sistema existente ou comece de uma cor-semente, derive as seis famílias de token, valide o contraste inline e exporte manifesto + tokens. Determinístico e client-side: o hash da URL carrega a sessão inteira.

Entrada — semente ou fork

Comece de uma cor-semente de marca, ou forke um design system existente como ponto de partida editável.

Começar de
Tipo
Preview ao vivo

Card elevado

Texto de corpo sobre surface derivada do accent. Os botões abaixo mostram seu role accent + texto on-accent WCAG-aware.

Surface 2

Container atenuado pra conteúdo secundário — tipicamente uma section, sub-card, ou row de lista que não precisa de full elevation.

Amostra display 32

Amostra headline 22

Amostra body 15 — confirme legibilidade nos tamanhos pequenos também; é onde bugs de contraste se escondem.

Caption muted 12

Erro Aviso Sucesso Info