Brand book

Kriou. identidade visual.

Este é o documento único de design system do ecossistema Kriou. Toda interface nova nasce daqui — botões, cores, tipografia, tom de voz. Quando bater dúvida em qualquer projeto novo, vem aqui primeiro, copia o token, segue.

Princípios

Sério mas não corporativo. Serif italianizado pra elegância, sans clean pra leitura.
Papel, não tela. A paleta inteira é construída em torno do tom papel envelhecido (#F4F1EC) — não do branco puro.
Um único laranja terra. #B5431E é o sotaque. Usa pra acentuar, não pra inundar.
O ponto é a assinatura. "Kriou.", "plano.", "errado." — sempre fechando com ponto laranja.
Densidade comedida. Padding generoso, hierarquia clara, sem decoração gratuita.

Identidade

Logo.

São cinco ativos. Cada um cobre um caso específico de uso. Não recolore, não distorce, não adiciona efeitos — sombra, gradiente, contorno, brilho, nada. Se o fundo não combina, escolhe outra variante.

Wordmark

kriou-wordmark.svg baixar

kriou-wordmark-dark.svg baixar

Símbolo (ícone)

kriou-icon.svg baixar

kriou-icon-dark.svg baixar

kriou-icon-transparent.svg baixar

Quando usar cada um

Variante	Quando usar
wordmark	Header de site, login, signup, capa de email — qualquer lugar com espaço horizontal.
wordmark-dark	Mesmas situações, mas em fundos escuros (dashboards dark, footer night).
icon	Favicon, app icon iOS/Android, avatar default, OG image quadrada.
icon-dark	App icon em modo escuro, ícone de notificação.
icon-transparent	Loaders, watermarks, qualquer lugar sobreposto a fotos ou backgrounds custom.

Não faça

Faça

Mantém o ponto laranja sempre. Espaço respiratório ao redor (mín. metade da altura). SVG escalável.

Não faça

Recolorir o ponto pra outras cores. Adicionar sombras/gradientes/contorno. Esticar verticalmente. Trocar a fonte do wordmark.

Identidade

Paleta de cores.

Clica em qualquer cor pra copiar o HEX. A regra mental é simples: papel é o palco, ink é o ator, terra é o protagonista. As outras cores (olive, info, warn, danger) são utilitárias — só aparecem quando precisam comunicar estado.

Papel — fundos

Paper

--paper #F4F1EC

Paper Alt

--paper-alt #EDE9E2

Paper Deep

--paper-deep #E6E1D8

Night

--night #18160F

Ink — texto

Ink

--ink #1E1A14

Ink-2

--ink-2 #46403A

Ink-3

--ink-3 #8A7F72

Ink-4

--ink-4 #C0B8AE

Terra — sotaque

Terra

--terra #B5431E

Terra BG

--terra-bg #9E5038

Terra Deep

--terra-deep #8A3F2E

Estados — utilitárias

Olive (sucesso)

--olive #5C7048

Info

--info #3A6480

Warn

--warn #C89C3D

Danger

--danger #A0392B

Identidade

Territórios visuais.

A Kriou tem dois territórios visuais com função semântica clara — não preferência estética. Eles comunicam onde o usuário está e que tipo de ação esperamos dele. Saber qual usar é decisão de produto, não de design.

Os dois territórios

Paper --paper · #F4F1EC

Kriou.

Calmaria.

Onde mora o cliente. Espaço pra ler com calma, decidir um plano, configurar perfil, entender uma cobrança.

Account · perfil · plano
Faturamento · histórico · NF
Suporte · tickets · ajuda
Onboarding · landing · signup

Night --night · #18160F

Kriou. Admin

Foco.

Onde mora o operador. Densidade, controle, foco. Mexer aqui afeta produção, então o ambiente é sério desde o fundo.

Admin · configurações · OIDC
Painéis de monitoramento
Logs · auditoria · billing interno
Stripe Dashboard · AWS Console (referências)

Quando usar cada um

A regra mental é simples: quem é o leitor desta tela? Se é cliente pagante ou em onboarding, é Paper. Se é operador da Kriou (você, equipe, devs internos), é Night. Se a tela existe só pra cliente ler, Paper. Se existe pra alguém operar algo crítico, Night.

Não é dark mode. Não tem toggle. Não é preferência. É territorialidade. A mesma pessoa pode estar nos dois territórios em momentos diferentes — usuário paga seu plano (Paper) e depois entra como Partner ver o painel de operação (Night). A mudança de fundo comunica: "agora você está em outro lugar, com outras responsabilidades".

Matriz de decisão

Elemento

Paper

Night

Fundo principal

--paper · #F4F1EC

--night · #18160F

Cor de texto

--ink / --ink-2

--paper / rgba(244,241,236,.75)

Sidebar

--paper-alt #EDE9E2

--ink #1E1A14 (não --night)

Cards

--paper com border --border

--night-2 #242018, sem border

Botão primário

Fundo --ink · texto --paper

Fundo --terra · texto --paper

Hover do primário

vai pra --terra (acende)

fica --terra-deep (concentra)

Botão ghost

border --border-m · texto --ink-2

border rgba(244,241,236,.2) · texto rgba(244,241,236,.75)

Bordas/divisores

--border rgba(80,68,50,.12)

rgba(244,241,236,.08)

Ponto laranja

--terra #B5431E

--terra #B5431E (mesma)

Badge ADMIN — assinatura do território Night

Quando o território é Night, o wordmark Kriou. nunca aparece sozinho. Sempre acompanhado de um badge laranja indicando o "tipo" de operador. ADMIN é o mais comum, mas a mesma estrutura serve pra outros papéis: PARTNER, OPERATOR, INTERNAL, etc.

Kriou. Admin

<!-- admin-brand.html — Kriou (kriou.com) -->
<div class="admin-brand">
  <span class="wordmark">Kriou<span class="dot">.</span></span>
  <span class="admin-badge">Admin</span>
</div>

/* admin-badge.css — Kriou (kriou.com) */
.admin-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(181, 67, 30, 0.2);
  color: #E47A52;
  padding: 0.18rem 0.4rem;
  border-radius: 2px;
  font-weight: 600;
}

