Design System — Saulo B

Identidade

Marca & Posicionamento

Identidade, arquétipo, voz e princípios que precedem e orientam todas as decisões visuais.

Como medir impacto real,
se não conseguimos definir o que é real?

Slogan central · Marca Saulo B_ v1.0

Posicionamento

Designer sênior T-shape que usa IA e código para transformar amplitude em método. Conecta pontas que especialistas deixam separadas: pesquisa, estratégia, prototipação funcional e comunicação com stakeholders.

Arquétipo Principal — O Criador

Materializa visões. Transforma ideias abstratas em coisas reais e funcionais. Revela raciocínio por trás das decisões. Demonstra como algo foi construído, não apenas o resultado final.

Arquétipo Secundário — O Mago

Conecta mundos incompatíveis. Faz a ponte entre linguagens do designer, engenheiro e gestor. Transita entre C-level e squad técnico sem perder coerência de narrativa.

Voz

Direta, curiosa, intelectualmente honesta. Não bajula, não usa jargão para parecer sofisticado. Tem camadas filosóficas, questiona premissas, admite incerteza quando ela existe.

Nicho

Produto digital B2B, industrial e corporativo. Ambientes onde decisões são difíceis, stakeholders são técnicos e impacto precisa ser justificado. Força em SAP Fiori, Mendix, SAP BTP.

O que Saulo B_ não é

Não entrega o que o cliente pediu sem questionar. Não aplica tendências por moda. Não confunde volume de entrega com impacto. Não bajula stakeholder — apresenta dados, inclusive os inconvenientes.

Identidade

Logotipo

Wordmark, símbolo e especificações de uso. O underscore é o diferencial visual — referencia cursor de texto e cultura de linha de comando.

Sobre fundo claro

Saulo B_

Sobre fundo escuro

Saulo B_

Especificação

Fonte Space Grotesk 700

Nome Saulo B_

Cor do nome #0A0B0D

Underline (underscore) #175CE5

Motion underscore pisca (cursor)

Símbolo

favicon.svg · mesmo do nav

Baixar logo SVG

Motion — underscore piscando

O underscore "_" do logotipo imita o cursor de texto piscando — comportamento que referencia a cultura de linha de comando e programação. Só deve ser aplicado no logotipo principal, nunca em títulos ou body text.

→ Cor do underscore: var(--blue)

→ Duração: 1s · easing: step(1)

→ Loop: infinite · 50% opacidade → 0

→ Usar apenas no contexto do logotipo

Saulo B_

Identidade

Tom de Voz

A voz é fixa. O tom se adapta ao contexto. Direto, questionador, nunca corporativo vazio.

Estratégico e Direto

LinkedIn · apresentações · liderança

"Três projetos descartados após discovery em 2024 representam aproximadamente 12 meses de desenvolvimento evitado. Isso não aparece no relatório de entregas — mas deveria."

Técnico e Colaborativo

Devs · squads · documentação

"O componente usa o padrão Fiori Flexible Column Layout. Antes de adaptar, preciso entender como o backend vai lidar com o estado da navegação em telas intermediárias."

Reflexivo e Provocador

Thought leadership · portfólio · conteúdo

"Todo mundo quer design centrado no usuário. Poucos querem pagar pelo discovery que torna isso possível. O problema não é metodologia: é que design ainda não aprendeu a falar o idioma que libera orçamento."

Linguagem

Paleta de Cores

Clique em qualquer swatch para copiar o valor hex. Tokens CSS são a fonte única da verdade — nunca usar valores hardcoded.

Primária — Blue

Blue 700

--blue-deep

#0A3AAF

Blue 500 ★

--blue

#175CE5

Blue Hover

--blue-hover

#1450CC

Blue 300

--blue-light

#6B9FFF

Blue 200

--blue-lighter

#A8C4FF

Blue 100

--blue-lightest

#D8E6FF

Neutros

Black

--black

#0A0B0D

Text Default

--text-default

#1A1D22

Text Secondary

--text-secondary

#565B66

Text Subtle

--text-subtle

#5C6069

