@darknblackagency/css

Framework CSS Dark Brutalist — preto absoluto, tipografia pesada (Bebas Neue / Oswald), acento gold.

Instalação

npm install @darknblackagency/css

Uso rápido

<!-- Fontes (necessário antes do CSS) -->
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;700&family=JetBrains+Mono:wght@400;700&family=Oswald:wght@400;600;700&display=swap" rel="stylesheet">

<!-- Framework -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@darknblackagency/css/dist/darknblack.min.css">

Zero-config com fontes incluídas:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@darknblackagency/css/dist/darknblack-with-fonts.css">

Via bundler:

import '@darknblackagency/css'         // sem fontes
import '@darknblackagency/css/with-fonts' // com fontes

Customização — só --dnb-gold

--dnb-gold é o único token oficialmente customizável. Todas as variantes derivam automaticamente via color-mix().

@import '@darknblackagency/css';

:root {
  --dnb-gold: #ff5500; /* laranja — todas as variantes acompanham */
}

Presets alternativos:

<!-- Carregar após o bundle principal -->
<link rel="stylesheet" href="@darknblackagency/css/themes/blue">
<link rel="stylesheet" href="@darknblackagency/css/themes/red">
<link rel="stylesheet" href="@darknblackagency/css/themes/green">

Tokens CSS

Todos os tokens usam prefixo --dnb-*. Nunca usar valores hardcoded — sempre var(--dnb-token).

Cores

| Token | Valor padrão | Uso | |---|---|---| | --dnb-gold | #c8a44e | Único customizável. Acento, destaques, bordas ativas | | --dnb-gold-light | color-mix(gold 75%, white) | Hover gold | | --dnb-gold-dim | color-mix(gold 25%, transparent) | Backgrounds sutis | | --dnb-gold-dimmer | color-mix(gold 6%, transparent) | Backgrounds muito sutis | | --dnb-black-absolute | #000000 | Fundo de código | | --dnb-black-rich | #0a0a0a | Fundo do body | | --dnb-black-surface | #111111 | Superfícies de UI | | --dnb-black-card | #1c1c1c | Cards | | --dnb-border | #222222 | Bordas padrão | | --dnb-border-subtle | #1a1a1a | Bordas sutis (separadores) | | --dnb-white | #f0ece4 | Texto principal (levemente quente) | | --dnb-gray-200 | #b0b0b0 | Texto secundário | | --dnb-gray-300 | #8a8a8a | Texto muted legível | | --dnb-gray-400 | #666666 | Labels e metadata | | --dnb-gray-500 | #444444 | Decorativos apenas | | --dnb-status-success | #4ec86a | Verde — sucesso | | --dnb-status-warning | #e8a838 | Âmbar — aviso | | --dnb-status-error | #c83232 | Vermelho — erro | | --dnb-status-info | #4e8cc8 | Azul — informação |

Tipografia

| Token | Família | Uso | |---|---|---| | --dnb-font-display | 'Bebas Neue', Anton, sans-serif | Headlines. SEMPRE uppercase | | --dnb-font-display-alt | 'Oswald', sans-serif | Subtítulos, labels grandes | | --dnb-font-body | 'DM Sans', sans-serif | Corpo de texto. NUNCA uppercase | | --dnb-font-mono | 'JetBrains Mono', monospace | Código, labels técnicos. SEMPRE uppercase |

Escala tipográfica

| Token | Tamanho | Uso | |---|---|---| | --dnb-text-hero | 72px | H1 de página — um por página | | --dnb-text-display-lg | 48px | H2 de seção prioritária | | --dnb-text-display-md | 36px | H3 subseção | | --dnb-text-display-sm | 24px | H4 títulos de cards | | --dnb-text-body-lg | 18px | Lead paragraphs | | --dnb-text-body | 16px | Corpo padrão | | --dnb-text-body-sm | 14px | Conteúdo secundário | | --dnb-text-label | 14px | Labels mono uppercase — mínimo absoluto |

Espaçamento (escala 8px)

| Token | Valor | |---|---| | --dnb-space-xs | 4px | | --dnb-space-sm | 8px | | --dnb-space-md | 16px | | --dnb-space-lg | 24px | | --dnb-space-xl | 32px | | --dnb-space-2xl | 48px | | --dnb-space-3xl | 64px | | --dnb-space-4xl | 96px |

Referência de classes

Tipografia

<h1 class="dnb-h1">TÍTULO DA PÁGINA.</h1>
<h2 class="dnb-h2">TÍTULO DE SEÇÃO</h2>
<h3 class="dnb-h3">SUBTÍTULO</h3>
<span class="dnb-label">LABEL · CATEGORIA</span>

<!-- Prose — bloco de conteúdo longo com estilos automáticos -->
<div class="dnb-prose">
  <h2>Título formatado automaticamente</h2>
  <p>Parágrafo com estilos aplicados.</p>
  <code>código inline</code>
  <pre>bloco de código</pre>
</div>

Botão

<button class="dnb-btn">DEFAULT</button>
<button class="dnb-btn dnb-btn--gold">GOLD</button>
<button class="dnb-btn dnb-btn--small">SMALL</button>
<a href="/rota" class="dnb-btn dnb-btn--gold">LINK BUTTON</a>

Card

