Brand book

The rules of the brand, rendered live

Color

5 specimens · 40/30/15/10/5 hierarchy · zero gradients

Color hierarchy

Percentage and use of color — 40 / 30 / 15 / 10 / 5

Violet blue scale

#3C1AEA — the Truora color (30% of any composition)

Neutral / midnight scale

Cool blue-tinted neutrals · White #FAFBFF → Midnight blue #01022E

Accent & semantic colors

Orange (CTA/alerts) · Light blue (info) · success · danger · WhatsApp

Semantic role tokens

Reference these aliases in product UI — not raw scale values

Typography

4 specimens · Host Grotesk Medium / Light · JetBrains Mono

Type scale

xs 12 → 5xl 80 · headings in Medium, never bolder

Display & headings

Host Grotesk Medium — H1 80/80 (100%) · H2 46/50 (109%)

Body & supporting text

Host Grotesk Light — body 18/22 · large body 24/29 · quote 27/30

Monospace / code

JetBrains Mono — API, credentials, code surfaces only

Spacing & elevation

3 specimens · 4px grid · cool shadows, no glow

Spacing scale

4px base grid — space-1 … space-24

Corner radii

Controls pill · inputs md 14 · cards lg 24 → 2xl 40

Elevation / shadows

Subtle cool shadows xs → xl — no colored glows

Brand

6 specimens · logo · isotype · Glass Effect · shape DNA · product icons · photography

Logo lockups

Wordmark on light & on violet · clear space

Isotype / app mark

Stylized T + checkmark — trust & verification

Glass Effect

Signature depth — the violet shape blooms BEHIND the pane; frost over photos; radius ≈16% on tiles

Shape DNA

Shape system extracted from the isotype curves — full shape gallery

Product icons

The logo's curves in the icons — identity · verification · engagement · e-signature

Photography style

Warm natural light · real people working · rounded frames

Voice

confident · warm · direct · sentence case

The connective tissue of trust between a business and its users. Speak to the user informally (Spanish "tú"), as "we" the company. Sentence case everywhere — headlines, buttons, labels; caps only in the overline. Buttons are verbs: "Empieza gratis", "Agenda una demo".

✓ Like this

"Verifica a tus usuarios en segundos, no en días."
"Identidad, firma y onboarding en una sola conversación de WhatsApp."

✗ Not this

"Embárcate en una experiencia transformadora…"
Jargon, hype, disrupt / synergy / leverage, decorative emoji in the UI.