Design System v2.0 · 2026-05-29

Practix DS

Tokens, componentes e padrões visuais do produto. Esta página é a versão ao vivo da documentação canônica em docs/design-system.md. Estrutura inspirada no BaSe Sebrae, adaptada pra marca Practix (warm SMB, terracota signature, Aspekta).

4 camadas

Primitives → Semantic → Component → Theme. Componente lê semantic, nunca raw.

Rampa pareada

Cada cor tem 9 tons + on-color garantido AA. Bug de texto ilegível morre na raiz.

Tema por contexto

Brand fixa em todo lugar. Tema muda só na landing por segmento e mini-site público.

Release notes

v2.0 (2026-05-29): rampa tonal completa 9 tons + on-color pareado pra brand/segmento/feedback/neutro. Componentes novos: Avatar, Skeleton, Spinner, Tooltip, StatePages. Página /design-system refeita com sumário lateral e 7 seções.
v1.0 (2026-05-28): formaliza arquitetura 4 camadas, introduz SegmentTheme, Card, EmptyState, Alert. Sem breaking changes.

← Voltar pra home Doc canônica

01 · Fundamento

Cores

Cada família tem 9 tons (10 escuro, 90 claro) com on-color pareado. Componente escolhe o tom, o on-color garante contraste AA automático. Tom marcado comoBaseé o que vira alias semântico legacy (--signature, --action, etc).

Brand

Identidade Practix. Terracota é a assinatura visual. Sálvia é a cor funcional primária (ação, foco, primário).

Terracota

Cor de assinatura da marca. Tom 40 é o que aparece no ponto do logo.

PractixTheme.colors.brand.terracota

--terracota-10

#431407

--terracota-20

#7C2D12

--terracota-30

#9A3412

Base

--terracota-40

#C2510C

--terracota-50

#EA580C

--terracota-60

#F97316

--terracota-70

#FB923C

--terracota-80

#FDBA74

--terracota-90

#FFEDD5

--on-terracota-10

#FFFFFF

--on-terracota-20

#FFFFFF

--on-terracota-30

#FFFFFF

--on-terracota-40

#FFFFFF

--on-terracota-50

#09090B

--on-terracota-60

#09090B

--on-terracota-70

#09090B

--on-terracota-80

#09090B

--on-terracota-90

#09090B

Sálvia

Cor funcional primária. Botão CTA, focus ring, link inline. Tom 40 é o que vira --action.

PractixTheme.colors.brand.salvia

--salvia-10

#052E16

--salvia-20

#14532D

--salvia-30

#166534

Base

--salvia-40

#15803D

--salvia-50

#16A34A

--salvia-60

#22C55E

--salvia-70

#4ADE80

--salvia-80

#86EFAC

--salvia-90

#DCFCE7

--on-salvia-10

#FFFFFF

--on-salvia-20

#FFFFFF

--on-salvia-30

#FFFFFF

--on-salvia-40

#FFFFFF

--on-salvia-50

#FFFFFF

--on-salvia-60

#09090B

--on-salvia-70

#09090B

--on-salvia-80

#09090B

--on-salvia-90

#09090B

Segmento

Cores aplicadas por contexto via [data-segment]. Cada negócio atendido tem uma identidade sutil sem perder a marca Practix global.

Grafite

Segmento barbearia. Neutro escuro masculino, herança barbearia clássica.

PractixTheme.colors.segmento.grafite

--grafite-10

#020617

--grafite-20

#0F172A

Base

--grafite-30

#1E293B

--grafite-40

#334155

--grafite-50

#475569

--grafite-60

#64748B

--grafite-70

#94A3B8

--grafite-80

#CBD5E1

--grafite-90

#F1F5F9

--on-grafite-10

#FFFFFF

--on-grafite-20

#FFFFFF

--on-grafite-30

#FFFFFF

--on-grafite-40

#FFFFFF

--on-grafite-50

#FFFFFF

