Design System

Tokens, tipografia, ícones e componentes do app do jogador. Tudo aqui sai do mesmo arquivo do Figma e já funciona em código.

Ver componentes

Interfamília única

#113FF5primária

#E3BE38secundária

48 íconesPhosphor, traço editável

Cores

As primitivas geram as escalas. Os componentes usam só os tokens semânticos, que mudam de valor no modo escuro. Clique em qualquer cor para copiar.

Primária blue

Secundária yellow

Neutros neutral

Sucesso green

Alerta orange

Erro red

Tokens semânticos

Clique para copiar a variável CSS

Fundo

Texto

Borda

Ícone

Tipografia

Inter em 21 estilos. Entrelinha e tracking são proporcionais ao tamanho do texto.

Semi Bold · 48px · 115% · -4%

Reserve sua quadra em segundos

Medium · 36px · 120% · -4%

Reserve sua quadra em segundos

Medium · 28px · 125% · -3%

Reserve sua quadra em segundos

Semi Bold · 24px · 130% · -2%

Reserve sua quadra em segundos

Semi Bold · 20px · 130% · -1%

Reserve sua quadra em segundos

Semi Bold · 18px · 135% · -1%

Reserve sua quadra em segundos

Regular · 18px · 150% · -2%

Reserve sua quadra em segundos

Regular · 15px · 150% · -2%

Reserve sua quadra em segundos

Regular · 13px · 150% · 0%

Reserve sua quadra em segundos

Semi Bold · 18px · 150% · -2%

Reserve sua quadra em segundos

Semi Bold · 15px · 135% · -2%

Reserve sua quadra em segundos

Semi Bold · 13px · 150% · 0%

Reserve sua quadra em segundos

Medium · 15px · 130% · 0%

Reserve sua quadra em segundos

Medium · 13px · 130% · 0%

Reserve sua quadra em segundos

Medium · 11px · 130% · 0%

Reserve sua quadra em segundos

Semi Bold · 20px · 120% · -2%

Reserve sua quadra em segundos

Semi Bold · 16px · 120% · -2%

Reserve sua quadra em segundos

Semi Bold · 12px · 120% · 0%

Reserve sua quadra em segundos

Regular · 12px · 140% · -1%

Reserve sua quadra em segundos

Semi Bold · 12px · 140% · -1%

Reserve sua quadra em segundos

Semi Bold · 11px · 130% · 8%

Reserve sua quadra em segundos

Espaço, raio e sombra

Todo padding e gap vem da escala de espaço, e todo canto vem da escala de raio.

space/00px

space/22px

space/44px

space/88px

space/1212px

space/1616px

space/2020px

space/2424px

space/3232px

space/4040px

space/4848px

space/6464px

radius/none0px

radius/xs4px

radius/sm8px

radius/md12px

radius/lg16px

radius/xl24px

radius/full999px

Shadow/Small

Shadow/Medium

Shadow/Large

Ícones

48 ícones Phosphor em duas versões. O Regular é traço de verdade: a espessura segue o token icon/stroke. Clique para copiar o SVG.

Espessura do traço 1,5px

Tamanho 28px

Componentes

Os mesmos componentes do Figma, montados com os tokens acima. Todos respondem a clique, teclado e ao modo escuro.

Ações

Button

Primary para a ação principal da tela. Secondary para ações de apoio. Outline e Ghost para o resto.

Large 72px · padding space/24 space/32 · radius/xl · Button/Large. Medium · padding space/20 space/24 · Button/Medium.

Icon Button

40×40 para app bar e ações compactas. O coração alterna.

Chip

Filtros de seleção múltipla.

Select Button

Escolha única em onboarding e preferências.

Formulários

Text Field

Digite um e-mail inválido e saia do campo para ver o estado de erro.

E-mail

Usaremos para confirmar suas reservas

Senha

CPF

Search Bar e Segmented Control

Busca principal e alternância entre duas visões.

Payment Method

Radio em forma de linha.

PixAprovação na hora Cartão de créditoVisa final 4242 Carteira Tennis NowSaldo R$ 40,00

Court Surface Select

Tipo de piso da quadra.

Navegação

App Bar e Tab Bar

Topo e navegação principal. Clique nas abas.

Detalhes da quadra

Progress Bar

Arraste para ver o preenchimento. Fica verde ao completar.

Perfil completo50%

Passo 2 de 450%

Status e identidade

Badge

Status da reserva. Sempre fundo suave com texto forte.

AulaDestaqueConfirmadaPendenteCanceladaEncerrada

Avatar

Iniciais do jogador ou professor, em três tamanhos.

MSMSMSLFAR+3

Rank

Depoimento de aluno com nota.

LF

Lucas F.

“Evoluí meu saque em 3 aulas. O professor explica sem enrolação.”

Cards e listas

Court Card

Card de quadra para carrosséis.

Saibro

Arena Aldeota

Aldeota · 2,1 km

4,8R$ 90/h

Booking Card

Próximo jogo agendado.

Confirmada

PlayTennis Morumbi

