docs.ceocerrano.online
Acesso restrito
Design System · CEO Cerrano Docs

Porsche Precision
— o sistema visual

Todos os tokens, componentes, regras tipográficas e princípios visuais que governam docs.ceocerrano.online. Extraído por análise estática com design-md e documentado para uso em qualquer novo documento.

Arquétipo porsche-precision
Confiança 88%
Qualidade C · 76/100
Família tipográfica 3 famílias
Border radius 0px (toda a UI)
Sombras nenhuma
01 — Paleta

Três cores. Sem exceção.

Cream, ink e antique gold. Toda a identidade visual vive nesse triângulo cromático. Não existe azul, cinza genérico, nem purple nesse sistema. Clique em qualquer swatch para copiar o hex.

Surface · Background
#f5f0e8
Cream — --cream
Copiado!
Texto · Gate Overlay
#1a1610
Ink — --ink
Copiado!
Acento · Interativo · Kicker
#c9a84c
Antique Gold — --gold
Copiado!
Texto secundário · Mutado
#7a6e5e
Ink Muted — --ink-muted
Copiado!
Surface escura · Hover alternativo
#ede7d9
Cream Dark — --cream-dark
Copiado!
Erro · Gate error message
#e07070
Coral — error state
Copiado!
Border · Divider hairline
rgba(26,22,16,0.12)
Border — --border
Copiado!
Hover de card — único uso de branco
#ffffff
White — só em hover
Copiado!

Filosofia: cream e ink são a dupla couro-e-tipo da letterpress. O gold nunca aparece como fundo grande — é um carimbo de precisão, como tinta metálica em página de título.

02 — Tipografia

Três famílias. Papéis rígidos.

Playfair Display domina os títulos com autoridade editorial. Inter sustenta a leitura com clareza. JetBrains Mono é a voz mecânica de toda a UI. Cruzar famílias dentro de um mesmo elemento é proibido.

Título Hero
display-hero
Playfair Display · 900 clamp(2rem, 5vw, 3.5rem) line-height: 1.1 letter-spacing: 0em Uso: h1 único por página
Heading Display
display-large
Playfair Display · 700 1.6rem (25.6px) line-height: 1.2 Uso: gate-title, seções
Subheading Card
subheading-large
Playfair Display · 700 1.1rem (17.6px) line-height: 1.4 Uso: títulos de card e lista
Corpo de texto principal para leitura contínua e descrições detalhadas de documentos.
body-large
Inter · 400 1rem (16px) line-height: 1.6 Uso: corpo, subtítulos
Descrição secundária de documento, metadados e informações de suporte.
body-small
Inter · 400 0.85rem (13.6px) line-height: 1.6 Uso: desc de card, metadado
Kicker Label
button-small · kicker
JetBrains Mono · 400 0.68rem · letter-spacing 0.18em uppercase obrigatório Uso: kicker acima de h1
Entrar
button
JetBrains Mono · 400 0.7rem · letter-spacing 0.14em uppercase obrigatório Uso: botões CTA
docs.ceocerrano.online · grupo sobi · goiânia, go
caption-small · footer
JetBrains Mono · 400 0.65rem · letter-spacing 0.1em uppercase · ink-muted Uso: footer, labels menores
03 — Componentes

Cada peça do sistema

Componentes renderizados com os tokens exatos do sistema. O que você vê aqui é o que deve aparecer em todo documento novo.

Botão · Primary Gold
bg #c9a84c · text #1a1610 font JetBrains Mono 0.7rem · letter-spacing 0.14em · uppercase padding 0.85rem · radius 0px hover opacity 0.85 (sem mudança de cor)
Badge · Documento Tag
Sistema   Guia   Design
bg transparent · text #c9a84c border 1px solid #c9a84c · radius 0px font JetBrains Mono 0.6rem · letter-spacing 0.12em · uppercase padding 0.2rem 0.6rem
Card · Lista de Documento
Segundo Cérebro
Sistema pessoal de captura e organização de ideias com Obsidian + Claude Code
bg #f5f0e8 · hover #ffffff border via grid gap:1px + bg rgba(26,22,16,0.12) title Playfair Display 1.05rem 700 desc Inter 0.82rem · ink-muted
Input · Gate (dark surface)
bg rgba(255,255,255,0.07) sobre #1a1610 border rgba(255,255,255,0.15) · focus #c9a84c font JetBrains Mono 0.9rem · letter-spacing 0.1em · centered radius 0px · text #f5f0e8
Nav Header
docs.ceocerrano.online
bg rgba(245,240,232,0.92) + backdrop-filter blur(12px) · height 56px border-bottom 1px solid rgba(26,22,16,0.12) · padding 0 3rem brand JetBrains Mono 0.72rem · ink-muted · uppercase · links 0.62rem · gold no ativo
04 — Layout & Espaçamento

A grade e o ritmo

Coluna única. Padding generoso. Profundidade comunicada apenas por borda e contraste de superfície — nunca por sombra.

Escala de espaçamento

xs
12px
Margin após kicker label
sm
14px
Padding de botão · margin após h1
md
24px
Padding vertical de cards · gap do form
lg
32px
Padding de footer · gap de seção
xl
48px (3rem)
Padding de header e main — identidade editorial

