Quero que você crie um novo design_system.html, que deverá ficar em: 

Ele deverá ser uma combinação CRIATIVA dos seguintes design systems e arquivos:

Seu novo design system deverá ser BEM baseado neste:  (focando especialmente no lettering transparente dele e no fato ser branco). Use as demais páginas para se inspirar, pegar animações e elementos bonitos que encontrar lá.

Capriche, especialmente na primeira dobra, que deve/pode conter imagens que encontrar por lá, animações, efeitos em botões, backgrounds, detalhes e animações de surgimento, glow...

Foque nos detalhes e crie algo fora da caixa.

No seu design system, você deve referenciar as mesmas classes CSSs e JS usadas nos arquivos apontados.

____________

Seu design system final deve conter:

1. A primeira dobra como sendo uma hero de demonstração das capacidades do design system. Capriche muito aqui.

2. Tipografia
- Font families (primary, fallback stack, monospace if any)
- Font loading strategy (local, CDN, weight ranges)
- Full type scale: h1 → h6
- body-lg / body / body-sm - captions / labels / helper text
- For each text role:
- font-family
- font-weight (numeric)
- font-size
- line-height
- letter-spacing
- text-transform

3. Sistema de cores
- Hex, RGB, HSL
- Opacity variants
- Gradient participation
- Semantic role:
- primary / secondary / accent / neutral / feedback / decorative
- Contextual usage rules:
- text / background / border / hover / active / disabled
- Contrast intent (AA / AAA if inferable)

4. Ul Components (com animações)
- For each detected component, define a full spec:
- Buttons
- Inputs
- Cards
- Navbars
- Sections
- Modals
- Badges
- Tooltips

5. Icones
6. Animações

Em todas as dobras você deve utilizar repetidamente as animações de fundo, de transição (surgimento) e as que ficam nos botões e componentes.
Também capriche no background das sessões, focando em algo elegante, com animação no fundo também, se possível.