---
version: alpha
name: "Betina Weber"
description: "Strategic clarity for sustainable growth."
colors:
  surface-primary: "#FFFFFF"
  surface-pure: "#FFFFFF"
  surface-cream: "#F5F0EA"
  surface-canvas: "#E5E4DE"
  surface-inverse: "#1C1917"
  surface-inversealt: "#080A09"
  accent-default: "#A6783E"
  legacyweb-amarelocta: "#CA8A04"
  legacyweb-amarelohighlight: "#F0C040"
  legacyweb-warmgrey: "#A8998C"
  legacyweb-creamoverdark: "#F5F0EA"
  text-onlight: "#1C1917"
  text-ondark: "#F5F0EA"
  text-oncanvas: "#1C1917"
typography:
  heading1:
    fontFamily: "Spectral"
    fontSize: "112px"
    fontWeight: 300
    lineHeight: "1.1em"
    letterSpacing: "-0.06em"
  heading1b:
    fontFamily: "Spectral"
    fontSize: "77px"
    fontWeight: 300
    lineHeight: "1.1em"
    letterSpacing: "-0.06em"
  heading2:
    fontFamily: "Spectral"
    fontSize: "68px"
    fontWeight: 300
    lineHeight: "1.1em"
    letterSpacing: "-0.06em"
  heading3:
    fontFamily: "Spectral"
    fontSize: "56px"
    fontWeight: 300
    lineHeight: "1.05em"
    letterSpacing: "-0.04em"
  heading4:
    fontFamily: "Spectral"
    fontSize: "36px"
    fontWeight: 300
    lineHeight: "1.15em"
    letterSpacing: "-0.05em"
  heading4b:
    fontFamily: "Spectral"
    fontSize: "24px"
    fontWeight: 300
    lineHeight: "1.2em"
    letterSpacing: "-0.05em"
  heading5:
    fontFamily: "Spectral"
    fontSize: "22px"
    fontWeight: 300
    lineHeight: "1.2em"
    letterSpacing: "-0.05em"
  heading6:
    fontFamily: "Spectral"
    fontSize: "20px"
    fontWeight: 200
    lineHeight: "1.2em"
    letterSpacing: "-0.04em"
  display:
    fontFamily: "Spectral"
    fontSize: "78px"
    fontWeight: 300
    lineHeight: "1.2em"
    letterSpacing: "-0.05em"
  body2xlSerif:
    fontFamily: "Spectral"
    fontSize: "52px"
    fontWeight: 300
    lineHeight: "1.15em"
    letterSpacing: "-0.05em"
  bodyLarge:
    fontFamily: "TASA Orbiter"
    fontSize: "20px"
    fontWeight: 400
    lineHeight: "1.3em"
    letterSpacing: "-0.02em"
  body:
    fontFamily: "TASA Orbiter"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "1.3em"
    letterSpacing: "-0.02em"
  bodySmall:
    fontFamily: "TASA Orbiter"
    fontSize: "15px"
    fontWeight: 400
    lineHeight: "1.3em"
    letterSpacing: "-0.01em"
  footerMenu:
    fontFamily: "TASA Orbiter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.2em"
    letterSpacing: "-0.01em"
  menuLink:
    fontFamily: "TASA Orbiter"
    fontSize: "15px"
    fontWeight: 500
    lineHeight: "1.1em"
  menuLinkMobile:
    fontFamily: "Spectral"
    fontSize: "36px"
    fontWeight: 300
    lineHeight: "1.2em"
    letterSpacing: "-0.05em"
  label:
    fontFamily: "TASA Orbiter"
    fontSize: "15px"
    fontWeight: 500
    lineHeight: "1.2em"
    letterSpacing: "0.02em"
  labelSmall:
    fontFamily: "TASA Orbiter"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "15px"
    letterSpacing: "0.02em"