Text Disabled

--text-disabled

#9EA3AD

White

--white

#FFFFFF

Superfícies

Surface Base

--surface-base

#F9F9F9

Surface Raised

--surface-raised

#F4F4F6

Surface Border

--surface-border

#E4E4E8

Regra de uso — text-secondary vs text-subtle

--text-secondary #565B66

Texto que o usuário precisa ler para entender o conteúdo. Parágrafos, descrições de card, body alt, subtítulos de seção.

--text-subtle #5C6069

Texto decorativo ou contextual. Labels, captions, placeholders, metadados, eyebrow context. Se remover, o conteúdo ainda funciona.

Semântica — Estado

Success

--green

#1A7F4B

Warning / NDA

--amber

#B45309

Error / Danger

--red

#C0392B

Linguagem

Tipografia

Space Grotesk em todos os contextos. Import via Fontshare. Nunca usar Inter, Roboto ou fontes de sistema.

/* Import — sempre via Fontshare */
@import url('https://api.fontshare.com/v2/css?f[]=space-grotesk@700,600,500,400&display=swap');

--font: 'Space Grotesk', sans-serif;

Hero / H1 clamp(24px,3.4vw,50px) · 700 · -.035em

Produto real.

Section Heading clamp(22px,2.6vw,36px) · 700 · -.03em

Trabalho selecionado.

H3 / Card Title 15–18px · 700 · -.02em

StepSafe — Segurança Industrial com Visão Computacional

Eyebrow 11px · 600 · uppercase · .10em

Sobre

Body Principal 15px · 400 · line-height 1.72

Product designer com foco em produtos digitais B2B, industriais e corporativos. Trabalho no ciclo completo, da pesquisa com usuários ao protótipo funcional em código.

Body Secundário 14px · 400–500

A resistência ao digital era em parte cultural, mas principalmente consequência de experiências ruins com sistemas anteriores.

Label / Caption 12px · 500–600

Stack atual · Figma · Claude · Cursor

Nav Links 13px · 500

Sobre · Como penso · Cases · Contato

Linguagem

Espaçamento & Grid

Containers controlam padding horizontal. Sections controlam padding vertical. Nunca padding horizontal direto em section.

Tokens de componente

--gap-xs

4px

--gap-sm

8px

--gap-sm-plus

12px

--gap-md

16px

--gap-lg

24px

--gap-md-plus

32px

--gap-xl

40px

--gap-2xl

48px

--gap-3xl

64px

Tokens de container

--space-mobile

16px

--space-tablet

24px

--space-desktop

32px

--section-v

88px

Containers

Classe	Max-width	Uso
`.container-lg`	1200px	Nav, hero, sobre, cases, footer
`.container-md`	1024px	Conteúdo principal, grids duplos
`.container-sm`	840px	Leitura centralizada, hero text
`.full-bleed`	100%	Letreiro, banners edge-to-edge

Breakpoints

Viewport	Media query	Padding	Token
Desktop	1024px+	32px	`--space-desktop`
Tablet	max-width: 1023px	24px	`--space-tablet`
Mobile	max-width: 767px	16px	`--space-mobile`

Linguagem

Ícones

Phosphor Icons via CDN. Sempre usar peso Regular (ph ph-nome). Nunca misturar bibliotecas.

/* CDN */
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css">

/* Uso */
<i class="ph ph-arrow-right" aria-hidden="true"></i>

arrow-right

arrow-square-out

x

list

check

copy

linkedin-logo

lock-simple

trophy

Linguagem

Motion

Motion é funcional, não decorativo. Use para confirmar ações, guiar atenção e dar feedback. Passe o mouse sobre as caixas para sentir as curvas.

Ease Out — Ações de entrada

cubic-bezier(.25,.46,.45,.94)

Hover states, reveal de conteúdo, dropdowns

Ease Spring — Interações de feedback

cubic-bezier(.34,1.56,.64,1)

Card hover, botão ativo, modal entrada

Ease In-Out — Transições de estado

cubic-bezier(.4,0,.2,1)