Border radius — tudo é 0px

Cada elemento do sistema tem corners quadrados. A única exceção reservada é border-radius: 9999px para pill shapes, que não aparece em lugar algum no sistema atual.

Botão · 0px
Card · 0px
Input · 0px
Badge · 0px
Modal · 0px

Profundidade — sem sombra

O sistema usa 5 níveis de elevação sem nenhum box-shadow. Profundidade = contraste de borda + superfície.

Flat
Sem borda. Background cream padrão. Nível base de toda superfície.
Ambient border
1px solid rgba(26,22,16,0.12). Header, footer, borda de lista.
Hairline grid
gap:1px no container com background:var(--border). Técnica do ledger.
Focus ring
border-color:#c9a84c no focus. Gold como único sinal de atenção interativa.
Dark overlay
background:#1a1610 full viewport. Reservado para gate de acesso — máximo contraste.
05 — Do's & Don'ts

O que preserva e o que destrói

Qualquer desvio dessas regras quebra imediatamente a leitura da identidade. O sistema é restritivo por design — a restrição é o que cria a coerência de um documento autoral.

Fazer
Usar Playfair Display 900 exclusivamente no h1 hero — máxima autoridade tipográfica, uma vez por página
Aplicar JetBrains Mono + uppercase + tracking ≥0.10em em TODA a UI: kickers, badges, botões, footer, labels
Usar gold #c9a84c com parcimônia: kicker, tag, botão, focus ring. Nunca como fundo de seção
Construir divisores de lista com gap:1px + background:var(--border) no container — hairline translúcido
Manter padding de seção em 3rem mínimo — o espaço editorial é identidade, não desperdício
Usar #1a1610 como texto padrão — nunca substituir por #000000 puro
Reservar o dark overlay completo (background:#1a1610) exclusivamente para o gate de acesso
Não fazer
×Adicionar border-radius em qualquer elemento — nem 2px. O sistema é 100% square
×Usar #000000 preto puro — o ink do sistema é warm-brown #1a1610
×Usar azul, roxo ou verde como cor de ação — o único acento interativo é gold #c9a84c
×Escrever JetBrains Mono em minúsculo sem tracking — mono sem espaçamento parece código solto
×Adicionar box-shadow em qualquer elemento — zero declarações de sombra no sistema inteiro
×Usar Playfair Display em peso 400 para headings — mínimo 700 para títulos, 900 para hero
×Usar #ffffff branco como background de página — o fundo é cream #f5f0e8; branco só em hover de card
06 — Agent Prompt Guide

Prompts prontos para IA

Cole qualquer um desses prompts numa IA (Claude, Gemini, GPT) para criar novos componentes nesse estilo exato. Cada prompt inclui todos os tokens necessários.

Header hero com kicker
Crie um header editorial com padding 3rem e border-bottom 1px solid rgba(26,22,16,0.12). Acima do título, um kicker em JetBrains Mono 0.68rem peso 400, uppercase, letter-spacing 0.18em, cor #c9a84c. Título em Playfair Display peso 900, tamanho clamp(2rem,5vw,3.5rem), line-height 1.1, cor #1a1610. Subtítulo em Inter 1rem peso 400, cor #7a6e5e, max-width 520px. Background cream #f5f0e8. Zero border-radius. Zero box-shadow.
Lista de documentos com divider hairline
Crie uma lista de documentos com técnica de hairline: container com display:grid, gap:1px, background:rgba(26,22,16,0.12), border:1px solid rgba(26,22,16,0.12), max-width:720px. Cada item com background:#f5f0e8. Ao hover, background:#ffffff (transição 0.15s). Dentro de cada item: título em Playfair Display 1.1rem peso 700, cor #1a1610; descrição em Inter 0.85rem peso 400, cor #7a6e5e; tag em JetBrains Mono 0.6rem uppercase letter-spacing 0.12em, cor #c9a84c, border 1px solid #c9a84c, padding 0.2rem 0.6rem; seta → em #7a6e5e que translada translateX(4px) no hover. Padding interno 1.5rem 1.75rem. Radius 0px em tudo.
Gate de acesso full-bleed
Crie um overlay de acesso: position fixed, inset 0, background #1a1610, display flex, align-items center, justify-content center. Dentro, em coluna centralizada com gap 1.5rem: (1) brand label JetBrains Mono 0.65rem uppercase letter-spacing 0.18em cor rgba(245,240,232,0.35); (2) título Playfair Display 1.6rem peso 700 cor #f5f0e8; (3) form max-width 320px com input background rgba(255,255,255,0.07) border rgba(255,255,255,0.15) text #f5f0e8 font JetBrains Mono 0.9rem padding 0.85rem 1.25rem radius 0 focus border-color #c9a84c; (4) botão background #c9a84c text #1a1610 JetBrains Mono 0.7rem uppercase letter-spacing 0.14em padding 0.85rem width 100% radius 0 hover opacity 0.85.
Footer de página
Crie um footer com padding 2rem 3rem, border-top 1px solid rgba(26,22,16,0.12), background #f5f0e8. Texto em JetBrains Mono 0.65rem peso 400, uppercase, letter-spacing 0.1em, cor #7a6e5e. Formato: "Nome da marca · Cidade, UF". Zero border-radius. Zero sombra.