<div class="dnb-card">Card padrão</div>
<div class="dnb-card dnb-card--featured">Borda top gold</div>
<div class="dnb-card dnb-card--accent">Borda esquerda gold</div>
<div class="dnb-card dnb-card--noise">Com noise overlay</div>
<!-- Combinações são permitidas -->
<div class="dnb-card dnb-card--accent dnb-card--noise">Accent + noise</div>

Badge

<span class="dnb-badge">OUTLINE</span>
<span class="dnb-badge dnb-badge--filled">FILLED</span>
<span class="dnb-badge dnb-badge--muted">MUTED</span>

Status Chip

A cor é definida via CSS custom property inline --dnb-chip-color:

<span class="dnb-status-chip" style="--dnb-chip-color: var(--dnb-status-success)">ATIVO</span>
<span class="dnb-status-chip" style="--dnb-chip-color: var(--dnb-status-error)">BLOQUEADO</span>
<span class="dnb-status-chip" style="--dnb-chip-color: var(--dnb-gold)">DESTAQUE</span>

Rule Box (caixa de regra)

<div class="dnb-rule-box dnb-rule-box--info">Nota informativa</div>
<div class="dnb-rule-box dnb-rule-box--do">O que fazer</div>
<div class="dnb-rule-box dnb-rule-box--dont">O que não fazer</div>

Code Block

<span class="dnb-code-block__label">título opcional</span>
<pre class="dnb-code-block">const x = 'código aqui'</pre>

Section Label

<div class="dnb-section-label">02.01 — SEÇÃO</div>

Gold Line / Divider

<div class="dnb-gold-line"></div>            <!-- 48px × 3px gold -->
<div class="dnb-gold-line dnb-gold-line--full"></div>  <!-- linha horizontal full-width -->
<div class="dnb-divider"></div>              <!-- divider cinza com margin 40px -->
<div class="dnb-divider dnb-divider--gold"></div> <!-- divider gold -->

Breadcrumb

<nav class="dnb-breadcrumb">
  <span style="display:flex;align-items:center;gap:8px">
    <a href="/design-system" class="dnb-breadcrumb__item">Design System</a>
    <span class="dnb-breadcrumb__sep">/</span>
  </span>
  <span class="dnb-breadcrumb__item dnb-breadcrumb__item--current">Componentes</span>
</nav>

Page Nav

<nav class="dnb-page-nav">
  <a href="/anterior" class="dnb-page-nav__item dnb-page-nav__item--prev">
    <span class="dnb-page-nav__label">← Anterior</span>
    <span class="dnb-page-nav__title">Nome da página anterior</span>
  </a>
  <a href="/proxima" class="dnb-page-nav__item dnb-page-nav__item--next">
    <span class="dnb-page-nav__label">Próximo →</span>
    <span class="dnb-page-nav__title">Nome da próxima página</span>
  </a>
</nav>

Color Swatch

<!-- Cor definida via --dnb-swatch-color -->
<div class="dnb-color-swatch">
  <div class="dnb-color-swatch__color" style="--dnb-swatch-color: #c8a44e"></div>
  <div class="dnb-color-swatch__info">
    <span class="dnb-color-swatch__name">Gold</span>
    <span class="dnb-color-swatch__hex">#c8a44e</span>
    <span class="dnb-color-swatch__desc">Acento principal</span>
  </div>
</div>

Utilitários de layout

<div class="dnb-grid-2"><!-- 2 colunas, colapsa em mobile --></div>
<div class="dnb-grid-3"><!-- 3 colunas, colapsa progressivamente --></div>
<div class="dnb-grid-4"><!-- 4 colunas --></div>
<div class="dnb-table-scroll"><!-- overflow-x: auto --></div>
<div class="dnb-container"><!-- max-width 860px, centrado --></div>

Utilitários de cor e texto

<span class="dnb-text-gold">texto dourado</span>
<span class="dnb-text-muted">texto muted</span>
<span class="dnb-text-mono">TEXTO MONO</span>
<span class="dnb-text-upper">uppercase</span>

Filosofia do sistema — regras para IA

Ao gerar código com este framework, seguir sempre:

1. Fundo preto, acento gold. Nunca usar cores de fundo claras.
2. Display = UPPERCASE. font-family: var(--dnb-font-display) sempre com text-transform: uppercase.
3. Radius = 0. Nenhum border-radius além de var(--dnb-radius) (= 0px).
4. Sem valores hardcoded. Nunca color: #c8a44e — sempre color: var(--dnb-gold).
5. Gold para destaques, não para texto corrido. --dnb-white para corpo, gold para acentos, bordas ativas e labels mono.
6. Gray-300 é o mínimo para texto funcional. Abaixo disso (gray-400, gray-500) só para decorativo.
7. Espaçamento via tokens. Usar var(--dnb-space-*) para padding/margin.

Exports do package.json

| Import | Arquivo | |---|---| | @darknblackagency/css | dist/darknblack.css | | @darknblackagency/css/min | dist/darknblack.min.css | | @darknblackagency/css/with-fonts | dist/darknblack-with-fonts.css | | @darknblackagency/css/tokens | dist/tokens.css | | @darknblackagency/css/tokens.json | dist/tokens.json | | @darknblackagency/css/themes/blue | dist/themes/blue.css | | @darknblackagency/css/themes/red | dist/themes/red.css | | @darknblackagency/css/themes/green | dist/themes/green.css |