Nav drawer, sidebar, accordions

Durações

--dur-fast

150ms

--dur-base

250ms

--dur-slow

400ms

--dur-xslow

600ms

Componentes

Botões

Todo botão tem focus-visible definido. Nunca remover outline — apenas estilizar. Mínimo de 44×44px em touch targets.

Sobre fundo claro

Sobre fundo escuro (footer / hero dark)

Ações destrutivas — btn-danger

Hierarquia de uso — quando usar cada variante

Variante	Quando usar	Nunca usar para
	Ação principal da tela — única por contexto.	Ações secundárias. Múltiplos primários na mesma view.
	Ação secundária ao lado de um primary. Cancelar, voltar.	Ação principal. Contexto dark.
	Ação terciária. Grupos de ações equivalentes.	CTA de destaque. Contexto dark.
	Qualquer ação em fundo escuro.	Fundo claro. Substitui ghost/outline no dark context.
	Ações destrutivas irreversíveis: excluir, remover permanente.	Ações reversíveis. Confirmações sem consequência de dados.

Focus ring (teclado)

Exemplo de focus ring · Tab para ativar

Componentes

Chips & Tags

Chips — variantes

B2B UX Research Industrial 🏆 1º Lugar 🔒 NDA

B2B Code-based Prototyping Discovery

Status badges

Aprovado Em revisão Bloqueado

NDA Banner

DS Tags (uso interno)

New Stable

Componentes

Cards

Card base — hover com spring

Pesquisa

Síntese qualitativa

Campo, entrevistas, análise. Transformar ambiguidade em decisão estruturada.

Estratégia

Product Strategy

Da pergunta certa à solução certa. Discovery que evita meses de desenvolvimento.

Código

Code-based Prototyping

HTML + CSS + JS. Protótipos que fecham o gap entre designer e dev.

Card accent — barra lateral azul (métricas, sobre-strip)

15+

anos atuando como designer

240+

entregas 2022–2025

#1

Low Hack 2024

Componentes

Formulários

Inputs, textarea, select, checkbox e radio. Todos com estados de hover, focus, disabled e inválido. Focus ring sempre via :focus, não :focus-visible — feedback visual também para mouse.

Estados — input de texto

Nome completo Aparecerá em todas as comunicações.

Email corporativo

CNPJ CNPJ inválido. Verifique o formato.

Plano Configurado pelo administrador.

Textarea, select e múltipla escolha

Mensagem

Tipo de projeto

Áreas de interesse Pesquisa qualitativa Análise quantitativa Workshop de discovery

Urgência Não urgente Próximas 4 semanas Imediato

Anatomia de um campo

Elemento	Classe	Quando usar
Container	`.field`	Wrapper de label + input + helper/error
Label	`.field-label`	Sempre presente, acima do input
Label obrigatório	`.field-label-req`	Adiciona asterisco vermelho
Helper text	`.field-helper`	Instrução, contexto, exemplo
Error text	`.field-error`	Substitui helper quando há erro
Estado inválido	`.field-invalid`	Aplicar no `.field` pai

Componentes

Modal & Tooltip

Overlays para informação contextual e diálogos focados. Modal captura foco; tooltip aparece em hover/focus. z-index controlado por tokens (--z-modal, --z-tooltip).

Modal — preview funcional

Tooltip — hover sobre os elementos

Componentes

Tabs & Accordion

Padrões para organizar conteúdo denso. Tabs para conteúdo paralelo e exclusivo; accordion para conteúdo sequencial e expansível.

Tabs — preview funcional

A resistência ao digital era em parte cultural, mas principalmente consequência de experiências ruins com sistemas anteriores. O time de campo evitava abrir o app porque toda interação custava tempo que eles não tinham.

Discovery em campo durante 3 semanas, observando como o time real usava (e não usava) o sistema atual. Mapeamento de friccções por etapa, priorização por frequência e impacto.

Adoção de 18% para 76% em 90 dias. Tempo médio por registro reduzido de 4min30s para 1min12s. Indicadores reportados ao C-level em ROI, não em engajamento.

