Get started
Two stylesheets, two font links and one script. Everything below works from a folder on disk, with no build step and no package manager.
What you get
Lario UI ships the brand as plain files. lario.css
carries every token and component and is copied byte for byte from the Lario brand system - treat it
as read-only. Everything else in this site is documentation built on top of it.
| File | What it holds |
|---|---|
assets/css/lario.css | Tokens and components. The brand. Never edit by hand - re-copy it when the brand changes. |
assets/css/docs.css | The documentation chrome: rail, sidebar, tabs, demos, tables. Not part of the brand. |
assets/js/icons.js | 61 Phosphor Regular icons as path data, injected as an SVG sprite. |
assets/js/nav.js | The only navigation source: rail, sidebar, search and prev / next read from it. |
assets/logo/ | The mark and lockup in every version, plus the favicon set. |
assets/fonts/ | Google Sans and Inter, both OFL, for offline rendering. |
assets/img/stage.jpg | The sky-and-meadow photo every stage and hero sits on. |
Add it to a page
Two font links, then the stylesheet. Keep both font links: if one family fails to load the other still arrives, and Georgian falls back to Google Sans automatically.
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"> <link rel="stylesheet" href="assets/css/lario.css">
Then put lr on the body.
Everything in the system is scoped to it.
<body class="lr">
<section class="lr-section">
<div class="lr-container">
<h1 class="lr-h2">Simple, transparent pricing</h1>
</div>
</section>
</body>
Icons
Icons are Phosphor Regular, drawn as an SVG sprite so a page carries one copy of each path. Reference a symbol by name wherever an icon goes.
<svg class="lr-i" aria-hidden="true"><use href="#i-check"/></svg>
An icon that carries meaning on its own needs a label.
An icon beside text does not - mark it aria-hidden and let the text
do the work. The whole set is on the icons page.
The stage photo
A relative url() inside a custom property
resolves against the stylesheet that uses it, not the one that declares it, so a page cannot point
--lr-stage-img at a photo with a relative path. Set the photo in a
stylesheet that sits beside it, or use an absolute path.
/* in a stylesheet next to the image */
.hero-stage { background-image: url("../img/stage.jpg"); }The photo travels with the file. If you send an HTML deliverable on its own, run inline_assets.py from the brand system first so the image is embedded rather than missing.
Check it before you send it
Render the page and look at it. The brand system ships a renderer that uses the bundled fonts, so output is correct with no network.
python scripts/render.py page.html out/ --width 1440 python scripts/render.py page.html out/ --width 390
Then walk the principles. Most things that look wrong in a Lario page are one of six rules being broken.