Every token,
one place.
The building blocks behind Levitas — logo usage, color, type, icons, spacing and components — kept in sync with brand-guidelines.html and used consistently across the marketing site, the login flow and the product itself.
Adaptive by design.
The Levitas mark is built from four layered leaf shapes plus a wordmark. Rather than sitting on a white badge, it adapts directly to its background: whichever leaf shares the background's color switches from a solid fill to a fine outline.
Midnight backgrounddark leaf outlined
Indigo backgroundindigo leaf outlined
Aqua backgroundaqua leaf outlined
Cloud / light backgroundmist leaf outlined
Rule of thumb: never place the mark on a white badge to "solve" contrast. Identify which of the four leaves matches the surface behind it, and switch only that leaf to an outline. The composition, proportions and the other three fills stay exactly as drawn.
A calm, confident palette.
Five brand tones carry the identity; four semantic tones carry meaning across tables, pills and alerts. Every other color in the product — text, borders, tints — is derived from this set.
Brand
Neutrals & ink
Semantic status
Soft character.
Clear function.
Rabelo carries the brand moments — titles, numbers, hero lines. Inter runs the interface: tables, forms, buttons, body copy. Two voices, one register.
Used for H1–H3, stat values and the wordmark. Falls back to Manrope, then system sans-serif, if not installed — never loaded from an external file in this build.
Used for everything else: navigation, tables, form fields, buttons, badges. Weights 400–700, optimised for small sizes and dense data.
One weight.
One language.
A single stroke-based icon set, drawn on a 24×24 grid at a consistent stroke width. No filled icons, no mixed styles — clarity over decoration.
A consistent rhythm.
Spacing follows a 4px base unit. Corners get progressively softer for progressively larger surfaces. Shadows stay soft and cool-toned, never harsh black.
Assembled, not improvised.
The same primitives — buttons, pills, fields — repeat identically across the marketing site, login and product, so nothing has to be re-learned.