Pular para o conteúdo principal

Design System Corporativo Komache

Visão Geral​

O Design System Komache é um conjunto abrangente de componentes, padrões e diretrizes para criar experiências de usuário consistentes, acessíveis e corporativas em toda a plataforma.

Paleta de Cores​

Azul Corporativo (Primário)​

Nossa cor primária é um azul vibrante e profissional que transmite confiança e estabilidade.

Primary 50:  #f0f4ff
Primary 100: #e1e8ff
Primary 200: #c7d5ff
Primary 300: #a3b9ff
Primary 400: #7b94ff
Primary 500: #5865f2 (Brand Color)
Primary 600: #4752d4
Primary 700: #3a42ad
Primary 800: #2d338a
Primary 900: #212670

Cores Secundárias​

Utilizamos roxo como cor complementar para destacar elementos secundários.

Secondary 500: #8b5cf6
Secondary 600: #7c3aed
Secondary 700: #6d28d9

Cores Semânticas​

  • Sucesso: #10b981 (verde)
  • Aviso: #f59e0b (amarelo)
  • Erro: #ef4444 (vermelho)
  • Informação: #06b6d4 (ciano)

Cores Neutras​

Neutral 50:  #f9fafb
Neutral 100: #f3f4f6
Neutral 200: #e5e7eb
Neutral 300: #d1d5db
Neutral 400: #9ca3af
Neutral 500: #6b7280
Neutral 600: #4b5563
Neutral 700: #374151
Neutral 800: #1f2937
Neutral 900: #111827

Tipografia​

Famílias de Fonte​

  • Base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif
  • Monospace: "Fira Code", "Courier New", monospace

Escala de Tamanhos​

Extra Small (xs):  12px
Small (sm):        14px
Base:              16px
Large (lg):        18px
Extra Large (xl):  20px
2xl:               24px
3xl:               30px
4xl:               36px
5xl:               48px

Pesos de Fonte​

Light:      300
Normal:     400
Medium:     500
Semibold:   600
Bold:       700

Alturas de Linha​

Tight:      1.25
Normal:     1.5
Relaxed:    1.75
Loose:      2

Espaçamento​

Utilizamos uma escala de espaçamento baseada em múltiplos de 4px para consistência:

XS:   4px
SM:   8px
MD:   12px
LG:   16px
XL:   24px
2XL:  32px
3XL:  48px
4XL:  64px

Border Radius​

None:  0
SM:    4px
MD:    8px
LG:    12px
XL:    16px
Full:  9999px (para criar círculos)

Sombras​

None: none
SM:   0 1px 2px 0 rgba(0, 0, 0, 0.05)
MD:   0 4px 6px -1px rgba(0, 0, 0, 0.1)
LG:   0 10px 15px -3px rgba(0, 0, 0, 0.1)
XL:   0 20px 25px -5px rgba(0, 0, 0, 0.1)
2XL:  0 25px 50px -12px rgba(0, 0, 0, 0.25)

Componentes​

Botões​

Primário​

  • Uso: Ações principais
  • Cor: Primary 600
  • Hover: Primary 700 com sombra
  • Padding: MD (12px) + LG (16px)

Secundário​

  • Uso: Ações secundárias
  • Cor: Secundary 600
  • Hover: Secundary 700

Outline​

  • Uso: Ações alternativas
  • Border: 2px primary
  • Hover: background Primary 50

Cards​

  • Border: 1px solid Neutral 200
  • Border-radius: LG (12px)
  • Padding: XL (24px)
  • Box-shadow: MD
  • Hover: Elevação (Shadow LG) + Border Primary

Alertas​

Info​

Background: rgba(88, 101, 242, 0.1)
Border-left: Primary 600
Color: Primary 700

Success​

Background: rgba(16, 185, 129, 0.1)
Border-left: #10b981
Color: #10b981

Warning​

Background: rgba(245, 158, 11, 0.1)
Border-left: #f59e0b
Color: #a16207

Error​

Background: rgba(239, 68, 68, 0.1)
Border-left: #ef4444
Color: #991b1b

Badges​

  • Padding: XS (4px) + MD (12px)
  • Border-radius: Full (9999px)
  • Font-size: SM (14px)
  • Font-weight: Semibold (600)

Modo Escuro​

O design system suporta modo escuro com inversão automática de cores:

  • Background: #0f172a
  • Surface: #1e293b
  • Text: #f9fafb
  • Text Light: #d1d5db
  • Border: #334155

Transições​

Fast:  150ms ease-in-out
Base:  200ms ease-in-out
Slow:  300ms ease-in-out

Acessibilidade​

  • Todos os componentes seguem WCAG 2.1 AA
  • Contraste mínimo de 4.5:1 para texto
  • Suporte a movimento reduzido
  • Navegação por teclado completa
  • Labels acessíveis e ARIA attributes

Responsividade​

Breakpoints​

Mobile:  480px
Tablet:  768px
Desktop: 1024px
Wide:    1280px

Variáveis CSS​

Todos os tokens estão disponíveis como variáveis CSS com prefixo --ds-:

/* Cores */
--ds-primary-50, --ds-primary-100, ... --ds-primary-900
--ds-secondary-500, --ds-secondary-600, --ds-secondary-700
--ds-warning, --ds-error, --ds-success, --ds-info

/* Tipografia */
--ds-font-family-base
--ds-font-family-mono
--ds-font-size-xs, --ds-font-size-sm, ... --ds-font-size-4xl
--ds-font-weight-light, ... --ds-font-weight-bold
--ds-line-height-tight, ... --ds-line-height-loose

/* Espaçamento */
--ds-spacing-xs, --ds-spacing-sm, ... --ds-spacing-4xl

/* Border Radius */
--ds-radius-none, --ds-radius-sm, ... --ds-radius-full

/* Sombras */
--ds-shadow-none, --ds-shadow-sm, ... --ds-shadow-2xl

/* Transições */
--ds-transition-fast, --ds-transition-base, --ds-transition-slow

Uso em Componentes​

Exemplo com CSS Variables​

.my-component {
  padding: var(--ds-spacing-lg);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-primary-500);
  color: white;
  font-family: var(--ds-font-family-base);
  box-shadow: var(--ds-shadow-md);
  transition: all var(--ds-transition-fast);
}

.my-component:hover {
  background-color: var(--ds-primary-600);
  box-shadow: var(--ds-shadow-lg);
  transform: translateY(-2px);
}

Exemplo com Tokens JS​

import { colors, spacing, borderRadius } from '@site/src/design-system/tokens';

const buttonStyle = {
  padding: `${spacing.md} ${spacing.lg}`,
  backgroundColor: colors.primary[600],
  borderRadius: borderRadius.md,
};

Boas Práticas​

  1. Consistência: Use sempre os tokens definidos do design system
  2. Hierarquia: Mantenha uma hierarquia clara de tamanhos e cores
  3. Espaçamento: Sempre use valores da escala de espaçamento
  4. Acessibilidade: Garanta contraste suficiente entre elementos
  5. Responsividade: Teste em múltiplos tamanhos de tela
  6. Performance: Use CSS variables para dinâmica, evite cálculos desnecessários
  7. Modo Escuro: Sempre considere o modo escuro na implementação

Suporte​

Para dúvidas ou sugestões sobre o Design System, abra uma issue no repositório: GitHub Issues