Principles
Six rules hold the system together. Break one and a page stops looking like Lario, even when every token in it is correct.
1. White first
Colour comes from photography, not from fills. About 85% of any surface is white and zinc with ink and charcoal text; under 5% is the gradient. There are no coloured section backgrounds and no tinted panels. A page that needs energy gets a photo, not a fill. The dark theme changes which neutral holds the 85% - it does not spend any of it on colour.
2. One shape
Every rounded thing in Lario is the same superellipse, only at a different radius. A button is 20px,
a card is 45px, a hero stage is 58px - but the curve is always
superellipse(1.5), which is flatter at the corner and fuller along
the edge than a circle. Mixing a plain border-radius into a page is the fastest way to make it look
like someone else's.
3. Two fonts, one weight
Google Sans sets everything that is a heading; Inter sets everything that is read. Headings are Regular. Medium appears in exactly three places - the hero display line, big numbers and the statement paragraph. Nothing is 600 or 700, nothing is letter-spaced, nothing is all caps.
Simple, transparent pricing
Google Sans Regular above, Inter in charcoal below.
4. The gradient is the mark
Lime to turquoise appears on the logo tile, on icon tiles and on at most one promo card per page. Never on text, never on a button, never on a border, never as a background. White on lime is 2.0:1, so text on the gradient is ink - and in practice the gradient carries a white glyph, not words.
5. One spring
Hover and press use a single spring - 0.4s with a slight overshoot. Buttons invert, FAQ items open
to ink, tiles shimmer. Sections do not animate in. Only transform and opacity move, and everything
stops under prefers-reduced-motion.
6. Three beats
The voice is a friend who is good with money: short sentences, benefit first, no exclamation marks. Display lines come in threes with the mark after the first beat. Headlines are one idea. Subheads are one sentence that makes the headline concrete.
What never ships
- Invented proof. No made-up ratings, user counts, logos or testimonials.
- Template leftovers. The source site is built on a fintech template; its names, numbers, blog posts and testimonials are placeholder and are never reused.
- Bracketed placeholders. No [Name], no [00], no lorem.
- Em and en dashes. An aside takes a spaced hyphen, in English and in Georgian.
- Exclamation marks. Calm, not loud.