Sáb, 14 set · 18:00–19:00Quadra 2 · Saibro

MSLF

List Item e Invite Strip

Menus de perfil e convite.

Summary Row

Resumo de valores no pagamento.

Quadra (1h)R$ 90,00

Taxa de serviçoR$ 5,00

TotalR$ 95,00

Reserva

Date Chip e Time Slot

Escolha a data e o horário. Horários riscados estão ocupados.

Sáb, 14 · 18:00

Tokens

Os mesmos valores das variáveis do Figma, prontos para colar no projeto. O modo escuro entra com data-theme="dark" no elemento raiz.

:root {
  --yellow-50: #FDFAEF;
  --yellow-100: #FBF5DF;
  --yellow-200: #F6EABF;
  --yellow-300: #F0DD98;
  --yellow-400: #EACE68;
  --yellow-500: #E3BE38;
  --yellow-600: #C3A432;
  --yellow-700: #A38A2D;
  --yellow-800: #846F27;
  --yellow-900: #645521;
  --blue-50: #ECF0FE;
  --blue-100: #D9E0FD;
  --blue-200: #B3C2FC;
  --blue-300: #839BFA;
  --blue-400: #4A6DF7;
  --blue-500: #113FF5;
  --blue-600: #1138D3;
  --blue-700: #1031B1;
  --blue-800: #102A8F;
  --blue-900: #10226D;
  --green-50: #EDF7F1;
  --green-100: #DBEFE4;
  --green-200: #B7E0C9;
  --green-300: #8BCCA7;
  --green-400: #55B57E;
  --green-500: #1F9D55;
  --green-600: #1D884B;
  --green-700: #1A7241;
  --green-800: #185D37;
  --green-900: #16482D;
  --orange-50: #FDF5ED;
  --orange-100: #FBECDB;
  --orange-200: #F8D9B7;
  --orange-300: #F3C18A;
  --orange-400: #EEA454;
  --orange-500: #E8871E;
  --orange-600: #C7751C;
  --orange-700: #A7631A;
  --orange-800: #865119;
  --orange-900: #663F17;
  --red-50: #FDF0EF;
  --red-100: #FAE1DF;
  --red-200: #F5C3C0;
  --red-300: #EF9D99;
  --red-400: #E77069;
  --red-500: #E0433A;
  --red-600: #C13B34;
  --red-700: #A1332E;
  --red-800: #822C28;
  --red-900: #632422;
  --neutral-0: #FFFFFF;
  --neutral-50: #F7F7F8;
  --neutral-100: #EFEFF1;
  --neutral-200: #E2E2E5;
  --neutral-300: #C9C9CE;
  --neutral-400: #9D9DA4;
  --neutral-500: #71717A;
  --neutral-600: #52525A;
  --neutral-700: #3A3A40;
  --neutral-800: #27272B;
  --neutral-900: #18181B;
  --neutral-950: #0E0E10;
  --color-bg-canvas: var(--neutral-50);
  --color-bg-surface: var(--neutral-0);
  --color-bg-raised: var(--neutral-100);
  --color-bg-muted: var(--neutral-200);
  --color-bg-inverse: var(--neutral-900);
  --color-bg-disabled: var(--neutral-200);
  --color-bg-primary: var(--blue-500);
  --color-bg-primary-hover: var(--blue-600);
  --color-bg-primary-subtle: var(--blue-50);
  --color-bg-secondary: var(--yellow-500);
  --color-bg-secondary-hover: var(--yellow-600);
  --color-bg-secondary-subtle: var(--yellow-50);
  --color-bg-success-subtle: var(--green-50);
  --color-bg-warning-subtle: var(--orange-50);
  --color-bg-error-subtle: var(--red-50);
  --color-bg-success: var(--green-500);
  --color-bg-warning: var(--orange-500);
  --color-bg-error: var(--red-500);
  --color-text-primary: var(--neutral-900);
  --color-text-secondary: var(--neutral-600);
  --color-text-tertiary: var(--neutral-500);
  --color-text-disabled: var(--neutral-400);
  --color-text-inverse: var(--neutral-0);
  --color-text-on-primary: var(--neutral-0);
  --color-text-on-secondary: var(--neutral-900);
  --color-text-brand: var(--blue-500);
  --color-text-accent: var(--yellow-700);
  --color-text-success: var(--green-700);
  --color-text-warning: var(--orange-700);
  --color-text-error: var(--red-600);
  --color-border-subtle: var(--neutral-100);
  --color-border-default: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-border-primary: var(--blue-500);
  --color-border-secondary: var(--yellow-500);
  --color-border-focus: var(--blue-500);
  --color-border-error: var(--red-500);
  --color-icon-primary: var(--neutral-900);
  --color-icon-secondary: var(--neutral-500);
  --color-icon-disabled: var(--neutral-400);
  --color-icon-inverse: var(--neutral-0);
  --color-icon-on-primary: var(--neutral-0);
  --color-icon-on-secondary: var(--neutral-900);
  --color-icon-brand: var(--blue-500);
  --color-icon-accent: var(--yellow-500);
  --color-icon-success: var(--green-600);
  --color-icon-warning: var(--orange-600);
  --color-icon-error: var(--red-500);
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(15,15,18,.06), 0 1px 3px rgba(15,15,18,.08);
  --shadow-md: 0 4px 12px rgba(15,15,18,.08), 0 2px 4px rgba(15,15,18,.04);
  --shadow-lg: 0 12px 32px rgba(15,15,18,.12), 0 4px 8px rgba(15,15,18,.04);
  --icon-stroke: 1.5px;
}
[data-theme="dark"] {
  --color-bg-canvas: #0E0E10;
  --color-bg-surface: #18181B;
  --color-bg-raised: #27272B;
  --color-bg-muted: #3A3A40;
  --color-bg-inverse: #FFFFFF;
  --color-bg-disabled: #27272B;
  --color-bg-primary: #4A6DF7;
  --color-bg-primary-hover: #839BFA;
  --color-bg-primary-subtle: #10226D;
  --color-bg-secondary: #EACE68;
  --color-bg-secondary-hover: #F0DD98;
  --color-bg-secondary-subtle: #645521;
  --color-bg-success-subtle: #16482D;
  --color-bg-warning-subtle: #663F17;
  --color-bg-error-subtle: #632422;
  --color-bg-success: #55B57E;
  --color-bg-warning: #EEA454;
  --color-bg-error: #E77069;
  --color-text-primary: #F7F7F8;
  --color-text-secondary: #C9C9CE;
  --color-text-tertiary: #9D9DA4;
  --color-text-disabled: #52525A;
  --color-text-inverse: #18181B;
  --color-text-on-primary: #FFFFFF;
  --color-text-on-secondary: #18181B;
  --color-text-brand: #839BFA;
  --color-text-accent: #EACE68;
  --color-text-success: #8BCCA7;
  --color-text-warning: #F3C18A;
  --color-text-error: #EF9D99;
  --color-border-subtle: #27272B;
  --color-border-default: #3A3A40;
  --color-border-strong: #52525A;
  --color-border-primary: #4A6DF7;
  --color-border-secondary: #EACE68;
  --color-border-focus: #839BFA;
  --color-border-error: #E77069;
  --color-icon-primary: #F7F7F8;
  --color-icon-secondary: #9D9DA4;
  --color-icon-disabled: #52525A;
  --color-icon-inverse: #18181B;
  --color-icon-on-primary: #FFFFFF;
  --color-icon-on-secondary: #18181B;
  --color-icon-brand: #839BFA;
  --color-icon-accent: #EACE68;
  --color-icon-success: #8BCCA7;
  --color-icon-warning: #F3C18A;
  --color-icon-error: #EF9D99;
}
.t-display-large{font-size:48px;line-height:1.15;letter-spacing:-0.04em;font-weight:600;}