Accordion — preview funcional

Como o design impacta a decisão de investimento?

Discovery bem feito evita meses de desenvolvimento sem retorno. Em 2024, três projetos foram descartados após pesquisa, representando aproximadamente 12 meses de capacidade técnica liberada para o que importa.

Por que B2B industrial é diferente de B2C?

O usuário é profissional, o contexto é operacional, e a métrica de sucesso é eficiência operacional, não engajamento. Padrões de consumer não traduzem direto.

Quais ferramentas você usa para prototipar?

Figma para exploração visual rápida, Claude + Cursor para protótipos funcionais em código. Code-based prototyping fecha o gap entre designer e dev.

Quando usar cada padrão

Padrão	Use quando	Evite quando
Tabs	Conteúdos paralelos, mutualmente exclusivos, comparáveis (problema/processo/resultado)	Conteúdo sequencial. Mais de 5 abas — vire navegação real
Accordion	FAQ, especificações, conteúdo expansível opcional, formulários longos	Conteúdo essencial — esconder o que importa é antipadrão

Componentes

Visualizações de Dados

Padrões para construção de gráficos e diagramas interativos em SVG. Aplicável a qualquer produto digital — as implementações existentes no portfólio servem como referência de uso, não como limite de escopo.

Gráfico radial — preview funcional

Dimensão A

Dimensão B

Expert Domínio completo Proficiente Desenvolvendo Iniciado

Tokens — Escala de cor e geometria

/* Cores dos níveis — aliases dos tokens azul existentes */
--viz-level-5: #0A3AAF;  /* expert       = --blue-deep     */
--viz-level-4: #175CE5;  /* dominio      = --blue          */
--viz-level-3: #6B9FFF;  /* proficiente  = --blue-light    */
--viz-level-2: #A8C4FF;  /* desenvolvendo= --blue-lighter  */
--viz-level-1: #D8E6FF;  /* iniciado     = --blue-lightest */

/* Geometria fixa — nunca alterar sem rebuild do gráfico */
/* maxR: 140  innerR: 28  rings: 5  gap: 1.5deg          */
/* viewBox: "-200 -200 400 400"  (centrado na origem)     */
/* outerR = innerR + (maxR - innerR) * (level / rings)    */

/* Strokes */
--viz-ring-stroke:   rgba(23,92,229,.14);
--viz-path-stroke:   rgba(23,92,229,.12);
--viz-radial-stroke: rgba(23,92,229,.10);
--viz-inner-stroke:  rgba(23,92,229,.22);
--viz-center-fill:   rgba(23,92,229,.04);
--viz-slice-opacity: 0.9;  /* hover → 1.0 + drop-shadow */

/* Gráfico — gap e espaçamento (inspirado no Carbon Charts innerPadding) */
--viz-slice-gap:       1.5deg;   /* graus de separação entre fatias    */
--viz-label-offset:    24px;     /* labelR = maxR + 24 (164 do centro) */
--viz-wrapper-padding: 16px;     /* padding do div que envolve o SVG   */
--viz-chart-gap:       24px;     /* gap entre hard e soft no grid      */

/* Labels SVG */
/* default: font-size 11, weight 700, fill #5C6069         */
/* hover:   font-size 13, weight 800, fill #175CE5         */
/* labelR = maxR + 24 (140 + 24 = 164 do centro)           */

Regras de manutenção

O que	Como
Adicionar skill	Inserir objeto `{ label, value }` no array de dados. O ângulo de cada fatia recalcula automaticamente via `360 / n`.
Mudar nível	Alterar o valor do campo `level`. O `outerR` é calculado a partir de `LEVELS[level]`.
Mudar cor de nível	Alterar `COLORS[nivel]` — nunca hardcode direto no path.
Tooltip	Posicionado por `position:fixed` via `mousemove`. z-index deve usar `--z-tooltip (1100)`.
Acessibilidade	Adicionar `role="img" aria-label="Matriz de habilidades"` no SVG + tabela equivalente com `.visually-hidden`.

Diagrama de rede — nós orbitais

