kami-landing

Produz um documento de página única no sistema de design kami (紙 / 纸). A estética empresta do design editorial impresso, white papers técnicos e correspondências antigas datilografadas — o objetivo é conteúdo bom em papel bom, não UI de aplicativo moderno.

Fonte da verdade do sistema de design: design-systems/kami/DESIGN.md. Leia antes de publicar. Tokens, regras de tipografia, os "dez invariantes" e cores proibidas vivem lá.

O que você recebe

Um único arquivo HTML autônomo com:

• Tela de pergaminho quente (#f5f4ed) — nunca #ffffff.
• Acento cromático único — azul-tinta (#1B365D), usado no número da seção, na palavra de destaque do título, na linha esquerda do manifesto e nos valores métricos. Em qualquer outro lugar, o azul-tinta deve cobrir ≤ 5% da área de superfície do documento.
• Serif em um peso (500) para hierarquia — Charter (EN), TsangerJinKai02 / Source Han Serif (CN), ou YuMincho (JA), selecionado pelo parâmetro language. Sem itálico em lugar nenhum.
• Ritmo de impressão apertado — alturas de linha 1.10–1.55, espaçamento entre letras por idioma (0 para EN, 0.35px para CN, 0.02em para JA).
• Pilhas numéricas definidas em font-variant-numeric: tabular-nums para que colunas métricas e dígitos de paginação fiquem alinhados de forma limpa.
• Profundidade via anéis de 1px + sombras sussurradas (0 4px 24px rgba(0,0,0,0.05)). Sem sombras duras, sem neomorfismo, sem desfoques de backdrop-filter.
• Preenchimentos de tag como hex sólido (ex: #E4ECF5), nunca rgba() — renderizadores de impressão pintam tags alfa duas vezes.
• Responsivo em 1280 / 980 / 768 / 560.

Estrutura da página

1. Eyebrow row     — locale switcher · edition · version (12px sans uppercase)
2. Hero            — display headline (96–106px serif 500), tagline (21px),
                     three hero-token chips (paper-tinted)
3. Manifesto       — pull paragraph in serif 400, 20px, 1.65 LH, with
                     ink-blue left-rule and signature footer
4. Metrics row     — 3-6 cells: value (24px serif 500 ink-blue, tabular-nums),
                     label (12px serif 500 olive)
5. Chapters        — numbered (`01`, `02`, …) ink-blue serif 500 14px,
                     section title 28-32px, body 14-15px
6. Footer          — kicker word (mega serif 500), license · year · contact,
                     three-column site index in 12px serif 500

Contrato de fluxo de trabalho

1. Coletar o brief da marca

Use AskQuestion (ou equivalente) para coletar o brief da marca em pedaços. Não despeje toda a lista de entrada para o usuário; pergunte em duas rodadas:

1. Rodada de identidade — nome, slogan, local, edição / versão, URL principal, idioma dominante.
2. Rodada de conteúdo — parágrafo do manifesto + assinatura, 3-6 blocos de métricas, 3-5 entradas de capítulo (título + lede + corpo).

2. Escolher a pilha de idiomas

O parâmetro language controla qual pilha de --serif é definida em :root. Escolha com base no idioma dominante do manifesto e do corpo do capítulo:

Conteúdo misto em script inline é aceitável — a cadeia de fallback por glifo do navegador cuida disso. Não encadeie as três famílias dentro de uma única declaração font-family; isso dilui o caractere.

3. Escrever index.html

Produza um único arquivo com todo o CSS inline. Espelhe a estrutura de example.html e use apenas os tokens de design-systems/kami/DESIGN.md. Não invente novas cores, pesos ou famílias de fontes.

Primitivas de componentes que o agente pode inserir (todas definidas no bloco de exemplo <style>):

• .eyebrow, .label — linhas superiores sans-serif
• .metric — par vertical de valor + rótulo
• .section-num + .section-title + .section-lede
• .tag.standard, .tag.brush — tags hex sólido (um pincel no máximo por página)
• .quote — citação serif 500 à esquerda
• ul.dash — marcadores en-dash em azul-tinta
• .code — bloco de código com fundo marfim e borda de 1px
• .footer-kicker — palavra mega serif 500

…