App Visual System V1

Referência interna

Componentes-base para as telas piloto. Coluna da esquerda em light, da direita em dark. Passe o mouse e use Tab para ver hover e foco.

1. DsButton · DsIconButton

primary · secondary · ghost · danger; sm 32 · md 36 · lg 40; disabled e loading.

Light

Dark

2. DsField · DsInput · DsTextarea · DsSelect · DsCheckbox · DsSwitch

Label estático 12/500, helper, erro com aria-describedby/aria-invalid; 36px, raio 10.

Light

Aparece só para a sua equipe.

0/280

Até 280 caracteres.

Link ativoDesligue para pausar os acessos.
Avisar a cada conversão
Desativado

Dark

Aparece só para a sua equipe.

0/280

Até 280 caracteres.

Link ativoDesligue para pausar os acessos.
Avisar a cada conversão
Desativado

3. DsCard · DsSection

Canvas → surface → subtle. Nunca card sobre card sobre card.

Light

Lançamento Verão

Campanha com 4 divulgações ativas desde 02/09.

Conteúdo da seção (DescriptionList, formulários, tabela).

Card estático

padding sm (16px)

Dark

Lançamento Verão

Campanha com 4 divulgações ativas desde 02/09.

Conteúdo da seção (DescriptionList, formulários, tabela).

Card estático

padding sm (16px)

4. DsDataTable · DsListRow

Ordenação, seleção, clique na linha abre o Inspector. Abaixo de 768px vira lista. Estados loading, vazio e erro.

Light

1 selecionada(s) · ordenação: entries desc

Carregando conteúdo

Nenhuma divulgação encontrada

Nenhum resultado para “TikTok”.

DsListRow (forma mobile)

1.284 entradas
3.410 entradas

Dark

1 selecionada(s) · ordenação: entries desc

Carregando conteúdo

Nenhuma divulgação encontrada

Nenhum resultado para “TikTok”.

DsListRow (forma mobile)

1.284 entradas
3.410 entradas

5. DsSheet · DsInspector

Sheet 400px à direita (bottom sheet no mobile). Esc fecha e o foco volta ao botão.

Light

Outdoor Av. Paulista · QR

Divulgação · Lançamento Verão · Outdoor

Ativo

Relação

  1. Campanha:Lançamento Verão
  2. Divulgação:Outdoor Av. Paulista
  3. QR Code:QR brdl.ink/verao-outdoor

Entradas

1.284

Aumento de +12,4%Últimos 30 dias

Conversões

96

Últimos 30 dias

Taxa

7,5%

Queda de −0,8%Últimos 30 dias

Propriedades

Destino
https://brodalink.com/verao
Link curto
brdl.ink/verao-outdoor
Canal
Outdoor
Criado em
02/09/2026 por Ana Souza

Dark

Outdoor Av. Paulista · QR

Divulgação · Lançamento Verão · Outdoor

Ativo

Relação

  1. Campanha:Lançamento Verão
  2. Divulgação:Outdoor Av. Paulista
  3. QR Code:QR brdl.ink/verao-outdoor

Entradas

1.284

Aumento de +12,4%Últimos 30 dias

Conversões

96

Últimos 30 dias

Taxa

7,5%

Queda de −0,8%Últimos 30 dias

Propriedades

Destino
https://brodalink.com/verao
Link curto
brdl.ink/verao-outdoor
Canal
Outdoor
Criado em
02/09/2026 por Ana Souza

6. DsDialog · DsConfirmDialog

sm 400 · md 520 · lg 720. Primária por último; dispensa nunca repete o verbo.

Light

Dark

7. DsEmptyState · DsSkeleton · DsErrorState

first-use sempre com CTA; restricted com PlanGate; erro com detalhe técnico recolhível.

Light

Crie sua primeira divulgação

Divulgação é onde a campanha aparece: outdoor, Instagram, folder ou corretor.

Relatórios comparativos

Compare divulgações lado a lado.

DsSkeleton lines / block / circle

Carregando conteúdo
Carregando conteúdo
Carregando conteúdo

Dark

Crie sua primeira divulgação

Divulgação é onde a campanha aparece: outdoor, Instagram, folder ou corretor.

Relatórios comparativos

Compare divulgações lado a lado.

DsSkeleton lines / block / circle

Carregando conteúdo
Carregando conteúdo
Carregando conteúdo

8. DsNotice

info · warning · danger · result.

Light

Seu domínio está sendo verificado

Isso leva até 30 minutos. Você pode continuar criando links.

Você usou 9 de 10 Links

Ao chegar no limite, novos links ficam bloqueados.

Primeira conversão registrada

Instagram Stories · Link gerou uma conversão agora há pouco.

Dark

Seu domínio está sendo verificado

Isso leva até 30 minutos. Você pode continuar criando links.

