MV/001 Manual visual vivo · 2026

MEDIDA forma SISTEMA.

Um laboratório visual para entender não apenas quanto mede, mas o que é, o que faz e como é codificado cada elemento de um site Creativoo.

Abrir o laboratório Ver implementação

00.0 / PRINCÍPIO

Design não é um número isolado.
É uma relação.

A mesma medida assume funções diferentes conforme hierarquia, público, dispositivo, contraste e conteúdo. Este manual mostra o resultado renderizado e sua especificação técnica lado a lado.

Mínimo legível

Corpo de texto começa em 16 px. Microtextos podem chegar a 12 px quando são secundários, contrastantes e não carregam ações críticas.

Escala fluida

clamp() interpola suavemente entre limites mobile e desktop, evitando dezenas de media queries.

Linha humana

Blocos de leitura ficam normalmente entre 50 e 75 caracteres. A unidade ch limita a linha em telas ultrawide.

∞

Sistema vivo

A escala pode mudar por nicho sem abandonar acessibilidade, consistência e identidade.

01.0 / TIPOGRAFIA FLUIDA

H1 a H6
medidos ao vivo.

Perfil tipográfico

Equilíbrio entre impacto editorial, tecnologia e leitura funcional.

Display

Peças hero e intervenções gráficas. Não substitui a hierarquia semântica H1.

Título H1

Assunto principal da página. Normalmente existe um H1 editorial por documento.

Título H2

Abre capítulos principais e organiza a leitura global da página.

Título H3

Divide subseções dentro de um capítulo e facilita a varredura visual.

Título H4

Título de cards, recursos, benefícios e agrupamentos internos.

Título H5

Subgrupo específico, nome de categoria ou informação auxiliar hierárquica.

Título H6

Menor heading. Deve manter sentido estrutural; não é apenas um texto pequeno.

Texto base é a unidade central de leitura. Precisa manter contraste, ritmo, largura controlada e nunca depender de zoom para ser compreendido.

MICROTEXTO / LEGENDA / COORDENADA A-001

02.0 / COMPRIMENTO DA LINHA

Quantos caracteres
cabem no olhar?

Largura do texto: 65ch

45chLeitura ideal75ch

A linha também é uma interface.

Este parágrafo muda de largura em tempo real usando a unidade ch, baseada aproximadamente na largura do caractere zero da fonte. Em telas grandes, o conteúdo não precisa ocupar todo o espaço disponível. Limitar a linha reduz o esforço dos olhos para retornar ao início da próxima frase.

Para conteúdo editorial, 65 a 75 caracteres costuma oferecer conforto. Landing pages e e-commerce usam linhas mais curtas, enquanto acessibilidade para idosos pode se beneficiar de 50 caracteres e espaçamento vertical mais generoso.

PROPRIEDADE ATIVAmax-width: 65ch;

O que faz: Limita o percurso horizontal dos olhos
Formato: Unidade CSS relativa ch
Faixa: 50–75 caracteres conforme público

45–55chCrianças, idosos, instruções críticas

50–60chE-commerce e textos comerciais

60–70chCorporativo, portfólio e B2B

65–75chBlogs, notícias e leitura longa

03.0 / FONT PAIRING

Vozes para
cada contexto.

Uma fonte cria personalidade; a outra sustenta leitura. O pareamento define o tom antes mesmo do conteúdo ser compreendido.

A / TECH

Plus Jakarta
Inter

Precisão, inovação e autoridade tecnológica.

heading + body

B / EDITORIAL

Bodoni Moda
Lora

Credibilidade, profundidade e luxo impresso.

serif + serif digital

C / COMMERCE

Sora
Open Sans

Energia comercial, clareza e conversão.

display sans + neutral sans

∞ / CREATIVOO

Bricolage
Bodoni

Editorial suíço, espaço e tecnologia orgânica.

expressive + premium

DM SansInterface e navegação

BricolageTítulos expressivos

Bodoni ModaContraste editorial

IBM Plex MonoDados e coordenadas

Genos / SyneFuturo e intervenção

04.0 / SISTEMA CROMÁTICO

Energia concentrada.
Contraste deliberado.

50%escuros25%claros12%verde8%azul5%atmosfera

Clique em uma cor para copiar o hexadecimal.

05.0 / ASSETS OFICIAIS

A marca sem
distorção.

Fonte única de verdade: assets_padrao_creativoo. Originais preservados; cópias otimizadas por projeto.

PNG ARGB · 2338 × 200 · proporção 11,69:1

PNG ARGB · #000D22 · fundo claro

Regra estrutural

width: clamp(...);
height: auto;
object-fit: contain;