Quando usar este padrão: visualizar relações entre um elemento central e múltiplos satélites — mapeamento de ecossistema, fluxo de integrações, taxonomia de conceitos. O número de nós é configurável; 6–10 é o range com melhor legibilidade.

DIAGRAMA ORBITAL — 8 NÓS

Variações de uso

M01

Pergunta antes de solução

Lista estruturada / sem SVG

M02

Amplitude como método

Lista estruturada / sem SVG

M03

IA como extensão cognitiva

SVG interativo — IA Loop (8 nós)

M04

Clareza epistêmica

Tabela HTML / sem SVG

M05

Inovação

Lista estruturada / sem SVG

M06

Anatomia de produto digital

Diagrama de lista / sem SVG complexo

Diagrama orbital — especificação técnica

/* viewBox: configurável conforme densidade de nós      */
/* Centro recomendado: cx=300 cy=270 (viewBox 480×470)  */
/* Raio da órbita dos nós satélite: ~165px do centro    */
/* Raio dos nós satélite: 30px                           */
/* Raio do nó central: 46px  fill: #175CE5              */
/* N nós em circle — ângulos: distribuídos via 360/N    */
/*                             90°, 135°, 180°, 225°    */

/* Nós satélite — estado padrão */
fill: rgba(23,92,229,0.08);
stroke: rgba(23,92,229,0.28);   /* primeiros 2 nós */
stroke: rgba(23,92,229,0.25);   /* demais           */
stroke-width: 1.5;

/* Nós satélite — hover (classe .lp-active) */
fill: #175CE5 !important;
stroke: #175CE5 !important;
filter: drop-shadow(0 0 8px rgba(23,92,229,.55));

/* Labels dos nós satélite */
/* font-size: 11  font-weight: 700  fill: #175CE5       */
/* dy: +4.5 (offset vertical para centralizar no círculo)*/

/* Linhas de conexão nó → centro */
stroke: rgba(23,92,229,.20);  stroke-width: 1;

Paleta — mesma em ambos os gráficos

Primária

#175CE5

Ghost fill

rgba(23,92,229,.08)

Ring stroke

rgba(23,92,229,.14)

Label padrão

#5C6069 (--text-subtle)

Sistema

Tokens CSS Completos

Todos os tokens devem viver em layout.tokens.css. Cor, tipografia, bordas e sombras não devem estar hardcoded em nenhum arquivo HTML.

/* layout.tokens.css — v3.0 — Fonte única da verdade */
:root {

  /* Cor — Primária */
  --blue:           #175CE5;
  --blue-hover:     #1450cc;
  --blue-deep:      #0A3AAF;
  --blue-light:     #6B9FFF;
  --blue-lighter:   #A8C4FF;
  --blue-lightest:  #D8E6FF;
  --blue-ghost:     rgba(23,92,229,.08);
  --blue-border:    rgba(23,92,229,.2);
  --blue-ring:      rgba(23,92,229,.5);

  /* Cor — Neutros */
  --black:          #0A0B0D;
  --white:          #FFFFFF;
  --text-default:   #1A1D22;
  --text-secondary: #565B66;
  --text-subtle:    #5C6069;
  --text-disabled:  #9EA3AD;

  /* Cor — Superfícies */
  --surface-base:   #F9F9F9;
  --surface-raised: #F4F4F6;
  --surface-border: #E4E4E8;

  /* Cor — Semântica */
  --green:          #1A7F4B;
  --green-bg:       rgba(26,127,75,.07);
  --green-border:   rgba(26,127,75,.2);
  --amber:          #B45309;
  --amber-bg:       rgba(180,83,9,.07);
  --amber-border:   rgba(180,83,9,.22);
  --red:            #C0392B;
  --red-bg:         rgba(192,57,43,.07);
  --red-border:     rgba(192,57,43,.2);

  /* Tipografia */
  --font:           'Space Grotesk', sans-serif;

  /* Bordas */
  --r-sm:   4px;  --r-md: 8px;  --r-lg: 12px;
  --r-xl:  16px;  --r-2xl: 24px; --r-full: 9999px;

  /* Sombras */
  --sh-sm:  0 1px 4px rgba(0,0,0,.06);
  --sh-md:  0 4px 16px rgba(0,0,0,.08);
  --sh-lg:  0 12px 40px rgba(0,0,0,.12);

  /* Z-index */
  --z-nav:    1000; --z-drawer: 1001;
  --z-tooltip:1100; --z-modal:  2000;

  /* Motion */
  --ease-out:    cubic-bezier(.25,.46,.45,.94);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast:    150ms; --dur-base: 250ms;
  --dur-slow:    400ms; --dur-xslow: 600ms;

  /* Spacing — Containers */
  --container-lg:  1200px;
  --container-md:  1024px;
  --container-sm:  840px;
  --space-desktop: 32px;
  --space-tablet:  24px;
  --space-mobile:  16px;

  /* Spacing — Componentes */
  --gap-xs: 4px;       --gap-sm: 8px;
  --gap-sm-plus: 12px;  --gap-md: 16px;
  --gap-lg: 24px;     --gap-md-plus: 32px;
  --gap-xl: 40px;     --gap-2xl: 48px;
  --gap-3xl: 64px;
}

