Cartiez · brand kit
Esta página não tem cor, fonte nem asset próprios: tudo vem do brand kit oficial do CentralX Social (centralx-knowledge/brands/cartiez), copiado por npm run sync-brand. Atualizou o kit, rode o sync e a LP e esta página mudam juntas.
Acento = lime (--cz-accent-lime), mantido no kit (v1.0.3; tokens v1.0.1) por decisão do André (23/10, após testar 3 acentos próprios). Nenhuma peça usa o hex direto: a troca continua sendo de uma linha. Edite color.accent.lime em tokens/tokens.json do kit, rode build_tokens.py e depois npm run sync-brand.
Logo
assets/logo/svg/cartiez-lockup-h-fundo-preto.svg · Ghostinho 1B-B · kit v2.0.0 · olhos e brilho do i = token de acento
- Lockup horizontal é o principal; empilhado em espaço quadrado; símbolo quando o nome já aparece perto.
- Lime só sobre preto ou dentro de forma preta: olhos lime dentro do corpo preto; brilho do i lime só na versão fundo-preto.
- Com o Ghostinho animado em cena, use só o nome (nunca símbolo e mascote lado a lado).
- Use os SVG de assets/logo/svg/; não redigite o nome. O texto vivo .cz-wm é só para UI.
Cores · tokens.json
clique: a variável vai para a área de transferênciaAcento só no status pago, no brilho do logo, no kicker, na pílula CTA flutuante (1 por página) e em 1 detalhe por tela. Nunca texto sobre fundo claro. No máximo 1 seção de fundo lime por página. Texto pequeno sobre preto: no mínimo --cz-neutral-350; --cz-neutral-500 só para decoração ou texto ≥18px.
Tipografia · .cz-t-*
.cz-t-display-xl · Sora 300 · títulos de seção
.cz-num · Archivo 800 itálico · valores
títulos de app · Space Mono Bold · minúsculo + seta
fontes locais do kit (OFL): Sora, Archivo, Space Mono · assets/fonts
Componentes · components/cartiez.css
.cz-pill · .cz-pill-lime (1 por página) · .cz-pill-dark
.cz-btn · botão de app com sombra deslocada
.cz-tag + .cz-st-* · só PAGO tem cor
.cz-value.tilt · .cz-linkpill · valor fictício
.cz-chip(.on) · input claro
.cz-rail · trilho do pedido (horários fictícios)
.cz-steps · .cardform (formulário fixo do checkout)
Loja livre; checkout em trilhos.
- Chrome (livre): logo, cores, texto, ordem das seções, skin do topo.
- Formulário de cartão (fixo): campos, ordem, estilo e botão não mudam por loja. Nenhum agent deve customizar este bloco.
- Sem bandeiras de cartão nem meios de pagamento citados até o Product travar.
- Ao fim, o cliente volta pra loja com status de pago.
.cz-skin · chrome livre por loja
Galeria do kit
abrir gallery.html ↗
Elementos gráficos
.cz-marquee · vazado em --cz-neutral-450
Line-art · objetos iso (SVG)
kit v1.0.3 · acento em currentColor = var(--ctz-accent) · inline via <use>, nunca <img>assets/iso/svg/ · agente-ia, relatórios e clientes são mais largos que altos: área maior que a caixa, mínimo ~64px
Assets · originais do kit
clique pra baixar o original (PNG/SVG/TTF)* PNG com acento embutido (iso-*-lime, logo/png e logo/icons): não seguem o token. Se o acento mudar, precisam ser regerados pelo CXS.
Pranchas aprovadas v1 · assets/boards
Regras de imagem
- Ilustração de rua em preto e branco, cinza, posterizada (assets/illustration).
- Objetos isométricos isolados com contorno grosso (balão, caixa, etiqueta, sacola).
- Uma cor de destaque por imagem: acento (pago) ou violeta (contexto). Nunca as duas competindo.
- Brilhos, rabiscos, halftone e grid pontilhado como textura, em código ou SVG quando possível.
- Telas de produto com dados claramente fictícios ("Loja Exemplo", "#1042").
- PNG convertido para WebP no site; SVG mantido.
- Pessoas, rostos ou mãos geradas por IA.
- Logos de terceiros, bandeiras de cartão, marcas de bancos ou apps.
- Foto colorida de banco de imagem, gradiente arco-íris, neon além do acento.
- Números, métricas ou depoimentos que pareçam reais.
- Hex do acento escrito à mão: use a variável.
Pedidos de imagem vão para o CentralX Social, que segue as receitas do kit (imagery/treat.py: hero, iso, lines).
Para agents: como replicar
<!-- 1. tokens + componentes do kit (fonte única) -->
<link rel="stylesheet" href="/brand/kit/tokens/tokens.css">
<link rel="stylesheet" href="/brand/kit/components/cartiez.css">
/* Tailwind: presets: [require('./tailwind.preset.js')] */
/* 2. cores só por variável --cz-* (nunca o hex) */
.pago { background: var(--cz-accent-lime); color: var(--cz-accent-lime-ink); }
.card { background: var(--cz-semantic-surface); border-radius: var(--cz-radius-bento); }
/* 3. trocar o acento: kit/tokens/tokens.json → color.accent.lime
python3 tokens/build_tokens.py && npm run sync-brand */