Color
A restrained, mostly-green system on soft off-white, with a single warm accent used sparingly. Greens carry the brand; citrine is the one spotlight per screen.
Surfaces
Ink
Brand greens
Warm accent — one per screen
On-dark text
Category accents
Typography
Fraunces brings warmth to headlines and numbers; Hanken Grotesk keeps everything readable. The eyebrow — tiny, wide-tracked, uppercase — is the core structural device.
The orb
The one element the brand is remembered by — a soft sphere that breathes on a slow 7-second cycle, representing a living, present companion. Use it once per view, large, as an anchor. It holds still under reduced-motion.
Anchors heroes, loading moments, and the Let’s AI avatar. Never repeated decoratively or shrunk to a bullet.
Buttons
Pill-shaped. Primary is pine — the default action. Spotlight is the citrine gradient, reserved for one moment per screen. Ghost is quiet and secondary.
Chips & category tags
Quiet chips for filters; category tags carry a modality’s family in its fixed accent color — so a color always means the same thing across the product.
Cards & imagery
Modalities never use photos — there are 150+ and no way to source distinct imagery at scale, so they’re typographic, carrying their category color. Practitioners and events use photos, always layered over a gradient so a missing image still looks intentional.
Breathwork
Conscious breathing to settle the nervous system and shift your state in minutes.
.lv-media — if the image is slow or missing, the surface still reads as designed, never broken.Motion
Motion confirms and orients; it never performs. The orb’s breath is the only ambient animation — everything else is reactive, and all of it respects reduced-motion.
Drop it in
Token files describe the same values in every format — pick one. Then compose with the base and component layers.
<link rel="stylesheet" href="tokens/tokens.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/components.css" />
<span class="lv-eyebrow">Gather in person</span>
<h2>Upcoming events</h2>
<button class="lv-btn lv-btn--primary">Reserve a place</button>
// React / React Native
import { color, font, radius } from "./tokens/tokens";
// Tailwind — tailwind.config.js
presets: [require("./tokens/tailwind.preset.js")]
In this directory
Everything this page describes lives beside it as a real file. Open any of them straight from here.