Negócio antes da tecnologia
Entendemos o processo, o desafio e o objetivo antes de recomendar qualquer ferramenta.
CRYZO Design System · v1.0 · logo em finalização
Tecnologia inteligente. Negócios mais eficientes.
Uma interface da Grid: escura, precisa e luminosa. Cada brilho indica algo ativo, e os dados sempre vêm antes do efeito.
Dados de exemplo
01 · Fundamentos
Tokens
Todas as cores, fontes e espaçamentos vêm de styles/tokens.css. Mude ali, e o sistema inteiro acompanha.
Cores
Superfícies e texto
Tipografia
Display · Oxanium · 3xlGRID
Título · Oxanium · 2xlESCOPO FECHADO
Corpo · IBM Plex Sans
Não começamos pela tecnologia. Começamos entendendo o seu negócio.
Dados · IBM Plex MonoCRY 013 · 2026-10-13 · 98,4%
02 · Componentes
Peças reutilizáveis
Cada peça tem estados de hover, foco, desabilitado e erro. Use a tecla Tab para percorrer a página só com o teclado.
Botões .cz-button
Status .cz-status
Online
Processando
Saldo baixo
Falha na integração
Pausado
Formulário .cz-field · .cz-input
Abas .cz-tabs
- Sites institucionais e landing pages
- Lojas virtuais
- SEO e publicação inclusos no escopo
- Aplicativos sob medida, web e mobile
- Sistemas empresariais, ERP e CRM
- Experiência real com o +Q1
- Fluxos com n8n
- Integração entre sistemas e APIs
- Fim das tarefas manuais e repetitivas
- Agentes e chatbots
- Automações com IA
- Consumo cobrado em CRY.IA
Cartões .cz-card
Diferencial · ativoCRY
Escopo fechado
Você conhece o investimento antes de começar. Mudanças entram só como novos CRYs aprovados.
IA com método
A inteligência artificial acelera a execução. Nossa visão estratégica direciona o resultado.
Métricas .cz-metric
CRY entregues
26CRY
+8 na semana
Saldo CRY.IA
312CRY.IA
−41 consumidos
Automações ativas
14
Estável
Capacidade
65%
Dados de exemplo
03 · Telemetria
HUD e dados
Anéis em SVG que escalam com a tela, e uma tabela ordenável com estado vazio. É a base para painéis do BOSS-C.
VelocidadeAo vivo
CRY.IA80% usado
PipelineSaudável
Dados de exemplo
Tabela .cz-table
| Exemplo | ||
|---|---|---|
| 1 | Trivial | Trocar texto ou imagem, ajustar cor |
| 2 | Simples | Formulário de contato, configurar domínio |
| 3 | Pequeno | Webhook simples, e-mail automático |
| 5 | Médio | Automação n8n com 1 ou 2 integrações |
| 8 | Complexo | Fluxo com IA e várias integrações |
| 13 | Muito complexo | Agente de IA com base de conhecimento |
04 · Marca
Ponto de partida
À esquerda, o rascunho atual. À direita, o nome escrito com a fonte de títulos escolhida acima. Isso é só uma comparação: o logo final ainda vai ser desenhado.
.artifacts/DESIGN/Logo/CRYZO/). Antes de registrar a marca, o desenho das letras precisa ficar mais autoral e menos parecido com o logotipo do filme.CRYZO
SOLUTIONS