Z-Index Scale

Token	Valor	Uso
`--z-raised`	100	Conteúdo flutuante sem sobreposição de nav
`--z-dropdown`	200	Dropdowns, popovers
`--z-sticky`	900	Elementos sticky não-nav
`--z-nav`	1000	Navegação principal (header fixo)
`--z-drawer`	1001	Mobile nav drawer (sobre o nav)
`--z-tooltip`	1100	Tooltips e popovers informativos
`--z-modal`	2000	Modais e overlays

Sistema

Grid & Estrutura

Padrão obrigatório — structure

/* Estrutura obrigatória — NUNCA padding horizontal em section */
<section id="nome" style="padding: 88px 0; background: var(--surface-base);">
  <div class="container-lg">
    <!-- conteúdo -->
  </div>
</section>

Grids de conteúdo

Grid	Colunas	Gap	Uso
`.cases-grid`	3 → 2 → 1	18px	Cards de case
`.grid-2col`	1fr 1fr → 1fr	72px → 40px	Sobre, depoimentos
`.num-grid`	3 → 2 → 1	16px → 12px	Cards de métricas
`.ds-3col`	3 → 1	16px	Uso interno no DS

Hierarquia de seção — dark

Contato

Vamos conversar?

Colaborações, conexões ou projetos.

Sistema

Acessibilidade

Mínimo WCAG 2.1 AA. Focus rings obrigatórios. Touch targets mínimos de 44×44px. aria-hidden em ícones decorativos.

Contraste — pares críticos

Texto

16.4:1 ✓

text-default / white

Texto

5.7:1 ✓

text-secondary / surface-base

Texto

4.5:1 ⚠

text-subtle / surface-base · borderline AA

Botão

4.7:1 ✓

white / blue primária

Checklist — nova página

□ Importar layout.tokens.css e containers.css

□ body padding-top: 60px (nav fixed)

□ body overflow-x: hidden

□ Usar section → container-* sem exceção

□ Nav idêntica (copiar bloco, ajustar nav-active)

□ Breakpoints: tablet 1023px, mobile 767px

□ Tabelas largas com .table-scroll-wrap

□ .reveal + IntersectionObserver para scroll

□ Testar 375px, 768px, 1280px

□ Verificar contraste WCAG AA em textos sutis

Sistema

Referência Rápida

Classes disponíveis para uso imediato. Distingue componentes reusáveis dos estilos internos do DS. Use esta seção como ponto de partida para prototipar com Claude.

Autossuficiente por design. Todas as classes listadas abaixo estão definidas diretamente neste arquivo — incluindo containers, grids e reveal. Em produção, as classes de layout vivem em containers.css; aqui estão inlinadas para que o DS funcione como referência completa sem dependências externas.

Componentes — classes prontas para uso

