Living Sanctuary · Brand & Code System

Let’s Vibe

The first AI-native wellness system. This is the source of truth for its look, voice, and code — built to drop straight into a repository.

v1.0 Fraunces × Hanken Grotesk · tokens in CSS, SCSS, TS, JSON & Tailwind

Tip: click any color to copy its hex.

Palette

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

Voice in letterforms

Typography

Fraunces brings warmth to headlines and numbers; Hanken Grotesk keeps everything readable. The eyebrow — tiny, wide-tracked, uppercase — is the core structural device.

Eyebrow · 11
Gather in person
H1 · Fraunces 600
Talk it through.
H2 · Fraunces 600
Upcoming events
H3 · Fraunces 600
Featured practitioners
Lead · Hanken 400
The sanctuary for 150+ wellness modalities.
Body · Hanken 400
Take a breath. Let’s check in with how you’re really doing — one practice, one practitioner, one gathering at a time.
Caption · Hanken 500
Aug 31 – Sept 10, 2026 · Sacred Valley, Peru
Signature

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.

--grad-orb
radial-gradient(circle at 34% 30%, #E4C97E, #C7A24A, #9BA88D, #2E4034)

Anchors heroes, loading moments, and the Let’s AI avatar. Never repeated decoratively or shrunk to a bullet.

Actions

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.

Taxonomy

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.

Breathwork Sound Healing Mind Body Energy Spirit Heart
Two rules, one identity

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.

Body

Breathwork

Conscious breathing to settle the nervous system and shift your state in minutes.

Explore →
★ 4.9
Maya Solúz
Breathwork Facilitator · Tulum
↑ The practitioner tile here shows only the gradient fallback. In production a portrait loads on top of it via .lv-media — if the image is slow or missing, the surface still reads as designed, never broken.
Calm by default

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.

--dur-fast · 150ms · hovers --dur-base · 200ms · state --dur-slow · 400ms · panels --ease · cubic-bezier(.2,.7,.3,1) --breathe · 7s · the orb
For engineering

Drop it in

Token files describe the same values in every format — pick one. Then compose with the base and component layers.

<!-- plain CSS / any framework -->
<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")]
Copied