# The Beat Life Club — Design System

> *"Less, but better."* — Performance with serenity. Sophistication without ostentation.

The single source of visual truth for **The Beat Life Club**, a premium wellness & lifestyle club. This system turns the brand platform — colors, typography, logo, symbol, photography, tone of voice — into compiled tokens, reusable React primitives, and full-screen UI recreations that any agent or designer can build with.

The compiler reads this project and ships `styles.css` (+ everything it imports), the webfonts, and a bundle of components (`_ds_bundle.js`) to consuming projects.

---

## Brand context

The Beat Life Club is a high-end wellness club where **body, mind and movement meet**. It is more than a gym: an experience that invites *presence*. Three pillars guide everything:

- **Movimento consciente** (Conscious movement) — movement as science and design at the service of intention.
- **Tecnologia inteligente** (Intelligent technology) — technology that cares for you; presence and evolution in every detail.
- **Experiência elevada** (Elevated experience) — every detail considered to elevate how you feel and exist.

The club spans spin studios, strength floors, pilates, spa & recovery, social lounge and a bar/restaurant. Two sub-brands live under the mother brand:

- **The One** — the premium membership tier (gold-accented, ocean ground).
- **Life Code** — the health & performance vertical (medicine, DNA, training, nutrition) with its own icon set.

## Sources (provenance)

This system was built from a brand platform delivered as local folders. Do not assume the reader has access; recorded here for traceability:

- `Plataforma de Marca/` — brand platform: official **`manual-de-marca.pdf`**, fonts, renders, event photography, partner-brand logos, sub-brand identities.
- `Design System | Beat Club/` — a prior structured DS pass (docs in PT-BR, `tokens/tokens.css` + `tokens.json`, `claude/CLAUDE.md`). The token values here are carried forward from it and the official manual.
- `docs/` — brand rules in Portuguese: `01-fundamentos`, `02-cores`, `03-tipografia`, `04-logo`, `05-estrela`, `06-fotografia`, `07-tom-de-voz`, `08-identidades-filhas`, `09-pendencias`.
- `assets/` — logos (horizontal, vertical, star, grid/clearspace, vector master + INPI), fonts (Space Grotesk, Cormorant Garamond), Life Code icon SVGs, sub-brand wordmarks, photography (renders + event activations).
- `reference/` — `manual-de-marca-oficial.pdf` and `catalogo-midia.md` (full-res media index).

All values trace to the official Manual de Marca. Where the manual and the asset library disagree, see **Open questions** below.

---

## CONTENT FUNDAMENTALS

The voice is **tranquilo, afetivo e convicto** — calm, warm, and self-assured. It speaks with serenity and confidence, never rushed, never exaggerated. Closeness comes from empathy, not informality. Firmness shows up as clarity: say less, but with intention.

**Three pillars of voice**
- **Tranquilo** — avoids urgency, noise and jargon; breathes between sentences.
- **Afetivo** — communicates with humanity and warmth, without sentimentality.
- **Convicto** — conveys mastery and purpose with precise, sure vocabulary.

**Casing & rhythm**
- Headlines are editorial and lower-drama: serif, often with one italic word for emphasis (e.g. *O ritmo da **presença***).
- Eyebrows / overlines are **UPPERCASE, widely tracked**, in gold or sky.
- Body breathes — generous line-height (1.5–1.7). Short sentences with space around them.

**Voice — do & avoid**

| Do | Avoid |
|---|---|
| Short sentences, with breathing room | Urgency: "corre", "última chance" |
| Precise, serene vocabulary | Empty corporate jargon |
| Warmth with elegance | Forced informality, slang |
| Say less, with intention | Excess adjectives & exclamation marks |

**Person & language.** Primary language is **Brazilian Portuguese**. Address the member directly and warmly ("você"), as a host would — collective and inclusive ("o clube se encontra"). The brand "we" is quiet and never boastful.

**Emoji:** not used. The brand expresses warmth through type, light and space — not emoji. **Examples of on-brand copy:** "O ritmo da presença." · "O luxo do cuidado." · "Um clube, muitos rituais." · "Performance com serenidade."

---

## VISUAL FOUNDATIONS

**Colour.** A **closed palette of 8** colours. Two dark institutional grounds — **Oceano** `#0c1f32` (primary) and **Floresta** `#0a3a1e` (ESG) — anchor most compositions. **Dourado** `#cba052` is the prestige accent and appears **only as an accent** (CTAs, eyebrows, emphasis, the Star) — never as a dominant fill. **Areia** `#efe4ce` and **Branco** open luminous, warm-neutral compositions; **Céu** and **Sálvia** balance. Imagery skews **warm and desaturated** — soft natural light, neutral wood-and-sand interiors, gentle contrast. (Event/activation photos are the exception: warm, saturated, high-energy — used only for activations, never institutional.)

**Type.** Two families, distinct roles:
- **Cormorant Garamond** (serif) — editorial titles, manifesto, the "life club" voice. Set **Light** with **italic** emphasis, tight tracking, generous leading.
- **Space Grotesk** (geometric sans) — interface, data, CTAs, labels and uppercase manifesto caps.
Type over imagery is **always white**, placed over the cleanest, highest-contrast area.