Você usou 9 de 10 Links

Ao chegar no limite, novos links ficam bloqueados.

Primeira conversão registrada

Instagram Stories · Link gerou uma conversão agora há pouco.

9. DsTabs

underline e segmented; setas ←/→, Home e End.

Light

Visão geral da campanha Lançamento Verão.

Dark

Visão geral da campanha Lançamento Verão.

10. DsMetric · DsMetricStrip

Período sempre visível. Verde só para resultado e variação positiva.

Light

Entradas

5.253

Aumento de +9,1%Últimos 30 dias

Conversões

339

Aumento de +18,2%Últimos 30 dias

Taxa de conversão

6,5%

Sem variação 0%Últimos 30 dias

Origem principal

Instagram

Últimos 30 dias

Conversões

339

Aumento de +18,2%Últimos 30 dias

Custo por conversão

R$ 4,12

Aumento de +6%Últimos 30 dias

Entradas

Últimos 30 dias

Dark

Entradas

5.253

Aumento de +9,1%Últimos 30 dias

Conversões

339

Aumento de +18,2%Últimos 30 dias

Taxa de conversão

6,5%

Sem variação 0%Últimos 30 dias

Origem principal

Instagram

Últimos 30 dias

Conversões

339

Aumento de +18,2%Últimos 30 dias

Custo por conversão

R$ 4,12

Aumento de +6%Últimos 30 dias

Entradas

Últimos 30 dias

11. DsBadge · DsStatusDot · DsPlanBadge

soft e outline; ativo = ponto verde com texto neutro.

Light

RascunhoNovo+96 conversõesVerificandoDestino fora do arImportado
RascunhoNovo+96 conversõesVerificandoDestino fora do arImportado
AtivoPausadoVerificando domínioDestino fora do arInformação
FreeProBusinessPremiumPro · teste

Dark

RascunhoNovo+96 conversõesVerificandoDestino fora do arImportado
RascunhoNovo+96 conversõesVerificandoDestino fora do arImportado
AtivoPausadoVerificando domínioDestino fora do arInformação
FreeProBusinessPremiumPro · teste

12. DsPlanGate · DsUsageMeter

inline (padrão), limit e full. Nunca abre checkout direto.

Light

Pro

Relatórios por divulgação

Veja qual outdoor, post ou corretor trouxe cada conversão.

  1. Passo 1

    Cada divulgação ganha seu próprio link ou QR Code.

  2. Passo 2

    As entradas e conversões chegam separadas por origem.

  3. Passo 3

    Você vê qual outdoor, post ou corretor trouxe resultado.

Links

6 de 10Links

QR Codes

9 de 10QR Codes

Perto do limite do plano.

Formulários

3 de 3Formulários

Limite atingido. Novos formulários ficam bloqueados.

Entradas

18.420 · Ilimitado

Dark

Pro

Relatórios por divulgação

Veja qual outdoor, post ou corretor trouxe cada conversão.

  1. Passo 1

    Cada divulgação ganha seu próprio link ou QR Code.

  2. Passo 2

    As entradas e conversões chegam separadas por origem.

  3. Passo 3

    Você vê qual outdoor, post ou corretor trouxe resultado.

Links

6 de 10Links

QR Codes

9 de 10QR Codes

Perto do limite do plano.

Formulários

3 de 3Formulários

Limite atingido. Novos formulários ficam bloqueados.

Entradas

18.420 · Ilimitado

13. DsPageHeader

Contexto clicável, um único Voltar (último nível).

Light

Outdoor Av. Paulista · QR

Ativo

Divulgação da campanha Lançamento Verão.

Dark

Outdoor Av. Paulista · QR

Ativo

Divulgação da campanha Lançamento Verão.

14. DsOriginTrail

Campanha › Divulgação › Link/QR › (Formulário) → Conversão.

Light

  1. Campanha:Lançamento Verão
  2. Divulgação:Instagram Stories
  3. Link:brdl.ink/verao-stories
  4. Formulário:Cadastro de interesse
  5. Conversão:Visita agendada
  1. Campanha:Lançamento Verão
  2. Divulgação:Outdoor Av. Paulista
  3. QR Code:QR brdl.ink/verao-outdoor
  1. Link:brdl.ink/verao-bio
  2. Conversão:Sem campanha · WhatsApp

Dark

  1. Campanha:Lançamento Verão
  2. Divulgação:Instagram Stories
  3. Link:brdl.ink/verao-stories
  4. Formulário:Cadastro de interesse
  5. Conversão:Visita agendada
  1. Campanha:Lançamento Verão
  2. Divulgação:Outdoor Av. Paulista
  3. QR Code:QR brdl.ink/verao-outdoor
  1. Link:brdl.ink/verao-bio
  2. Conversão:Sem campanha · WhatsApp