",
"css": ".ds-msg-cliente { align-self: flex-start; background: #ffffff; border: 1px solid #f3f4f6; padding: 10px 14px; border-radius: 16px; border-top-left-radius: 4px; max-width: 70%; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #111827; word-wrap: break-word; }"
}
],
"narrative": {
"northStar": "O Terminal Humanizado",
"overview": "O Chatc2 é um terminal funcional — preciso, confiável, sem firulas — mas que não esquece que do outro lado da tela há uma pessoa. A interface respira. Curvas suaves (6px–16px) substituem cantos duros de terminal. O espaço entre elementos é generoso o suficiente para não cansar, mas econômico o bastante para manter densidade de informação. Toques de índigo funcional guiam o olhar sem gritar. O sidebar noturno ancora a experiência com profundidade, como um painel de comando que nunca apaga. O sistema rejeita explicitamente a poluição visual e a ambiguidade. Cada estado tem feedback imediato. Cada cor tem um porquê. Cada pixel de sombra existe para hierarquia, não por decoração.",
"keyCharacteristics": [
"Paleta enxuta: um acento índigo + violeta de apoio + neutros limpos",
"Dark mode como cidadão de primeira classe",
"Sombras leves — destaque sem peso",
"Tipografia de sistema: nativa, zero latência",
"Componentes táteis que respondem ao toque com confiança"
],
"rules": [
{
"name": "The One Voice Rule",
"body": "O índigo funcional ocupa ≤10% de qualquer tela. Sua raridade é o ponto. Se tudo é índigo, nada é importante.",
"section": "colors"
},
{
"name": "The Semantic Triplet Rule",
"body": "Estados (sucesso, erro, aviso) sempre usam o trio completo: cor de destaque + fundo claro + texto escuro. Nunca usar a cor de destaque como fundo de texto corrido.",
"section": "colors"
},
{
"name": "The Native-First Rule",
"body": "Nunca importar webfonts. O sistema operacional já tem tipografia excelente.",
"section": "typography"
},
{
"name": "The Weight Discipline Rule",
"body": "Apenas três pesos convivem: 400 (corpo), 600 (labels), 700–800 (títulos). Nunca usar 300, 500 ou 900.",
"section": "typography"
},
{
"name": "The Flat-by-Default Rule",
"body": "A superfície base é plana. Sombras aparecem apenas quando um elemento precisa de separação hierárquica — nunca por decoração.",
"section": "elevation"
},
{
"name": "The Dark Mode Elevation Rule",
"body": "No dark mode, sombras são abolidas. A diferenciação entre superfícies é 100% tonal.",
"section": "elevation"
}
],
"dos": [
"Usar o índigo funcional (#667eea) em ≤10% da superfície visível. Ele é um acento, não uma cor de fundo.",
"Garantir que todo estado interativo tenha feedback em ≤150ms.",
"Comunicar estado com ícone + cor. Nunca apenas cor.",
"Usar o trio semântico completo para qualquer indicador de estado.",
"Manter o dark mode com diferenciação tonal, nunca com sombras.",
"Usar border-left: 4px solid com cor semântica para stat cards no dashboard.",
"Usar padding mínimo de 24px em cards, 14px 24px na topbar.",
"Preservar a barra lateral noturna em todas as páginas."
],
"donts": [
"Criar interfaces abarrotadas onde o atendente precise adivinhar onde as coisas estão.",
"Usar mais de 3 pesos tipográficos na mesma tela.",
"Importar webfonts externas.",
"Usar sombras em dark mode.",
"Usar cores semânticas como cor de fundo para texto corrido.",
"Criar modais sem overlay escuro + blur.",
"Usar cantos vivos (border-radius: 0) em componentes interativos.",
"Omitir o ring de foco de 3px em inputs."
]
}
}