**Spacing & layout.** Base-8 scale; **breathing room is a brand rule** ("the type breathes"). Generous section rhythm (`--section-y` = 96px). Logo clear-space equals the height of the "T" in the logotype.

**Backgrounds.** Either a **dark institutional ground** (Oceano / Floresta, often with a faint oversized Star watermark) or a **luminous light ground** (Areia-100 / Branco). Full-bleed photography is central; protection scrims (`--scrim-bottom` / `--scrim-top`) sit under white type. No noisy gradients, no purple/blue tech gradients, no patterns or textures beyond the Star watermark.

**Corners & cards.** Soft, restrained radii: controls `md` (10px), cards `lg` (20px), pills `full`. Cards are quiet surfaces — white or sand, **hairline border** (`--color-border`) + **soft Oceano-tinted shadow** (`--shadow-card`); no coloured left-border accents.

**Shadows / elevation.** Low-spread, Oceano-tinted, never harsh: `card` (resting) → `soft` (hover/raised) → `lift` (overlay/modal). Focus uses a soft **gold ring** (`--shadow-focus`).

**Borders.** 1px hairlines — `--color-border` on light, `--color-border-dark` on dark. Dividers are quiet.

**Transparency & blur.** Glass surfaces (nav, tab bar) use `--glass-dark`/`--glass-light` + `--blur-glass` (14px). Used sparingly for chrome over imagery.

**Motion.** Calm and intentional. **No bounce.** Gentle eased fades and small rises (`--ease-standard`, `--ease-emphasis`); durations 160–720ms.

**Hover / press states.** Hover = a gentle shift (primary darkens to Oceano-500; accent lightens to Dourado-400; ghost picks up a faint Oceano wash; cards rise 4px to `soft`). Press = a subtle scale-down (~0.97). No colour jumps, no glow.

**Buttons.** Pill capsules (`--radius-full`), uppercase tracked labels. `primary` Oceano, `accent` Dourado (sparingly), `secondary` Oceano outline, `ghost` text-only.

---

## ICONOGRAPHY

The brand has **no general-purpose UI icon font**. Iconography is deliberate and minimal.

- **Life Code icon set** (`assets/icones-life-code/`) — seven thin-stroke (1.4) line SVGs for the health/performance vertical: `anel`, `batimento`, `code`, `dna`, `medicina`, `nutricao`, `treino`. They use `stroke="currentColor"`, so tint them via colour or CSS `mask` (see `guidelines/iconography.card.html`). **Copied in** and used in the app UI kit's quick-rituals row.
- **The Beat Star** — the signature symbol (a 5-point star built from five "A" letterforms). Official lockups exist only as **PNG** (`assets/logo/estrela/`); a tintable, scalable schematic is provided as the **`Star`** component for in-product use. Versions: **vazada** (outline, primary) · **contorno** (secondary) · **sólida** (tertiary).
- **App navigation glyphs** — there is no brand icon set for app chrome, so `BottomNav` uses minimal 1.6-stroke line icons (home / calendar / star / person). *Flagged as a substitution* — replace if an official set is delivered.
- **Emoji / unicode as icons:** not used.

---

## VISUAL FOUNDATIONS — open questions / substitutions

- **Serif font:** the official manual specifies **Libre Bodoni**; the asset library ships **Cormorant Garamond** (and no Libre Bodoni files). Tokens use **Cormorant Garamond** as the active serif with Libre Bodoni as fallback, per `docs/09-pendencias.md`. **Confirm the standard.**
- **Star vector:** only PNG masters exist. The `Star` component is a faithful schematic, not the official vector — replace `Star` geometry if/when an `.svg`/`.ai` master is delivered.
- **App nav icons:** substituted line icons (see Iconography).

---

## Index / manifest

**Root**
- `styles.css` — global entry point (import this one file). `@import`s the four token files + base.
- `readme.md` — this guide.
- `SKILL.md` — Agent-Skills-compatible entry for downloaded use.

**Tokens** (`tokens/`)
- `colors.css` · `typography.css` (+ `@font-face`) · `spacing.css` · `radius-shadow.css` · `base.css`

**Foundation cards** (`guidelines/`) — render in the Design System tab
- Colors: primary, secondary, semantic, tints · Type: serif, sans, scale, roles · Spacing: scale, radius, shadow · Brand: logo, star, imagery, sub-brands, iconography

**Components** (`components/`) — reusable React primitives (read via `window.DesignSystemBeatClubV2_950ae1`)
- `buttons/` — **Button**, **IconButton**
- `forms/` — **Input**, **Switch**, **Checkbox**
- `data/` — **Card**, **Badge**, **Tag**, **Avatar**, **Stat**
- `brand/` — **Star**, **Eyebrow**, **SectionHeader**

**UI kits** (`ui_kits/`)
- `website/` — institutional marketing landing (`SiteNav`, `Hero`, `ExperienceGrid`, `MembershipBand`, `SiteFooter`)
- `app/` — member mobile app (`AppHome`, `AppSchedule`, `AppMemberCard`, `BottomNav`) in an iOS frame

**Assets** (`assets/`) — `logo/` · `fonts/` · `icones-life-code/` · `sub-marcas/` · `fotografia/` (renders + eventos)

---

<sub>The Beat Life Club · uso interno e de parceiros autorizados.</sub>