Status indicator — VAZIO / PARCIAL / COMPLETO

Pattern recorrente em telas de configuração (visto no /admin/configuracoes). Indica o estado de uma seção numa olhada. Sempre mono uppercase, letterspacing alto, no canto direito do header da seção.

Vazio Parcial Completo

<!-- status-pill.html — Kriou (kriou.com) -->
<span class="status-pill empty">Vazio</span>
<span class="status-pill partial">Parcial</span>
<span class="status-pill complete">Completo</span>

Pista externa — onde achar a chave

Quando uma configuração precisa de credencial de provedor externo (Stripe, Brevo, Cloudflare...), sempre adicionamos uma pista em mono terra logo abaixo do label, dizendo o caminho exato onde achar. Reduz fricção do operador — é o tipo de detalhe que diferencia ferramenta amadora de ferramenta profissional.

API Key do Brevo (Sendinblue)

→https://app.brevo.com/settings/keys/api · Permissão: Send transactional emails

<!-- external-hint.html — Kriou (kriou.com) -->
<div class="config-item">
  <label>API Key do Brevo (Sendinblue)</label>
  <input type="password">
  <p class="hint">
    →https://app.brevo.com/settings/keys/api · Permissão: Send transactional emails
  </p>
</div>

Toast de sucesso — confirmação calma

No canto direito superior, sem drama, sem emoji, sem exclamação. Descreve o que aconteceu e some sozinho em ~3 segundos. Visto na tela admin: "Nome do remetente atualizado."

✓ 'Nome do remetente' atualizado.

Princípios de transição entre territórios

O ponto laranja é a única coisa que fica idêntica nos dois territórios. É o âncora visual da marca.
Wordmark muda de cor mas nunca de forma. Mesma fonte, mesmo peso, mesmo tracking — só inverte ink ↔ paper.
Avatar do usuário sempre terra. Funciona nos dois territórios.
Texto de pista (mono terra) só aparece em Night. Em Paper, hint vai em ink-3 sem destaque.
Não criar componente "dark variant" em Paper. Card escuro num app Paper é pontual (destaque), não sistema.

Identidade

Tipografia.

Três fontes, cada uma com função clara. Crimson Pro pra títulos — italianizado é a assinatura ("plano atual", "deu errado"). Manrope pra corpo de texto e UI. JetBrains Mono pra eyebrows, labels técnicas e código.

Escala

Display H13rem · serif · 400

Seu plano.

Display H22rem · serif · 400

Algo deu errado.

Card title1.35rem · serif · 500

Identidade pessoal

H31.05rem · sans · 600

Configurar autenticação

Body15px · sans · 400

Você está prestes a confirmar a alteração do seu plano. Os créditos serão renovados imediatamente.

Small / sub0.88rem · sans · 400 · ink-3

Próxima renovação em 28/05/2026.

Eyebrow0.66rem · mono · uppercase · 0.20em

Sua conta

Mono inline0.78rem · mono

5.000 créditos/mês · Free · Próxima renovação: 28/05/2026

Imports

<!-- fonts.html — Kriou (kriou.com) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Identidade

Layout & espaço.

Border radius

--r-sm: 3px

--r: 5px

--r-md: 6px

--r-lg: 8px

Espaçamento (rem-based)

Não temos escala fixa de spacing — usamos rems com bom senso. Padrões mais frequentes nos componentes:

0.35rem

5.6px — gap inline em badges

0.6rem

9.6px — gap entre botões

1rem

16px — gap padrão entre elementos

1.6rem

25.6px — padding interno de card

2rem

32px — separação entre seções

Container

Largura máxima ~960px pra conteúdo tipo "página". Sidebar 280px (Account).

Componentes

Botões.

Hierarquia clara: primário (ink, hover→terra) pra ação principal. Ghost pra ação secundária. Terra direto só em CTAs muito específicos (publicação, deploy, "começar").

<!-- buttons.html — Kriou (kriou.com) -->
<button class="btn btn-primary">Salvar alterações</button>
<button class="btn btn-ghost">Cancelar</button>
<button class="btn btn-terra">Fazer upgrade →</button>
<button class="btn btn-disabled" disabled>Plano atual</button>

<!-- variante pequena -->
<button class="btn btn-primary btn-sm">Editar</button>

Quando usar cada um

Variante	Quando
btn-primary	Ação principal de cada tela. Só uma por seção.
btn-ghost	Ações secundárias: cancelar, voltar, editar item de lista.
btn-terra	CTAs de venda/conversão. Upgrade, comprar, começar grátis.
btn-disabled	Estado desabilitado — sempre dá feedback visual de "não dá pra clicar agora".

Componentes

Badges.

Pra status discretos. Sempre uppercase, mono, letterspacing alto. Cor comunica estado.

Ativo Pendente Em revisão Plano atual

<!-- badges.html — Kriou (kriou.com) -->
<span class="badge badge-ok"><span class="dot-led"></span>Ativo</span>
<span class="badge badge-warn">Pendente</span>
<span class="badge badge-info">Em revisão</span>
<span class="badge badge-terra">Plano atual</span>

Componentes

Cards.

Identidade pessoal

Como você aparece no Kriou e em todos os produtos do ecossistema.

Conteúdo do card aqui. Body em sans, ink-2 pra leitura confortável.