--on-grafite-60

#FFFFFF

--on-grafite-70

#09090B

--on-grafite-80

#09090B

--on-grafite-90

#09090B

Magenta

Segmento salão de beleza. Família beauty.

PractixTheme.colors.segmento.magenta

--magenta-10

#500724

--magenta-20

#831843

--magenta-30

#9D174D

--magenta-40

#BE185D

Base

--magenta-50

#DB2777

--magenta-60

#EC4899

--magenta-70

#F472B6

--magenta-80

#F9A8D4

--magenta-90

#FCE7F3

--on-magenta-10

#FFFFFF

--on-magenta-20

#FFFFFF

--on-magenta-30

#FFFFFF

--on-magenta-40

#FFFFFF

--on-magenta-50

#FFFFFF

--on-magenta-60

#FFFFFF

--on-magenta-70

#09090B

--on-magenta-80

#09090B

--on-magenta-90

#09090B

Teal

Segmento clínica. Transmite calma e profissionalismo.

PractixTheme.colors.segmento.teal

--teal-10

#042F2E

--teal-20

#134E4A

--teal-30

#115E59

--teal-40

#0F766E

Base

--teal-50

#0D9488

--teal-60

#14B8A6

--teal-70

#2DD4BF

--teal-80

#5EEAD4

--teal-90

#CCFBF1

--on-teal-10

#FFFFFF

--on-teal-20

#FFFFFF

--on-teal-30

#FFFFFF

--on-teal-40

#FFFFFF

--on-teal-50

#FFFFFF

--on-teal-60

#FFFFFF

--on-teal-70

#09090B

--on-teal-80

#09090B

--on-teal-90

#09090B

Violeta

Segmento fotografia. Família criativa.

PractixTheme.colors.segmento.violeta

--violeta-10

#2E1065

--violeta-20

#4C1D95

--violeta-30

#5B21B6

--violeta-40

#6D28D9

Base

--violeta-50

#7C3AED

--violeta-60

#8B5CF6

--violeta-70

#A78BFA

--violeta-80

#C4B5FD

--violeta-90

#EDE9FE

--on-violeta-10

#FFFFFF

--on-violeta-20

#FFFFFF

--on-violeta-30

#FFFFFF

--on-violeta-40

#FFFFFF

--on-violeta-50

#FFFFFF

--on-violeta-60

#FFFFFF

--on-violeta-70

#09090B

--on-violeta-80

#09090B

--on-violeta-90

#09090B

Feedback de interface

Cores RESERVADAS pra mensagens de sistema (sucesso, aviso, erro, info). Nunca decoração — o usuário aprende que essas cores significam estado.

SucessoReservado

Confirmação positiva: agendado, salvo, enviado. Mesma família visual da sálvia, distinta semanticamente.

PractixTheme.colors.feedback.sucesso

--sucesso-10

#052E16

--sucesso-20

#14532D

--sucesso-30

#166534

Base

--sucesso-40

#15803D

--sucesso-50

#16A34A

--sucesso-60

#22C55E

--sucesso-70

#4ADE80

--sucesso-80

#86EFAC

--sucesso-90

#DCFCE7

--on-sucesso-10

#FFFFFF

--on-sucesso-20

#FFFFFF

--on-sucesso-30

#FFFFFF

--on-sucesso-40

#FFFFFF

--on-sucesso-50

#FFFFFF

--on-sucesso-60

#09090B

--on-sucesso-70

#09090B

--on-sucesso-80

#09090B

--on-sucesso-90

#09090B

AvisoReservado

Atenção, ação reversível mas notável. Trial vence em 3 dias, slot duplicado, etc.

PractixTheme.colors.feedback.aviso

--aviso-10

#451A03

--aviso-20

#78350F

--aviso-30

#92400E

--aviso-40

#B45309

Base

--aviso-50

#D97706

--aviso-60

#F59E0B

--aviso-70

#FBBF24

