Design System Structure

Here's the proposed outline for both files — confirm or adjust before we write the spec

1 · Design Tokens

Extracted from style-sobre.css + main.css

Colors
Primary#660099
Purple Dark#5d2684
Purple Deeper#4e2771
Accent (warm)#9a4d1c
Text Dark#1e1e1e
Text Medium#69645c
Surface Alt#f9f7f4
Border#e0d8eb
Typography Scale
Hero / 56px 800Sobre
H2 / 38px 800Porque existimos
H3 / 30px 800Tecnologia reconhecida
Body / 18px 500Texto de corpo padrão
Highlight / 20px 700Destaque de impacto
Label / 21px 600LEIA MAIS
Spacing Scale
12 · 16 · 20 · 24 · 28 · 32 · 40 · 48 · 60 · 64 · 80 · 90 · 120 px

2 · Components

Site-wide (main.css) + sobre/ specific

Site-wide
Header Nav (menu + contato btn) Footer Button variants
Page-specific
Hero Title Section Heading Body Text Highlight Text Inline Link Accordion Award Logo Grid Benefit Cards CTA Block

3 · Layout Patterns

Two-column (3fr 2fr) Full-width section Content inner (max 900px) Responsive breakpoints

4 · Usage Rules

  1. Color usage (when primary vs dark vs accent)
  2. Typography pairing rules
  3. Spacing conventions (8px grid)
  4. Accordion open/close behavior
  5. Responsive guidelines (1024px, 768px)
Output files:  docs/design-system.md  docs/design-system.html  — both covering all 4 sections above