Design System

Signature Travel Aesthetic.

Este guia define a identidade visual do Bibibi, focada em uma experiência premium, amigável e familiar para anfitriões, inspirada na linguagem de design de produtos de hospitalidade globais.

Paleta de Cores

As cores que dão vida à nossa marca e interface.

Primary

Laranja Bibibi

Destaque#F97316

Cor principal de destaque, usada para CTAs importantes, ícones ativos e branding.

Secondary

Babu

Saúde/Lucro#008489

Usado para elementos de sucesso, taxas de saúde financeira e lucro.

Accent

Arches

Alerta/Detalhe#FC642D

Toques sutis para alertas ou categorias específicas.

#222222

Hof

Texto principal

#717171

Foggy

Texto secundário

#EBEBEB

Light Gray

Bordas

#FFFFFF

Surface

Fundo cards

#F7F7F7

Canvas

Fundo app

Tipografia

Plus Jakarta Sans (ou Inter) para clareza e modernidade.

H1 (Display)

Dashboard Operacional

32px / SemiBold / Tracking -2%

H2 (Section)

Módulos de Receita

24px / Bold

Body

A ferramenta definitiva para anfitriões profissionais que buscam clareza financeira, automação operacional e o fim das planilhas quebradas.

16px / Regular / Interlineado 1.5

Caption

Labels e metadados

12px / Medium

Componentes Visuais

Estilos base que constroem a interface.

Bordas

Arredondamento generoso de 12px a 16px para cards.

Sombras

Muito suaves (shadow-sm/md) para criar profundidade limpa.

Botões

Cantos arredondados (xl) e estado hover escurecido.

Princípios de Design

A fundação da nossa experiência de usuário.

Clareza em Primeiro Lugar

Dados financeiros complexos devem ser apresentados de forma simples e digerível. O usuário não deve pensar para entender um gráfico.

Branco como Respiro

Uso generoso de espaço negativo para evitar sobrecarga de informação. Respeite o vácuo visual, ele direciona a atenção.

Identidade "Host"

O design deve fazer o usuário se sentir no controle, transmitindo profissionalismo e hospitalidade em cada interação.