Método Cavaquinho

Design system

Cores, tipografia e componentes da interface nos dois temas.

Paleta

Tokens da seção 4.1. O tema troca só os valores.

fundo

Página

superficie

Cards, menus, modais

superficieSutil

Destaque leve, hover

borda

Divisórias e contornos

texto

Texto principal

textoSuave

Legendas

acento

Botões principais, links, foco

acentoSuave

Selos e itens ativos

sucesso

Corrigida, domínio alto

alerta

Atenção, música parada

erro

Erros e exclusões

Níveis de domínio

Cada nível tem uma cor própria, usada em selos e gráficos.

1. Conheço a cifra

Sei os acordes, mas ainda não toco a música inteira.

2. Toco lendo, com pausas

Consigo tocar do início ao fim, parando nas trocas.

3. Toco lendo, sem parar

Toco inteira com a cifra, sem interrupções.

4. Toco de cor

Não preciso da cifra.

5. Dominada

De cor, no andamento original, com segurança para tocar em roda.

Tipografia

Inter na interface e IBM Plex Mono nas cifras.

Título de página, 28

Título de seção, 20

Título de card, 16

Texto base de 16 px, peso 400, para leitura confortável no celular.

Texto com peso 500 para rótulos e destaques.

Legenda com 13 px na cor textoSuave.

Cifra

Acordes alinhados acima da letra, em peso 600 na cor de acento.

G              Em
Peguei o cavaquinho cedo
     C           D7
pra treinar a batida nova
G              B7      Em
troca lenta, mão tranquila,
   A7        D7       G
um dia a roda vai ouvir

Botões

No máximo um botão principal por tela. Altura mínima de 44 px no celular.

Selos

Estilo, tom, domínio e corrigida.

PagodePartido altoTom: G2. Toco lendo, com pausasNível 5Corrigida em 05/10/2026

Formulário

Campos do cadastro de música.

Abas e cards

Biblioteca de músicas separada por status.

Música de exemplo
Artista de exemplo
Nível 2
SambaTom: D

Parada há 18 dias, domínio nível 2

Avisos e modais

Sombra leve só nos modais.