Design System — Documentação Oficial

DRL Builder
Design System

Fundamentos visuais, tokens e componentes que sustentam a identidade da DRL Builder em todos os pontos de contato digitais e impressos.

Sede
Orlando, FL — USA
Mercados
6 regiões na Flórida
Versão
1.0.0 · Abril 2026
Princípio
Atomic Design
01 — Design Tokens

Paleta de Cores

A paleta da DRL traduz solidez, sofisticação e confiança. O azul profundo ancora a identidade institucional; os tons neutros e quentes adicionam refinamento e proximidade.

Azul Atlântico — Primária
900 #0D1A28
800 ★ #142339
700 #1B2F4B
600 #1D3A61
500 #234471
Areia Dourada — Secundária
700 #A8886E
500 ★ #C9AD98
400 #D7BEA8
300 #EBD7C8
100 #FCEFE5
Branco Estibador — Superfície
500 ★ #EDE1D0
400 #FAF1E3
300 #FFFBF4
200 #FFFDFB
Branco Divino — Background
500 ★ #F9F8ED
400 #FFFEFA
300 #FFFFFD
100 #FFFFFF
Cores Semânticas
Sucesso
#2D6A4F
Confirmações, estados de êxito, progresso positivo.
Erro
#9B2335
Falhas de validação, alertas críticos, ações destrutivas.
Aviso
#8C6D1F
Atenção necessária, estados intermediários, pendências.
Info
#1D3A61
Informações neutras, tooltips, conteúdo educativo.
02 — Design Tokens

Escala Tipográfica

Dois typefaces complementares definem a voz visual da DRL: geometria contemporânea para impacto e legibilidade neutra para comunicação funcional.

Principal — Display & Headings
Neue Montreal
Para logotipo e headings de impacto. Geométrica e contemporânea. Confere personalidade e distinção à marca. Licenciada via Pangram Pangram Foundry.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
0123456789
Apoio — Body & UI
Inter
Para corpo de texto, UI e comunicações. Garante legibilidade e versatilidade em todas as aplicações digitais.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
0123456789
Display
Neue Montreal
Construindo legados
Peso: 700 (Bold) Tamanho: 32–48px Line-height: 1.05 Letter-spacing: -.03em
H1
Neue Montreal
Empreendimentos Premium
Peso: 700 Tamanho: 28–32px Line-height: 1.1 Letter-spacing: -.02em
H2
Neue Montreal
Localização e Infraestrutura
Peso: 600 (SemiBold) Tamanho: 20–24px Line-height: 1.2 Letter-spacing: -.015em
H3
Neue Montreal
Detalhes do Imóvel
Peso: 600 Tamanho: 16–18px Line-height: 1.3 Letter-spacing: -.01em
Body
Inter
A DRL busca criar ativos que carregam valor real, potencial de valorização e significado para quem investe, compra ou sonha em construir um legado.
Peso: 400 (Regular) Tamanho: 14–16px Line-height: 1.7 Letter-spacing: 0
Label / Btn
Neue Montreal
Saiba Mais · Enviar Agora · Ver Projetos
Peso: 600 Tamanho: 11–13px Line-height: 1.2 Letter-spacing: .04em
Caption
Inter
Área útil · Prazo de entrega · Unidades disponíveis
Peso: 500 (Medium) Tamanho: 10–12px Line-height: 1.5 Letter-spacing: .02em
03 — Design Tokens

Espaçamento & Grid

Sistema baseado em múltiplos de 4px. Utilize sempre os tokens de espaçamento para manter consistência visual em todos os layouts.

--space-1 4px
Micro — separador entre ícone e texto, inset mínimo
--space-2 8px
Pequeno — gap entre badge e label, padding interno
--space-3 12px
Gap entre elementos de formulário
--space-4 16px
Padding padrão de card e componente
--space-5 24px
Gap entre cards, seções internas
--space-6 32px
Padding de seção pequena, margem de bloco
--space-7 48px
Padding de seção média, separação de conteúdo
--space-8 64px
Padding lateral de layout (desktop)
--space-9 96px
Padding de seção principal (hero, page sections)
Border Radius

Cantos levemente arredondados reforçam a sofisticação sem perder a solidez institucional. Evitar cantos totalmente retos ou excessivamente circulares em UI.

sm
4px
md
8px
lg
12px
xl
20px
pill
999px
04 — Componentes Core

