Design System

1. Cores

Tokens Fixos

• primary: Cor principal do sistema.
• secondary: Cor secundária, usada para complementos.
• tertiary: Terceira cor, geralmente para acentuar ou para destaques.
• basePrimary, baseSecondary, baseTertiary: Variações entre preto e branco.

Variações de Cores

1. Light/Dark

• primaryLight: Cor mais clara para temas claros.
• primaryDark: Cor mais escura para temas escuros.
• secondaryLight: Cor mais clara para temas claros.
• secondaryDark: Cor mais escura para temas escuros.

2. Escala de Cores

• primary10, primary20, primary30, ...: Variações de intensidade com base na cor primária, de 10 a 90.
• secondary10, secondary20, secondary30, ...: Variações de intensidade com base na cor secundária.

3. Prefixo "on" para cores sobre outras

• onBackground: Cor para texto ou elementos sobre o fundo.
• onPrimaryDark: Cor para texto ou elementos sobre um fundo primário escuro.

4. Cores de Função

• systemError: Usado para indicar erros.
• systemSuccess: Usado para indicar sucesso.
• systemWarning: Usado para indicar um alerta ou aviso.
• background: Cor do fundo.
• surface: Cor da superfície, usada para elementos acima do fundo.

2. Tipografia

Tokens Fixos

• h1: Título principal, maior tamanho de fonte.
• h2: Subtítulo, secundário.
• h3: Título de seção, tamanho médio.
• h4: Subtítulo de seção, tamanho menor.
• h5: Subtítulo menor, utilizado em textos complementares.
• subtitle: Texto de legenda, geralmente usado para subtítulos ou descrições.
• body: Texto de corpo principal.
• button: Texto utilizado em botões.
• label: Texto utilizado em labels ou campos.

Variações

1. Tamanho de Texto

• large: Versão maior do texto.
• small: Versão menor do texto.

2. Peso de Fonte

• bold: Peso de fonte mais forte.
• regular: Peso de fonte normal.

Exemplos:

• bodyLarge: Texto de corpo maior.
• bodyLargeBold: Texto de corpo maior em negrito.
• subtitleSmall: Subtítulo em tamanho menor.

Links Úteis

• Figma - Design System
• YouTube - Tutorial