<!-- card.html — Kriou (kriou.com) -->
<div class="card">
  <div class="card-head">
    <div>
      <div class="ttl">Identidade pessoal</div>
      <div class="sub">Como você aparece no Kriou.</div>
    </div>
    <button class="btn btn-ghost btn-sm">Editar</button>
  </div>
  <p>Conteúdo do card aqui.</p>
</div>

Card escuro (variante)

Convertendo agora.

Modo high-contrast pra dashboards e painéis críticos.

Use sparingly — cards escuros chamam atenção. Reserva pra métricas-chave ou avisos importantes.

Componentes

Alertas.

Mensagens contextuais. Sempre com border-left de 3px. Muda só a cor pra comunicar severidade.

Atenção. Você ainda não confirmou seu email. Algumas funcionalidades podem ficar limitadas.

Informação. Próxima renovação em 28/05/2026 — 5.000 créditos serão adicionados automaticamente.

Sucesso. Pagamento confirmado. Seus créditos chegam em alguns segundos.

Erro. Não conseguimos processar a operação. Tente novamente ou abra um ticket.

<!-- alerts.html — Kriou (kriou.com) -->
<div class="alert">          <!-- terra (default) -->
<div class="alert info">     <!-- info -->
<div class="alert olive">    <!-- sucesso -->
<div class="alert danger">   <!-- erro -->

Componentes

Formulários.

Label sempre acima, em mono uppercase pequena. Input com border simples, foca em terra.

Nome completo

E-mail

<!-- form.html — Kriou (kriou.com) -->
<div class="field-group">
  <label>Nome completo</label>
  <input type="text" name="full_name">
</div>

Componentes

Tabelas.

Plano	Créditos/mês	Preço	Status
Free	5.000	—	Atual
Pro	120.000	$ 19/mês	Disponível
Power	300.000	$ 47/mês	Disponível

<!-- table.html — Kriou (kriou.com) -->
<table class="kt">
  <thead>
    <tr><th>Plano</th><th>Créditos</th><th>Preço</th></tr>
  </thead>
  <tbody>
    <tr><td>Free</td><td>5.000</td><td>—</td></tr>
  </tbody>
</table>

Linguagem

Vocabulário.

A Kriou tem palavras próprias. Não é jargão por ostentação — é vocabulário preciso: cada termo carrega uma decisão de posicionamento. Usar essas palavras de forma consistente em todos os produtos do ecossistema é o que diferencia a Kriou de "mais uma plataforma".

Princípio

Quando bater dúvida entre dois termos, escolhe o da Kriou. Não usamos sinônimos genéricos do mercado de software. Eles diluem a marca e empilham nossa comunicação no meio do ruído.

Posicionamento

Infraestrutura

O que a Kriou é. Não dizemos "plataforma", "ferramenta", "SaaS" ou "solução". Infraestrutura comunica algo que existe abaixo do produto do cliente — o que ele precisa pra entregar, sem competir com ele.

Não usar: plataforma · ferramenta · solução · sistema · app

Mecanismo

O que faz o motor funcionar. Sinônimo de "Engine" em contexto editorial. Comunica algo construído com precisão e que opera, não "processa".

Aparece em: "Opere o mecanismo" · "validação do mecanismo"

Software real

O contraponto: vs. mockup, vs. low-code que vira papel, vs. IA genérica que produz algo bonito mas inutilizável em produção. Real = compilado, deployável, mantível.

Tagline-mãe: "Infraestrutura global para software real"

Construído com rigor

Assinatura de rodapé. Substitui "feito com amor", "powered by AI" e similares. Comunica disciplina técnica, não performance emocional.

Onde aparece: footer de toda página · email transacional

Engine & Pipeline

Engine

O motor de geração da Kriou. Recebe KSpec, devolve software compilado em .NET 10. Sempre determinístico — input igual produz output igual.

Pipeline

O fluxo Recepção → Geração → Ativação. É o sistema visto como esteira de etapas replicáveis. Cliente "entra no pipeline", não "começa um projeto".

Determinístico

Atributo do Engine. O oposto de "IA generativa criativa". Mesmo input, mesmo output — previsível, auditável, profissionalizável. É o que faz a Kriou diferente de prompt.

KSpec

O contrato de entrada do Engine. Especificação estruturada (G1 a G4) que define o que será gerado. KSpec entra, sistema sai.

Sempre escrita assim: KSpec (não "kspec", não "K-spec")

Specimen

Cada peça do catálogo Kriou — uma feature/módulo curado e versionado. Sistemas são montados a partir de specimens. Não são "templates" nem "componentes".

Catálogo curado

Conjunto de specimens disponíveis. Curado é a palavra-chave: não é marketplace aberto, é seleção editorial controlada pela Kriou.

Modelo de negócio

Pay-per-use

Cobrança por uso real (geração, request, evento). É a nossa default pra produtos B2B com volume variável.

Slogan vinculado: "Preço por geração, não por promessa"

Take rate

Percentual de receita que a Kriou retém em transações intermediadas (ex: Partners entregando ao cliente final). Termo de marketplace, não de SaaS.

Status Fundador

Reconhecimento permanente pra Partners que entram no período de construção. Não é desconto temporário — é selo narrativo que fica.

Sempre maiúsculo: "Fundador", não "fundador"

White-label

Modalidade enterprise: cliente entrega o sistema com sua própria marca, sem traço visível da Kriou. "Sem Kriou entre você e seu cliente final."

Ecossistema

Ecossistema Kriou

O conjunto de todos os produtos: Account, Engine, Aceleradora, Partners, Studio, Chat etc. Compartilham créditos, identidade e infraestrutura. Não é "suite" nem "família de produtos".

Aceleradora

Produto B2B de API direta ao Engine. Para times técnicos que querem integrar geração no próprio pipeline, sem passar pela UI da Kriou.