--aviso-80

#FCD34D

--aviso-90

#FEF3C7

--on-aviso-10

#FFFFFF

--on-aviso-20

#FFFFFF

--on-aviso-30

#FFFFFF

--on-aviso-40

#FFFFFF

--on-aviso-50

#FFFFFF

--on-aviso-60

#09090B

--on-aviso-70

#09090B

--on-aviso-80

#09090B

--on-aviso-90

#09090B

ErroReservado

Erro de validação ou falha de operação. Algo deu errado e o usuário precisa saber.

PractixTheme.colors.feedback.erro

--erro-10

#450A0A

--erro-20

#7F1D1D

--erro-30

#991B1B

--erro-40

#B91C1C

Base

--erro-50

#DC2626

--erro-60

#EF4444

--erro-70

#F87171

--erro-80

#FCA5A5

--erro-90

#FEE2E2

--on-erro-10

#FFFFFF

--on-erro-20

#FFFFFF

--on-erro-30

#FFFFFF

--on-erro-40

#FFFFFF

--on-erro-50

#FFFFFF

--on-erro-60

#09090B

--on-erro-70

#09090B

--on-erro-80

#09090B

--on-erro-90

#09090B

InfoReservado

Informação neutra, dica contextual. Azul-petróleo que não compete com Action.

PractixTheme.colors.feedback.info

--feedback-info-10

#083344

--feedback-info-20

#164E63

--feedback-info-30

#155E75

Base

--feedback-info-40

#0E7490

--feedback-info-50

#0891B2

--feedback-info-60

#06B6D4

--feedback-info-70

#22D3EE

--feedback-info-80

#67E8F9

--feedback-info-90

#CFFAFE

--on-feedback-info-10

#FFFFFF

--on-feedback-info-20

#FFFFFF

--on-feedback-info-30

#FFFFFF

--on-feedback-info-40

#FFFFFF

--on-feedback-info-50

#FFFFFF

--on-feedback-info-60

#09090B

--on-feedback-info-70

#09090B

--on-feedback-info-80

#09090B

--on-feedback-info-90

#09090B

Neutro

Escala única de cinza (zinc). Usada em texto, bordas, hover, divisores.

Cinza

Tom 10 vira --foreground. Tom 50 vira --muted-foreground. Tom 90 vira --border.

PractixTheme.colors.neutro.cinza

Base

--cinza-10

#09090B

--cinza-20

#18181B

--cinza-30

#27272A

--cinza-40

#3F3F46

--cinza-50

#52525B

--cinza-60

#71717A

--cinza-70

#A1A1AA

--cinza-80

#D4D4D8

--cinza-90

#E4E4E7

--on-cinza-10

#FFFFFF

--on-cinza-20

#FFFFFF

--on-cinza-30

#FFFFFF

--on-cinza-40

#FFFFFF

--on-cinza-50

#FFFFFF

--on-cinza-60

#FFFFFF

--on-cinza-70

#09090B

--on-cinza-80

#09090B

--on-cinza-90

#09090B

02 · Tema

Tema por segmento

Cada segmento atendido pelo Practix tem identidade visual sutil aplicada via [data-segment="..."] no <html>. Os tokens --theme-* mudam conforme o contexto sem perder a marca Practix global.

Tokens do tema atual

Accent

--theme-accent

Accent text

--theme-accent-text

Accent soft

--theme-accent-soft

Accent strong

--theme-accent-strong

Exemplo aplicado

Destaque do segmento

Mini-card de demonstração

Border-left, eyebrow e badge abaixo reagem ao segmento ativo. Trocando o switch, o tom muda mas a estrutura permanece igual.

Tag tematizadadata-segment="practix"

03 · Fundamento

Tipografia

Fonte única Aspekta VF (variable 100-900, SIL OFL). Auto-hospedada via next/font/local. Escolhida pelo peso flexível, calor SMB e contraste bom em telas baratas.