STRATAGO — Design System v2.2

Camada 00

Mapa de Macroáreas

O CSS está organizado em 6 grandes camadas movendo-se do abstrato (variáveis) para o específico (componentes de negócio).

01

Core & Tokens

Definição da "física" do sistema — variáveis, temas, reset e fundações.

:rootLight/DarkReset

02

Engine Visual

Elementos dinâmicos, profundidade e atmosfera da interface.

BG EngineOverlaysAnimações

03

Estrutura (Shell)

Moldura de navegação e layout que contém todo o conteúdo.

NavbarFooterContainers

04

Componentes Base

Unidades fundamentais reutilizáveis em qualquer contexto.

BotõesInputsCardsAlerts

05

Núcleos de Domínio

UI especializada que reflete os 4 motores metodológicos da Stratago.

PilaresMétodosOntologiasProspecção

06

Fluxos de Serviço

Interfaces de conversão, autenticação e suporte ao negócio.

PlanosLoginNewsletter

Identidade Visual

3 Temas do Sistema

Cada tema define uma paleta completa de tokens. Clique no card para ativar o tema.

STRATAGO

DESIGN SYSTEM

Ação

Outline

Branco Clínico

Clareza máxima · leitura prolongada · editorial

STRATAGO

DESIGN SYSTEM

Ação

Outline

Obsidiana & Âmbar

Original · estratégico · profundidade visual

STRATAGO

DESIGN SYSTEM

Ação

Outline

Ardósia & Esmeralda

Oposto · sustentável · saúde · ESG · frescor

TOKEN	BRANCO CLÍNICO	OBSIDIANA & ÂMBAR	ARDÓSIA & ESMERALDA
--bg	#f8f9fb	#080c12	#f0f4f2
--gold (accent)	#8a6a1a	#c9a84c	#0d7a52
--text	#0d1117	#f2ece0	#0a1a14
Temperatura	Neutro-quente	Quente · noturno	Frio · orgânico

Núcleo Matemático

Fórmula Mestre

Equação composta que converte exposição teórica em impacto real de adoção por profissão.

α_composite = αT^0.35 × αE^0.30 × αO^0.20 × αJ^0.15

αTDempster-Shafer · fusão de evidências — peso 35%

αEMACBETH · escala cardinal qualitativa — peso 30%

αOAHP Fuzzy TFN · hierarquia analítica — peso 20%

αJDiagrama de Influência · bloqueio jurídico — peso 15%

Camada 01 — Core

Tokens de Cor

Clique em qualquer token para editar o valor hexadecimal. A alteração é aplicada imediatamente em toda a página via CSS custom property.

Backgrounds

Tipografia

Âmbar (Accent)

Bordas & Sombra

Camada 01 — Core

Sistema Tipográfico

Três famílias com papéis distintos: Playfair Display para autoridade estratégica, IBM Plex Sans para clareza funcional, IBM Plex Mono para precisão técnica.

FamíliaPlayfair Display

UsoTítulos, logos, .sec-title, .pg-title, .plan-price

Pesos400, 600, 700, 900

Inteligência Estratégica

Decisão sob Incerteza

Métodos formais para escolhas complexas

FamíliaIBM Plex Sans

UsoBody, botões, UI, .text-body, labels

Pesos300, 400, 500, 600, 700

O STRATAGO converte exposição teórica à IA em impacto real de adoção profissional, aplicando quatro filtros calibrados: Dempster-Shafer para fusão de evidências, MACBETH para escala qualitativa cardinal, AHP Fuzzy para hierarquia analítica e Diagramas de Influência para bloqueio jurídico.

FamíliaIBM Plex Mono

Uso.m-tag, .ec-num, .ms-code, .oc-type, .tree-*, código

Pesos400, 500, 600

        DS-001 · K=0.15 · evidence fusion

        MACBETH · cardinal scale · CR=0.02

        AHP-FUZZY · TFN · triangular numbers

        LPA2v · μ=0.85 · λ=0.12 · Gc=VERDADEIRO

Camada 01 — Core

Espaçamento & Radius

Variáveis globais de comportamento e forma.

--radius 12px · borda padrão de cards e inputs

--tr all 0.3s cubic-bezier(0.4,0,0.2,1)