Partners

Profissionais e agências certificados que operam o mecanismo entregando ao cliente final no próprio nome. Não são "revendedores" nem "afiliados".

Vocabulário .

A própria seção pública da Kriou listando esses termos. Tê-la pública é decisão de marca: explicamos nosso jargão em vez de esconder.

Glossário rápido (cola fácil)

Pra quando quiser conferir uma palavra rápido:

Infraestrutura: O que a Kriou é. Substitui "plataforma" e "ferramenta".
Mecanismo: O motor que gera. Sinônimo editorial de Engine.
Software real: O que entregamos: compilado, deployável, mantível. Não mockup, não low-code.
Determinístico: Mesmo input, mesmo output. Atributo do Engine.
KSpec: Contrato de entrada do Engine. Especificação estruturada (G1-G4).
Specimen: Peça do catálogo curado. Não é template.
Pipeline: Recepção → Geração → Ativação. O fluxo padrão.
Pay-per-use: Cobrança por uso real. "Preço por geração, não por promessa."
Take rate: % que a Kriou retém em transações intermediadas.
Status Fundador: Reconhecimento permanente pra Partners early.
White-label: Cliente entrega no próprio nome, sem marca Kriou visível.
Ecossistema Kriou: Todos os produtos. Não é "suite" nem "família".

Linguagem

Tom de voz.

Falamos como pessoa que sabe do que tá falando, mas não impõe. Direto, sem corporativês. Sempre na 2ª pessoa ("você"). Quando der pra ser breve, é breve. Quando o assunto é sério (erro, cobrança, segurança), explicamos com calma — nunca dramatizamos.

Princípios fundamentais

Sem emoji. Se a frase não funciona sem emoji, não funciona.
Sem exclamação. Não somos animados, somos competentes.
Frase curta. Se passou de 20 palavras, vê o que dá pra cortar.
Sem corporativês. "Sua solicitação" → "o que você pediu". "Adquirir" → "comprar". "Em breve" → tempo concreto.
Confirma com calma. Não usamos "Ufa!" ou "Perfeito!" — só descrevemos o que aconteceu.

Princípios de marca (mais avançados)

Negação como afirmação. Definir pelo que não somos é poderoso. "Não é desconto temporário. É reconhecimento narrativo."
Specs sem floreio. Lista de atributos vira frase com vírgula e ponto: "B2B puro. JWT Bearer, 4 endpoints, webhooks, idempotência."
Vocabulário próprio sempre. "Mecanismo" em vez de "engine genérico", "infraestrutura" em vez de "plataforma".
Concreto > abstrato. Em vez de "muitas integrações", diga "4 endpoints". Em vez de "rápido", diga "4m 12s".
Reconhece o leitor inteligente. Não explicamos o óbvio. Se o leitor é dev, falamos dev. Se é Partner, falamos Partner.

Antes & depois

NãoEstamos enfrentando dificuldades em processar sua solicitação no momento.

KriouAlgo deu errado. Já registramos o erro e nossa equipe foi notificada.

NãoPagamento processado com sucesso! 🎉 Seus créditos serão adicionados em breve.

KriouPagamento confirmado. Seus créditos chegam em alguns segundos.

NãoQuanto mais créditos por mês você adquirir, melhor!

KriouQuanto mais créditos por mês, mais espaço pra você criar com o ecossistema Kriou.

NãoPlataforma completa de geração de software com inteligência artificial avançada para você criar sistemas incríveis.

KriouEngine como infraestrutura no seu pipeline. KSpec entra, sistema compilado em .NET 10 sai.

NãoAcreditamos que profissionais qualificados merecem ferramentas à altura, e por isso oferecemos descontos exclusivos!

KriouNão é desconto temporário. É reconhecimento narrativo. Quem entra como Fundador fica marcado permanentemente no ecossistema.

NãoCobrança transparente baseada em uso, com modelo escalável conforme suas necessidades evoluem.

KriouPreço por geração, não por promessa. Tier gratuito pra explorar. Escala quando o volume escala. Enterprise quando o SLA exige.

NãoComece já a transformar suas ideias em realidade com nossa solução completa!

KriouConta gratuita com 50 gerações/mês, todos os endpoints liberados, sem cartão. Suba o primeiro KSpec em minutos.

NãoSeja parceiro Kriou e descubra um novo mundo de oportunidades!

KriouOpere o mecanismo. Construa sua carreira. Infraestrutura séria para profissionais que entendem o que está acontecendo.

Padrões de microcopy

Situação	Forma Kriou
Login bem-sucedido	Sem mensagem. Apenas redireciona pro dashboard.
Erro genérico	"Algo deu errado. Já registramos o erro e nossa equipe foi notificada."
Confirmação de pagamento	"Pagamento confirmado. Seus créditos chegam em alguns segundos."
Plano alterado	"Plano alterado. A próxima cobrança usa o novo valor."
Email enviado	"Enviamos um código para [email]. Expira em 10 minutos."
Dado salvo	"Salvo." (toast simples, sem floreio)
Convite enviado	"Convite enviado. Quando aceitarem, aparecem aqui."
Cancelamento	"Plano cancelado. Funciona até [data]. Dá pra reativar antes disso sem perder histórico."
Estado vazio (sem dados)	"Nada por aqui ainda." + ação primária ("Criar primeiro X →")
404	"Não encontramos isso. Talvez tenha sido removido ou o link mudou."
Manutenção planejada	"Em manutenção até [hora]. Volta sozinho."
Recurso bloqueado por plano	"Esse recurso é do plano [Pro]. Faça upgrade pra usar."

O que NUNCA escrevemos