spacing:
  "0": "0"
  "1": "4px"
  "2": "8px"
  "3": "12px"
  "4": "16px"
  "5": "20px"
  "6": "24px"
  "7": "28px"
  "8": "32px"
  "9": "34px"
  "10": "40px"
  "12": "48px"
  "13": "50px"
  "15": "60px"
  "16": "64px"
  "20": "80px"
  "25": "100px"
  "35": "140px"
  "40": "160px"
  "45": "180px"
  "0_5": "2px"
  "2_5": "10px"
  "3_5": "14px"
rounded:
  none: "0px"
  button: "6px"
components:
  button-light:
    backgroundColor: "#FFFFFF"
    textColor: "#1C1917"
    rounded: "{rounded.button}"
  button-dark:
    backgroundColor: "#1C1917"
    textColor: "#F5F0EA"
    rounded: "{rounded.button}"
---

# Betina Weber — Design System

## Overview
Clareza estratégica para crescimento sustentável.
Não é consultora. Não é coach. É parceira estratégica de crescimento.
Identidade verbal e visual de **Betina Weber**, organizada como sistema operacional pelo Bionic Brand OS — pra humanos, agentes e máquinas operarem com a mesma coerência.

## Colors

### Superfícies

- **`surface-primary`** `#FFFFFF`
- **`surface-pure`** `#FFFFFF` — Reservado a contextos light, não usar sobre Dark
- **`surface-cream`** `#F5F0EA` — v1.1 NOVO — texto/detalhes sobre /Dark
- **`surface-canvas`** `#E5E4DE` — Bege pedra, cor-âncora do projeto
- **`surface-inverse`** `#1C1917` — v1.1 — warm black, era #080808
- **`surface-inversealt`** `#080A09` — Reserva não utilizada

### Acento

- **`accent-default`** `#A6783E` — v1.1 NOVO — bronze maduro, ~60% saturação
- **`accent-subtle`** `#A6783E` · alpha 60% — Hover states e transições
- **`accent-faint`** `#A6783E` · alpha 10% — Highlights de fundo editorial raríssimos

### Cores legadas (em transição)

- **`legacyweb-amarelocta`** `#CA8A04` — Acento original do rascunho pessoal. Usado em CTAs primários e destaques editoriais ("Method" no hero).
- **`legacyweb-amarelohighlight`** `#F0C040` — Variante mais clara, função decorativa pontual em hovers e ornamentos.
- **`legacyweb-warmgrey`** `#A8998C` — Cinza pedra warm derivado do canvas. Usado como texto suave e divisores em fundo cream.
- **`legacyweb-creamoverdark`** `#F5F0EA` — Texto e detalhes sobre Dark — substitui white puro.

### Bordas

- **`border-onlight`** `#16231B` · alpha 16%
- **`border-ondark`** `#F5F0EA` · alpha 10% — v1.1 — usa cream em vez de white puro

### Overlays

- **`overlay-ondark`** `#F5F0EA` · alpha 16% — v1.1 — cream alpha em vez de white alpha
- **`overlay-dimdark`** `#16231B` · alpha 60%
- **`overlay-dimlight`** `#FFFCF5` · alpha 50%
- **`overlay-reset`** `#282C29` · alpha 0%

### Texto

- **`text-onlight`** `#1C1917` — v1.1 — warm black em vez de cool
- **`text-ondark`** `#F5F0EA` — v1.1 — cream em vez de white puro
- **`text-oncanvas`** `#1C1917`
- **`text-muted`** `#231F20` · alpha 50%

### Feedback

- **`feedback-error`** `#FF2244` · alpha 15%

## Typography

Duas famílias trabalham juntas: **Spectral** (serif) pra hierarquia editorial e **TASA Orbiter** (sans) pro funcional.

### Escala

