Files

T

ealmeidaandClaude Opus 4.8 d852d54bf3 brand-guidelines: alinhar com o Open Design e tornar multi-marca

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>

2026-07-22 20:46:03 +01:00

3.8 KiB

Raw Blame History

name, description, version, updated, source

name	description	version	updated	source
Descomplicar	Tokens da marca Descomplicar® — espelho legível por máquina do DESIGN.md no Open Design	2.0.0	2026-07-22	~/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

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

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

@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

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

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

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

3.8 KiB Raw Blame History