Botões

Hierarquia clara de ações. Primário para CTAs principais; Secundário para ações de apoio com tom da marca; Outline para ações terciárias.

Variantes
Tamanhos
Estados
Especificações
Variante Background Texto Hover Padding Radius
Primary #142339 #EDE1D0 #1B2F4B + shadow-md 12px 24px 8px
Secondary #C9AD98 #142339 #D7BEA8 + shadow-sm 12px 24px 8px
Outline Transparente #142339 Fill #142339, txt #EDE1D0 11px 23px 8px
Ghost Transparente #142339 rgba(20,35,57,.06) 12px 16px 8px
04 — Componentes Core

Cards de Conteúdo

Cards estruturam informações de projetos, empreendimentos e comunicados. Sombra média (shadow-md) define a elevação padrão; hover eleva para shadow-lg.

DRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRL
Residencial · Orlando
Blu Dream
Resort-style community with vacation rental potential. Ideal for investors seeking short-term income assets.
From $485,000
DRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDODRLDRLDRLDRLDRLDRLDRLDRLDRL
Residential · Orlando
Tupelo
Clean Modern Home with white stucco
From $320,000
DRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDPR:AMRLDRLDRLDRLDRLDRLDRLDRLDRL
Lots · Orlando
Winter Park
Residential lots in a fast-growing Southwest Florida corridor. Full infrastructure, deed-restricted community, custom build-ready.
Lots from 6,000 sqft
Anatomia do Card
ElementoValorToken
BackgroundBranco puro--branco-pure
Border Radius12px--radius-lg
Sombra (rest)shadow-md--shadow-md
Sombra (hover)shadow-lg + translateY(-2px)--shadow-lg
Padding interno20px--space-5
Divisor footer1px solid Branco Estibador--branco-estibador
04 — Componentes Core

Formulários

Campos limpos com borda sutil. O estado de foco usa azul-600 com anel de 3px para acessibilidade. Estado de erro usa cor semântica de erro.

As shown on passport or ID
Incomplete number. Please check the format.
State: focus
04 — Componentes Core

Badges & Labels

Usados para status de empreendimentos, categorias e indicadores de estado. Usar sempre com texto em maiúsculas e tracking amplo.

Lançamento Em Obras Pronto Disponível Vendido Reservado Destaque Novo
Contexto Geográfico

Mercados de Atuação

A DRL Builder opera exclusivamente no estado da Flórida, com sede em Orlando. Os exemplos de conteúdo, nomes de projetos e cópias de UI devem sempre referenciar estas regiões reais.

★
Sede Principal
Orlando
Windermere · Orange County
Downtown · College Park
Região
Citrus Springs & Ocala
Citrus County · Marion County
Região
Lake Alfred & Haines City
Polk County
Região
North Port & Port Charlotte
Charlotte County
Região
Sebring
Highlands County
Região
Winter Park
Orange County · Greater Orlando
Projeto de Referência
Em produção
Blu Dream
Exemplo real de aplicação da identidade DRL em um projeto.
bludream.club ↗
05 — Direção de Arte

Imagens & Padrões

As fotografias e recursos gráficos seguem regras precisas para manter a sofisticação e coerência da marca em todos os materiais.

fotografia
de empreendimento
Fotografias de Empreendimentos
Aplicar tratamento de contraste elevado (+15) e levemente dessaturadas (–10%). Tons quentes preservados. Sem filtros excessivos. Recortes sempre em proporção 16:9 ou 4:3. Evitar fotos com céu muito branco ou superexposição.
DRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRLDRL
DRL
Pattern Tipográfico DRL
Repetição da sigla "DRL" em fonte serifada (Playfair Display ou similar) com opacidade entre 5–12%. Usado como textura de fundo em fundos escuros. Nunca usar em fundos claros. Não deve competir com conteúdo principal.
Blocos de Cor Sólida
Quando não há fotografia disponível, usar blocos sólidos das cores da marca (Azul Atlântico, Areia Dourada ou Branco Estibador). Podem ser combinados com o pattern tipográfico sobreposto para criar profundidade visual.
Barra Decorativa de Assinatura
A barra horizontal em gradiente de Areia Dourada → Branco Estibador é um elemento de assinatura. Aparece no rodapé de slides, capas e materiais institucionais. Altura fixa: 4–6px. Sempre horizontal, nunca vertical.