LAND BILHON Design System v1.1

01 Produtos

Ecossistema LAND BILHON

Cada produto tem um accent color unico via data-product no HTML root. Base verde, override por produto.

RH.BOS

rh.bilhon.space

Verde #6bc950

COMERCIAL.BOS

comercial.bilhon.space

Azul #3b82f6

REPORTS.BOS

reports.bilhon.space

Roxo #a855f7

FORMS

forms.bilhon.space

Amber #f59e0b

Compliance Audit

App	Token Prefix	Refs	Status
RH.BOS	--bl-*	100%	COMPLIANT
COMERCIAL.BOS	--bl-*	Pendente auditoria	PENDING
REPORTS.BOS	--bl-*	336 refs, 0 rs-*	COMPLIANT
FORMS	--bl-*	Pendente	N/A
HybridOps	ho-* (alinhado)	Proprio namespace	ALIGNED

Ultima auditoria: 2026-04-02

02 Background Scale

Escala de Profundidade

6 niveis de bg-0 (mais escuro) a bg-5 (mais claro). Aliases semanticos mapeiam para a escala.

bg-0#030303

bg-1#050505

bg-2 (primary)#09090c

bg-3#0c0c0e

bg-4 (elevated)#0f0f14

bg-5#18181b

Semantic Aliases

surface#0F0F11

surface-alt#1C1E19

card (3%)rgba 0.03

card-hover (6%)rgba 0.06

03 Cores Semanticas

Paleta de Cores

Brand verde + 9 cores semanticas. Texto com 5 niveis de hierarquia.

Brand & Semantic

green#6bc950

blue#60a5fa

blue-bright#0099FF

purple#a855f7

orange#fb923c

red#ef4444

cyan#06b6d4

yellow#fbbf24

pink#ec4899

gold#D4A853

Text Hierarchy

primary#f4f4e8

secondary#e4e4e7

dim#71717a

muted#52525b

ghost (40%)rgba 0.4

04 Brand Green Scale

Escala Verde (9 tons)