Lista de banimento permanente: "Ufa!", "Perfeito!", "Incrível!", "Maravilha!", "Em breve" (sem data concreta), "Solução completa", "Plataforma revolucionária", "Transforme sua [coisa]", "Descubra um novo mundo", "Powered by AI", "Inteligência artificial de última geração", "Experiência única", emoji em qualquer contexto formal.

Linguagem

Slogans & taglines.

Frases oficiais da marca. Não inventa novas pra cada produto — reaproveita estas e ganha consistência. Cada uma tem um uso específico.

Tagline-mãe

A frase mestre da marca. Aparece no rodapé de toda página, em emails e em material institucional.

Kriou. — Infraestrutura global para software real.

Tagline oficial · footer obrigatório · qualquer produto Kriou

Slogans por produto

Cada produto do ecossistema tem seu slogan próprio. Sempre seguindo a mesma fórmula: frase imperativa curta, italianizada, ponto laranja.

Engine como infraestrutura no seu pipeline.

Aceleradora · API B2B

Opere o mecanismo. Construa sua carreira.

Partners · profissionais técnicos

Preço por geração, não por promessa.

Pricing · contraste com concorrente

Quanto mais créditos por mês, mais espaço pra você criar.

Account · página de planos

Construções estruturais reutilizáveis

Frases-modelo que viram slogans novos quando você precisar. Substitua só o substantivo central.

Estrutura

[Substantivo concreto] como [posicionamento] no seu [contexto].

Exemplo 1

Engine como infraestrutura no seu pipeline.

Exemplo 2 (futuro)

Studio como extensão no seu fluxo.

Estrutura

[Verbo no imperativo] o [noun proprietário]. [Promessa concreta].

Exemplo 1

Opere o mecanismo. Construa sua carreira.

Exemplo 2 (futuro)

Domine o catálogo. Entregue no seu nome.

Slogan negativo (poderoso quando preciso)

O padrão "Não é X. É Y." aparece em vários momentos da marca. Use quando o leitor pode interpretar errado o que você está oferecendo.

Não é desconto temporário. É reconhecimento narrativo.

Programa Fundador · justifica gratuidade

Footer obrigatório

Em todo produto Kriou, o footer fecha com esta linha (pode ser estilizada com tipografia menor):

<!-- footer.html — Kriou (kriou.com) -->
<footer>
  <p>
    <strong>Kriou<span class="dot">.</span></strong> — Infraestrutura global para software real<span class="dot">.</span>
  </p>
  <p class="muted">
    v2.0 · <time>Abril 2026</time> · Construído com rigor
  </p>
</footer>

Linguagem

A assinatura: o ponto.

O ponto laranja no fim de palavras-chave é a marca registrada visual da Kriou. Aparece no logo (Kriou.) e em títulos de página (Seu plano., Algo deu errado., Tipografia.). Não é decoração — é o "fim de frase" virando logo.

Quando usar

Sim: títulos de página/seção que terminam um pensamento. "Seu plano."
Sim: wordmark da marca. "Kriou."
Sim: CTAs reflexivos curtos. "Comece agora."
Não: meio de frase ou texto de body. "Você está no plano. Free" ❌
Não: labels de form, headers de tabela, eyebrows.

HTML

<!-- dot.html — Kriou (kriou.com) -->
<h1>Seu <em>plano</em><span class="dot">.</span></h1>

<!-- CSS -->
.dot { color: var(--terra); }

App Shell

Patterns de tela.

Esta seção documenta os elementos que se repetem em toda tela logada do ecossistema Kriou. Quando criar uma página nova em qualquer produto (Engine, Studio, Chat), reutiliza estes patterns sem alteração — é o que dá coesão visual entre os produtos.

Anatomia da app

O shell é uma grid de 3 colunas: sidebar fixa, splitter ajustável, área principal.

Sua conta

Bom te ver, Rafael.

Resumo do que está acontecendo na sua conta hoje.

Saldo

$1,240.00

Consumo · mês

$386.40

+18% vs. mês anterior

Próxima fatura

R$ 0.00

↑ Mockup vivo. As próximas seções dissecam cada peça.

App Shell

Wordmark na sidebar.

O wordmark fica sempre no topo da sidebar, alinhado à mesma altura do topbar (56-64px), com um border-bottom dividindo da área de usuário.

Anatomia

Fonte: Crimson Pro 500, 1.45rem, letter-spacing -0.015em
Cor texto: Ink (#1E1A14) — não terra
Ponto laranja: Adicionado por ::after com content: "." e cor terra
Container: height: --header-h (64px), padding 0 1.5rem, border-bottom para alinhar com topbar

<!-- sidebar-brand.html — Kriou (kriou.com) -->
<div class="sidebar-brand">
  <span class="wordmark">Kriou</span>
</div>

<style>
.sidebar-brand {
  height: var(--header-h);
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
}
.sidebar-brand .wordmark {
  font-family: var(--font-serif);
  font-size: 1.45rem; font-weight: 500;
  letter-spacing: -.015em;
}
.sidebar-brand .wordmark::after {
  content: "."; color: var(--terra);
}
</style>

App Shell

Avatar do usuário.

Círculo terra-bg com inicial em Crimson Pro. Sempre 38×38px na sidebar. Se o usuário tiver foto, o círculo carrega a imagem; senão, mostra a inicial do primeiro nome.

R

com inicial

com foto

R

tamanho card

R

tamanho perfil

Junto com nome + role

Na sidebar e em headers de card de usuário, o avatar vem com nome + role pequeno em mono terra:

R

Rafael

Cliente

Anatomia

Tamanho padrão: 38×38px na sidebar. 60px em cards. 96px em página de perfil.
Background: --terra-bg (#9E5038) — não é o terra principal pra não competir com o ponto
Cor da inicial: Paper (#F4F1EC), não branco puro
Inicial: Primeira letra do primeiro nome, em maiúscula. Crimson Pro 500 — não Manrope
Role pequeno: Mono uppercase 0.62rem letter-spacing 0.14em, cor terra (sotaque)

<!-- avatar.html — Kriou (kriou.com) -->
<!-- Avatar simples -->
<div class="avatar">R</div>

<!-- Avatar com foto -->
<div class="avatar avatar-img">
  <img src="/storage/avatars/uuid.webp" alt="">
</div>

<!-- Bloco completo: avatar + nome + role -->
<div class="sidebar-user">
  <div class="avatar">R</div>
  <div class="who">
    <div class="who-name">Rafael</div>
    <div class="who-role">Cliente</div>
  </div>
</div>

<style>
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--terra-bg);
  color: #F4F1EC;
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-weight: 500; font-size: 1rem;
  flex-shrink: 0;
}
.avatar.avatar-img { padding: 0; overflow: hidden; }
.avatar.avatar-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.sidebar-user {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.85rem;
}
.who-name { font-size: 0.88rem; font-weight: 500; color: var(--ink); }
.who-role {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--terra);
  margin-top: 0.15rem;
}
</style>