Classe	Tipo	Descrição	Contexto
`.btn-primary`	Componente	Botão CTA principal	Fundo claro
`.btn-ghost`	Componente	Botão ação secundária	Fundo claro
`.btn-outline`	Componente	Botão terciário / toggle	Fundo claro
`.btn-dark`	Componente	Botão qualquer ação	Fundo escuro
`.btn-danger`	Componente	Ação destrutiva	Qualquer
`.btn-sm`	Modificador	Tamanho reduzido — combina com qualquer botão	—
`.btn-disabled`	Modificador	Estado desabilitado	—
`.chip`	Componente	Tag / label neutro	Fundo claro
`.chip-blue`	Modificador	Tag destaque azul	Fundo claro
`.chip-dark`	Modificador	Tag para contexto dark	Fundo escuro
`.chip-green`	Modificador	Tag sucesso / premiação	Qualquer
`.chip-amber`	Modificador	Tag aviso / NDA	Qualquer
`.card`	Componente	Card base com hover spring	Fundo claro
`.card-accent`	Componente	Card com barra lateral azul	Fundo claro/surface
`.eyebrow`	Componente	Label de seção uppercase com linha azul	Qualquer
`.section-divider`	Componente	Linha horizontal divisória	Qualquer
`.ds-status-success`	Componente	Badge de status positivo	Fundo claro
`.ds-status-warning`	Componente	Badge de status aviso	Fundo claro
`.ds-status-error`	Componente	Badge de status erro	Fundo claro
`.field`	Componente	Wrapper de campo de formulário	Qualquer
`.input / .textarea / .select`	Componente	Inputs de formulário com estados	Qualquer
`.check / .radio`	Componente	Checkbox e radio customizados	Qualquer
`.modal-overlay + .modal`	Componente	Diálogo com overlay e foco	Qualquer
`.tooltip-wrap + .tooltip`	Componente	Tooltip em hover/focus	Qualquer
`.tabs / .tab / .tab-panel`	Componente	Navegação por abas	Qualquer
`.accordion / .accordion-item`	Componente	Conteúdo expansível	Qualquer
`.reveal`	Componente	Elemento com scroll reveal (+ IntersectionObserver)	Qualquer

Layout — classes de estrutura

Classe	Comportamento	Quando usar
`.container-lg`	max-width 1200px · padding responsivo	Nav, hero, sobre, cases, footer
`.container-md`	max-width 1024px · padding responsivo	Conteúdo principal, grids duplos
`.container-sm`	max-width 840px · padding responsivo	Leitura centralizada, hero text
`.full-bleed`	width 100%	Banners edge-to-edge
`.cases-grid`	3 col → 2 → 1 · gap 18px	Cards de case
`.grid-2col`	1fr 1fr → 1fr · gap 72px → 40px	Sobre, depoimentos
`.num-grid`	3 col → 2 → 1 · gap 16px	Métricas, cards de número
`.table-scroll-wrap`	overflow-x: auto em mobile	Envolver tabelas largas

O que NÃO é componente reusável

As classes prefixadas com .ds-* (ex: .ds-section, .ds-hero, .ds-color-swatch) são estilos de apresentação deste documento — existem para exibir o DS em si, não para uso em produtos. As classes sem prefixo .ds- listadas acima são os componentes reais do sistema.

Saulo B_

Marca & Posicionamento

Posicionamento

Arquétipo Principal — O Criador

Arquétipo Secundário — O Mago

Voz

Nicho

O que Saulo B_ não é

Logotipo

Tom de Voz

Estratégico e Direto

Técnico e Colaborativo

Reflexivo e Provocador

Paleta de Cores

Tipografia

Espaçamento & Grid

Ícones

Motion

Ease Out — Ações de entrada

Ease Spring — Interações de feedback

Ease In-Out — Transições de estado

Durações

Botões

Chips & Tags

Cards

Formulários

Modal & Tooltip

Tabs & Accordion

Visualizações de Dados

Tokens CSS Completos

Grid & Estrutura

Acessibilidade

Navegação por Teclado

Semântica e ARIA

Touch & Mobile

Movimento Reduzido

Referência Rápida