---
name: "Descomplicar"
description: "Tokens da marca Descomplicar® — espelho legível por máquina do DESIGN.md no Open Design"
version: "2.0.0"
updated: "2026-07-22"
source: "~/workspace/open-design/design-systems/descomplicar/DESIGN.md"
---

# Tokens — Descomplicar®

> **Fonte de verdade:** `~/workspace/open-design/design-systems/descomplicar/DESIGN.md`
> Este ficheiro é um espelho para consumo automático (geradores, templates, scripts).
> Se divergir do `DESIGN.md`, o `DESIGN.md` ganha e este ficheiro deve ser corrigido.
>
> **Para marcas de clientes**, não usar estes valores — ler o `DESIGN.md` da marca respectiva
> em `design-systems/<slug-do-cliente>/`.

## Cores

```yaml
colors:
  primary: "#cc8d00"        # Dourado — CTAs, destaques, ícones, bordas activas
  primary_light: "#f2d9a2"  # Fundos secundários, hover suave, tags (nunca texto)
  surface: "#ffffff"        # Fundo de página, cards, modais
  surface_alt: "#f8f8f8"    # Secções alternadas, blocos de código
  text: "#000000"           # Headlines, corpo principal
  text_muted: "#6e6e6e"     # Subtítulos, metadados, placeholders
  border: "#e5e5e5"         # Divisórias, bordas de card
  danger: "#dc2626"         # Erros, alertas críticos
  success: "#16a34a"        # Confirmações
```

**Regras:** dourado é o único acento cromático; máximo 3 cores por visual; fundos grandes em
`surface` ou `surface_alt`; CTA com fundo dourado e texto preto; nunca texto branco sobre dourado.

## Tipografia

```yaml
fonts:
  display: "Montserrat"
  display_fallback: "Poppins, system-ui, sans-serif"
  display_weights: [700, 800]
  body: "Inter"
  body_fallback: "Open Sans, system-ui, sans-serif"
  body_weights: [400, 500, 600]
  mono: "JetBrains Mono"
  mono_fallback: "IBM Plex Mono, monospace"
  mono_weights: [400]

scale:
  text_5xl: { size: 48, weight: 800, line_height: 1.1 }   # Hero headline
  text_4xl: { size: 36, weight: 700, line_height: 1.15 }  # H1
  text_3xl: { size: 30, weight: 700, line_height: 1.2 }   # H2
  text_2xl: { size: 24, weight: 700, line_height: 1.3 }   # H3
  text_xl:  { size: 20, weight: 600, line_height: 1.4 }   # H4, título de card
  text_lg:  { size: 18, weight: 500, line_height: 1.5 }   # Parágrafo de entrada
  text_base:{ size: 16, weight: 400, line_height: 1.6 }   # Corpo
  text_sm:  { size: 14, weight: 400, line_height: 1.5 }   # Legendas, UI
  text_xs:  { size: 12, weight: 500, line_height: 1.4 }   # Tags, badges
```

```css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap');
```

## Espaçamento, grelha e raios

```yaml
spacing:   # base 4px
  space_1: 4
  space_2: 8
  space_3: 12
  space_4: 16
  space_6: 24
  space_8: 32
  space_12: 48
  space_16: 64
  space_24: 96

grid:
  columns: 12
  gutter: 24
  max_width: 1280        # conteúdo geral
  max_width_article: 960 # artigos
  max_width_prose: 760   # texto corrido (line-height 1.7)
  padding_x: { mobile: 16, tablet: 32, desktop: 48 }

breakpoints:
  mobile: "<=768"
  tablet: "769-1024"
  desktop: ">1024"

radius:
  sm: 4      # inputs, badges
  md: 8      # cards, botões
  lg: 12     # modais
  full: 9999 # pills, avatares
```

## Movimento

```yaml
motion:
  micro: 150          # hover, focus (ms)
  transition: 250     # mudanças de estado (ms)
  page_fade: 200      # transições de página (ms)
  easing_in: "ease-out"
  easing_both: "ease-in-out"
  card_hover: "translateY(-2px) + sombra 0 4px 16px rgba(0,0,0,0.1)"
  proibido: ["parallax", "auto-play", "animações de entrada elaboradas"]
```

## Acessibilidade

```yaml
contrast:
  preto_sobre_branco: 21.0      # AAA
  preto_sobre_dourado: 7.4      # AAA
  dourado_sobre_preto: 7.4      # AAA
  muted_sobre_branco: 5.1       # AA
  branco_sobre_dourado: 2.9     # FALHA — proibido
minimo_corpo: 4.5               # AA
```