64px

Navbar height 64px · posição fixed top

1200px

.container max-width 1200px · padding 0 40px

Camada 03 — Shell

Navbar

Fixed top, backdrop blur, transição ao rolar. Classes: #nav, .nav-logo, .nav-links, .btn, #theme-toggle

#nav · .nav-logo · .nav-links · .btn · #theme-toggle

STRATAGO

Pilares Metodologias Simuladores

<nav id="nav"> <a class="nav-logo" href="/">STRATAGO</a> <div class="nav-links"> <a href="#">Pilares</a> <a class="btn" href="#">Acessar</a> <button id="theme-toggle">☀</button> </div> </nav>

Camada 03 — Shell

Hero Variants

Dois padrões de hero: Index (full viewport, foto de fundo, textos hardcoded brancos) e Page (foto fixed, overlay escuro, conteúdo em .pg-wrap).

.hero · .hero-photo · .hero-tint · .hero-grid · .hero-content

PLATAFORMA DE DECISÃO ESTRATÉGICA

STRATAGO

Inteligência Estratégica Formal

<section class="hero"> <div class="hero-photo"></div>  <div class="hero-tint"></div>  <div class="hero-grid"></div>  <div class="hero-content"> <div class="hero-badge">...</div> <h1 class="hero-title">STRAT<span class="gold-shimmer">AGO</span></h1> <p class="hero-p">...</p> <div class="hero-actions">...</div> <div class="hero-stats">...</div> </div> </section>

Camada 03 — Shell

Layout & Grid

Estruturas de layout reutilizáveis. O padrão é .section > .container. Pillar pages usam .hero-bg > .pg-wrap.

.section + .container padding: 96px 0 · max-width: 1200px · padding: 0 40px

.hero-bg + .pg-wrap fixed bg-img · fixed overlay z-index:1 · conteúdo z-index:2 · padding: 80px 40px 120px

.pillars-grid grid · 4 colunas · gap: 16px → 2 cols @1100px → 1 col @600px

.sims-grid grid · 2 colunas · gap: 20px → 1 col @900px

Camada 04 — Base

Botões

Sistema de dois botões principais + variantes de nav.

.btn-primary · .btn-outline

<button class="btn-primary">Simular Agora</button>  <a class="btn-outline" href="#">Saiba Mais</a>  <button class="btn-primary" style="opacity:.45;cursor:not-allowed" disabled>...</button>

Camada 04 — Base

Inputs & Forms

Dois contextos: Login/Register via .field-group e Contato/Newsletter via .fg.

.inner-card · .field-group · .field-label · .field-input

Acesso

Plataforma STRATAGO

E-mail

Senha

<div class="inner-card"> <h2 class="inner-title">Acesso</h2> <div class="inner-divider"></div> <div class="field-group"> <label class="field-label">E-mail</label> <input class="field-input" type="email"> </div> <button class="btn-primary">Entrar</button> </div>

Camada 04 — Base

Alerts

Três estados: sucesso, erro e informativo (âmbar). Todos usam .alert como base.

.alert · .alert-success · .alert-danger · .alert-info

✓ Simulação concluída com sucesso. Relatório PDF disponível para download.

✕ Erro na autenticação. Verifique suas credenciais e tente novamente.

ℹ Créditos insuficientes. Adquira um pacote para continuar simulando.

<div class="alert alert-success">✓ Mensagem de sucesso</div> <div class="alert alert-danger">✕ Mensagem de erro</div> <div class="alert alert-info">ℹ Mensagem informativa</div>

Camada 05 — Domínio · Núcleo A

Identidade Metodológica

Componentes que materializam os 7 pilares formais. O .pillar-card usa aspect-ratio 3/4 com overlay gradiente. O .method-card-full usa sidebar interna para separar código técnico da descrição funcional.

.pillar-card · .pcbg · .pcover · .pcontent · .p-name · .p-desc

Dempster-Shafer

Fusão de evidências com K=0.15

MACBETH

Escala cardinal qualitativa

<a class="pillar-card" href="/pillar">  <div class="pcbg" style="background-image:url('foto.jpg')"></div> <div class="pcover"></div> <div class="pcontent"> <div class="p-name">Dempster-Shafer</div> <div class="p-desc">Fusão de evidências K=0.15</div> </div> </a>

