Button

Figma 1355-451 · 4 variants × 3 sizes × 2 states.

TextField

Figma 1564-1271 · 4 estados (inactive / selected / disabled / error) × filled/unfilled. O estado 'selected' aparece ao focar qualquer input default.

Select Field

Wrapper de formulário sobre o Select do shadcn, casado com o padrão visual do TextField (label acima, container 48px, borda gray-50 → foreground no foco, chevron 20px). Layout provisório — atualizar quando o node do Figma for enviado.

Checkbox Field

Figma 1568-3076 · Caixa 22px (radius sm, stroke thin) + label 14px Semibold + description opcional. Tri-state (unchecked / checked / indeterminate) × enabled/disabled. Controlado ou não controlado.

Checkbox Card

Figma 4421-20345 · Card com checkbox + label. Quando marcado, expande e revela conteúdo (children) — usado na tarefa 'Objetivo → melhorar performance' para capturar tempo/data por distância.

Checkbox Circle

Figma 4421-11840 · Checkbox circular 40px com label abaixo. Usado em listas horizontais (dias da semana) via CheckboxCircleList.

Goal Progress Chart

Figma 4503-25959 · Visão do objetivo do atleta. 7 cenários exatos: 'run_event' em andamento (troféu preenchendo + card horizontal com barra parcial e bandeira posicionada) e concluído (troféu 100% + Objetivo concluído com barra cheia); mais 5 objetivos não-prova (Começar a correr, Melhorar performance, Perder peso, Socializar, Cuidar da saúde), renderizados como card compacto com ícone + label.

Sprint Count

Figma 4503-25503 · Cabeçalho da tela de Performance com o total de sprints (blocos de treino) do plano. Ícone circular verde + total em Saira bold italic.

Workout Count Chart

Figma 4503-25988 · Card do sprint com feitos / perdidos / restantes. Estado em andamento (fundo gray-25, barra preta + hachura + branco) e concluído (fundo primary-pure, barra 100% verde) — o estado concluído é ativado automaticamente quando done === total.

Line Chart

Figma 4503-25848 · Gráfico de linha genérico do DS. Curva suave (Catmull-Rom), grid tracejado, indicador (ponto + rótulo X sublinhado) no ponto destacado — padrão: último. Header com título, valor grande e par sumário à direita.

Metric Card

Figma 4503-25698 · Card destacado (218px por default) com ícone + título, valor grande + unidade, stat secundário e trend. Variantes dark (fundo primary-pure, valor em secondary-pure) e light (fundo gray-25, valor em primary-pure).

Metric History Card

Figma 4503-25698 · Card auxiliar (fundo gray-25) com lista de períodos (mês/semana) e seu valor, distribuídos verticalmente com justify-between. Pensado para compor ao lado do MetricCard num flex row com items-stretch e gap-400.

Training Zones Chart

Figma 4503-25723 · Gráfico de barras verticais para zonas de treino (Z1–Z5). Cada barra tem percentual + duração no topo e o rótulo da zona embaixo. A altura escala proporcionalmente ao maior percentual do conjunto.

Stat Card

Figma 4503-25772 · Card compacto de estatística (fundo gray-25). Header ícone + título, valor grande (md/24) com unidade, trend opcional embaixo. Use quando só há um número + trend, sem par de labels secundárias.

Device Logo

Figma 1575-3478 · Marca colorida dos dispositivos suportados (Strava, Garmin, Polar, Apple Watch, Fitbit, TomTom). SVG inline, altura configurável, cores oficiais preservadas.

Radio Field

Figma 1593-3506 (default), 4421-19847 (card) e 4421-20059 (card com ícone + descrição). Selected border = primary/pure.

Toggle

Figma 1553-2274 · Track radius full, knob 24px. ON usa primary/pure; OFF usa transparent/dark-20%. Controlado ou não controlado, com estado disabled.

List Item

Figma 1555-2314 · Item de lista com 3 variantes: default (divider inferior), filled (fundo gray-25) e border (contorno gray-25). Slots: leading icon, título, tag inline, descrição, caption, unread dot e trailing (texto, notification bubble, chevron ou custom).

MenuBar

Figma 1355-881 · Bottom nav com 5 itens. Item central é o CTA da marca (Treino).

Header

Figma 1418-3404 · Cabeçalho do app do atleta. Variante 'default' (back + título + ações + subslot do mês) e variante 'home' (avatar + streak + faixa da semana). 100% composto de AvatarDS, RoundButton, HomeWeekMark e tokens DS.

Title Section

Figma 4442-74508 · Título de seção com ícone Tabler + label uppercase (Saira Bold Italic 20/24). Ícone é configurável via prop.

Tabs

Figma 4421-15661 · Navegação em abas. Título italic (Saira) — bold quando ativo — e barra 8px em secondary/pure abaixo do item selecionado. Gap 24, padding lateral 16.

Period Nav

Figma 4508-27802 · Nav horizontal de filtragem por período. Full-bleed (sem padding lateral), com scroll horizontal quando os itens excedem a largura. Item selecionado vira retângulo `corner-radius-md` sobre `primary-pure`; demais são pílulas sobre `gray-0` com texto `gray-50`. Tipografia Saira bold italic 14/20 uppercase.

Bottom Sheet

Figma 4421-16739 · Folha modal ancorada no rodapé com overlay escuro, cantos superiores 24, sombra `0 -12px 12px`, animação de slide, botão FECHAR flutuante e home indicator. Comportamento mobile-first.

Action Modal

