Design System v1 · 2026

A identidade visual da

Mônica Santos

Sistema de design extraído dos imports do Figma front-end e back-end. Tokens, componentes, tipografia, animações e padrões — tudo em CSS puro, com variantes light e dark por seção via data-theme.

Tokens Tipografia Iconografia Espaçamento Componentes Padrões da Marca Seções Montadas Animações
Identidade

Paleta da marca

Os tokens --brand-* formam a paleta primitiva. Os apelidos --m1..--m5 mantêm compatibilidade com os imports do Figma.

100
--brand-100#f1e9e1 · bg light
200
--brand-200#ebe3dc · bg FAQ
300 · m4
--brand-300#ddc9b4
400 · m5
--brand-400#c6ad94
500 · CTA
--brand-500#af1d1b · accent
600 · m3
--brand-600#690500 · primário
700 · m2
--brand-700#452103
800 · m1
--brand-800#210f04

Vermelhos CTA (gradiente)

300
--red-300#ff6b6b
400 · gradient end
--red-400#c52323
500 · CTA
--red-500#af1d1b
600 · gradient start
--red-600#89120c

Gradiente CTA do Figma — botão principal:

linear-gradient(90deg, #89120c → #c52323)
Tokens

Tokens semânticos

Use sempre os tokens semânticos nos componentes — nunca os primitivos. Eles reagem automaticamente ao tema (light/dark) via data-theme.

Superfícies

--bg-base#f1e9e1
--bg-surface#fbf7f0
--bg-surface-raised#ebe3dc
--bg-surface-overlay#e0d4c4

Texto

--text-primary#210f04
--text-secondary.70
--text-accent#690500
--text-script#690500

Acento

--accent-base#af1d1b
--accent-hover#c52323
--accent-deep#690500
--pill-bg#ebe0d4

Bordas

--border-default.12
--border-subtle.07
--border-strong.22
--border-accent.30

Estados

--success-text#15803d
--warning-text#b45309
--danger-text#dc2626
--info-text#2563eb

Sombras

--shadow-sm

--shadow-md

--accent-shadow

Tipografia

Inter + Parisienne + DM Sans

A identidade combina três famílias: Inter para corpo e títulos, Parisienne como assinatura decorativa em pares de headlines, e DM Sans como alternativa para descrições secundárias.

Pares de headline (padrão Mônica)

Hero · h-pair-xl
Programa de alto nível criado para mulheres empreendedoras e donas de negócios locais
Section · h-pair-lg
Quando o negócio não tem estrutura, o resultado nunca é previsível
Card · h-pair-md
Está pronta para ter mais controle sobre o seu negócio?

Escala de display

Display XL Aa Bb Cc clamp(3rem, 8vw, 6rem)
Display LG Aa Bb Cc clamp(2.5rem, 6vw, 4.5rem)
Display MD Aa Bb Cc clamp(2rem, 5vw, 3.25rem)
Script XL controle Parisienne · clamp(3.5, 9vw, 6.5)
Script LG previsível Parisienne · clamp(2.75, 7vw, 5.25)
3xl Aa Bb Cc 123 1.875rem · 30px
2xl Aa Bb Cc 123 1.5rem · 24px
XL Aa Bb Cc 123 1.25rem · 20px
Base Aa Bb Cc 123 — corpo padrão 1rem · 16px
SM Aa Bb Cc 123 — auxiliar 0.875rem · 14px

Pesos

300 — Light

400 — Regular

500 — Medium

600 — Semibold

700 — Bold

800 — Extrabold

Tracking

tracking-display (-.040em)

tracking-tight (-.030em)

tracking-snug (-.020em)

tracking-normal (0)

tracking-wide (.02em)

tracking-widest (.30em)

Famílias

Inter — Body

Parisienne — Script

DM Sans — Alt

JetBrains Mono — code

Iconografia

Ícones

Tamanhos padronizados via --icon-*. Ícones sempre via currentColor ou contêineres com fundo. Usar SVG inline para acessibilidade.

Tamanhos


xs · 12

sm · 16

md · 20

lg · 24

xl · 32

2xl · 48

Contêineres com fundo

Ícones inline

Posicionamento claro

Falta de processo

Adicionar item

Layout

Espaçamento & Raios

Grid de 4px. Tokens --space-1..--space-32 e seções com --section-xs..--section-xl usando clamp() responsivo.

Escala (4px grid)

--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-6 · 24px
--space-8 · 32px
--space-12 · 48px
--space-16 · 64px
--space-20 · 80px

Raios

sm · 6px
md · 8px
lg · 12px
xl · 16px
2xl · 20px
3xl · 24px
card · 27px
full · 9999

Utilitários disponíveis

Margin: .mt-{0..20} .mb-{0..20} .mx-auto .my-{4..12}
Padding: .pt-{0..20} .pb-{0..20} .px-{0..10} .py-{0..12} .p-{0..8}
Gap: .gap-{1..12}
Section: .section-py-{xs..xl} .section-pt-{xs..xl} .section-pb-{xs..xl}
Mobile: .sm:mt-0 .sm:px-4 .sm:py-6 .sm:gap-4

Componentes

Componentes base

Botões, inputs, pills, badges e tags — todos com a paleta da Mônica e variantes responsivas.

Botões

Pills (label de seção)

Contexto e Problema Para Quem é O que muda na prática? Pill SM

Badges

Default Accent Success Warning Danger Info

Formulário (estados)

Tag Pills (Figma "Quebra")

Falta de posicionamento claro Falta de organização na geração de demanda Falta de processo comercial

Card padrão

Para conteúdo regular dentro de seções.

Card warm

Card destacado com radius 24-27px e sombra forte.

Pilar

Card de pilar com ícone redondo, título grande e descrição secundária em DM Sans.

FAQ — Acordeão

Para quem é o Método Negócio Previsível?
O programa é indicado para empreendedoras que já têm um negócio em funcionamento e querem organizar posicionamento, geração de demanda, processo comercial e gestão.
Preciso ter experiência com marketing digital?
Não. O método parte do zero e organiza cada área do negócio de forma prática.
Como funciona o acompanhamento individual?
Sessões mensais com diagnóstico, plano de ação e check-ins para ajustes contínuos.
Padrões

Padrões da marca

Elementos visuais característicos da Mônica: ticker horizontal, selo sticky, gradiente CTA e cards Antes/Depois.

Ticker (faixa horizontal)

Faixa marquee usada como divisor entre seções. Animação contínua via CSS, pausa em prefers-reduced-motion.

Método Negócio Previsível  •  Mônica Santos  •  Método Negócio Previsível  •  Mônica Santos  •  Método Negócio Previsível  •  Mônica Santos  •   Método Negócio Previsível  •  Mônica Santos  •  Método Negócio Previsível  •  Mônica Santos  •  Método Negócio Previsível  •  Mônica Santos  •  

Selo sticky

Badge circular "Método Negócio Previsível" usado em fotos e CTAs.

Método
Negócio
Previsível
Método
Negócio
Previsível
Método
Negócio
Previsível

.selo-sticky · .selo-sticky--sm · .selo-sticky--lg

Gradiente CTA

Identidade do botão principal — gradiente vermelho com sombra avermelhada.

--gradient-cta-deep · seções inteiras

Cards Antes / Depois

Comparação característica do Figma — header colorido + lista de items com ícone.

Antes
×Falta de previsibilidade
×Vendas inconsistentes
×Decisões baseadas em tentativa
×Sensação de estar perdida
×Esforço sem retorno claro
Depois
✓Previsibilidade de vendas
✓Vendas consistentes e crescentes
✓Decisões baseadas em estratégia
✓Clareza e direção no negócio
✓Esforço com retorno mensurável

Glass column (hero)

Coluna translúcida com gradiente — efeito do hero do Figma back-end.

Notification card (hero)

Card de notificação iOS-like — usado no hero como prova social.

Transferência Recebidahá 23m
Você recebeu uma transferência no valor de R$ 1.680,76.
Transferência Recebidahá 23m
Você recebeu uma transferência no valor de R$ 1.680,76.
data-theme="dark"

Seção em tema dark dentro de página light

Use data-theme="dark" em qualquer <section> para ativar o tema escuro automaticamente. Tokens, componentes e cores se adaptam.

Label em dark Accent Tag pill em dark
A mesma headline em tema escuro
Movimento

Animações & interações

Tokens de duração, easing e delay. Utilitários scroll-reveal via data-animate, micro-interações via classes .hover-*.

Durations

--duration-xfast · 75ms

--duration-fast · 150ms

--duration-base · 250ms

--duration-slow · 400ms

--duration-slower · 600ms

--duration-hero · 800ms

Easings

--ease-default

--ease-out

--ease-in

--ease-bounce

--ease-spring

--ease-sharp

Stagger delays

--delay-1 · 100ms

--delay-2 · 200ms

--delay-3 · 300ms

--delay-4 · 400ms

--delay-5 · 500ms

--delay-6 · 600ms

.hover-lift

Sobe 3px ao hover.

.hover-scale

Cresce 2% ao hover.

.hover-glow

Sombra de acento ao hover.

.animate-pulse-soft

Pulso vermelho contínuo (uso: ofertas/urgência).

.animate-float

Flutuação sutil 3s.

M

Scroll reveal · data-animate

fade-up
slide-left
scale-in
Templates

Seções montadas

Combinações pré-prontas usando os tokens — espelham padrões dos imports do Figma.

Hero · Tema dark
Programa de alto nível criado para mulheres empreendedoras e donas de negócios locais

O programa une administração, marketing digital, tráfego pago, vendas e atendimento, transformando o Instagram e o WhatsApp em canais previsíveis de aquisição de clientes.

Método Negócio Previsível  •  Mônica Santos  •  Método Negócio Previsível  •  Mônica Santos  •  Método Negócio Previsível  •  Mônica Santos  •   Método Negócio Previsível  •  Mônica Santos  •  Método Negócio Previsível  •  Mônica Santos  •  Método Negócio Previsível  •  Mônica Santos  •  
Os pilares
Os quatro pilares que sustentam um negócio previsível

Posicionamento

Clareza sobre o seu diferencial e forma de se apresentar no mercado.

Demanda

Geração de interesse consistente — orgânico e pago — todos os meses.

Vendas

Processo comercial claro para transformar interesse em compra.

Gestão

Rotina e indicadores para acompanhar o que funciona e o que ajustar.

Está pronta para ter mais controle sobre o seu negócio?

Com estrutura, direção e acompanhamento, o seu negócio deixa de oscilar e passa a ter previsibilidade.