Sistema escuro para produto, painel e conteúdo, extraído do projeto Rentier (SaaS UX/UI Design, Behance) e retonalizado: a família roxa virou azul `brand` e entrou o lima `accent` como segunda cor. O tipo display é a Tomorrow, quadrada e industrial; a interface é Geist; dado e micro-rótulo são Geist Mono. Comece por aqui, depois leia a ficha do que for usar. ## Como o sistema pensa 1. **Escuro primeiro.** `dark` é o tema base e é onde as decisões foram tomadas. `light` existe para documento, e-mail e landing page, e toda cor foi checada nos dois. 2. **Quadrado.** O Rentier é todo pílula; o BORA fecha os cantos para acompanhar a Tomorrow. Botão e input em `radius-md` (6px), card em `radius-lg` (10px), painel em `radius-xl` (14px). Só avatar, ponto de status e toggle continuam em `radius-pill`. 3. **O corte do canto é a forma da marca.** O canto inferior direito cortado do símbolo BORA reaparece nas classes `.bora-chamfer` e `.bora-chamfer-lg`, nos blocos da capa e nos ladrilhos do padrão. Use com parcimônia: um corte por composição. 4. **Três vozes tipográficas.** Tomorrow grita (manchete, número de capa, período do plano). Geist fala (todo o resto). Geist Mono etiqueta e conta (micro-rótulo, código, métrica, hora). Nunca troque os papéis. ## Fundamentos de conteúdo Escreva em português do Brasil, direto, na segunda pessoa quando a frase pede ação: "Reservar", "Aplicar", "Quero receber". Nada de "Clique aqui". Nunca use travessão. Onde a frase pediria um, use dois pontos, vírgula ou ponto final. Rótulo de botão é verbo da ação, com objeto quando couber: "Criar solicitação", não "Enviar". Rótulo de aba é substantivo: "Financeiro", "Documentos", porque a aba é um lugar. Micro-rótulo (`label`) vai em CAIXA ALTA e diz a categoria: "CARGA DE TRABALHO", "FINANCEIRO", "EDIÇÃO 07". Título vai em caixa de frase e diz o conteúdo. Manchete de marketing vai em CAIXA ALTA na Tomorrow, no máximo três linhas. Número sempre formatado pelo consumidor, no padrão brasileiro: `R$ 722.543`, `+80,8%`, `18/09/2026`, `10:00 às 14:00`. Identificador sempre em Geist Mono com `#` na frente: `#XJ-22FPV24`. Não use emoji na interface. Nas etiquetas, o ponto colorido e o ícone de traço fazem o trabalho. Estado é sempre cor mais palavra. `Status` sem texto não existe. ## Cor `surface-base` é o fundo da página; `surface-card` é onde o conteúdo mora; `surface-inset` é onde se digita e se clica. Toda tela é uma grade de `Card` sobre `surface-base`. `brand` preenche a ação principal e a seleção. `brand-soft` é a marca como texto e ícone: link, aba ativa, valor destacado. Nunca escreva texto em `brand` puro sobre superfície escura. `accent` é a segunda cor e trabalha sozinha: um CTA lima por tela, ou um badge, ou uma faixa. Dois elementos lima na mesma tela anulam o destaque. No tema claro todo preenchimento lima leva borda de 1px em `accent-soft`, porque o lima puro não separa do branco. `success`, `warning`, `danger` e `info` são reservados a significado. Não use nenhum deles como cor de categoria; para isso existem `aqua`, `magenta` e os tons neutros da `Tag`. Texto: `text-primary` para título e valor, `text-secondary` para texto corrido, `text-muted` para metadado, legenda e placeholder. Todos passam de 4,5:1 nas superfícies que a nota de cada token nomeia, nos dois temas. Gráfico usa `chart-1` a `chart-4` em ordem fixa, nunca reciclada nem repintada por ranking. A partir da quinta série, agrupe em "Outros" ou parta para small multiples. `chart-spark` é o período atual do sparkline; `chart-neutral` é o histórico sem ênfase. ## Tipografia Escala de interface herdada do Rentier: `title-l` 24, `title-m` 20, `headline` 16, `body` 15, `subhead` 14, `caption` 12. Display: `display-xl` 72 só em capa e hero, um por tela. `display-l` 48 em título de post e de seção. `display-m` 36 em título de página do app. Sempre em CAIXA ALTA a partir de `display-l`. Dados: `label` 11 em caixa alta com `0.14em` de espaçamento é a assinatura visual do sistema, e vem direto do Rentier. `metric` 32 para número grande, com figuras proporcionais; ligue `tabular-nums` só em coluna de tabela. `code` 13 para identificador. Um número herói por tela, e ele é `Metric` em Geist Mono. A Tomorrow nunca carrega dado. ## Espaço, borda e elevação Grade de 4px. `space-4` é o padding padrão de card e o gap entre cards; `space-5` o padding de card grande; `space-6` o de painel; `space-10` a margem entre seções; `space-20` o respiro de hero. `border-subtle` divide dentro do card. `border-default` contorna card, input e botão secundário. `border-strong` é a única borda que carrega significado (controle ativo, item selecionado) e por isso segura 3:1 em toda superfície. `shadow-card` é a elevação mínima. `shadow-pop` é para popover, menu e modal. `shadow-glow` é o halo da marca e aparece no máximo em um elemento por tela. Foco é `brand-ring` sólido de 2px com 2px de deslocamento, vindo do `:focus-visible` global. Nunca troque por sombra ou por mudança de cor de fundo. Sem animação decorativa. Transição só em cor de fundo, borda e texto, em 120ms. ## Imagem e gráfico Foto entra em bloco com `radius-xl` e véu `opacity-scrim` quando houver texto por cima. Onde não houver foto, use blocos de cor cortados e a grade de ladrilhos: é mais barato e mais do sistema que banco de imagem. Barra de gráfico no máximo 24px, ponta arredondada em `radius-xs` e quadrada na base. Linha de 2px, marcador de 8px com anel da superfície. Área da série a `opacity-area`. Grade em `chart-grid`, 1px sólida. Legenda obrigatória a partir de duas séries; série única dispensa legenda porque o rótulo já diz o que está plotado. ## Iconografia Ícone vem do componente `Icon`: 24 glifos desenhados em grade de 17px, traço de 1,5px, pontas e junções arredondadas, sem preenchimento. Herdam `currentColor`, então a cor vem do contexto. Não misture outra biblioteca de ícone. Se faltar um glifo, desenhe na mesma grade de 17px com traço de 1,5px e adicione ao mapa `P` do bundle. Logotipo de empresa não é ícone nem avatar: entra em tile quadrado com `radius-sm`. ## Marca Os arquivos ficam em `assets/Logos/`, e o componente `Logo` desenha as mesmas formas a partir dos contornos embutidos no bundle. Use o componente dentro de produto e os arquivos SVG fora dele (e-mail, apresentação, favicon, arquivo para terceiros). A assinatura padrão é `lockup`. O símbolo sozinho serve a favicon, avatar e topo de `SideNav`. Respiro mínimo ao redor: a largura do corte do canto, `size × 0.27`. Nunca aplique contorno, sombra, gradiente ou rotação. ## De onde veio Extraído das capturas do projeto Rentier enviadas em 18/09/2026, medidas pixel a pixel: escala de superfícies (`#0a0a0a` a `#323232`), escala de tipo (40/32/24/20/16/14/12), etiquetas, selos de estado, calendário, kanban, tabela e cards de tarifa. O roxo original `#7a44da` foi substituído por `#2b6bff`; `aqua` e `magenta` são os sinais secundários preservados do original. Fontes: Tomorrow e Geist sob SIL Open Font License, arquivos `.woff2` em `fonts/`.