FaseUp Design System

Sistema de design profissional que reflete nossos valores de transparência, confiança e inovação na construção civil brasileira.

🏗️

Profissional

Design que transmite confiança para construtoras e clientes corporativos

🤝

Transparente

Elementos visuais que comunicam honestidade e clareza em todos os processos

🚀

Inovador

Tecnologia moderna que revoluciona a gestão de obras no Brasil

Paleta de Cores

Cores cuidadosamente selecionadas que representam confiança, profissionalismo e modernidade na construção civil.

Cores Principais

Primary

Cor principal da marca

#E7CFA9

Primary Light

Hover e estados ativos

#F0D9B8

Secondary

Cor secundária robusta

#09455B

Secondary Dark

Tons mais escuros

#073A47

Cores de Destaque

Tertiary

Laranja profissional

#F4A261

Accent

Vermelho coral vibrante

#E76F51

Background

Fundo principal escuro

#0F1419

Cores do Sistema

Success

Sucesso e aprovação

#48BB78

Warning

Avisos importantes

#ED8936

Error

Erros e alertas críticos

#F56565

Info

Informações neutras

#4299E1

Tipografia

Inter: fonte moderna, legível e profissional que garante excelente experiência em todos os dispositivos.

Títulos

Heading 1

text-5xl font-black

Heading 2

text-4xl font-bold

Heading 3

text-3xl font-bold

Heading 4

text-2xl font-semibold
Heading 5
text-xl font-semibold
Heading 6
text-lg font-medium

Texto Corpo

Body Large - Para introduções importantes

text-lg

Body Regular - Texto padrão para conteúdo

text-base

Body Small - Textos secundários e labels

text-sm

Caption - Legendas e metadados

text-xs
Monospace - Códigos e valores técnicos

Espaçamento e Layout

Sistema de espaçamento consistente baseado em múltiplos de 4px para criar hierarquia visual harmoniosa.

Escala de Espaçamento

4px - Espaçamento mínimo
8px - Espaçamento pequeno
12px - Espaçamento entre elementos
16px - Espaçamento padrão
24px - Espaçamento grande
32px - Espaçamento entre seções

Border Radius

4px - XS rounded-xs
8px - SM rounded-sm
12px - MD rounded-md
16px - LG rounded-lg
24px - XL rounded-xl

Componentes

Componentes reutilizáveis que mantêm consistência visual e funcional em todo o sistema FaseUp.

Botões

Botões Primários

Botões Outline

Cards

Card Básico

Subtítulo do card

Conteúdo do card com informações relevantes sobre a funcionalidade ou seção.

Card Sucesso

Status: Aprovado

Card com gradiente sutil para destacar informações importantes ou status positivos.

Card Destaque

Premium

Card com shadow especial e border colorido para destacar conteúdo premium.

Sistema de Ícones Profissionais

Ícones consistentes que comunicam funcionalidades e status de forma clara:

Projetos
Gestão de obras
Equipes
Colaboração
Progresso
Acompanhamento
Comunicação
Chat integrado

Elementos de Formulário

Inputs

Seletores

Aplicação na Interface

Veja como o design system se traduz em interfaces reais do aplicativo FaseUp.

FaseUp

Edifício Residencial Sol

75% concluído
Fundação concluída
Estrutura em andamento
Cobertura pendente

Dashboard Executivo

5
Obras Ativas

Total de Obras

12

Concluídas

7

Residencial Aurora

85% concluído

Comercial Vista

60% concluído

Seja parte da revolução na construção civil

O FaseUp está transformando como construtoras e clientes se relacionam. Transparência que constrói confiança.

Dados protegidos
Acesso via smartphone
Suporte em português