Nunca fixar largura e altura simultaneamente sem preservar a proporção.

Chevron esquerdoSVG · viewBox

Chevron direitoSVG · viewBox

WhatsAppSVG · ícone funcional

06.0 / FORMATOS E COMPONENTES

Forma também
comunica função.

Cápsulas conduzem ações; raios grandes criam matéria orgânica; bordas finas estruturam sem endurecer a composição.

Botão cápsula48–56 px

CTA primário e secundário. Área de toque mínima recomendada: 44 × 44 px.

HTML button/a + CSS
border-radius: 999px

12284878

Escala de raios12 a 78 px

12 px para utilitário; 28–48 px para cards; até 78 px em superfícies hero.

CSS border-radius

A/001

Objeto editorial

Superfície, borda, profundidade e espaço negativo.

Card premiumpadding 24–48 px

Agrupa conteúdo relacionado e cria hierarquia sem parecer um template rígido.

HTML article + CSS Grid

81624324864

Escala de espaço8 px base

Espaçamento modular para manter ritmo entre elementos, cards e capítulos.

CSS custom properties

07.0 / RESPONSIVIDADE

Não encolher.
Recompor.

Cada breakpoint reorganiza hierarquia, densidade, mídia, toque e movimento. Mobile não é desktop reduzido.

Desktop

1280–1920+

2–3 colunas, espaço negativo, cursor, tilt e grandes escalas display.

@media (min-width: 1024px)

Tablet

768–1023

Grid reduzido, toque prioritário e mídia reequilibrada.

@media (768px ≤ width < 1024px)

Mobile

360–767

Uma coluna, corpo mínimo 16 px, menu 16 px e alvos de 44 px.

@media (max-width: 767px)

ElementoMobileDesktopFunção

Body geral16 px16–18 pxLeitura contínua

Navegação16 px14–16 pxOrientação e toque

H1 padrão32–46 px48–71 pxTema principal

H2/H324–38 px32–55 pxCapítulos e subseções

Microtexto12–13 px12–14 pxMetadados secundários

Alvo interativo≥44 × 44 px≥40 × 40 pxAção segura

08.0 / CÓDIGO APLICÁVEL

Do laboratório
para o WordPress.

O mesmo sistema pode ser registrado no CSS global, no theme.json, no Elementor Pro ou no Bricks.

:root {
  --max-text-width: 65ch;
  --font-body: clamp(1rem, .95rem + .25vw, 1.125rem);
  --font-h1: clamp(2.85rem, 2.45rem + 2.1vw, 4.45rem);
}

body { font-size: var(--font-body); line-height: 1.6; }
h1 { font-size: var(--font-h1); line-height: 1.08; }
.readable { max-width: var(--max-text-width); }

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        { "slug": "body", "size": "clamp(1rem, .95rem + .25vw, 1.125rem)", "name": "Texto Base" },
        { "slug": "h1", "size": "clamp(2.85rem, 2.45rem + 2.1vw, 4.45rem)", "name": "Título H1" }
      ]
    },
    "layout": { "contentSize": "65ch", "wideSize": "1200px" }
  }
}

Elementor ProAbra uma página no Elementor.
Acesse Menu, depois Configurações do Site e então CSS Personalizado.
Cole os tokens globais.
No widget, use var(--font-h1) no tamanho personalizado.
Limite a linha com selector p { max-width: var(--max-text-width); }.

Bricks BuilderAbra Theme Settings e depois Custom CSS.
Cole os tokens globais e salve.
Em Typography, abra Font Size e use o valor raw var(--font-h2).
Em Layout, abra Max Width e use var(--max-text-width).
Prefira classes globais em vez de estilos isolados.

<?php
function creativoo_fonts() {
  wp_enqueue_style(
    'creativoo-fonts',
    'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Bricolage+Grotesque:wght@600;800&display=swap',
    array(),
    null
  );
}
add_action('wp_enqueue_scripts', 'creativoo_fonts');

09.0 / REGRA FINAL

O tamanho certo
é aquele que cumpre a função.

Medir, nomear, testar e documentar. Esse é o caminho entre estética e sistema.

Voltar ao início

MEDIDA forma SISTEMA.

Design não é um número isolado.É uma relação.

Mínimo legível

Escala fluida

Linha humana

Sistema vivo

H1 a H6medidos ao vivo.

Título H2

Título H3

Título H4

Título H5

Título H6

Quantos caracterescabem no olhar?

A linha também é uma interface.

Vozes paracada contexto.

Plus JakartaInter

Bodoni ModaLora

SoraOpen Sans

BricolageBodoni

Energia concentrada.Contraste deliberado.

A marca semdistorção.

Forma tambémcomunica função.