Fundações
A base de tudo
Antes dos tokens e dos componentes: quem somos, como pensamos, como falamos. Estas são as regras que informam todas as decisões visuais e de produto.
01
Missão do design system
Por que este sistema existe.
Permitir ao João Carapeto criar projetos autorais a alta velocidade, com uma qualidade visual consistente e uma linguagem de marca inconfundível, sem a necessidade de criar um padrão visual novo a cada ideia nova.
02
Princípios de design
Seis regras que guiam qualquer decisão de UI/UX.
Rápido antes de bonito
Performance é um sinal de respeito. Telas que abrem em menos de 1s, feedback imediato, zero travamentos.
Focado, não completo
Cada app resolve uma dor específica. Preferimos fazer menos, muito bem, do que muito, mal.
Escuro por padrão
A marca vive no escuro. O verde brilha porque o fundo lhe dá espaço. Light mode é opcional.
Consistência entre apps
Quem conhece o Gantt já sabe usar o CV Manager. A linguagem visual é o elo.
Humano, não corporativo
Isto é uma marca pessoal. Fala como um humano fala: direto, próximo, sem jargão.
Acessível por padrão
WCAG AA sempre. Contraste ≥4.5:1 em texto, foco visível, teclado funciona em tudo.
03
Personalidade da marca
Se a marca Carapeto fosse uma pessoa, seria assim.
Sem rodeios, vamos ao que interessa.
Tokens, não improvisos. Tudo tem um valor definido.
Cor forte, tipografia bold, espaço para respirar.
Escrevemos como falamos, em português brasileiro.
04
Tom de voz
Como escrevemos em cada tipo de texto de UI.
Se dá para dizer em 3 palavras, não use 8.
Você, não vocês. Nós, não a empresa.
Verbos, não substantivos. "Salvar", não "Salvando".
05
Público e casos de uso
O sistema serve dois públicos:
- 1Usuários finais dos apps Carapeto, profissionais de tecnologia que valorizam velocidade e precisão. Toleram densidade de informação, esperam atalhos de teclado, detestam onboardings longos.
- 2O próprio João, que precisa iniciar um novo projeto num fim de semana sem re-decidir cor, tipo ou padrões.
06
Princípios de motion
Movimento tem intenção: comunica hierarquia, causalidade e feedback. Nunca é decoração.
Uma ação do usuário produz uma reação visível em menos de 100ms.
Animações curtas (150 a 300ms). O sistema é rápido, não teatral.
Com prefers-reduced-motion, tudo colapsa para fade simples.
07
Acessibilidade
WCAG 2.2 nível AA como piso mínimo, não como aspiração.
≥4.5:1 em texto normal, ≥3:1 em texto grande e componentes UI.
Toda a UI operável apenas com teclado. Foco visível com ring de 2px em brand.
Usar HTML semântico primeiro. ARIA só onde o HTML não chega.
Labels em botões-ícone, live regions para toasts, alt em imagens de conteúdo.
Respeitar prefers-reduced-motion, colapsar para fades curtos ou nenhum movimento.
Cor nunca é o único sinal, sempre acompanhada de ícone ou texto.