Do mais claro (100) ao mais escuro (900). Base = 500 (#6bc950).

100#CCFFE1

200#99FFc4

300#5CFF9D

400#33E87B

500 (base)#6bc950

600#00B848

700#009038

800#006828

900#004018

05 Status Colors

Cores de Status

4 cores semanticas para feedback do sistema.

success #6bc950

info #60a5fa

warning #fbbf24

danger #ef4444

06 Border Tiers

Escala de Bordas

4 tiers numericos (1-4) + aliases semanticos. Mais alto = mais visivel.

border-1 (4%)

Mais sutil — separadores

border-2 (6%)

Padrao — cards, inputs

border-3 (8%)

Enfase — grid lines

border-4 (12%)

Hover — interativo

border-accent

Accent — modais, foco

07 Tipografia

Fontes & Escalas

Inter para corpo, IBM Plex Mono para UI/dados/labels. 9 tamanhos de 8px a 28px.

Inter 700 — 28px
--bl-text-3xl

Dashboard Overview

Inter 700 — 24px
--bl-text-2xl

War Room

Inter 600 — 20px
--bl-text-xl

Section Title

Inter 400 — 14px
--bl-text-md

Texto de corpo principal. Descricoes, paragrafos.

Plex Mono 600 — 13px
--bl-text-base

COMERCIAL.BOS

Plex Mono 600 — 10px
--bl-text-sm

LABEL / BADGE / BUTTON

Plex Mono 700 — 9px
--bl-text-xs

MICRO TAG

Plex Mono 600 — 8px
--bl-text-2xs

NANO LABEL

08 Espacamento

Escala de Espacamento

Base 4px. 10 steps de 4px a 64px.

space-1 (4px)

space-2 (8px)

space-3 (12px)

space-4 (16px)

space-5 (20px)

space-6 (24px)

space-8 (32px)

space-10 (40px)

space-12 (48px)

space-16 (64px)

09 Border Radius

Cantos

6 steps. xs(2px) para AIOX/sharp, lg(10px) para cards, full para badges.

2px

xs

4px

sm

6px

md

10px

lg

12px

xl

full

10 Sombras & Glow

Efeitos de Profundidade

4 niveis de shadow + 4 neon glows coloridos.

Shadows

sm

md

lg

xl

Neon Glow

green

blue

gold

red

Glass Card

Default

bg-card + border-2

Hover

bg-card-hover + border-4

11 Blur (Glassmorphism)

Backdrop Blur

2 niveis de blur para efeito glass.

blur-sm (12px)

blur-lg (20px)

12 Z-Index

Camadas

5 niveis de z-index. Cada camada em incrementos de 100.

z-dropdown

100

z-topbar

200

z-sidebar

300

z-modal

400

z-toast

500

13 Componentes

Componentes Compartilhados

Padroes visuais que todos os projetos bilhon.space devem seguir.

Buttons

Badges

Success Danger Warning Info

font-mono | 9px | uppercase | radius-full | bg 15% opacity da cor

Topbar

PRODUTO.BOS h-52 | z-200

topbar-height (52px) | topbar-bg (85%) | blur-sm | border-2 | z-topbar

Score Bar

85

65

45

15

>=80 success | >=60 info | >=40 warning | >=20 orange | <20 danger

Detail Modal

Titulo X

role="dialog" | aria-modal | z-modal (400)

glass | border-accent | radius-xl | z-modal | backdrop 60% blur-sm

Loading State

Carregando...

animate-spin SVG + font-mono | muted | 10s timeout obrigatorio

14 Icones

Lucide Icons

Lucide React v0.469. Tamanhos: 12, 14, 16, 18, 20px.

filter

trending-up

zap

users

dollar-sign

target

bell

brain

mic

shield-alert

kanban

gauge

layers

settings

15 Padroes

Regras Visuais

Regras que todos os projetos bilhon.space devem seguir.

Padrao	Regra	Token
Topbar fixa	h-52, fixed, z-200, blur-sm, topbar-bg	--bl-topbar-*
Grid background	60px grid, 2% opacity white lines, body::before	--bl-grid-*
Accent glow	Radial gradient top-right, 6-8% opacity	--bl-accent-glow
Glass cards	bg-card + border-2 + radius-lg + hover border-4	.glass
Mono labels	IBM Plex Mono, 10px, uppercase, tracking 0.08em	--bl-font-mono
Score color	>=80 success \| >=60 info \| >=40 warning \| >=20 orange \| <20 danger	--bl-success/info/warning/danger
Demo mode	Badge warning pulsante + footer "dados ficticios"	--bl-warning
Favicon	SVG 32x32, bg-primary, radius 6, accent por produto	--bl-accent
Loading	animate-spin + mono + muted + timeout 10s obrigatorio	--bl-text-muted
Empty state	Texto mono 12px ghost centralizado	--bl-text-ghost
Dropdowns	bg-elevated ou bg-5 — NUNCA transparente	--bl-bg-elevated
Product accent	html[data-product] define accent override	[data-product="..."]
Executor colors	AI=#0099FF, Hybrid=#D4A853, Human=#f4f4e8	[data-executor="..."]

16 Referencia Completa

Todos os Tokens

Arquivo: design-system/shared/tokens.css — 90+ tokens

Token	Valor	Uso
Background
--bl-bg-0..5	#030303 → #18181b	Escala de profundidade (6 niveis)
--bl-bg-primary	#09090c (= bg-2)	Fundo principal
--bl-bg-elevated	#0f0f14 (= bg-4)	Fundo elevado, dropdowns
--bl-bg-card	rgba(255,255,255,0.03)	Cards
Text
--bl-text-primary	#f4f4e8	Texto principal (warm)
--bl-text-dim	#71717a	Texto secundario
--bl-text-ghost	rgba(245,244,231,0.4)	Labels, placeholders
Brand
--bl-green	#6bc950	Accent verde (marca Bilhon)
--bl-green-100..900	#CCFFE1 → #004018	Escala verde (9 tons)
--bl-accent	var(--bl-green)	Accent do produto (override por data-product)
Status
--bl-success	#6bc950	Sucesso, ativo, positivo
--bl-info	#60a5fa	Informativo, neutro
--bl-warning	#fbbf24	Alerta, atencao
--bl-danger	#ef4444	Erro, critico, destrutivo
Borders
--bl-border-1..4	4% → 12% opacity	Escala de visibilidade (4 tiers)
--bl-border-accent	rgba(107,201,80,0.2)	Modais, foco
Effects
--bl-glow-green/blue/gold/red	20px + 60px dual glow	Neon glow em foco/ativo
--bl-blur-sm / lg	12px / 20px	Glassmorphism
--bl-ease-spring	300ms cubic-bezier(0.16,1,0.3,1)	Animacoes interativas
Layout
--bl-topbar-height	52px	Altura da topbar
--bl-z-dropdown..toast	100 → 500	Camadas (5 niveis x100)
--bl-grid-size	60px	Grid background