Design System v1 · 2026

A identidade visual da

Mônica Santos

Versão dark do sistema. Mesmos tokens semânticos — fundo vinho/marrom, texto creme, acento vermelho mantido. Use data-theme="dark" em <body> para a página inteira ou em uma <section> específica.

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

Identidade

Paleta da marca

No tema dark, o fundo predominante é --brand-600 (#690500) — o vinho/bordô da marca, presente em todas as seções dark do Figma. O texto vira creme e o vermelho --brand-500 mantém-se como acento de CTA.

100

--brand-100#f1e9e1 · texto dark

200

--brand-200#ebe3dc

300 · m4

--brand-300#ddc9b4 · script

400 · m5

--brand-400#c6ad94

500 · CTA

--brand-500#af1d1b · accent

600 · m3

--brand-600#690500 · bg-base

700 · m2

--brand-700#452103 · bg-warm

800 · m1

--brand-800#210f04 · bg-deep

Vermelhos CTA

300

--red-300#ff6b6b

400

--red-400#c52323

500

--red-500#af1d1b

600

--red-600#89120c

Gradiente CTA (idêntico em light e dark):

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

Tokens

Tokens semânticos · dark

No tema dark, todos os tokens semânticos são reescritos. Componentes que usam apenas semânticos (e nunca primitivos) reagem automaticamente.

Superfícies

--bg-base#690500

--bg-surface#560400

--bg-surface-raised#7a1006

--bg-surface-overlay#8a1d13

--bg-deep#210f04

--bg-warm#452103

Texto

--text-primary#f1e9e1

--text-secondary.72

--text-accent#ddc9b4

--text-script#ddc9b4

Acento

--accent-base#af1d1b

--accent-hover#c52323

--accent-deep#c52323

--pill-bg.10 cream

Bordas

--border-default.14

--border-subtle.07

--border-strong.28

--border-accent.40

Estados

--success-text#4ade80

--warning-text#fbbf24

--danger-text#f87171

--info-text#60a5fa

Sombras

--shadow-sm

--shadow-md

--accent-shadow

Tipografia

Inter + Parisienne + DM Sans

No tema dark, o Parisienne assume o tom --brand-300 (m4) — bege claro — em vez do vinho usado no light.

Pares de headline

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)

Script XL controle Parisienne

3xl Aa Bb Cc 123 1.875rem

Base Aa Bb Cc 123 — corpo padrão 1rem

Pesos

300 — Light

400 — Regular

500 — Medium

600 — Semibold

700 — Bold

800 — Extrabold

Famílias

Inter

Parisienne

DM Sans

JetBrains Mono

Tracking

tracking-display

tracking-tight

tracking-normal

tracking-widest

Componentes

Componentes base

Mesmos componentes, agora no tema dark.

Botões

Pills

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

Badges

Default Accent Success Warning Danger Info

Inputs

Tag Pills

Falta de posicionamento claro Falta de organização

Card padrão

Para conteúdo regular.

Pilar

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

Card raised

Variante com nível elevado de superfície.

FAQ — Acordeão

Para quem é o Método Negócio Previsível?

O programa é indicado para empreendedoras com negócio em funcionamento.

Preciso ter experiência com marketing?

Não. O método parte do zero.

Como funciona o acompanhamento?

Sessões mensais com diagnóstico e plano de ação.

Layout

Espaçamento & Raios

Escala

--space-1 · 4px

--space-2 · 8px

--space-4 · 16px

--space-8 · 32px

--space-16 · 64px

--space-20 · 80px

Raios

sm · 6

md · 8

lg · 12

xl · 16

2xl · 20

3xl · 24

card · 27

full

Iconografia

Ícones

Tamanhos

xs · 12

sm · 16

md · 20

lg · 24

xl · 32

Contêineres

Inline

Posicionamento claro

Falta de processo

Padrões

Padrões da marca

Ticker

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

Método
Negócio
Previsível

Gradiente CTA

--gradient-cta-deep

Cards Antes / Depois

Antes

×Falta de previsibilidade

×Vendas inconsistentes

×Decisões baseadas em tentativa

×Sensação de estar perdida

×Esforço sem retorno

Depois

✓Previsibilidade de vendas

✓Vendas consistentes

✓Decisões estratégicas

✓Clareza e direção

✓Esforço com retorno

Glass column (hero)

Notification card

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="light"

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

A regra é simétrica: tag data-theme="light" em qualquer seção reverte o tema, mesmo dentro de uma página marcada como dark.

Label em light Accent

A mesma headline em tema claro

Movimento

Animações & interações

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

--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.

.animate-float

Flutuação sutil 3s.

M

Templates

Seções montadas

Combinações pré-prontas — 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.