DS SANDBOX · v2

Primitivas do design system

Render isolado de cada primitiva. Usado pra Playwright baseline + manual review. Fase 2.

2.1

Kicker

src/components/ds/Kicker.astro
default · sem dot
Indícia Security Radar · v2
dot mint
Radar ao vivo · desde 18 out 2025
dot mint + pulse
Escaneando · 2 min 14 s
dot violet
Planos · 4 tiers
dot warn
Atenção · reincidência
dot crit + pulse
CRIT · ação imediata
2.2

EditorialH1

src/components/ds/EditorialH1.astro
size="hero" · palavra-âncora mint

Radar forense do seu perímetro.

size="pillar"

LGPD na prática: guia de conformidade empresarial

size="cluster"

Multas LGPD: dosimetria ANPD

size="section" · as=h2 dentro de article

Um scan em sete atos.

2.3

Button

src/components/ds/Button.astro
primary md
primary md + iconRight
ghost md
ghost md + iconRight
primary sm
primary lg + link
Ver tiers
primary disabled
ghost loading
2.4

StatCell

src/components/ds/StatCell.astro
emphasis (default · Bodoni 26px)
CLIENTES · 2026
47
startups + scale-ups BR
emphasis · sem sub
SCANS RODADOS
18.412
emphasis · align center
FINDINGS FECHADOS
1.204
mediana 4h 12min
emphasis · align right
UPTIME · ÚLT. 90D
99,94%
1 incidente · 2h 14min
emphasis=false · mono 20px
CVE CRÍTICO
CVE-2024-38856
Apache OFBiz
emphasis · número grande
SCORE ATUAL
72
+4 últimos 30d
2.5

Pill

src/components/ds/Pill.astro
CRIT 9.1
CRIT · 9.1
HIGH 7.4
HIGH · 7.4
MED 5.9
MED · 5.9
LOW 3.2
LOW · 3.2
INFO (sem score)
INFO
compact · CRIT 9.1
CRIT · 9.1
label custom · ABERTO
ABERTO
label custom · CORRIGIDO
✓ CORRIGIDO
2.6

Dot

src/components/ds/Dot.astro
mint · md (default)
radar ao vivo
mint + pulse · md
scanning · 2:14
violet · sizes xs/sm/md/lg
warn + pulse
atenção · reincidência
crit + pulse · lg
CRIT · ação imediata
ink · status neutro
3 abertos · 14 fechados
2.7

Skeleton

src/components/ds/Skeleton.astro
line · finding row placeholder
block · card placeholder
circle · avatar placeholder + line
2.8

Hairline

src/components/ds/Hairline.astro
solid subtle (default)
solid strong
dashed subtle
solid · com label centralizado
dashed · com label
vertical (entre blocos inline)
CRIT · 9.1 HIGH · 7.4 MED · 5.9
2.9

NoteCallout

src/components/ds/NoteCallout.astro
mint (default) · decisão editorial
muted · nota secundária
warn · atenção regulatória
crit · aviso crítico
sem kicker
3.1

RadarHero

src/components/radar/RadarHero.astro
default · score 72 · 5 dots · +4 últimos 30d
empty state · score "—" · scan #1 preparando
3.2

FindingOrbit

src/components/radar/FindingOrbit.astro
default · 4 findings (crit live + high + med + low)
3.3

AnatomyStrip

src/components/radar/AnatomyStrip.astro
default · 7 fases I-VII · Subfinder → httpx → Nuclei → LGPD → Triagem → Evidência → Publicar
§ II · ANATOMIA

Um scan em sete atos.

Cada fase tem responsabilidade única, orçamento de tempo conhecido e produz evidência verificável. Nada é caixa-preta — você audita cada etapa.

  1. I
    FASE · ~45s
    Descoberta
    Subfinder + passivo · 20+ fontes OSINT
  2. II
    FASE · ~1min
    Fingerprint
    httpx · WAF detect · headers
  3. III
    FASE · ~2min
    DAST
    Nuclei · OWASP Top 10:2025
  4. IV
    FASE · ~40s
    LGPD-BR
    Templates curados BR · 187 regras
  5. V
    FASE · ~15s
    Triagem
    CVSS v3.1 · dedup · score
  6. VI
    FASE · ~5s
    Evidência
    SHA-256 · Merkle · imutável
  7. VII
    FASE · ~3s
    Publicar
    Timeline + webhooks (Jira/Slack)