App Shell

Botão hambúrguer.

Recolhe a sidebar pra dar mais espaço ao conteúdo. Sempre fica no canto esquerdo do topbar. Visual minimalista — caractere "☰" dentro de uma borda ghost, hover terra.

estado normal

hover

Anatomia

Caractere: Unicode ☰ (U+2630). Não usar SVG — mais leve, escala com o font-size
Borda: 1px sólido --border-m, vira terra no hover
Padding: 0.4rem vertical, 0.55rem horizontal — pequeno mas clicável (~32×30px)
Ação: Toggle classe .sidebar-collapsed no .app. Estado persiste em localStorage.

<!-- menu-toggle.html — Kriou (kriou.com) -->
<button class="menu-toggle" id="menuToggle" title="Recolher menu">☰</button>

<style>
.menu-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--border-m);
  padding: 0.4rem 0.55rem;
  border-radius: var(--r);
  margin-right: 1rem;
  font-size: 1rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s;
}
.menu-toggle:hover {
  border-color: var(--terra);
  color: var(--terra);
}
</style>

<script>
// Toggle + persistência
const app = document.querySelector('.app');
const btn = document.getElementById('menuToggle');
if (localStorage.getItem('kriou.sidebar') === 'collapsed') {
  app.classList.add('sidebar-collapsed');
}
btn.addEventListener('click', () => {
  app.classList.toggle('sidebar-collapsed');
  localStorage.setItem('kriou.sidebar',
    app.classList.contains('sidebar-collapsed') ? 'collapsed' : 'open'
  );
});
</script>

App Shell

Splitter ajustável.

Divisória entre sidebar e conteúdo principal. Visualmente é só uma linha vertical fina (1px) — mas tem 6px de área clicável invisível pra arrastar. No hover a linha fica terra pra mostrar que é interativa.

SIDEBAR

MAIN

Anatomia

Largura total: 6px de área clicável
Linha visível: 1px --border-s, centralizada na coluna
Cursor: col-resize sempre visível ao passar o mouse
Hover: Linha vira terra (--terra) pra mostrar que é arrastável
Persistência: Largura salva em localStorage (kriou.sidebar.w) entre sessões

<!-- app-shell.html — Kriou (kriou.com) -->
<div class="app">
  <aside class="sidebar">...</aside>
  <div class="splitter" id="splitter"></div>
  <main class="main">...</main>
</div>

<style>
:root { --sidebar-w: 280px; }
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 6px 1fr;
  min-height: 100vh;
  transition: grid-template-columns .25s ease;
}
.splitter {
  background: transparent;
  cursor: col-resize;
  position: relative;
  user-select: none;
}
.splitter::before {
  content: ""; position: absolute; inset: 0;
  background: var(--border-s);
  width: 1px;
  margin-left: auto; margin-right: auto;
  transition: background .15s;
}
.splitter:hover::before { background: var(--terra); }
</style>

<script>
// Drag pra redimensionar (limite 200-480px)
const sp = document.getElementById('splitter');
const root = document.documentElement;
let dragging = false;
sp.addEventListener('mousedown', () => dragging = true);
document.addEventListener('mousemove', (e) => {
  if (!dragging) return;
  const w = Math.min(480, Math.max(200, e.clientX));
  root.style.setProperty('--sidebar-w', w + 'px');
});
document.addEventListener('mouseup', () => {
  if (dragging) {
    localStorage.setItem('kriou.sidebar.w',
      getComputedStyle(root).getPropertyValue('--sidebar-w').trim()
    );
  }
  dragging = false;
});
// Restore
const saved = localStorage.getItem('kriou.sidebar.w');
if (saved) root.style.setProperty('--sidebar-w', saved);
</script>

App Shell

Topbar com breadcrumb.

Barra superior fixa do conteúdo (não da sidebar — a sidebar tem altura própria). Tem fundo papel translúcido com blur, hambúrguer à esquerda, breadcrumb mono no centro, ações à direita (ajuda, notificações).

Kriou.Account · Visão geral ? Ajuda

Anatomia do breadcrumb

Fonte: JetBrains Mono 0.7rem, uppercase, letter-spacing 0.12em
Produto (1ª parte): Cor terra, font-weight 500. Ex: Kriou.Account, Kriou.Engine
Separador: " · " com espaço dos dois lados, cor ink-3
Página atual: Cor ink-3 normal — não compete visualmente com o produto

<!-- topbar.html — Kriou (kriou.com) -->
<header class="topbar">
  <button class="menu-toggle">☰</button>
  <span class="topbar-crumbs">
    <strong>Kriou.Account</strong> · Visão geral
  </span>
  <div class="topbar-actions">
    <a href="/help" class="help-link">? Ajuda</a>
  </div>