- **`heading1`** — serif 300, 112px, line-height 1.1em, tracking -0.06em
- **`heading1b`** — serif 300, 77px, line-height 1.1em, tracking -0.06em
- **`heading2`** — serif 300, 68px, line-height 1.1em, tracking -0.06em
- **`heading3`** — serif 300, 56px, line-height 1.05em, tracking -0.04em
- **`heading4`** — serif 300, 36px, line-height 1.15em, tracking -0.05em
- **`heading4b`** — serif 300, 24px, line-height 1.2em, tracking -0.05em
- **`heading5`** — serif 300, 22px, line-height 1.2em, tracking -0.05em
- **`heading6`** — serif 200, 20px, line-height 1.2em, tracking -0.04em
- **`display`** — serif 300, 78px, line-height 1.2em, tracking -0.05em
- **`body2xlSerif`** — serif 300, 52px, line-height 1.15em, tracking -0.05em
- **`bodyLarge`** — sans 400, 20px, line-height 1.3em, tracking -0.02em
- **`body`** — sans 400, 18px, line-height 1.3em, tracking -0.02em
- **`bodySmall`** — sans 400, 15px, line-height 1.3em, tracking -0.01em
- **`footerMenu`** — sans 400, 16px, line-height 1.2em, tracking -0.01em
- **`menuLink`** — sans 500, 15px, line-height 1.1em, tracking 0
- **`menuLinkMobile`** — serif 300, 36px, line-height 1.2em, tracking -0.05em
- **`label`** — sans 500, 15px, line-height 1.2em, tracking 0.02em
- **`labelSmall`** — sans 500, 14px, line-height 15px, tracking 0.02em

### Regras

- Headings nunca recebem cor — sempre na cor de texto canônica.
- Headings nunca em uppercase.
- Labels e eyebrows sempre uppercase.
- Letter-spacing negativo em todo heading ≥ 20px

## Layout

Largura máxima de container: **1920px**.
Padding lateral: 32px (desktop), 20px (mobile).

### Escala de spacing

- **`0`** 0
- **`1`** 4px
- **`2`** 8px
- **`3`** 12px — Padding vertical de botão primário
- **`4`** 16px — Padding navbar, gap social icons
- **`5`** 20px — Padding lateral mobile / ServiceTab gap intra-grupo
- **`6`** 24px — Padding lateral secundário / gap headline
- **`7`** 28px — Gap footer column
- **`8`** 32px — Padding lateral principal (desktop)
- **`9`** 34px — Gap navbar menu links
- **`10`** 40px — Gap content vertical / largura do divisor editorial accent
- **`12`** 48px — Gap service tab content
- **`13`** 50px — Gap serviços
- **`15`** 60px — Gap service content / padding vertical método
- **`16`** 64px — Padding lateral ServiceTab
- **`20`** 80px — Gap grid footer / gap Amount-Title em MetricsCard
- **`25`** 100px — Padding top serviços
- **`35`** 140px — Padding top hero text container
- **`40`** 160px — Padding top logo footer
- **`45`** 180px — Padding bottom serviços
- **`0_5`** 2px — Gap grid do método (blocos justapostos) / altura do divisor accent
- **`2_5`** 10px — Gap default de frames
- **`3_5`** 14px — Gap entre botões em navbar

## Shapes

- **`none`** 0
- **`button`** 6px — Único radius usado; exclusivo de botões primários

## Components

### Button

Padding: 12px 20px.

- **light** — bg #FFFFFF, text #1C1917
- **dark** — bg #1C1917, text #F5F0EA (v1.1 warm black + cream)
- **transparent** — bg #F5F0EA, text #F5F0EA (v1.1 cream alpha)

### Button — proibições

- Botão primário NUNCA usa /Accent como background; contradiz autoridade calma

## Do's and Don'ts

### Nunca

- Gradientes em qualquer elemento
- Accent em CTA primário
- Accent em heading ou body
- Shadows em qualquer surface
- Radius além de 6px (exclusivo de botões)
- Playfair Display ou Inter
- Emojis em material institucional
- Estética mística ou wellness superficial
- Excesso de dourado ou metálico
- Stock Unsplash genérico
- Tom motivacional ou afetado
- Fundo branco puro #FFF (usar canvas warm)