Tokens drawn from the brand book in Figma and shipped as code. Everything on this page is rendered live from the --gva-* CSS variables, so what you see is what the products use.
The primary typeface. Carries every headline, body paragraph and interface label across the landing page, the dashboards and this kit.
The secondary typeface, used sparingly: technical labels, code, metadata and the admin workspace chrome. Never the body font.
Six brand colours plus the text, surface and border roles derived from them.
The composition rule from the brand book: near-black carries about 70% of any layout, white and soft-neutral about 20%, and chartreuse stays around 10%. It is a signal colour, used sparingly.
Nine steps, each a size and line-height pair. Display and H1 tighten letter-spacing to -0.02em; the scale ships as .gva-display to .gva-caption helper classes too.
A 4 pixel baseline grid. Thirteen steps from 0 to 96.
Six steps. In practice: tiles and cards use xl, inputs and media use md, buttons and chips are pills.
The same tokens composed into interface pieces.
42 calls this week. 86% resolved without a human.