</header>

<style>
.topbar {
  background: rgba(244,241,236,.85);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--border-s);
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 2rem 0 1.5rem;
}
.topbar-crumbs {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.topbar-crumbs strong {
  color: var(--terra);
  font-weight: 500;
}
.topbar-actions { margin-left: auto; display: flex; gap: 1rem; }
.help-link {
  font-size: 0.8rem; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: color .15s;
}
.help-link:hover { color: var(--terra); }
</style>

App Shell

Cabeçalho de página.

Toda página logada começa com este bloco: eyebrow mono pequeno em terra, título grande em Crimson Pro com palavra italianizada + ponto laranja, e um lead curto em ink-2 explicando do que se trata a tela.

Sua conta

Bom te ver, Rafael.

Resumo do que está acontecendo na sua conta hoje. Sem barulho, sem letra miúda.

Anatomia

Eyebrow: Mono 0.66rem uppercase, cor terra, prefixado por uma linha curta de 18px. Categoria da página.
Título H1: Crimson Pro 400, clamp(2rem, 3.2vw, 2.6rem), letter-spacing -0.022em. Sempre tem uma palavra em <em> (italic) e termina com ponto laranja
Lead: Sans 1.02rem, ink-2, max-width 60ch (legibilidade). Explicação curta, sem corporativês
Margin bottom: 2.5rem antes do conteúdo. Respiração visual antes dos cards/stats

<!-- page-head.html — Kriou (kriou.com) -->
<header class="page-head">
  <span class="eyebrow">Sua conta</span>
  <h1>Bom te ver, <em>Rafael</em><span class="dot">.</span></h1>
  <p class="lead">
    Resumo do que está acontecendo na sua conta hoje.
    Sem barulho, sem letra miúda.
  </p>
</header>

<style>
.page-head { margin-bottom: 2.5rem; }
.page-head h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  margin: 0.6rem 0 0.7rem;
}
.page-head h1 em {
  font-style: italic;
  color: var(--ink);
}
.page-head .lead {
  color: var(--ink-2);
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.6;
}
</style>

App Shell

Stat tile.

Caixa de métrica numérica. Aparece em grid de 3 ou 4 colunas no topo de dashboards. Label em mono pequeno, valor em Crimson Pro grande, delta opcional embaixo (variação percentual).

Saldo

$1,240.00

≈ 62 briefings com a Kria

Consumo · mês

$386.40

+18% vs. mês anterior

Briefings ativos

3

2 aguardando Partner

Anatomia

Container: Card simples papel + border + radius-md. Padding 1.3rem 1.4rem
Label (lbl): Mono uppercase 0.65rem, letter-spacing 0.16em, ink-3. Curto: "Saldo", "Consumo · mês"
Valor (val): Crimson Pro 400, 2rem, line-height 1, letter-spacing -.02em
Sufixo (val em): Casas decimais ou unidade — sans 0.95rem ink-3, sem itálico apesar do <em>
Delta (opcional): Mono 0.72rem cor olive (positivo) ou danger (negativo) ou ink-3 (neutro)

<!-- stat-tile.html — Kriou (kriou.com) -->
<div class="stat-tile">
  <div class="lbl">Consumo · mês</div>
  <div class="val">$386<em>.40</em></div>
  <div class="delta">+18% vs. mês anterior</div>
</div>

<style>
.stat-tile {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.3rem 1.4rem;
}
.stat-tile .lbl {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: 0.7rem;
}
.stat-tile .val {
  font-family: var(--font-serif);
  font-size: 2rem; font-weight: 400;
  line-height: 1; letter-spacing: -.02em;
}
.stat-tile .val em {
  font-style: normal;
  font-size: 0.95rem;
  color: var(--ink-3);
  font-family: var(--font-sans);
  margin-left: 0.25rem;
}
.stat-tile .delta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  margin-top: 0.6rem;
  color: var(--olive);
}
</style>

App Shell

Switcher de idioma.

Fica no rodapé da sidebar. Três códigos (PT / EN / ES) separados por barra. O ativo fica em terra; os outros em ink-3 com hover ink. Nada de bandeiras nem dropdowns.

/ /

Anatomia

Fonte: Mono 0.66rem letter-spacing 0.10em — não uppercase (códigos já são curtos)
Código de idioma: Sempre 2 letras maiúsculas: PT, EN, ES, FR, DE… (formato ISO 639-1)
Estado ativo: Cor terra, sem peso extra (é por cor, não por bold)
Separador: Barra " / " ink-4 (mais clara que ink-3 pra não competir)

<!-- lang-toggle.html — Kriou (kriou.com) -->
<form method="post" action="/set-language" class="lang-toggle">
  <button type="submit" name="lang" value="pt-BR" class="on">PT</button>
  <span class="sep">/</span>
  <button type="submit" name="lang" value="en-US">EN</button>
  <span class="sep">/</span>
  <button type="submit" name="lang" value="es-419">ES</button>
</form>

<style>
.lang-toggle {
  display: inline-flex; gap: 0.05rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}
.lang-toggle button {
  background: none; border: none;
  color: var(--ink-3);
  padding: 0.3rem 0.45rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .15s;
}
.lang-toggle button.on { color: var(--terra); }
.lang-toggle button:hover:not(.on) { color: var(--ink); }
.lang-toggle .sep {
  color: var(--ink-4);
  align-self: center;
}
</style>

App Shell

Botão Sair.

Ghost pequeno no canto inferior direito da sidebar, ao lado do switcher de idioma. Não compete visualmente com nada — é função utilitária, não protagonista.

Variações

normal

hover

Anatomia

