Ficha 02 · Mini design system

Parte I · Verdadeiro ou Falso (20 pts)

Indica V ou F e justifica.

1. Um design token é um valor fixo escrito directamente em cada ecrã. (5 pts)
2. As variantes em Figma permitem agrupar os estados de um componente num só. (5 pts)
3. Numa escala de 8pt, espaçamentos como 10 ou 15 pt são preferíveis. (5 pts)
4. Os tokens semânticos podem ter valores diferentes para light e dark mode. (5 pts)

Parte II · Construir os fundamentos (40 pts)

Vais criar a base de um mini design system para uma app de finanças pessoais com personalidade confiável e moderna.

Exercício 1 · Tokens de cor (20 pts)

Define a paleta de tokens semânticos com valores para light e dark mode. Inclui pelo menos: primária, superfície, texto, sucesso, erro, e um token de raio de canto. Indica os valores hex e verifica que o texto sobre a superfície cumpre contraste.

Exercício 2 · Escala tipográfica (20 pts)

Define uma escala tipográfica com pelo menos 5 papéis (display, headline, title, body, label/caption), indicando família, tamanho, peso e line-height. Justifica a escolha da família para o contexto.

Parte III · Componentes com estados (40 pts)

Especifica 3 componentes do mini design system, cada um com todos os estados relevantes. Usa os tokens definidos na Parte II.

Componentes a especificar: - Botão primário - Campo de texto (text field) - Card de transacção

Para cada um, descreve: anatomia, tokens usados, estados e tamanhos.