Figma 4508-27893 · Modal centralizado com overlay escuro (`gray-100` 60%), card `gray-0` radius 24, ícone destacado 72×72 em `feedback-negative`, título Saira bold italic vermelho, descrição Red Hat Display 14/20 e CTA `Button variant='border' size='lg'` full-width. Botão X flutuante acima do card (top -39, right 10).

Effort Rating

Figma 4496-25291 · Percepção de esforço (feedback pós-treino). 5 níveis (😌 🙂 😐 😓 🥵). Selecionado vira círculo primary-pure 56 com emoji 34; demais 40 com emoji 28. Legenda troca ao mudar.

Round Button

Figma 1355-502 · Botão circular (ícone). 4 tipos × 3 tamanhos × enabled/disabled. Padding: sm=8 / md=16 / lg=24. Ícone: sm·md=24 / lg=32. Default icon = run (Tabler).

Avatar

Figma 2401-12227 · Sizes lg (80) / md (68). Estado enabled muda a cor da borda. Photo vs iniciais. Badge: lg = pencil (editar), md = trophy (enabled colore o badge).

Workout Card

Figma 1462-2106 · Card de treino com 3 estados (success / pending / fail). Mesmo componente, variantes via prop.

Next Workout

Figma 4444-75280 · Seção 'Próximo Treino' da home do atleta. Duas variações: empty state (sem treino) e agendado (dia + WorkoutCard + botão 'VER MEUS TREINOS'). O WorkoutCard reutilizado carrega os 3 status (success / pending / fail).

Workout Date Sheet

Figma 4470-20437 · Folhinha de calendário usada no cabeçalho da página do treino. Mesmas 3 variantes do WorkoutCard (pending / success / fail) — success adiciona badge verde com ícone Run; fail adiciona badge branco com borda dashed e X.

Workout Summary Card

Figma 4472-20657 · Card com resumo do treino: linhas divididas por borda tracejada, algumas com barra de progresso comparando realizado × planejado. Base do componente — variações/estados por status virão em seguida.

Workout Step

Figma 4478-21022 / 4478-21027 · Etapa de treino na seção Descrição. Formato simples (pill cinza com label + valores em negrito separados por •) ou em bloco 'Repetir Nx' agrupando 2+ itens dentro de uma borda cinza.

Task List

Figma 4443-74879 · Lista vertical de tarefas com timeline. Estado done → botão Editar (text); pending → botão Acessar (border). O conector entre dois itens é verde se ambos forem done, cinza caso contrário.

Home Week Mark

Figma 1418-2387 · Célula de dia da semana (topo do app do atleta). today = card branco 64px / dia 28px; demais = pílula translúcida 48px / dia 16px. Mark: dot (rest), run (planned/success), x dashed (fail). success usa secondary.pure da marca.

Week Day Mark

Figma 1418-2829 · Célula compacta de dia (28×46) sobre fundo claro. Estrutura vertical: ponto (today) + CalendarMark chip + letra do dia. Delega o marcador ao CalendarMark (chip + onLight) — ajustes de estado feitos lá refletem aqui.

Calendar Mark

Figma 1418-2166 · Marcador 28px do calendário. Renderizado sobre fundo escuro. Estados: Dot (descanso) · Icon+trainingDay (pendente) · Icon+success (concluído) · Icon+fail (perdido) · Number (número do dia) · Empty (placeholder). today adiciona anel branco por cima.

Month Calendar

Figma 1418-2166 · Calendário mensal (modalidade corrida) + resumo lateral. Consome CalendarMark para todas as células. Renderize sobre fundo escuro (primary).

Message Box

Figma 1372-1183 · Borda escura 2px aparece ao focar o campo. Botão de envio ativa (cor escura) quando há texto.

Trainer Message

Figma 1386-1521 · Mensagem do treinador com avatar 44px (borda accent), balão cinza-25 e timestamp abaixo. Suporta 3 formatos: texto puro, com vídeo (thumbnail + play + label + duração) e com áudio (play + waveform + duração).

Action Card

Figma 4508-27880 · Card inline em `gray-25` radius `md`, padding 16, gap 20. Ícone 56×56 em `feedback-negative` radius `md`, título Saira bold italic 16/20 vermelho, descrição Red Hat 14/20 `gray-100` e CTA `Button variant='primary' size='lg'` full-width (fundo `bg-dark`). Versão não-modal do ActionModal.

Trainer Card

Figma 4512-27967 · Card inline em `gray-25` radius `md`, padding 20, gap 20. Avatar 56×56 circular em `primary-pure` com borda 2px `secondary-pure` e IconUser branco. Título Saira bold italic 20/24 `gray-100`, subtítulo Red Hat 14/20 `gray-100`. CTA `Button variant='primary' size='lg'` full-width com IconBrandWhatsapp.

Toast

Notificação transitória posicionada em `top-center` (não conflita com bottom nav do PWA). Wrapper do Sonner com tokens DS: fundo `gray-0`, borda-esquerda 4px na cor da variante, título Saira semibold, descrição Red Hat 12/16 em `gray-75`, botão fechar circular. Use `dsToast.success | .error | .warning | .info` — mantenha o título curto e a descrição opcional para contexto.

Ícones · Tabler

Biblioteca padrão do DS: @tabler/icons-react. Use stroke={1.5–2.4} para alinhar com o peso visual da marca. shadcn primitives continuam com lucide.

Cores · Marca

Cores · Gray

Cores · Semânticas

Tipografia · Famílias

Tipografia · Escala

Spacing

Raios