Design System
Citric Design System
Citric é um design system que ajuda a criar interfaces limpas, consistentes e escaláveis. Ele unifica estilos, componentes e regras, tornando o processo de design mais rápido.
Ano:
2020
Indústria:
Tecnologia
Cliente:
Itaú / ZUP I.T.
Duração do Projeto:
6 Anos
Um sistema unificado de bases e componentes reutilizáveis que traz clareza, consistência e estrutura para cada interface.
O que tem dentro
princípios do atomic design
O Atomic Design é uma abordagem modular que divide as interfaces em partes reutilizáveis, tornando sua estrutura clara e conectada.
Sistemas de design começam com bases fortes. Eles definem como os componentes se parecem, se comportam e se dimensionam em todo o produto.
Fundações
Tipografia
O sistema tipográfico define estilos de texto como tokens de design e explica como os títulos e o corpo do texto devem ser aplicados.
Uma ampla variedade de estilos de texto claramente organizados, facilitando a seleção da opção certa para qualquer tela ou elemento de interface.
Fundações
Sistema de cores
Uma paleta flexível de cores semânticas e funcionais que mantém as interfaces consistentes, claras e expressivas em todo o produto.
Cores primitivas
Como a base da paleta, as cores primitivas definem fundos, texto e superfícies de IU neutras, criando uma base consistente que suporta paletas semânticas e de marca em toda a interface.
Cada combinação de cores no sistema foi validada em relação aos padrões de contraste do WCAG. Isso garante que o texto e os elementos de UI permaneçam legíveis e acessíveis em temas claro e escuro, independentemente do tamanho, estado ou contexto.
Fundações
Espaçamento e radius
Uma escala consistente de espaçamento e raio cria ritmo visual e layouts previsíveis. Cada valor existe como um token reutilizável, simplificando o alinhamento em toda a interface.
Espaçamento
Ao estabelecer valores de Espaçamento consistentes para margens, preenchimentos (paddings) e alinhamentos, as equipes podem alcançar harmonia visual e aprimorar a experiência geral do usuário.
Border Radius
O raio ajuda a tornar a interface de usuário (UI) pessoal, mais fácil de processar e reconhecível à primeira vista. Selecionar o raio correto para os componentes constrói um vocabulário visual e uma narrativa consistentes.
Fundações
sombras
Sombras criam profundidade e foco dentro da interface. Uma escala unificada garante a hierarquia visual e mantém a aparência dos componentes consistente em diferentes contextos.
Fundações
grid system
Uma grade de 12 colunas oferece flexibilidade para layouts complexos. A largura consistente das colunas e o espaçamento entre elas ajudam a manter a estrutura e o equilíbrio visual em telas largas.
Fundações
ícones
Um sistema unificado de ícones construído sob regras consistentes de traço, tamanho e grade. Os ícones permanecem nítidos e legíveis em qualquer escala e se adaptam automaticamente a cores semânticas.
+250 ícones
Uma biblioteca abrangente de mais de 250 ícones, cuidadosamente organizada em quatro categorias distintas. Encontre rapidamente o que você precisa através de uma estrutura intuitiva que simplifica a navegação, reduz o tempo de busca e torna a seleção de ícones mais rápida e eficiente.
Fundamentos
ILUSTRAÇÕES
Para criar uma experiência mais consistente e envolvente em todo o ecossistema, o Citric inclui uma biblioteca de ilustrações dedicada, projetada para apoiar a comunicação, orientação e experiências de estado vazio em todo o produto.
O sistema de ilustração é organizado em duas categorias principais: Ilustrações de Entidade e Ilustrações de Estado de Erro.
Entidades
Foram criadas para representar os principais objetos e módulos disponíveis em toda a plataforma. Essas ilustrações funcionam como marcadores visuais em estados vazios, momentos de onboarding e fluxos de criação de conteúdo, ajudando os usuários a entender rapidamente o contexto de cada seção. A biblioteca inclui ilustrações dedicadas para entidades como Contas, Estúdios, Espaços de Trabalho, Catálogo de Serviços, Stacks, Ações e outros módulos de produtos, garantindo consistência visual independentemente de onde os usuários estejam navegando.
Estado de erro
Foram projetadas para tornar o feedback do sistema mais amigável e humano. Em vez de depender apenas de mensagens de texto, essas ilustrações ajudam a comunicar problemas como conteúdo ausente, recursos indisponíveis, restrições de permissão e falhas inesperadas, reduzindo a frustração e mantendo a identidade visual do produto.
Componentes simples
Uma biblioteca de componentes essenciais de UI construídos com base em propriedades e tokens compartilhados. Cada elemento segue a mesma lógica de espaçamento, dimensionamento e estado para manter a interface consistente.
Botões
Os botões se adaptam a diferentes casos de uso por meio de variáveis compartilhadas: tamanho, paleta, tipo e estado. Cada botão segue o mesmo espaçamento, grade e lógica, tornando as interações consistentes em toda a interface.
Variações inteligentes
Os botões são construídos com base em tokens semânticos e propriedades adaptáveis.
Tamanhos, cores e ícones podem ser ajustados por meio de variáveis, mantendo o componente flexível e preservando a estrutura e a clareza.
Input Fields
Input fields são construídos a partir de tokens reutilizáveis — espaçamento, estados, ícones e rótulos. Isso mantém as interações previsíveis e ajuda os designers a construírem formulários mais rapidamente.
Anatomia
A estrutura principal inclui label, campo e texto de ajuda. Complementos opcionais — prefixo/sufixo, ícones, ações e máscaras — ajustam-se à mesma grade e espaçamento para maior clareza.
Estados e variantes
Os campos de entrada suportam múltiplos estilos visuais e estados de interação claros
— padrão, digitando, foco, erro, desativado — garantindo um comportamento previsível em diferentes cenários.
badges
Badges ajudam a chamar a atenção para informações importantes — status, prioridade ou categoria — usando semântica de cores clara e opções de estilo flexíveis.
Variações inteligentes
Os crachás usam o mesmo espaçamento, cor e regras, mantendo a interface consistente enquanto se adaptam a diferentes estados e paletas.
Avatares
Avatares representam visualmente usuários, membros de equipe ou entidades. Eles se adaptam a qualquer contexto — dando suporte a iniciais em texto, fotos ou ilustrações personalizadas.
Variações inteligentes
Construídos com base em tokens compartilhados de tamanho, espaçamento e cor, os avatares permanecem consistentes em diferentes formatos e tipos de conteúdo. Eles se adaptam a iniciais de texto, imagens e ilustrações, garantindo clareza e equilíbrio visual em qualquer
Tamanhos
Escolha o tamanho mais adequado para cada caso de uso. Os avatares são dimensionados de forma consistente, preservando a legibilidade, as proporções e o reconhecimento visual em listas, cartões, tabelas e experiências colaborativas.
Cores
Use variações de cores para aprimorar a identidade, a diferenciação e o reconhecimento rápido pelo usuário. Cada opção segue a paleta do sistema de design, garantindo consistência visual e contraste acessível em diferentes contextos e interfaces.
Switches, checkboxes, radiobuttoms
Esses controles permitem aos usuários fazer seleções rápidas ou alternar estados. Cada componente se adapta a várias paletas, tamanhos e estados de interação, mantendo uma linguagem visual unificada.
Variações inteligentes
Todos os componentes seguem regras compartilhadas de espaçamento, dimensionamento e traçado, garantindo padrões visuais e de interação consistentes em toda a interface.
Tooltips
Tooltips fornecem dicas contextuais rápidas sem interromper o fluxo do usuário. Eles aparecem ao passar o mouse ou ao focar e ajudam os usuários a entender ações, ícones ou controles instantaneamente.
Leve e informativo
Tooltips adaptam-se a diferentes posicionamentos e tamanhos de componentes, mantendo o espaçamento e o estilo consistentes em todas as variações.
Componentes Complexos
Componentes complexos combinam múltiplos componentes simples em padrões estruturados. Cada um segue regras compartilhadas de espaçamento, tipografia e semântica, garantindo consistência, escalabilidade e comportamento previsível em toda a interface.
Tabelas
As tabelas combinam vários componentes de UI — filtros, paginação, badges, ícones — em um padrão flexível de apresentação de dados. O espaçamento, a tipografia e as regras de interação compartilhados mantêm a interface clara e fácil de escanear.
Componentes de célula reutilizáveis
As células da tabela reutilizam componentes de IU simples — Avatares, Botões, Avaliação, Progresso — resultando em layouts escaláveis que são fáceis de ajustar sem quebrar a consistência.
Painéis
Widgets estatísticos visualizam métricas-chave em um formato claro e compacto. Dados, rótulos, ícones e estados são combinados em cartões flexíveis que se adaptam a qualquer cenário — de painéis a visualizações detalhadas.
Cartões de dados flexíveis
Os cartões seguem tokens de espaçamento e estrutura consistentes, adaptando-se a qualquer tipo de dados - números, gráficos ou indicadores de progresso. Os componentes permanecem limpos e fáceis de ler em qualquer tamanho, tornando as métricas fáceis de comparar e visualizar
Menu
A estrutura se adapta ao contexto — de menus suspensos simples a navegações complexas de vários níveis — mantendo as ações claras, acessíveis e fáceis de escanear.
Flexível e escalável
Flexível e escalável
Os menus oferecem suporte a ícones, rótulos, atalhos e grupos aninhados. O layout se adapta a diferentes níveis de complexidade e densidade de conteúdo, preservando a clareza e uma navegação sem esforço. Espaçamento e tipografia consistentes mantêm uma estrutura limpa em todas as variações.
Os menus oferecem suporte a ícones, rótulos, atalhos e grupos aninhados. O layout se adapta a diferentes níveis de complexidade e densidade de conteúdo, preservando a clareza e uma navegação sem esforço. Espaçamento e tipografia consistentes mantêm uma estrutura limpa em todas as variações.
calendário
Um sistema flexível de seleção de datas com vários ajustes predefinidos, intervalos e atalhos. Os componentes permanecem claros e responsivos em qualquer layout, tornando o agendamento rápido e sem esforço.
As interações com o calendário continuam intuitivas
Os calendários suportam múltiplos modos de seleção, atalhos e predefinições de intervalo rápido. Os componentes se adaptam a diferentes layouts e permanecem legíveis em qualquer escala, ajudando os usuários a escolher datas com mais rapidez sem quebrar seu fluxo.
upload de arquivo
O carregador de arquivos permite o envio rápido e intuitivo de arquivos com feedback em tempo real. O componente se adapta a diferentes estados — enviando, sucesso ou erro — mantendo a interface limpa e previsível.
Estados de upload
Estados visuais claros (enviando, sucesso, erro) ajudam os usuários a entender o progresso instantaneamente. O layout e o espaçamento se adaptam dependendo do número de arquivos, garantindo legibilidade e controle em cada etapa.
Crie páginas sem esforço
Com uma rica biblioteca de componentes reutilizáveis e regras de design consistentes, as páginas podem ser montadas em minutos - basta combinar blocos, ajustar o conteúdo e você estará pronto para publicar. Sem a necessidade de estilização extra ou alinhamento manual.
Mais Projetos
Mais Projetos
Design System
Citric Design System
Citric é um design system que ajuda a criar interfaces limpas, consistentes e escaláveis. Ele unifica estilos, componentes e regras, tornando o processo de design mais rápido.
Ano:
2020
Indústria:
Tecnologia
Cliente:
Itaú / ZUP I.T.
Duração do Projeto:
6 Anos
Um sistema unificado de bases e componentes reutilizáveis que traz clareza, consistência e estrutura para cada interface.
O que tem dentro
princípios do atomic design
O Atomic Design é uma abordagem modular que divide as interfaces em partes reutilizáveis, tornando sua estrutura clara e conectada.
Sistemas de design começam com bases fortes. Eles definem como os componentes se parecem, se comportam e se dimensionam em todo o produto.
Fundações
Tipografia
O sistema tipográfico define estilos de texto como tokens de design e explica como os títulos e o corpo do texto devem ser aplicados.
Uma ampla variedade de estilos de texto claramente organizados, facilitando a seleção da opção certa para qualquer tela ou elemento de interface.
Fundações
Sistema de cores
Uma paleta flexível de cores semânticas e funcionais que mantém as interfaces consistentes, claras e expressivas em todo o produto.
Cores primitivas
Como a base da paleta, as cores primitivas definem fundos, texto e superfícies de IU neutras, criando uma base consistente que suporta paletas semânticas e de marca em toda a interface.
Cada combinação de cores no sistema foi validada em relação aos padrões de contraste do WCAG. Isso garante que o texto e os elementos de UI permaneçam legíveis e acessíveis em temas claro e escuro, independentemente do tamanho, estado ou contexto.
Fundações
Espaçamento e radius
Uma escala consistente de espaçamento e raio cria ritmo visual e layouts previsíveis. Cada valor existe como um token reutilizável, simplificando o alinhamento em toda a interface.
Espaçamento
Ao estabelecer valores de Espaçamento consistentes para margens, preenchimentos (paddings) e alinhamentos, as equipes podem alcançar harmonia visual e aprimorar a experiência geral do usuário.
Border Radius
O raio ajuda a tornar a interface de usuário (UI) pessoal, mais fácil de processar e reconhecível à primeira vista. Selecionar o raio correto para os componentes constrói um vocabulário visual e uma narrativa consistentes.
Fundações
sombras
Sombras criam profundidade e foco dentro da interface. Uma escala unificada garante a hierarquia visual e mantém a aparência dos componentes consistente em diferentes contextos.
Fundações
grid system
Uma grade de 12 colunas oferece flexibilidade para layouts complexos. A largura consistente das colunas e o espaçamento entre elas ajudam a manter a estrutura e o equilíbrio visual em telas largas.
Fundações
ícones
Um sistema unificado de ícones construído sob regras consistentes de traço, tamanho e grade. Os ícones permanecem nítidos e legíveis em qualquer escala e se adaptam automaticamente a cores semânticas.
+250 ícones
Uma biblioteca abrangente de mais de 250 ícones, cuidadosamente organizada em quatro categorias distintas. Encontre rapidamente o que você precisa através de uma estrutura intuitiva que simplifica a navegação, reduz o tempo de busca e torna a seleção de ícones mais rápida e eficiente.
Fundamentos
ILUSTRAÇÕES
Para criar uma experiência mais consistente e envolvente em todo o ecossistema, o Citric inclui uma biblioteca de ilustrações dedicada, projetada para apoiar a comunicação, orientação e experiências de estado vazio em todo o produto.
O sistema de ilustração é organizado em duas categorias principais: Ilustrações de Entidade e Ilustrações de Estado de Erro.
Entidades
Foram criadas para representar os principais objetos e módulos disponíveis em toda a plataforma. Essas ilustrações funcionam como marcadores visuais em estados vazios, momentos de onboarding e fluxos de criação de conteúdo, ajudando os usuários a entender rapidamente o contexto de cada seção. A biblioteca inclui ilustrações dedicadas para entidades como Contas, Estúdios, Espaços de Trabalho, Catálogo de Serviços, Stacks, Ações e outros módulos de produtos, garantindo consistência visual independentemente de onde os usuários estejam navegando.
Estado de erro
Foram projetadas para tornar o feedback do sistema mais amigável e humano. Em vez de depender apenas de mensagens de texto, essas ilustrações ajudam a comunicar problemas como conteúdo ausente, recursos indisponíveis, restrições de permissão e falhas inesperadas, reduzindo a frustração e mantendo a identidade visual do produto.
Componentes simples
Uma biblioteca de componentes essenciais de UI construídos com base em propriedades e tokens compartilhados. Cada elemento segue a mesma lógica de espaçamento, dimensionamento e estado para manter a interface consistente.
Botões
Os botões se adaptam a diferentes casos de uso por meio de variáveis compartilhadas: tamanho, paleta, tipo e estado. Cada botão segue o mesmo espaçamento, grade e lógica, tornando as interações consistentes em toda a interface.
Variações inteligentes
Os botões são construídos com base em tokens semânticos e propriedades adaptáveis.
Tamanhos, cores e ícones podem ser ajustados por meio de variáveis, mantendo o componente flexível e preservando a estrutura e a clareza.
Input Fields
Input fields são construídos a partir de tokens reutilizáveis — espaçamento, estados, ícones e rótulos. Isso mantém as interações previsíveis e ajuda os designers a construírem formulários mais rapidamente.
Anatomia
A estrutura principal inclui label, campo e texto de ajuda. Complementos opcionais — prefixo/sufixo, ícones, ações e máscaras — ajustam-se à mesma grade e espaçamento para maior clareza.
Estados e variantes
Os campos de entrada suportam múltiplos estilos visuais e estados de interação claros
— padrão, digitando, foco, erro, desativado — garantindo um comportamento previsível em diferentes cenários.
badges
Badges ajudam a chamar a atenção para informações importantes — status, prioridade ou categoria — usando semântica de cores clara e opções de estilo flexíveis.
Variações inteligentes
Os crachás usam o mesmo espaçamento, cor e regras, mantendo a interface consistente enquanto se adaptam a diferentes estados e paletas.
Avatares
Avatares representam visualmente usuários, membros de equipe ou entidades. Eles se adaptam a qualquer contexto — dando suporte a iniciais em texto, fotos ou ilustrações personalizadas.
Variações inteligentes
Construídos com base em tokens compartilhados de tamanho, espaçamento e cor, os avatares permanecem consistentes em diferentes formatos e tipos de conteúdo. Eles se adaptam a iniciais de texto, imagens e ilustrações, garantindo clareza e equilíbrio visual em qualquer
Tamanhos
Escolha o tamanho mais adequado para cada caso de uso. Os avatares são dimensionados de forma consistente, preservando a legibilidade, as proporções e o reconhecimento visual em listas, cartões, tabelas e experiências colaborativas.
Cores
Use variações de cores para aprimorar a identidade, a diferenciação e o reconhecimento rápido pelo usuário. Cada opção segue a paleta do sistema de design, garantindo consistência visual e contraste acessível em diferentes contextos e interfaces.
Switches, checkboxes, radiobuttoms
Esses controles permitem aos usuários fazer seleções rápidas ou alternar estados. Cada componente se adapta a várias paletas, tamanhos e estados de interação, mantendo uma linguagem visual unificada.
Variações inteligentes
Todos os componentes seguem regras compartilhadas de espaçamento, dimensionamento e traçado, garantindo padrões visuais e de interação consistentes em toda a interface.
Tooltips
Tooltips fornecem dicas contextuais rápidas sem interromper o fluxo do usuário. Eles aparecem ao passar o mouse ou ao focar e ajudam os usuários a entender ações, ícones ou controles instantaneamente.
Leve e informativo
Tooltips adaptam-se a diferentes posicionamentos e tamanhos de componentes, mantendo o espaçamento e o estilo consistentes em todas as variações.
Componentes Complexos
Componentes complexos combinam múltiplos componentes simples em padrões estruturados. Cada um segue regras compartilhadas de espaçamento, tipografia e semântica, garantindo consistência, escalabilidade e comportamento previsível em toda a interface.
Tabelas
As tabelas combinam vários componentes de UI — filtros, paginação, badges, ícones — em um padrão flexível de apresentação de dados. O espaçamento, a tipografia e as regras de interação compartilhados mantêm a interface clara e fácil de escanear.
Componentes de célula reutilizáveis
As células da tabela reutilizam componentes de IU simples — Avatares, Botões, Avaliação, Progresso — resultando em layouts escaláveis que são fáceis de ajustar sem quebrar a consistência.
Painéis
Widgets estatísticos visualizam métricas-chave em um formato claro e compacto. Dados, rótulos, ícones e estados são combinados em cartões flexíveis que se adaptam a qualquer cenário — de painéis a visualizações detalhadas.
Cartões de dados flexíveis
Os cartões seguem tokens de espaçamento e estrutura consistentes, adaptando-se a qualquer tipo de dados - números, gráficos ou indicadores de progresso. Os componentes permanecem limpos e fáceis de ler em qualquer tamanho, tornando as métricas fáceis de comparar e visualizar
Menu
A estrutura se adapta ao contexto — de menus suspensos simples a navegações complexas de vários níveis — mantendo as ações claras, acessíveis e fáceis de escanear.
Flexível e escalável
Flexível e escalável
Os menus oferecem suporte a ícones, rótulos, atalhos e grupos aninhados. O layout se adapta a diferentes níveis de complexidade e densidade de conteúdo, preservando a clareza e uma navegação sem esforço. Espaçamento e tipografia consistentes mantêm uma estrutura limpa em todas as variações.
Os menus oferecem suporte a ícones, rótulos, atalhos e grupos aninhados. O layout se adapta a diferentes níveis de complexidade e densidade de conteúdo, preservando a clareza e uma navegação sem esforço. Espaçamento e tipografia consistentes mantêm uma estrutura limpa em todas as variações.
calendário
Um sistema flexível de seleção de datas com vários ajustes predefinidos, intervalos e atalhos. Os componentes permanecem claros e responsivos em qualquer layout, tornando o agendamento rápido e sem esforço.
As interações com o calendário continuam intuitivas
Os calendários suportam múltiplos modos de seleção, atalhos e predefinições de intervalo rápido. Os componentes se adaptam a diferentes layouts e permanecem legíveis em qualquer escala, ajudando os usuários a escolher datas com mais rapidez sem quebrar seu fluxo.
upload de arquivo
O carregador de arquivos permite o envio rápido e intuitivo de arquivos com feedback em tempo real. O componente se adapta a diferentes estados — enviando, sucesso ou erro — mantendo a interface limpa e previsível.
Estados de upload
Estados visuais claros (enviando, sucesso, erro) ajudam os usuários a entender o progresso instantaneamente. O layout e o espaçamento se adaptam dependendo do número de arquivos, garantindo legibilidade e controle em cada etapa.
Crie páginas sem esforço
Com uma rica biblioteca de componentes reutilizáveis e regras de design consistentes, as páginas podem ser montadas em minutos - basta combinar blocos, ajustar o conteúdo e você estará pronto para publicar. Sem a necessidade de estilização extra ou alinhamento manual.
Mais Projetos
Mais Projetos
Design System
Citric Design System
Citric é um design system que ajuda a criar interfaces limpas, consistentes e escaláveis. Ele unifica estilos, componentes e regras, tornando o processo de design mais rápido.
Ano:
2020
Indústria:
Tecnologia
Cliente:
Itaú / ZUP I.T.
Duração do Projeto:
6 Anos
Um sistema unificado de bases e componentes reutilizáveis que traz clareza, consistência e estrutura para cada interface.
O que tem dentro
princípios do atomic design
O Atomic Design é uma abordagem modular que divide as interfaces em partes reutilizáveis, tornando sua estrutura clara e conectada.
Sistemas de design começam com bases fortes. Eles definem como os componentes se parecem, se comportam e se dimensionam em todo o produto.
Fundações
Tipografia
O sistema tipográfico define estilos de texto como tokens de design e explica como os títulos e o corpo do texto devem ser aplicados.
Uma ampla variedade de estilos de texto claramente organizados, facilitando a seleção da opção certa para qualquer tela ou elemento de interface.
Fundações
Sistema de cores
Uma paleta flexível de cores semânticas e funcionais que mantém as interfaces consistentes, claras e expressivas em todo o produto.
Cores primitivas
Como a base da paleta, as cores primitivas definem fundos, texto e superfícies de IU neutras, criando uma base consistente que suporta paletas semânticas e de marca em toda a interface.
Cada combinação de cores no sistema foi validada em relação aos padrões de contraste do WCAG. Isso garante que o texto e os elementos de UI permaneçam legíveis e acessíveis em temas claro e escuro, independentemente do tamanho, estado ou contexto.
Fundações
Espaçamento e radius
Uma escala consistente de espaçamento e raio cria ritmo visual e layouts previsíveis. Cada valor existe como um token reutilizável, simplificando o alinhamento em toda a interface.
Espaçamento
Ao estabelecer valores de Espaçamento consistentes para margens, preenchimentos (paddings) e alinhamentos, as equipes podem alcançar harmonia visual e aprimorar a experiência geral do usuário.
Border Radius
O raio ajuda a tornar a interface de usuário (UI) pessoal, mais fácil de processar e reconhecível à primeira vista. Selecionar o raio correto para os componentes constrói um vocabulário visual e uma narrativa consistentes.
Fundações
sombras
Sombras criam profundidade e foco dentro da interface. Uma escala unificada garante a hierarquia visual e mantém a aparência dos componentes consistente em diferentes contextos.
Fundações
grid system
Uma grade de 12 colunas oferece flexibilidade para layouts complexos. A largura consistente das colunas e o espaçamento entre elas ajudam a manter a estrutura e o equilíbrio visual em telas largas.
Fundações
ícones
Um sistema unificado de ícones construído sob regras consistentes de traço, tamanho e grade. Os ícones permanecem nítidos e legíveis em qualquer escala e se adaptam automaticamente a cores semânticas.
+250 ícones
Uma biblioteca abrangente de mais de 250 ícones, cuidadosamente organizada em quatro categorias distintas. Encontre rapidamente o que você precisa através de uma estrutura intuitiva que simplifica a navegação, reduz o tempo de busca e torna a seleção de ícones mais rápida e eficiente.
Fundamentos
ILUSTRAÇÕES
Para criar uma experiência mais consistente e envolvente em todo o ecossistema, o Citric inclui uma biblioteca de ilustrações dedicada, projetada para apoiar a comunicação, orientação e experiências de estado vazio em todo o produto.
O sistema de ilustração é organizado em duas categorias principais: Ilustrações de Entidade e Ilustrações de Estado de Erro.
Entidades
Foram criadas para representar os principais objetos e módulos disponíveis em toda a plataforma. Essas ilustrações funcionam como marcadores visuais em estados vazios, momentos de onboarding e fluxos de criação de conteúdo, ajudando os usuários a entender rapidamente o contexto de cada seção. A biblioteca inclui ilustrações dedicadas para entidades como Contas, Estúdios, Espaços de Trabalho, Catálogo de Serviços, Stacks, Ações e outros módulos de produtos, garantindo consistência visual independentemente de onde os usuários estejam navegando.
Estado de erro
Foram projetadas para tornar o feedback do sistema mais amigável e humano. Em vez de depender apenas de mensagens de texto, essas ilustrações ajudam a comunicar problemas como conteúdo ausente, recursos indisponíveis, restrições de permissão e falhas inesperadas, reduzindo a frustração e mantendo a identidade visual do produto.
Componentes simples
Uma biblioteca de componentes essenciais de UI construídos com base em propriedades e tokens compartilhados. Cada elemento segue a mesma lógica de espaçamento, dimensionamento e estado para manter a interface consistente.
Botões
Os botões se adaptam a diferentes casos de uso por meio de variáveis compartilhadas: tamanho, paleta, tipo e estado. Cada botão segue o mesmo espaçamento, grade e lógica, tornando as interações consistentes em toda a interface.
Variações inteligentes
Os botões são construídos com base em tokens semânticos e propriedades adaptáveis.
Tamanhos, cores e ícones podem ser ajustados por meio de variáveis, mantendo o componente flexível e preservando a estrutura e a clareza.
Input Fields
Input fields são construídos a partir de tokens reutilizáveis — espaçamento, estados, ícones e rótulos. Isso mantém as interações previsíveis e ajuda os designers a construírem formulários mais rapidamente.
Anatomia
A estrutura principal inclui label, campo e texto de ajuda. Complementos opcionais — prefixo/sufixo, ícones, ações e máscaras — ajustam-se à mesma grade e espaçamento para maior clareza.
Estados e variantes
Os campos de entrada suportam múltiplos estilos visuais e estados de interação claros
— padrão, digitando, foco, erro, desativado — garantindo um comportamento previsível em diferentes cenários.
badges
Badges ajudam a chamar a atenção para informações importantes — status, prioridade ou categoria — usando semântica de cores clara e opções de estilo flexíveis.
Variações inteligentes
Os crachás usam o mesmo espaçamento, cor e regras, mantendo a interface consistente enquanto se adaptam a diferentes estados e paletas.
Avatares
Avatares representam visualmente usuários, membros de equipe ou entidades. Eles se adaptam a qualquer contexto — dando suporte a iniciais em texto, fotos ou ilustrações personalizadas.
Variações inteligentes
Construídos com base em tokens compartilhados de tamanho, espaçamento e cor, os avatares permanecem consistentes em diferentes formatos e tipos de conteúdo. Eles se adaptam a iniciais de texto, imagens e ilustrações, garantindo clareza e equilíbrio visual em qualquer
Tamanhos
Escolha o tamanho mais adequado para cada caso de uso. Os avatares são dimensionados de forma consistente, preservando a legibilidade, as proporções e o reconhecimento visual em listas, cartões, tabelas e experiências colaborativas.
Cores
Use variações de cores para aprimorar a identidade, a diferenciação e o reconhecimento rápido pelo usuário. Cada opção segue a paleta do sistema de design, garantindo consistência visual e contraste acessível em diferentes contextos e interfaces.
Switches, checkboxes, radiobuttoms
Esses controles permitem aos usuários fazer seleções rápidas ou alternar estados. Cada componente se adapta a várias paletas, tamanhos e estados de interação, mantendo uma linguagem visual unificada.
Variações inteligentes
Todos os componentes seguem regras compartilhadas de espaçamento, dimensionamento e traçado, garantindo padrões visuais e de interação consistentes em toda a interface.
Tooltips
Tooltips fornecem dicas contextuais rápidas sem interromper o fluxo do usuário. Eles aparecem ao passar o mouse ou ao focar e ajudam os usuários a entender ações, ícones ou controles instantaneamente.
Leve e informativo
Tooltips adaptam-se a diferentes posicionamentos e tamanhos de componentes, mantendo o espaçamento e o estilo consistentes em todas as variações.
Componentes Complexos
Componentes complexos combinam múltiplos componentes simples em padrões estruturados. Cada um segue regras compartilhadas de espaçamento, tipografia e semântica, garantindo consistência, escalabilidade e comportamento previsível em toda a interface.
Tabelas
As tabelas combinam vários componentes de UI — filtros, paginação, badges, ícones — em um padrão flexível de apresentação de dados. O espaçamento, a tipografia e as regras de interação compartilhados mantêm a interface clara e fácil de escanear.
Componentes de célula reutilizáveis
As células da tabela reutilizam componentes de IU simples — Avatares, Botões, Avaliação, Progresso — resultando em layouts escaláveis que são fáceis de ajustar sem quebrar a consistência.
Painéis
Widgets estatísticos visualizam métricas-chave em um formato claro e compacto. Dados, rótulos, ícones e estados são combinados em cartões flexíveis que se adaptam a qualquer cenário — de painéis a visualizações detalhadas.
Cartões de dados flexíveis
Os cartões seguem tokens de espaçamento e estrutura consistentes, adaptando-se a qualquer tipo de dados - números, gráficos ou indicadores de progresso. Os componentes permanecem limpos e fáceis de ler em qualquer tamanho, tornando as métricas fáceis de comparar e visualizar
Menu
A estrutura se adapta ao contexto — de menus suspensos simples a navegações complexas de vários níveis — mantendo as ações claras, acessíveis e fáceis de escanear.
Flexível e escalável
Flexível e escalável
Os menus oferecem suporte a ícones, rótulos, atalhos e grupos aninhados. O layout se adapta a diferentes níveis de complexidade e densidade de conteúdo, preservando a clareza e uma navegação sem esforço. Espaçamento e tipografia consistentes mantêm uma estrutura limpa em todas as variações.
Os menus oferecem suporte a ícones, rótulos, atalhos e grupos aninhados. O layout se adapta a diferentes níveis de complexidade e densidade de conteúdo, preservando a clareza e uma navegação sem esforço. Espaçamento e tipografia consistentes mantêm uma estrutura limpa em todas as variações.
calendário
Um sistema flexível de seleção de datas com vários ajustes predefinidos, intervalos e atalhos. Os componentes permanecem claros e responsivos em qualquer layout, tornando o agendamento rápido e sem esforço.
As interações com o calendário continuam intuitivas
Os calendários suportam múltiplos modos de seleção, atalhos e predefinições de intervalo rápido. Os componentes se adaptam a diferentes layouts e permanecem legíveis em qualquer escala, ajudando os usuários a escolher datas com mais rapidez sem quebrar seu fluxo.
upload de arquivo
O carregador de arquivos permite o envio rápido e intuitivo de arquivos com feedback em tempo real. O componente se adapta a diferentes estados — enviando, sucesso ou erro — mantendo a interface limpa e previsível.
Estados de upload
Estados visuais claros (enviando, sucesso, erro) ajudam os usuários a entender o progresso instantaneamente. O layout e o espaçamento se adaptam dependendo do número de arquivos, garantindo legibilidade e controle em cada etapa.
Crie páginas sem esforço
Com uma rica biblioteca de componentes reutilizáveis e regras de design consistentes, as páginas podem ser montadas em minutos - basta combinar blocos, ajustar o conteúdo e você estará pronto para publicar. Sem a necessidade de estilização extra ou alinhamento manual.