.method-card (grid) · .m-tag · .m-name · .m-full · .m-desc · .m-school

Quantitativo

LPA₂v

Lógica Paraconsistente Anotada

Diagnóstico epistêmico via graus de evidência μ e λ. Calcula Gc e Gct para estados de certeza, incerteza e contradição.

Escola Quantitativa · Decisão Formal

<div class="method-card"> <span class="m-tag">Quantitativo</span> <div class="m-name">LPA₂v</div> <div class="m-full">Lógica Paraconsistente Anotada</div> <p class="m-desc">...</p> <div class="m-school">Escola Quantitativa</div> </div>

.method-card-full · .method-sidebar · .ms-code · .ms-name · .ms-type · .method-body · .mb-desc · .mb-stratago

DS-001

Dempster-Shafer

Teoria Matemática da Evidência

Quantitativo

Funde múltiplas fontes de evidência usando o operador de combinação de Dempster. O coeficiente K=0.15 indica baixo conflito entre as fontes consultadas.

uso no STRATAGO

Primeiro filtro do pipeline: converte exposição teórica (Anthropic/Gartner) em probabilidade combinada real por profissão.

<div class="method-card-full"> <div class="method-sidebar"> <div class="ms-code">DS-001</div> <div class="ms-name">Dempster-Shafer</div> <div class="ms-full">Teoria Matemática da Evidência</div> <span class="ms-type">Quantitativo</span> </div> <div class="method-body"> <p class="mb-desc">...</p> <div class="mb-stratago"> <span>uso no STRATAGO</span> <p>...</p> </div> </div> </div>

Camada 05 — Domínio · Núcleo B

Prospecção & Dados

.process-steps usa linha vertical de gradiente via ::before para guiar o olhar. .quadrant-grid representa visualmente a análise de incerteza em 4 células de decisão.

.process-steps · .ps-item · .ps-num · .ps-body · .ps-tools · .ps-tool

01

Coleta de Evidências

Mapeamento das fontes primárias e secundárias. Calibração dos pesos iniciais por domínio profissional.

Delphi DS K=0.15

<div class="process-steps"> <div class="ps-item"> <div class="ps-num">01</div> <div class="ps-body"> <h3>Coleta de Evidências</h3> <p>...</p> <div class="ps-tools"> <span class="ps-tool">Delphi</span> </div> </div> </div> </div>

.quadrant-grid · .q-cell · .q-label · .q-name · .q-desc

Alta Certeza / Alto Impacto

Prioritário

Ação imediata — evidências consolidadas

Baixa Certeza / Alto Impacto

Monitorar

Aguardar mais evidências para decidir

Alta Certeza / Baixo Impacto

Delegar

Processo padrão — risco controlado

Baixa Certeza / Baixo Impacto

Ignorar

Custo de análise supera o benefício

<div class="quadrant-grid"> <div class="q-cell"> <div class="q-label">Alta Certeza / Alto Impacto</div> <div class="q-name">Prioritário</div> <p class="q-desc">...</p> </div>  </div>

Camada 05 — Domínio · Núcleo C

Ontologia & Semântica

IBM Plex Mono denota precisão técnica. Pseudo-elementos ::before em .tree-l1/.tree-l2 criam as linhas de árvore hierárquica.

.owl-card · .oc-type · .oc-name · .oc-desc · .oc-example

owl:Class

StrategoDecision

Classe que representa uma decisão estratégica formal com múltiplos critérios sob incerteza.

subClassOf: Decision ⊓ ∃hasMethod.MACBETH

<div class="owl-card"> <div class="oc-type">owl:Class</div> <div class="oc-name">StrategoDecision</div> <p class="oc-desc">...</p> <div class="oc-example">subClassOf: Decision ⊓ ∃hasMethod.MACBETH</div> </div>

.tree-container · .tree-root · .tree-l1 · .tree-l2 · .tree-tag

StrategoOntology

Decision

StrategoDecision core

PolicyDecision

Method

DempsterShafer DS

MACBETH cardinal

Evidence

BeliefFunction

