Ficha 02 · Mini design system
- Tokens de cor
- Escala tipográfica
- Componentes com estados
Parte I · Verdadeiro ou Falso (20 pts)
Indica V ou F e justifica.
- Um design token é um valor fixo escrito directamente em cada ecrã. (5 pts)
- As variantes em Figma permitem agrupar os estados de um componente num só. (5 pts)
- Numa escala de 8pt, espaçamentos como 10 ou 15 pt são preferíveis. (5 pts)
- Os tokens semânticos podem ter valores diferentes para light e dark mode. (5 pts)
- F — Um token é uma variável nomeada (ex:
color-primary) ligada a um valor; muda-se num sítio e propaga. O oposto de valor "hardcoded" em cada ecrã. - V — As variantes agrupam tipos/tamanhos/estados de um componente, controlados por propriedades, como as props em código.
- F — Numa escala de 8pt usam-se múltiplos de 8 (com half-step de 4). 10 ou 15 quebram a consistência; preferir 8, 12, 16.
- V — Os tokens semânticos (ex:
color-surface) podem mapear para valores distintos por tema, o que torna o dark mode trivial de manter.
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.
Tokens de cor (exemplo de referência)
| Token | Light | Dark | Notas |
|---|---|---|---|
color-primary |
#1E6F5C | #2E9E84 | Verde "confiança/dinheiro" |
color-on-primary |
#FFFFFF | #06231C | Texto sobre primária |
color-surface |
#FAFAFA | #121212 | Fundo base |
color-surface-2 |
#FFFFFF | #1E1E1E | Cards (elevação) |
color-text |
#1A1A1A | #EAEAEA | Texto principal |
color-text-muted |
#555555 | #A8A8A8 | Texto secundário |
color-success |
#1B873F | #34C759 | Positivo/entradas |
color-error |
#C62828 | #FF6B6B | Negativo/saídas |
radius-md |
12 | 12 | Raio de cantos |
Verificação de contraste:
- color-text (#1A1A1A) sobre color-surface (#FAFAFA) → ~16:1 ✓ (≥ 4.5:1).
- Em dark, #EAEAEA sobre #121212 → ~15:1 ✓.
- color-text-muted mantido acima de 4.5:1 sobre a superfície respectiva.
(Aceitam-se outras paletas desde que: existam tokens semânticos, dois temas e contraste verificado.)
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.
Escala tipográfica (referência)
Família: Inter (ou SF Pro / Roboto). Justificação: sans-serif geométrica, altamente legível em ecrã, neutra e moderna, com bons números tabulares para mostrar valores monetários.
| Papel | Tamanho (pt) | Peso | Line-height | Uso |
|---|---|---|---|---|
| Display | 40 | Bold (700) | 44 | Saldo total |
| Headline | 28 | Bold (700) | 34 | Título de ecrã |
| Title | 18 | SemiBold (600) | 24 | Secções, cards |
| Body | 16 | Regular (400) | 24 | Texto corrente |
| Label | 14 | Medium (500) | 18 | Botões, tabs |
| Caption | 12 | Regular (400) | 16 | Datas, metadados |
Notas: corpo a 16 pt evita zoom forçado; usar números tabulares (font-variant-numeric: tabular-nums) para alinhar montantes.
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.
Componente 1 — Botão primário (14 pts)
- Anatomia: contentor + label (+ ícone opcional).
- Tokens: fundo
color-primary, textocolor-on-primary,radius-md, padding 16/24, altura 48 (toque ≥ 44). - Estados:
- Default: fundo
color-primary. - Pressed: escurecer 8% (overlay).
- Disabled: opacidade 38% / fundo
color-text-muted. - Loading: spinner em vez de label, botão não-clicável.
- Focused: anel de foco 2 px.
- Tamanhos: S (40), M (48), L (56).
Componente 2 — Campo de texto (13 pts)
- Anatomia: label (topo, sempre visível) + contentor de input + mensagem de ajuda/erro.
- Tokens: borda
color-text-muted, textocolor-text,radius-md, padding 12/16. - Estados:
- Empty: label visível, placeholder cinzento.
- Focus: borda
color-primary, label realçada. - Filled: valor a
color-text. - Error: borda e mensagem a
color-error. - Disabled: opacidade reduzida, não editável.
- Variações: com ícone à direita (ex: olho para password), com teclado adequado por tipo.
Componente 3 — Card de transacção (13 pts)
- Anatomia: ícone de categoria + título + subtítulo (data) + valor à direita.
- Tokens: fundo
color-surface-2,radius-md, padding 16, sombra subtil (elevation-1). - Cor do valor:
color-successse entrada,color-errorse saída. - Estados:
- Default.
- Pressed: overlay leve (abre detalhe).
- Selected: borda/realce com
color-primary(modo selecção). - Tipografia: título = Title, data = Caption (
color-text-muted), valor = Title com números tabulares.
(Avaliar: uso correcto de tokens, todos os estados presentes, alvos de toque adequados, coerência com Partes I-II.)