Sistema de Design — Showcase v5.0
70%Bold Impact é um sistema de design editorial construído sobre os princípios do Estilo Tipográfico Internacional — grid rigoroso, hierarquia racional, sem ornamentos sem função.
01 — Tipografia / Type System
"A tipografia é a voz silenciosa do texto impresso."
— Princípio Editorial
Escala Tipográfica
Dois tipos de letra apenas. Livre Bodoni para momentos de expressão — itálico é regra, não exceção. Public Sans para leitura contínua — grotesco humanista de proporcionalidade precisa.
§ 1.1 — Hierarquia tipográfica é lei: cada elemento tem papel definido no sistema. Violações são proibidas.
02 — Cores / Colour System
SW-001
Background
#F7F5F0
SW-002
Primary
#1A1A18
SW-003
Swiss Red
#CC0000
SW-004
Klein Blue
#002FA7
SW-005
Muted
#EDEAE3
SW-006
Muted Text
#6B6860
Principios Cromaticos
Fundo — Papel
Off-white quente. Não branco puro — papel de edição de luxo.
Primaria — Tinta
Preto quente com subtom marrom. Nunca #000000.
Vermelho — Alerta Editorial
Vermelho Swiss. Destaque, urgencia, pull quotes.
Azul — Profundidade
Klein Blue. Lincks, estados de foco, elementos de navegacao.
Combinacoes em uso
Primario
Dark sobre light — contraste máximo
Swiss Red
Alertas, destaques, pull quotes
Klein Blue
Links, foco, elementos ativos
Muted
Fundos secundarios, cards, areas de codigo
§ 2.1 — Paleta restrita. Seis valores. Nenhuma variacao nao catalogada é admitida. Ver catálogo SW-001 a SW-006.
03 — Espacamento / Spacing Scale
"O espacamento nao e decorativo. E estrutural."
— Principio de Grid
A escala de espacamento segue progressao geometrica baseada em 4px (1 unidade base). Cada nivel e multiplo do anterior, criando ritmo matematico que se percebe mesmo sem medi-lo. Nao existem valores arbitrarios neste sistema.
§ 3.1 — Unidade base: 4px. Todos os espacamentos sao multiplos inteiros desta unidade. Valores fracionados sao proibidos.
04 — Botoes / Button System
Tamanhos
Variantes
Composicao em Contexto
Transforme seguidores em clientes.
Sistema de automacao editorial. Tres passos. Zero fricao.
Mais conversao
§ 4.1 — Botoes usam Public Sans 700, tracking 3px, uppercase. Altura minima: 36px (sm), 48px (default), 56px (lg). Raio: 0.
05 — Cards / Editorial Layout
Marketing • Feature
A janela de engajamento inicial e de 48 horas. Depois disso, o algoritmo move o seguidor para um tier de baixa prioridade que raramente e revertido sem intervencao direta.
Produto • Beta
Escale sem perder autenticidade.
Growth • Urgente
De seguidor a cliente em 3 passos.
Destaque Editorial
"O conteudo sem distribuicao e apenas ruido."
— Principio Bold Impact
§ 5.1 — Cards seguem o layout de revista: imagens como placeholders fotograficos coloridos. Hover inverte o campo cromatico. Border: 2px solid primary.
06 — Stats / KPIs Editoriais
nao engajam
mais conversao
janela critica
satisfacao
Os numeros acima nao sao decorativos. Cada KPI representa uma decisao de produto fundamentada em dados reais de plataformas sociais. A tipografia Libre Bodoni italic confere aos numeros peso e presenca que transcende o dado bruto — eles se tornam argumentos visuais. O traço vermelho abaixo de cada numero e uma regra editorial: separa o dado da interpretacao. Acima do traço, fato; abaixo, contexto. Esta divisao e uma convencao do jornalismo de dados europeu adotada no sistema.
"Um numero isolado e dado. Um numero com contexto e argumento."
— Editorial Swiss 2.0
§ 6.1 — Numeros em Libre Bodoni Italic Bold. Labels em Public Sans 600 Small Caps. Tracos de 3px em vermelho ou azul sao elementos estruturais, nao decorativos.
07 — Badges / Labels Categoricos
Variantes
Badges em Contexto
Automacao de Engajamento v2.0
Badges funcionam como marcadores categoricos — identificam o tipo de conteudo antes da leitura do headline.
§ 7.1 — Badges: Public Sans 700, tracking 2px, uppercase, padding 3px 10px. Sem raio. Cinco variantes catalogadas — nenhuma adicional sem aprovacao editorial.
08 — Formularios / Form System
Campos Padrão
Dados nao compartilhados com terceiros.
Formato invalido. Use nome@dominio.com
Principios de Formulario
Labels em Small Caps
Public Sans 700 / 10px / tracking 3px / uppercase. Label sempre acima do campo, nunca placeholder substituto.
Foco em Klein Blue
O estado de foco usa border-color: var(--color-accent-b). Nenhuma sombra — apenas a linha muda de cor.
Erro em Swiss Red
Border-color muda para #CC0000. Mensagem de erro abaixo do campo em 12px, font-weight 500. Sem icones.
Altura Minima: 48px
Campos de 48px de altura. Border 2px. Sem border-radius. Padding horizontal 16px.
§ 8.1 — Formularios sem border-radius, sem shadows decorativas. O grid e as bordas sao os unicos elementos organizadores.
09 — Divisores / Rule System
Rule Thick — 4px Primary
Rule Regular — 2px Primary
Rule Subtle — 1px Muted
Rule Accent Red — 4px #CC0000
Rule Accent Blue — 4px #002FA7
Hierarquia de Regras
Nivel 1 — Secoes principais
Nivel 2 — Subsecoes
Nivel 3 — Elementos internos
Destaque — Vermelho editorial
Informativo — Azul Klein
§ 9.1 — Cinco tipos de regra catalogados. As regras sao os bones do layout — estruturam sem ornamentar. Nenhuma regra sem funcao semantica.
10 — Sistema de Grid / 12-Column Grid Architecture
12 Colunas — Estrutura Base
Layouts Assimetricos
Split 4 + 8
Split 3 + 9
Split 2 + 10
Split 8 + 4 (Invertido)
Composto 6 + 3 + 3
Full Width — col-12
12 Colunas
O grid de 12 colunas permite divisoes em halvings (6+6), thirds (4+4+4), quarters (3+3+3+3) e composicoes assimetricas — todas matematicamente justificadas.
Gap: 24px
O gap de 24px corresponde a --space-4 da escala de espacamento. Consistente em todos os contextos de grid — nenhuma excecao sem justificativa.
Assimetria Intencional
Layouts assimetricos criam tensao visual e hierarquia. A regra: o elemento mais importante recebe mais colunas. A proporcao reflete a importancia do conteudo.
§ 10.1 — Grid de 12 colunas com gap de 24px (--space-4). Classes: .col-1 a .col-12. Container: max-width 1440px, padding clamp(20px, 4vw, 64px).