Let's Vibe — Brand System (`@letsvibe/brand`)

The single source of truth for the Let's Vibe visual identity — design system "Living Sanctuary." Drop this folder into a repo and build web, mobile, native, or email surfaces from one shared vocabulary.

Start with docs/index.html — open it in any browser for the living, interactive reference (colors with click-to-copy, type specimens, components, the breathing orb).

What's inside

letsvibe-brand/
├─ README.md                  ← you are here
├─ CHANGELOG.md
├─ brand/
│  └─ BRAND_GUIDELINES.md      ← voice, color, type, imagery, motion, a11y
├─ tokens/                     ← the source of truth (use ONE format)
│  ├─ tokens.json              ← W3C design tokens (Style Dictionary / Tokens Studio)
│  ├─ tokens.css               ← CSS custom properties on :root
│  ├─ tokens.scss              ← SCSS variables + maps
│  ├─ tokens.ts                ← typed JS/TS export (React, React Native)
│  └─ tailwind.preset.js       ← Tailwind theme preset
├─ css/
│  ├─ base.css                 ← fonts, reset, element defaults, focus, reduced-motion
│  └─ components.css           ← orb, buttons, chips, cards, media helper
└─ docs/
   └─ index.html               ← interactive styleguide (no build step)

Token files all describe the same values in different formats. Pick the one your stack needs — don't maintain more than one by hand.

Quick start

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>
<button class="lv-btn lv-btn--spotlight">Let's AI</button>

Tailwind

// tailwind.config.js
module.exports = { presets: [require("./tokens/tailwind.preset.js")] };

<div class="bg-paper rounded-lg shadow-card p-6 font-body text-ink">…</div>
<div class="rounded-full bg-grad-orb animate-breathe w-24 h-24"></div>

React / React Native

import { color, font, radius } from "./tokens/tokens";
const styles = { card: { backgroundColor: color.surface.paper, borderRadius: radius.lg } };

Design tokens pipeline (Style Dictionary, Tokens Studio)

Point your build at tokens/tokens.json.

Fonts

Display Fraunces, body Hanken Grotesk — both from Google Fonts. css/base.css imports them; for production, self-host and preload for performance.

Non-negotiables

Read brand/BRAND_GUIDELINES.md, but the short version:

Pine is the primary action; citrine is one spotlight per screen.
Modality cards carry no photos — typographic + category color.
Every photo layers over a gradient fallback (.lv-media).
The orb appears once per view and respects reduced motion.
Visible keyboard focus and WCAG-AA contrast everywhere.

Versioning

Semantic versioning. Token value changes are minor; renames/removals are major. See CHANGELOG.md.

Let's Vibe — Brand System (@letsvibe/brand)