Vytal · Styleguide
vytal.
Um sinal vital para negócios de fitness e de vitalidade para os atletas. Um só pulso: a marca, a cor, a tipografia e os produtos que mantêm o batimento do ginásio à vista.
Logótipo
Sub-marcas · pro & my
O nome do produto lidera, numa só palavra. myVytal é o espaço pessoal do atleta; proVytal, para quem gere o espaço. O tile do pulso nunca muda; o ícone da app é sempre o Vytal.
O símbolo, medido
Um sinal vital que é também um V. O vértice em 32,46.5 com os braços a 27,26.5 e 37,17.5: um V assimétrico, com o braço direito 1,45× mais alto, para que se leia como o espigão de um electrocardiograma.
- Centrado. O traço estava 1,5 unidades acima do centro do quadrado (30,5 contra 32). As margens eram 14 do topo ao espigão e 17 do vale ao fundo; agora são 15,5 e 15,5.
- Espessura 5 → 5,5. A 16 px, 5 dava 1,25 px, sub-pixel. Testei 6 e ficou pior a 96: o vale funde-se no espigão.
- O V não se tocou. Só translação, zero reescala. Os braços mantêm 76,0° e −80,2°, e a assimetria 1,45×.
A 16 px nenhuma versão é boa. Um traço com sete pontos não cabe em dezasseis píxeis. A alternativa seria um segundo símbolo simplificado só para o favicon, e foi recusada: o símbolo tem de ser um só.
O verde: só três servem de botão
De nove verdes medidos, só os escuros aguentam um rótulo branco legível (≥ 4,5:1, WCAG AA para texto normal). Todos os verdes que a categoria fitness usa (lima, néon, energia) falham.
Não existe um verde energético que sirva de botão primário. A escolha não é clínico ou fitness: é onde se põe a energia. Este produto põe-na na família de doze matizes que um ginásio escolhe, e não na identidade.
| cor | rótulo branco | superfície no escuro | superfície no claro | botão? |
|---|---|---|---|---|
Esmeralda 800#065f46 | 7.68:1 | 2.49:1 | 7.36:1 | sim |
Esmeralda 700#047857 | 5.48:1 | 3.49:1 | 5.25:1 | sim |
Floresta#0e7a42 | 5.41:1 | 3.54:1 | 5.18:1 | sim |
Teal 600#0d9488 | 3.74:1 | 5.12:1 | 3.59:1 | não |
Green 600#16a34a | 3.30:1 | 5.81:1 | 3.16:1 | não |
Energia#00b45a | 2.74:1 | 7.00:1 | 2.62:1 | não |
Green 500#22c55e | 2.28:1 | 8.41:1 | 2.18:1 | não |
Green 400#4ade80 | 1.74:1 | 10.99:1 | 1.67:1 | não |
Lima#84cc16 | 1.98:1 | 9.70:1 | 1.89:1 | não |
Os candidatos, em componentes reais
O logótipo, um botão primário e um número, nos dois temas, ao tamanho a que aparecem. É aqui que se escolhe, e não na tabela.
Um logótipo por app
O símbolo é o mesmo nas quatro; muda a palavra. E há UMA regra, não dois dispositivos: um elemento verde por lockup, e ele marca o que distingue esse lockup. A base não tem prefixo, logo o logo é o verde dela; as apps têm prefixo, logo o logo é o prefixo.
O quiosque e a TV não levam logótipo nosso, e é medido: as duas apps leem a cor e a marca DO GINÁSIO. Um kioskVytal seria a nossa marca a tapar a do cliente no ecrã da porta dele.
Cor
O verde é a única cor de marca. Os neutros têm sempre um tom verde, nunca cinzento puro. As cores de sinal servem dados e estado, nunca a marca.
A marca não é um degrau desta rampa, e é de propósito: o verde antigo era o green-600 do Tailwind sem uma vírgula mudada, ou seja o verde de omissão de meia web.
Cada cor tem um trabalho. A identidade é o verde Vytal; azul, âmbar, vermelho, roxo e laranja comunicam estado ou dados e não substituem a marca.
O verde oficial é sempre usado como marca ou elemento não textual. Medido a 2026-08-27: sobre a tela CLARA (#fafafa) tem 5,25:1 e serve; sobre a tela ESCURA (#100f0d) tem 3,49:1 e NÃO serve para texto pequeno. Aí o texto leva o green-text (#06ae7e, 6,72:1).
Cores de texto
Hierarquia de texto por fundo. Primário para conteúdo, secundário e mudo para apoio, acento para ação.
Tipografia
abcdefghijklm 0123456789
abcdefghijklm 0123456789
abcdefghijklm 0123456789
abcdefghijklm 0123456789
Tokens
Uso
- Escolher o lockup que combina com o fundo: claro ou escuro.
- Manter espaço livre ≈ ao raio do canto do tile à volta do logo.
- Deixar o pulso respirar; o tile verde é a constante.
- Recolorir o tile ou o pulso, ou aplicar gradientes.
- Esticar, rodar ou contornar o lockup.
- Usar as cores de sinal (cyan/amber/red) como marca.
Como esta página se mantém verdadeira
Nenhum contraste desta página está escrito: todos saem da mesma função que o servidor usa para validar a cor que um ginásio escolhe. Se um número aqui estiver errado, é porque a REGRA está errada, e não porque alguém se esqueceu de o actualizar.
Vytal · vytal.fit · um só pulso, na marca e nos produtos.