Propósito
A rotina primeiro
Tudo começa em onde, quando e quanto tempo a pessoa treina. O quiz decide, a página confirma. Nada de catálogo para decifrar.
Guideline
A regra de cada página.
O sistema de marca e interface do site DynamicFit by Diana. Tudo o que for construído parte daqui: tokens, componentes, movimento e a sequência do quiz até à compra.
- Manual de marca
- Rascunho da sequência
- Emil Kowalski
- Apple Design
Princípios
Confiança com energia
É isto que a pessoa deve sentir: alguém que sabe o que está a fazer tratou da decisão por ela. Todas as escolhas abaixo reforçam essa sensação.
Simplicidade
Uma decisão por ecrã
Cada ecrã tem uma ação principal e uma resposta clara à pergunta: e agora? O caminho comum aparece primeiro; o resto fica um nível abaixo.
Hierarquia
Marca forte, interface calma
Future Edge e cor plena ficam para os momentos de impacto. Ler e escolher acontece em Onest, com superfícies limpas.
Craft
O detalhe que não se vê
Cada espaço, tempo e curva vem de uma escala. A interface responde no toque e pode ser interrompida a qualquer momento.
Idioma: português de Portugal, com tratamento por tu: telemóvel, ginásio, ecrã, treinas. As frases do manual em português do Brasil são adaptadas, como “Encontra a tua força”.
Logo
Marca sem reinvenção
Usar sempre os ficheiros de /public/brand. O logo nunca é redesenhado em texto, mesmo existindo a fonte.
Símbolo e avatares
Abaixo da largura mínima do logo, usar o símbolo. Avatares são para redes sociais e favicon, nunca dentro de uma página.
Área livre e tamanho mínimo
- Margem livre: metade da altura do logo, em todos os ladosProposta
- Largura mínima de 160 px; abaixo disso, símbolo D²Proposta
- Não distorcer, rodar, contornar nem aplicar sombraProposta
Cor
Força e equilíbrio
As duas cores têm significado, e o manual mostra isso nas aplicações: verde para força, lilás para equilíbrio. Uma cor de marca domina cada secção.
Verde
Força, ação e chamadas principais. D² Gym.
Lilás
Equilíbrio, bem-estar e apoio. D² Home.
PretoManual
#000000 · Fundo principal
BrancoManual
#FFFFFF · Texto sobre preto, bandas claras
GrafiteManual
#333333 · Bandas de apoio
TintaProposta
#141414 · Cartões sobre preto
Texto suaveProposta
#A8A8A8 · Texto secundário sobre preto
Contraste
Calculado com a fórmula WCAG a partir das cores. Mínimo de 4,5:1 para texto e 3:1 para títulos a partir de 24 px. O cinzento das legendas do manual falha em texto pequeno sobre preto; por isso existe o Texto suave.
| Texto ↓ / Fundo → | Preto | Branco | Verde | Lilás | Grafite |
|---|---|---|---|---|---|
| Preto | — | 21,0:1Texto | 18,4:1Texto | 14,4:1Texto | 1,7:1Não usar |
| Branco | 21,0:1Texto | — | 1,1:1Não usar | 1,5:1Não usar | 12,6:1Texto |
| Verde | 18,4:1Texto | 1,1:1Não usar | — | 1,3:1Não usar | 11,0:1Texto |
| Lilás | 14,4:1Texto | 1,5:1Não usar | 1,3:1Não usar | — | 8,7:1Texto |
| Grafite | 1,7:1Não usar | 12,6:1Texto | 11,0:1Texto | 8,7:1Texto | — |
Tipografia
Duas vozes
Future Edge fala alto: títulos, botões e etiquetas. Onest explica: leitura e interface. Os valores abaixo foram medidos diretamente no PDF do manual.
Principal
Future Edge
ABCDEFGHIJKLMNOPQRSTUVWXYZ ÁÃÂÉÊÍÓÕÔÚÇ 0123456789 €×
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Secundária
Onest
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Regular e Bold, os dois pesos do manual
Escala Future Edge
Sempre em maiúsculas. Itálico nos títulos, romano com tracking nas etiquetas.
Display 148–160 px · 1,04 · −0,01 emHero, uma vez por página
Find your match
Display 236–104 px · 1,04 · 0Título de secção
Três packs
Título 132–60 px · 1,04 · +0,01 emChamadas e nome do pack
Encontra a tua força.
Título 224–32 px · 1,06 · +0,02 emSubtítulos
Dias corridos
Título 320 px · 1,1 · +0,03 emRótulos de cartão
Treino B
Etiqueta12 px · 1,3 · +0,33 em · romanaAntetítulos e categorias
Para quem treina em casa
Botão13–17 px · +0,06 a +0,04 emQuanto menor, mais aberto
Escala Onest
Pergunta26 px · 1,2 · −0,015 em · Bold
Quantos dias por semana consegues reservar?
Destaque18–22 px · 1,4 · −0,01 em · Regular
O plano de treino que cabe na tua rotina real.
Corpo16 px · 1,55 · 0 · Regular ou Bold
Não precisas de mudar a tua vida para treinar.
Pequeno14 px · 1,5 · 0
Compra única, sem mensalidade, acesso no telemóvel.
Legenda12 px · 1,5 · +0,01 em
Sem registo. O resultado aparece no fim.
Medido no manual
| Aplicação | Corpo no PDF | Tracking | Entrelinha |
|---|---|---|---|
| Logo DYNAMICFIT | 198 | −0,04 em | — |
| BY DIANA | 52 | +0,325 em | — |
| Etiquetas | 14,6 | +0,32 a +0,35 em | — |
| Título Future Edge | 165 | −0,018 em | — |
| Título de Reels | 47,7 | 0 | 0,94 |
| Tipografia gigante | 261–442 | −0,04 a +0,04 em | — |
| Onest grande | 137 | −0,073 em | — |
Regras
- Tracking por corpo: a Future Edge já nasce fechada, por isso abre à medida que o texto diminui. Os −0,04 em são exclusivos do logo e da tipografia gigante.
- Entrelinha mínima de 1,04 nos títulos: os acentos sobem até 0,99 em. Os 0,94 do manual só funcionam em texto sem acentos.
- O algarismo 1 da Future Edge parece um I. Preços e números importantes ficam em Onest Bold.
- só em valores que mudam em coluna. Em números estáticos abre buracos à volta do 1.
- Destacar uma palavra com cor, como no logo. Não misturar Onest dentro de títulos.
- Escrever sempre com acentos: a fonte cobre todo o português. O manual tem EQUILIBRIO sem acento; no site é EQUILÍBRIO.
- A Future Edge não tem os glifos ², ·, →, « e ». Usar o componente PackName para D² e / como separador.
- Não usar Future Edge em parágrafos, formulários ou texto abaixo de 12 px.
- Peso único: nunca aplicar font-bold à Future Edge.
Espaço
Ritmo com escala
O manual define o espaçamento entre letras, medido na secção anterior, mas não define grelha de página. Esta escala foi criada para acompanhar a mesma sensação: blocos densos com muito ar à volta.
Escala
PropostaUsar apenas estes passos do Tailwind. Em rem, para crescerem com o texto do utilizador.
- 14 pxÍcone e rótulo
- 28 pxElementos ligados
- 312 pxLista de opções
- 416 pxInterno compacto
- 624 pxInterno de cartão
- 832 pxInterno de cartão, desktop
- 1248 pxEntre grupos
- 1664 pxTítulo e conteúdo
- 2496 pxEntre blocos grandes
Página
Proposta| Token | Valor | Uso |
|---|---|---|
| --gutter | 16–56 px | Margem lateral |
| --space-section | 80–160 px | Topo e base de secção |
| --container | 1280 px | Largura máxima |
| Texto corrido a 16 px | 36 rem | Máximo de cerca de 75 caracteres |
| Alvo de toque | 44 px | Mínimo em qualquer controlo |
| Entre | Valor | Classe |
|---|---|---|
| Etiqueta e título | 16 px | mb-4 |
| Título grande e texto | 20–32 px | after-title |
| Título de cartão e texto | 12 px | gap-3 |
| Parágrafos | 16 px | gap-4 |
| Linhas de lista | 12 px | py-3 |
| Texto e chamada | 24–32 px | gap-6 a gap-8 |
Grelha de 4, 8 e 12 colunas, com intervalo de 8 px em cartões e 16 px em secções.
Forma
Inclinação e corte
A marca inclina-se para a frente. Os três ângulos e o raio abaixo saem do manual e devem repetir-se sem variações.
Encontra a tua força.
Raios
xl · 24 px
lg · 16 px
md · 12
full
- Raio base medido: 24 px num módulo de 405 px, cerca de 6% do lado.
- Raios concêntricos: raio interno = raio externo − padding.
- Botões e chips em forma de pílula, ecoando o círculo do símbolo.
- Separar por espaço e superfície antes de recorrer a linhas.
Imagem
Referências do manual. Força: ginásio escuro e luz dura. Equilíbrio: luz natural e ambiente quente. No site, usar fotografias reais da Diana; sobre imagem, escurecer o suficiente para manter 4,5:1.
Componentes
As mesmas peças
Cada banda define data-surface e os componentes recolorem sozinhos. Trocar a superfície abaixo mostra exatamente o que acontece em cada uma.
O que recebes
Dias corridos? Faz só o Base.
Cada treino vem em Base + Extra, para os dias com menos ou mais tempo.
D² Flex
4 treinos-baseBase + ExtraVídeos da Diana
Cartões de pack
Em casa
D² Home
Plano estruturado e simples, pensado para pouco ou nenhum equipamento.
- 4 treinos-base
- 2x, 3x ou 4x por semana
- Vídeos de execução
De 50€ por 20€
No ginásio
D² Gym
Chega ao ginásio a saber exatamente que treino fazer, que máquinas usar e quantas séries.
- 4 treinos-base
- 2x, 3x ou 4x por semana
- Vídeos de execução
De 50€ por 20€
Casa + ginásio
D² Flex
A tua semana muda, o plano continua. Cada exercício tem a versão casa e a versão ginásio.
- 4 treinos-base
- 2x, 3x ou 4x por semana
- Vídeos de execução
De 100€ por 35€
Cada pack tem superfície própria: Home em lilás, Gym em verde, Flex em preto. O preço de cada pack vem de PACKS, em lib/quiz.ts.
Quiz funcional
Este é o componente real, com as perguntas e a lógica do rascunho. Experimentar avançar, voltar a meio e refazer.
- Uma pergunta por ecrã; um toque avança, sem botão de continuar.
- Voltar preserva as respostas e entra pelo lado oposto.
- Sem registo antes do resultado.
- A transição final dura no máximo 800 ms e nunca simula cálculo.
- O resultado ocupa a superfície do pack: a cor confirma a resposta.
- O foco acompanha cada passo, para teclado e leitores de ecrã.
1/4
Onde consegues realmente treinar na maior parte da semana?
Sem registo. O resultado aparece no fim.
Movimento
Rápido e físico
Cada animação precisa de um motivo: responder, orientar ou evitar uma mudança brusca. Se for vista muitas vezes por dia, fica mais curta ou desaparece.
Curvas
--ease-brand · 240 msEntradas e resposta
--ease-move · 300 msMovimento no ecrã
--ease-drawer · 320 msFolhas e gavetas
ease-in · 240 msProibido: atrasa a resposta
Carregar a meio do percurso: a transição inverte a partir do ponto atual, sem saltar.
Quanto animar
| Interação | Duração | Curva |
|---|---|---|
| Toque em botão | 120 ms | --ease-brand, scale(0.97) |
| Hover e cor | 160 ms | ease |
| Passo do quiz, entradas | 240 ms | --ease-brand |
| Folha ou gaveta | 320 ms | --ease-drawer |
| Arrasto | Mola | bounce 0, duração 0,4 s |
| Lançamento com inércia | Mola | bounce 0,2, duração 0,4 s |
| Atalhos de teclado | Nenhuma | — |
Cascata
Em casa3 dias30 a 45 minQuero estrutura
50 ms entre itens. Nunca bloqueia o clique.
- Responder ao pressionar, não ao soltar.
- Animar só transform e opacity. Nunca usar transition: all.
- Entrar de scale(0.95) com opacity 0; nunca de scale(0).
- Popovers crescem a partir do gatilho; modais ficam centrados.
- Sair é mais rápido do que entrar.
- Sair pelo mesmo caminho por onde entrou.
- Arrastos seguem o dedo 1:1 e herdam a velocidade ao soltar.
- Limites têm resistência elástica, nunca paragem seca.
- Hover só em dispositivos com ponteiro.
- Com reduced-motion, trocar deslocações por fades curtos.
Sequência
Do quiz à compra
A ordem vem do rascunho; a aparência vem deste guideline. O rascunho serve para a sequência e não para valores visuais.
1
Landing
Toda a página conduz ao quiz.
2
Quiz
Quatro perguntas, cerca de um minuto.
3
Resultado
Pack recomendado na superfície dele.
4
Compra
Checkout alojado por um serviço externo.
5
Treino
Card com Base, Extra, vídeos e troca casa/ginásio.
Landing, por ordem
- 01CabeçalhoLogo, navegação e chamada para o quiz
- 02HeroVídeo da Diana, promessa e chamada principal
- 03ManifestoCasa. Ginásio. Ou os dois.
- 04ProblemaTreinos que não cabem não funcionam
- 05Como funcionaResponde, descobre, treina
- 06Os três packsD² Home, D² Gym e D² Flex
- 07O que recebesBase + Extra e vídeos no telemóvel
- 08QuizA primeira pergunta já na página
- 09A DianaQuem está por trás e credenciais
- 10TestemunhosApenas testemunhos reais
- 11PreçosCompra única, sem mensalidade
- 12Fecho e rodapéÚltima chamada e informação legal
Lógica do quiz
| Se | Então |
|---|---|
| Treina em casa e ginásio, ou a rotina muda muito | D² Flex |
| Treina em casa | D² Home |
| Treina no ginásio | D² Gym |
| Dias e tempo | Definem o plano dentro do pack |
O que muda face ao rascunho
| Rascunho | Guideline |
|---|---|
| Archivo | Future Edge |
| #0B0B0B e creme #F4F0E8 | #000000 e #FFFFFF |
| Onest a meio de títulos | Destaque por cor |
| Logótipo D² MATCH em texto | Logo oficial em SVG |
| Espera de 2,2 s no quiz | Transição até 800 ms |
Falta receber
- Link de checkout de cada pack
- Fotografias e vídeos reais da Diana
- Bio, credenciais e testemunhos reais
- Lista final de exercícios e equipamento
Técnica
Estático por agora
Cloudflare Pages serve apenas ficheiros estáticos, e isso define o que cada página pode fazer.
| Item | Valor |
|---|---|
| Next.js | output: "export" |
| Imagens | images.unoptimized: true; exportar já em WebP |
| Comando de build | npm run build |
| Pasta publicada | out |
| Fontes | Alojadas no próprio site, em WOFF2 |
| Tokens | app/globals.css |
| Componentes | components/brand e components/ui |
- Sem Server Actions, redirects, rewrites, cookies ou rotas dinâmicas sem generateStaticParams.
- O quiz corre inteiro no browser; nenhuma resposta é enviada.
- Pagamento por checkout externo, com link por pack.
- A área de treino pós-compra precisa de proteção própria: num site estático, qualquer URL é pública.
- Vídeos em loop devem ser curtos, comprimidos e com poster.