Design System

A identidade visual da ProFily, documentada e pronta para uso.

Cores, tipografia, espaçamento e componentes que formam a linguagem visual da ProFily Contabilidade Digital — de fundações a produtos aplicados.

Fundamentos

Marca

Logotipo, símbolo e iconografia que representam a ProFily em qualquer aplicação.

LogotipoUso em fundos claros e escuros

SímboloEspiral + seta ascendente

IconografiaLucide — outline, traço 1.5px

Fundamentos

Azul-céu como cor de ação, navy como âncora escura, neutros frios e cores semânticas para estados.

Cores da marcaSky + Navy

Escala Sky BlueTints para acentos e hovers

Escala neutraTexto, bordas, superfícies

Cores semânticasSucesso, alerta, erro, info

Fundamentos

Poppins para display e corpo de texto; Baloo 2 como fonte de destaque, usada com moderação.

DisplayPoppins ExtraBold/Bold — títulos

CorpoPoppins Regular/Medium — texto e UI

DestaqueBaloo 2 — momentos pontuais

Fundamentos

Unidade base de 4px, cantos generosos e sombras suaves com tom navy.

Escala de espaçamentoBase 4px

Raio & sombraCantos e elevação

Biblioteca

Primitivos de UI prontos para uso em produtos ProFily — forms, feedback, navegação e mais.

BotõesPrimário, escuro, secundário, ghost, danger

Card, Badge & TagSuperfícies e chips de status

Campos de formulárioInput, Select, Checkbox, Radio, Switch

TabsNavegação por abas com underline

Dialog, Toast & TooltipModal, notificação e dica

Aplicado

O sistema aplicado em telas reais: o portal do cliente e o site institucional.

Portal do cliente Abrir em tela cheia ↗

Site institucional Abrir em tela cheia ↗