Dark Mode MBS · Design System v1.1

Em algum momento, só criatividade
deixa de ser suficiente.

Sistema de design da marca MBS — Bastidores de Sucesso. Navy profundo, gold sofisticado, tipografia Cormorant + DM Sans. Tema dark como identidade principal, light disponível por seção via data-theme="light".

Navy #151E3D Gold #A27D50 Cormorant DM Sans WCAG AA

Tokens semânticos

Superfícies (Navy)

--page-outer
#03142D
--bg-base
#151E3D
--bg-surface
#1F294A
--bg-surface-raised
#2A3760
--bg-surface-overlay
#3D527B

Texto

--text-primary
#F0F1F5
--text-secondary
78%
--text-muted
55%
--text-accent
#C5A880
--accent-base
#A27D50

Estados semânticos

success
#4ADE80
warning
#FBBF24
danger
#F87171
info
#60A5FA
danger-fill (bullet)
#C0392B

Primitivos — Escala Gold (acento da marca)

900
800
700
600 ★
500
400
300
200
100

Dark ≠ inversão de light — superfícies independentes

Token Light (ivory) Dark (navy)
--bg-base#F0F1F5 (ivory)#151E3D (navy)
--bg-surface#FFFFFF#1F294A
--text-primary#151E3D (navy)#F0F1F5 (ivory)
--text-secondary#535353240,241,245 / 78%
--text-accent#A27D50 (gold médio)#C5A880 (gold claro)
--accent-base (CTA)#A27D50#A27D50 (mesmo gold)

Tipografia

Display — Cormorant (light 300, italic+bold gold)

display-xl Larissa Araújo clamp(3rem,10vw,6.5rem)
display-lg Trabalhe como um designer profissional. clamp(2.4rem,6vw,4rem) · 300
display-md O que você recebe clamp(2rem,5vw,3.25rem) · 300
display-sm Para quem é indicado clamp(1.6rem,4vw,2.2rem) · 400
display italic Investimento clamp 2.5–5rem · italic

Conteúdo — DM Sans (body / UI)

text-3xl Os 4 Pilares do MBS 1.875rem / 500
text-xl Estrutura profissional para criativos 1.25rem / 500
text-lg Transforme seu estúdio criativo em um negócio estruturado com processos, precificação e posicionamento premium. 1.125rem · 1.65
text-base Corpo padrão para parágrafos. O Box Bastidores de Sucesso reúne os modelos, processos e ferramentas que designers estruturados usam. 1rem · 1.65
text-sm Texto de suporte, labels, descrições secundárias e metadados. 0.875rem
eyebrow caps Exclusivo para profissionais criativos 0.75rem · 0.12em

Espaçamento

Tokens de space (grid 4px)

--space-14px
--space-28px
--space-416px
--space-624px
--space-832px
--space-1248px
--space-1664px

Section spacing (clamp responsivo)

--section-xs32–48px
--section-sm48–72px
--section-md64–88px
--section-lg80–128px
--section-xl96–160px

Border Radius

sm
md
lg
xl
(btn)
3xl
(card)
full

Componentes

Botões — Cormorant uppercase, radius 1rem (briefing)

Spec do briefing: primary bg #151E3D, secondary bg #3D527B, texto #F0F1F5, font Cormorant 1.25rem uppercase, padding 1.125rem 1.75rem, radius 1rem.

Pills de Hero — DM Sans 0.78rem 500

Box completo Designer profissional Larissa Araújo Templates incluídos

Badges semânticos (estados)

Padrão Premium Aprovado Pendente Encerrado Novidade

Os 4 Pilares do MBS — Feature Cards

Operação

Processos, ferramentas e gestão do dia a dia do estúdio.

Valor

Posicionamento premium, proposta de valor e diferenciação.

Demanda

Atração de clientes ideais e estratégia comercial sustentável.

Finanças

Precificação, lucro e saúde financeira do negócio.

Listas com bullets — gold (recomendado) e red (não recomendado)

Para você se

  • ✓Quer estruturar o atendimento ao cliente
  • ✓Quer parar de improvisar nos processos
  • ✓Busca posicionamento premium

Não é para você se

  • ✗Está começando agora na área criativa
  • ✗Procura uma fórmula mágica de marketing
  • ✗Não tem disponibilidade para implementar

FAQ Accordion — <details> nativo, zero JS

Como funciona o acesso ao Box Bastidores de Sucesso?
Após confirmação do pagamento, você recebe acesso vitalício ao Box completo com todos os modelos, processos e ferramentas em até 5 minutos via e-mail.
Posso parcelar o investimento?
Sim, o pagamento pode ser parcelado em até 12x no cartão de crédito, com possibilidade de desconto à vista no PIX.
O Box serve para qualquer área criativa?
O Box foi pensado para designers, mas se aplica a qualquer profissional criativo que atende clientes — fotógrafos, videomakers, social media, branding.

Browser mockup macOS — assinatura visual

larissaaraujo.com.br/box

O que muda quando você usa o Box

Antes

  • ×Atendimento improvisado
  • ×Sem processo claro
  • ×Cliente perdido na jornada

Depois

  • ✓Atendimento estruturado
  • ✓Processo replicável
  • ✓Cliente conduzido com segurança

Shadows

shadow-sm
shadow-md
shadow-lg
shadow-card
accent-shadow

Formulários — 9 estados

Pristine / Focus

Estado pristine — borda padrão

Error / Success

Digite um e-mail válido

Número verificado

Disabled / Read-only / Select

Lead Form — Aplicação para o MBS

Seus dados estão seguros. Sem spam.

Seções montadas

Box completo Designer profissional

Pare de improvisar no atendimento. Trabalhe como um designer profissional.

O Box Bastidores de Sucesso reúne os modelos, processos e ferramentas que designers estruturados usam para vender melhor e organizar projetos.

Mais de 200 criativos já transformaram seus negócios

Seção light dentro do dark

Estúdio criativo estruturado

Tokens light em ação dentro de um arquivo dark. Background #F0F1F5, texto navy, acento gold.

200+

Criativos mentorados

3x

Crescimento médio

97%

Satisfação dos alunos

Ainda tem dúvidas?

Fale direto com a Larissa pelo WhatsApp e tire suas dúvidas em tempo real.