---
name: the-beat-life-club-design
description: Use this skill to generate well-branded interfaces and assets for The Beat Life Club (a premium wellness & lifestyle club), either for production or throwaway prototypes/mocks/decks. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable: true
---

# The Beat Life Club — Design Skill

Read **`readme.md`** in this skill for the full design guide (brand context, content fundamentals, visual foundations, iconography, manifest), then explore the other files.

## Quick rules (the inviolable ones)
1. **Closed palette of 8 colours.** Oceano/Floresta ground the dark compositions; Areia/Branco the light. **Dourado is accent only — never dominant.**
2. **Type:** Cormorant Garamond (serif, Light + italic) for editorial titles & manifesto; Space Grotesk for interface, data, CTAs and uppercase labels. Type over imagery is always white.
3. **Voice:** tranquilo, afetivo, convicto. Short sentences, breathing room, no urgency, no jargon, no emoji. PT-BR. "Less, but better."
4. **The Beat Star** is the signature symbol (vazada = primary). Respect logo clear-space (height of the "T"); never distort or recolour the logo.
5. **Motion is calm** — gentle fades and small rises, no bounce. Soft Oceano-tinted shadows; gold focus ring.

## How to use
- **Foundations** live in `styles.css` (link it) and the token files under `tokens/`. Never hardcode hex or fonts — read the `--beat-*` / `--color-*` / `--font-*` tokens.
- **Components** are React primitives under `components/`. For static HTML artifacts, copy the assets/styles you need and recreate the look from the `.jsx` + `.prompt.md`; for production, use the compiled bundle.
- **UI kits** under `ui_kits/` (`website/`, `app/`) show full screens composing the primitives — use them as starting points.
- **Assets** (logos, Star, Life Code icons, sub-brand wordmarks, photography) live in `assets/`. Copy them out — never redraw them.

If creating visual artifacts (slides, mocks, throwaway prototypes), copy assets out and produce static HTML files for the user to view. If working on production code, copy assets and follow the rules here to design as an expert in this brand.

If the user invokes this skill without other guidance, ask what they want to build or design, ask a few focused questions, then act as an expert designer who outputs HTML artifacts *or* production code, depending on the need.