TEMPO TOTAL TÍPICO · 4 min 23 s
nenhum dado do cliente persiste · mascaramento na origem
Entender a fundo
3.4

StatBlock

src/components/radar/StatBlock.astro
editorial variant · 4 stats home footer
CLIENTES · 2026
47
startups + scale-ups BR
SCANS RODADOS
18.412
desde 18 out 2025
FINDINGS FECHADOS
1.204
mediana 4h 12min
UPTIME · ÚLT. 90D
99,94%
1 incidente · 2h 14min
inline variant · sem bg · 4 stats
SCORE ATUAL
72
+4 últimos 30d
FINDINGS ABERTOS
9
3 crit · 2 high · 4 med
SUBDOMÍNIOS
127
112 vivos · 15 dormentes
PRÓXIMO SCAN
09:47
daqui 28 min
6.1

OrganDiagram · base

src/components/radar/OrganDiagram.astro
estrutura base · cartouche + rulers + núcleo (órgãos vêm na 6.2)
FIG. 1 · CUTAWAY DO MOTOR DE RADAR · ESCALA 1:1
NÚCLEO · SECURITY SCORE
72
+4 · 30D
CUTAWAY · v2.4.1
6.2

OrganDiagram · 8 órgãos + conectores

src/components/radar/OrganDiagram.astro
cutaway completo · 8 órgãos orbitando o núcleo · conectores rotulados
FIG. 1 · CUTAWAY DO MOTOR DE RADAR · ESCALA 1:1
NÚCLEO · SECURITY SCORE
72
+4 · 30D
CUTAWAY · v2.4.1
I
Subfinder
OSS · descoberta passiva
~45s · 127 subdom
II
httpx
fingerprint + WAF detect
~1min · 412 endpoints
III
Nuclei
OWASP Top 10:2025 · 6.500+ templates
~2min · comunidade
IV
CVSS v3.1
scoring padronizado · FIRST.org
0-10 · padrão dominante 2026
V
Templates LGPD-BR
CPF · CNPJ · cookies · retenção
187 regras · BR nativas
VI
SHA-256
evidência versionada · chain
cada finding assinado
VII
Merkle tree
árvore raiz auditável
export para S3 · imutável
VIII
Webhooks
slack · jira · pagerduty
SLA inline · retry 3×
8.1

Content primitives

src/components/content/*
Breadcrumb
Tldr · Em resumo
NormCitation · inline (4 variantes)

O encarregado é obrigatório pelo LGPD · Art. 41 salvo dispensa via Res. CD/ANPD 2/2022 · § 2º — mas com quote expandível em

LGPD · Art. 6º IV
IV — necessidade: limitação do tratamento ao mínimo necessário para a realização de suas finalidades, com abrangência dos dados pertinentes, proporcionais e não excessivos.
e versão linkada em NIST FIPS 180-4 .

FaqBlock · 4 Qs com 2 abertas
Perguntas que estão no ar

Respostas sem rodeio.

Quem precisa de DPO?
Qualquer agente de tratamento que exerça atividade em escala regular, exceto pequeno porte conforme Res. CD/ANPD 2/2022.
Posso terceirizar o DPO?
Sim. DPOaaS é válido desde que o contratado tenha autonomia técnica e canal direto com o titular — Art. 41 § 2º.
DPO precisa ser registrado?
Não há registro formal, mas o contato deve estar público no site e comunicado à ANPD em incidentes.
DPO responde criminalmente?
Não pessoalmente, mas pode responder civilmente por negligência. Art. 42 define o agente de tratamento como responsável.
ContentCta · variant "dpo"