Variante: Ghost (não primary) — sair não é ação principal
Tamanho: Menor que .btn-sm — padding 0.4rem 0.8rem, font-size 0.78rem
Hover: Borda + texto viram terra (igual ao ghost regular)
Texto: Apenas "Sair". Sem ícone. Sem "Logout". Sem "Sign out"
Implementação: Sempre <form method="post">, nunca link GET. Logout é ação, não navegação

<!-- logout.html — Kriou (kriou.com) -->
<form method="post" action="/logout" style="display:inline;">
  <button type="submit" class="logout-btn">Sair</button>
</form>

<style>
.logout-btn {
  background: none;
  border: 1px solid var(--border-m);
  padding: 0.4rem 0.8rem;
  font-size: 0.78rem;
  color: var(--ink-2);
  border-radius: var(--r);
  cursor: pointer;
  transition: all .15s;
}
.logout-btn:hover {
  border-color: var(--terra);
  color: var(--terra);
}
</style>

App Shell

Tela completa.

Junta tudo: sidebar (wordmark + avatar + nav + lang/sair) + splitter + topbar (hambúrguer + breadcrumb + ajuda) + page-head + stats. Use isso como template inicial pra qualquer página nova logada.

Sua conta

Bom te ver, Rafael.

Resumo do que está acontecendo na sua conta hoje. Sem barulho, sem letra miúda.

Saldo

$1,240.00

≈ 62 briefings com a Kria

Consumo · mês

$386.40

+18% vs. mês anterior

Briefings ativos

3

2 aguardando Partner

Template HTML completo

<!-- starter.html — Kriou (kriou.com) -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Visão geral · Kriou</title>
  <link rel="stylesheet" href="kriou-tokens.css">
</head>
<body>
  <div class="app">

    <aside class="sidebar">
      <div class="sidebar-brand">
        <span class="wordmark">Kriou</span>
      </div>

      <div class="sidebar-user">
        <div class="avatar">R</div>
        <div class="who">
          <div class="who-name">Rafael</div>
          <div class="who-role">Cliente</div>
        </div>
      </div>

      <nav class="sidebar-nav">
        <div class="nav-section">Geral</div>
        <a href="/account" class="nav-link active">Visão geral</a>
        <a href="/account/identidade" class="nav-link">Identidade</a>
        <!-- ... -->
      </nav>

      <div class="sidebar-foot">
        <form class="lang-toggle">...</form>
        <form method="post" action="/logout">
          <button class="logout-btn">Sair</button>
        </form>
      </div>
    </aside>

    <div class="splitter" id="splitter"></div>

    <main class="main">
      <header class="topbar">
        <button class="menu-toggle">☰</button>
        <span class="topbar-crumbs">
          <strong>Kriou.Account</strong> · Visão geral
        </span>
        <div class="topbar-actions">
          <a href="/help" class="help-link">? Ajuda</a>
        </div>
      </header>

      <div class="content">
        <header class="page-head">
          <span class="eyebrow">Sua conta</span>
          <h1>Bom te ver, <em>Rafael</em><span class="dot">.</span></h1>
          <p class="lead">Resumo do que está acontecendo.</p>
        </header>

        <!-- conteúdo da página aqui -->
      </div>
    </main>

  </div>
</body>
</html>

Para devs

CSS Tokens.

Cola este bloco no :root de qualquer projeto novo Kriou. Não inventa cor nova — se a paleta atual não cobre o caso, vem aqui discutir antes de adicionar.

/* kriou-tokens.css — Kriou (kriou.com) */
:root {
  /* Papel — fundos */
  --paper:      #F4F1EC;
  --paper-alt:  #EDE9E2;
  --paper-deep: #E6E1D8;

  /* Bordas */
  --border:     rgba(80,68,50,.12);
  --border-s:   rgba(80,68,50,.20);
  --border-m:   rgba(80,68,50,.30);

  /* Ink — texto */
  --ink:        #1E1A14;
  --ink-2:      #46403A;
  --ink-3:      #8A7F72;
  --ink-4:      #C0B8AE;

  /* Terra — sotaque */
  --terra:      #B5431E;
  --terra-bg:   #9E5038;
  --terra-deep: #8A3F2E;
  --terra-soft: rgba(181,67,30,.08);

  /* Night — fundo escuro */
  --night:      #18160F;
  --night-2:    #242018;

  /* Estados */
  --olive:      #5C7048;
  --olive-soft: rgba(92,112,72,.10);
  --info:       #3A6480;
  --info-soft:  rgba(58,100,128,.10);
  --warn:       #C89C3D;
  --warn-soft:  rgba(200,156,61,.12);
  --danger:     #A0392B;
  --danger-soft:rgba(160,57,43,.10);

  /* Tipografia */
  --font-serif: 'Crimson Pro', Georgia, serif;
  --font-sans:  'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Radius */
  --r-sm: 3px;
  --r:    5px;
  --r-md: 6px;
  --r-lg: 8px;
}

Para devs

Starter HTML.

HTML mínimo pra começar projeto novo já no padrão Kriou. Cola, salva como index.html, vai.

<!-- index.html — Kriou (kriou.com) -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kriou. Projeto</title>
<link rel="icon" href="kriou-icon-transparent.svg" type="image/svg+xml">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

<link rel="stylesheet" href="kriou-tokens.css">
</head>
<body>
  <header>
    <span class="eyebrow">Sua conta</span>
    <h1 class="display">Seu <em>projeto</em><span class="dot">.</span></h1>
  </header>
</body>
</html>

Hierarquia de arquivos sugerida

# project-tree.txt — Kriou (kriou.com)
seu-projeto/
├── index.html
├── kriou-tokens.css   ← copia da seção "CSS Tokens" acima
├── styles.css         ← seus estilos próprios
└── assets/
    ├── kriou-wordmark.svg
    ├── kriou-icon.svg
    └── kriou-icon-transparent.svg  (favicon)