Vytal · Styleguide
vytal.
A vital sign for fitness businesses and vitality for the athletes who train. One pulse: the brand, the colour, the type and the products that keep a gym’s heartbeat in view.
Logo
Sub-brands · pro & my
The product name leads, as one word. myVytal is the athlete’s own space; proVytal, for the people who run the space. The pulse tile never changes; the app icon is always the Vytal mark.
The mark, measured
A vital sign that is also a V. The vertex at 32,46.5 with arms at 27,26.5 and 37,17.5: an asymmetric V, the right arm 1.45× taller, so it reads as the spike of an electrocardiogram.
- Centred. The stroke sat 1.5 units above the square's centre (30.5 against 32). Margins were 14 top-to-spike and 17 trough-to-bottom; now both are 15.5.
- Stroke 5 → 5.5. At 16 px, 5 rendered 1.25 px, sub-pixel. Tried 6 and it got worse at 96: the trough merges into the spike.
- The V was untouched. Translation only, zero rescale. Arms keep 76.0° and −80.2°, and the 1.45× asymmetry.
At 16 px no version is good. A seven-point stroke does not fit in sixteen pixels. The alternative was a second, simplified mark just for the favicon, and it was refused: there is one mark.
The green: only three work as a button
Of nine greens measured, only the dark ones carry a legible white label (at least 4.5:1, WCAG AA for normal text). Every green the fitness category uses (lime, neon, energy) fails.
There is no energetic green that works as a primary button. The choice is not clinical or fitness: it is where you put the energy. This product puts it in the twelve-hue family a gym picks from, not in the identity.
| cor | white label | surface on dark | surface on light | button? |
|---|---|---|---|---|
Esmeralda 800#065f46 | 7.68:1 | 2.49:1 | 7.36:1 | yes |
Esmeralda 700#047857 | 5.48:1 | 3.49:1 | 5.25:1 | yes |
Floresta#0e7a42 | 5.41:1 | 3.54:1 | 5.18:1 | yes |
Teal 600#0d9488 | 3.74:1 | 5.12:1 | 3.59:1 | no |
Green 600#16a34a | 3.30:1 | 5.81:1 | 3.16:1 | no |
Energia#00b45a | 2.74:1 | 7.00:1 | 2.62:1 | no |
Green 500#22c55e | 2.28:1 | 8.41:1 | 2.18:1 | no |
Green 400#4ade80 | 1.74:1 | 10.99:1 | 1.67:1 | no |
Lima#84cc16 | 1.98:1 | 9.70:1 | 1.89:1 | no |
The candidates, in real components
The logo, a primary button and a number, in both themes, at the size they appear. This is where you choose, not in the table.
One logo per app
The mark is the same in all four; the word changes. And there is ONE rule, not two devices: one green element per lockup, and it marks what makes that lockup different. The base has no prefix, so its logo is its green; the apps have a prefix, so the logo is the prefix.
The kiosk and the TV carry no logo of ours, and that is measured: both apps read the GYM's colour and brand. A kioskVytal would be our brand covering the client's, on the door of their own gym.
Colour
Green is the only brand colour. Neutrals always carry a green bias, never pure grey. Signal colours serve data and status, never the brand.
The brand is not a step of this ramp, deliberately: the old green was Tailwind's green-600 unchanged, which is to say half the web's default green.
Every colour has a job. Vytal green is identity; blue, amber, red, purple and orange communicate status or data and never replace the brand.
The official green is used as identity or a non-text element. Measured 2026-08-27: on the LIGHT canvas (#fafafa) it is 5.25:1 and works; on the DARK canvas (#100f0d) it is 3.49:1 and does NOT work for small text. There the text takes green-text (#06ae7e, 6.72:1).
Text colours
Text hierarchy per background. Primary for content, secondary and muted for support, accent for action.
Typography
abcdefghijklm 0123456789
abcdefghijklm 0123456789
abcdefghijklm 0123456789
abcdefghijklm 0123456789
Tokens
Usage
- Pick the lockup that fits the background: light or dark.
- Keep clear space ≈ the tile’s corner radius around the logo.
- Let the pulse breathe; the green tile is the constant.
- Recolor the tile or the pulse, or add gradients.
- Stretch, rotate, or outline the lockup.
- Use the signal colors (cyan/amber/red) as the brand.
How this page stays true
No contrast ratio on this page is typed: every one comes from the same function the server uses to validate the colour a gym picks. If a number here is wrong, the RULE is wrong, not somebody's memory.
Vytal · vytal.fit · one pulse across the brand and its products.