Barbershop Master

Foundation / 3A

Development style guide

Fundação pronta para crescer sem perder coerência.

Tokens, contratos de dados e primitives do sistema dark-first. Esta página existe somente para validação interna; não é a landing final.

Escopo atual

React + TypeScript + Vite
Tailwind CSS 4
Mobile-first
Sem APIs ou banco

01 / Tokens

Cores com função

Neutros estruturam o produto. Bronze identifica marca e ação. Cores funcionais permanecem estáveis entre clientes.

Background Primary

--background-primary

#0B0C0C

Background Secondary

--background-secondary

#111313

Surface

--surface

#171A19

Surface Elevated

--surface-elevated

#202421

Surface Inverse

--surface-inverse

#F2EFE7

Text Primary

--text-primary

#F6F3EC

Text Secondary

--text-secondary

#B7B4AC

Text Muted

--text-muted

#8E8C85

Border

--border-subtle

#343936

Border Strong

--border-strong

#59605B

Accent

--brand-accent

#D0A15E

Accent Hover

--brand-accent-hover

#E0B777

Accent Active

--brand-accent-active

#B98645

Focus

--focus-ring

#F2C879

Success

--status-success

#48B982

Warning

--status-warning

#DCA447

Error

--status-error

#DE6A62

Info

--status-info

#6FA8D8

02 / Tipografia

Expressão e legibilidade

Bodoni Moda assume títulos; Inter sustenta conteúdo, controles, números e formulários.

Display XL / 700

Presença

H1 / 700

Precisão em cada detalhe

H2 / 700

Um sistema, muitas identidades

H3 / 600

Clareza antes da ornamentação

Body Large

Uma introdução curta pode carregar ritmo editorial sem comprometer a leitura.

Body / Small

O corpo mantém 16px, line-height confortável e contraste previsível.

Metadados usam 14px e nunca carregam informação crítica sozinhos.

03 / Layout

Uma escala, não exceções

Containers nomeados, spacing compartilhado e grid 4/8/12 evitam alinhamentos arbitrários.

Small

760px

Formulários e leitura

Content

1200px

Conteúdo geral

Wide

1440px

Grids e mídia editorial

Full

100%

Fundos e faixas

Responsive Grid

Spacing

4

8

12

16

24

32

48

64

80

96

128

160

04 / Ações

Estados reconhecíveis

Todos os controles respeitam alvos mínimos, foco visível, loading e disabled reais.

Ir para formulários

Focus-visible faz parte do contrato

Navegue com Tab para validar o anel de foco em fundos escuros.

05 / Forms

Entrada sem ambiguidade

Labels persistem, erros ficam ligados ao campo e o teclado móvel recebe o tipo correto.

Aceito receber atualizações desta reserva

Princípios

• Campo essencial nunca depende de placeholder.
• Erro aparece próximo ao controle e é anunciado.
• Disabled usa atributo real.
• Controles mantêm altura mínima de 48px.

06 / Feedback

O sistema sempre responde

Loading, vazio, erro e sucesso possuem mensagens e caminhos de recuperação próprios.

Configuração válida

Os tokens foram aplicados.

Atenção necessária

Revise o contraste do accent personalizado.

Não foi possível continuar

Preserve os dados e ofereça nova tentativa.

Informação contextual

Mensagens não dependem apenas da cor.

Nenhum item

A ausência é esperada e possui uma próxima ação.

Falha recuperável

Explique o problema sem culpar o usuário.

Ação concluída

A confirmação permanece disponível em texto.

Loading state

07 / Responsive Media

Crop sob controle

O asset carrega dimensões, tratamento e focal point por breakpoint. O placeholder abstrato valida o primitive sem reutilizar as referências.

FocalImage

A imagem se adapta sem perder o foco.

Tratamentos

Natural warm, editorial neutral, monochrome e dark overlay.

Lazy por padrão. Priority somente para LCP.

Foundation checkpoint

Fundação preservada para consulta e evolução.

Tokens, primitives e contratos continuam disponíveis nesta rota interna de desenvolvimento.