.t-display-small{font-size:36px;line-height:1.20;letter-spacing:-0.04em;font-weight:500;}

.t-heading-h1{font-size:28px;line-height:1.25;letter-spacing:-0.03em;font-weight:500;}

.t-heading-h2{font-size:24px;line-height:1.30;letter-spacing:-0.02em;font-weight:600;}

.t-heading-h3{font-size:20px;line-height:1.30;letter-spacing:-0.01em;font-weight:600;}

.t-heading-h4{font-size:18px;line-height:1.35;letter-spacing:-0.01em;font-weight:600;}

.t-body-large{font-size:18px;line-height:1.50;letter-spacing:-0.02em;font-weight:400;}

.t-body-medium{font-size:15px;line-height:1.50;letter-spacing:-0.02em;font-weight:400;}

.t-body-small{font-size:13px;line-height:1.50;letter-spacing:0.00em;font-weight:400;}

.t-body-large-strong{font-size:18px;line-height:1.50;letter-spacing:-0.02em;font-weight:600;}

.t-body-medium-strong{font-size:15px;line-height:1.35;letter-spacing:-0.02em;font-weight:600;}

.t-body-small-strong{font-size:13px;line-height:1.50;letter-spacing:0.00em;font-weight:600;}

.t-label-large{font-size:15px;line-height:1.30;letter-spacing:0.00em;font-weight:500;}

.t-label-medium{font-size:13px;line-height:1.30;letter-spacing:0.00em;font-weight:500;}

.t-label-small{font-size:11px;line-height:1.30;letter-spacing:0.00em;font-weight:500;}

.t-button-large{font-size:20px;line-height:1.20;letter-spacing:-0.02em;font-weight:600;}

.t-button-medium{font-size:16px;line-height:1.20;letter-spacing:-0.02em;font-weight:600;}

.t-button-small{font-size:12px;line-height:1.20;letter-spacing:0.00em;font-weight:600;}

.t-caption-regular{font-size:12px;line-height:1.40;letter-spacing:-0.01em;font-weight:400;}

.t-caption-strong{font-size:12px;line-height:1.40;letter-spacing:-0.01em;font-weight:600;}

.t-overline{font-size:11px;line-height:1.30;letter-spacing:0.08em;font-weight:600;text-transform:uppercase;}