ealmeidaandClaude Opus 4.8
d852d54bf3
A skill documentava uma paleta azul/laranja (#1a365d, #dd6b20) com Open Sans que nao corresponde nem ao design system nem ao site real. Cada ferramenta produzia material com uma marca diferente. Passa a espelhar o DESIGN.md do Open Design como fonte de verdade unica: dourado #cc8d00 sobre preto e branco, Montserrat (display) e Inter (corpo), com precedencia explicita do DESIGN.md sobre qualquer espelho. Reformulada para servir qualquer marca (Descomplicar e clientes), com procedimento para criar design systems de cliente a partir de material real via brand-extract, validacao antes de tornar normativo, e um projecto por marca. - SKILL.md v2.0.0: espelho correcto + gestao multi-marca - descomplicar-theme.md v2.0.0: tokens YAML derivados do DESIGN.md - color-palettes.md removido: 47 valores derivados da paleta errada - design-systems-multimarca.md: procedimento de gestao no Open Design Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
124 lines
3.8 KiB
Markdown
124 lines
3.8 KiB
Markdown
---
|
|
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
|
|
```
|