<div class="tree-container"> <div class="tree-root">StrategoOntology</div> <div class="tree-l1">Decision</div> <div class="tree-l2">StrategoDecision <span class="tree-tag">core</span></div>  <div class="tree-l1 last">Evidence</div> </div>

Camada 05 — Domínio · Núcleo D

Experiência do Usuário

Frosted Glass via backdrop-filter: blur(24px) cria profundidade sobre o fundo obsidiana. O .plan-card.popular usa ribbon diagonal via ::before.

.plan-card · .plan-card.popular · .plan-name · .plan-price · .plan-btn

Pro

R$49/mês

Cobrado mensalmente

<div class="plan-card popular"> <div class="plan-name">Pro</div> <div class="plan-price">R$49<span>/mês</span></div> <div class="plan-period">Cobrado mensalmente</div> <ul class="plan-features"> <li>10 simulações/mês</li> </ul> <a class="plan-btn plan-btn-primary">Assinar</a> </div>

.inner-card (Glassmorphism) · backdrop-filter

Frosted Glass

backdrop-filter: blur(24px) saturate(1.6)
background: var(--bg-card) com opacity .92

Camada 06 — Serviço

Planos

Container .billing-container + toggle de billing + grid de cards. Modificadores: .popular, .current.

.plan-cardBase: bg-card, border, radius 14px

.plan-card.popularborder: gold + ribbon diagonal via ::before

.plan-card.currentborder: green rgba(74,222,128,.4) + bg verde sutil

.plan-btn-*primary / secondary / contact / disabled

Camada 06 — Serviço

Newsletter & Contato

Newsletter usa .news-section > .news-inner com flex row. Contato usa .contact-grid 1:1.4 colunas.

.news-section · .news-form · .news-input · .news-btn

Inteligência Estratégica

Análises semanais sobre decisão sob incerteza

<section class="news-section"> <div class="container"> <div class="news-inner"> <div class="news-text"> <h3>Inteligência Estratégica</h3> <p>Análises semanais</p> </div> <div class="news-form"> <input class="news-input" type="email" placeholder="[email protected]"> <button class="news-btn">Assinar</button> </div> </div> </div> </section>

Assets Visuais

Mapa de Imagens de Fundo

5 slots de background no sistema. Cada slot tem overlay e regra de texto fixos — independente do tema escolhido. Cole uma URL no campo e veja o preview ao vivo.

⚠

REGRA CRÍTICA — TEXTO SOBRE IMAGEM

Todos os textos sobre imagem usam #ffffff hardcoded — não usam var(--text). Isso garante legibilidade independente do tema ativo (dark/white/slate). Os overlays são sempre gradientes escuros fixos, não temáticos.

Overlays — valores CSS fixos (não temáticos)

.hero-tint

linear-gradient(165deg,
rgba(13,27,42,.88) 0%,
rgba(13,27,42,.68) 60%,
rgba(201,168,76,.08) 100%)

.hero-bg-overlay

linear-gradient(165deg,
rgba(13,27,42,.86) 0%,
rgba(13,27,42,.72) 60%,
rgba(13,27,42,.86) 100%)

.pcover (pillar card)

linear-gradient(to top,
rgba(8,18,30,.94) 0%,
rgba(13,27,42,.40) 60%,
transparent 100%)

.scover (sim card)

linear-gradient(to top,
rgba(13,27,42,.95) 0%,
rgba(13,27,42,.5) 60%,
transparent 100%)

.banner-tint

linear-gradient(90deg,
rgba(13,27,42,.88) 0%,
rgba(13,27,42,.60) 60%,
rgba(201,168,76,.08) 100%)

Sugestões Unsplash por Slot

Sistema deIdentidade Visual

Mapa de Macroáreas

3 Temas do Sistema

Fórmula Mestre

Tokens de Cor

Sistema Tipográfico

Espaçamento & Radius

Navbar

Hero Variants

Layout & Grid

Botões

Inputs & Forms

Alerts

Identidade Metodológica

Prospecção & Dados

Coleta de Evidências

Ontologia & Semântica

Experiência do Usuário

Planos

Newsletter & Contato

Inteligência Estratégica

Mapa de Imagens de Fundo

Sistema de
Identidade Visual