SITE INSTITUCIONAL.

O site e o centro de gravidade digital da marca. Tudo que a Dark n' Black produz deve poder ser atribuido ao site sem dissonancia visual.

Stack recomendada: Next.js 14 com App Router, CSS Modules, sem UI framework externo. Este proprio portal usa a mesma stack — use-o como referencia de implementacao.

Hierarquia Tipografica

Bebas Neue

Regular (Bebas so tem regular)

56–80px

lh: 0.95–1.0

Titulo principal da pagina ou hero. Um por pagina. UPPERCASE obrigatorio.

Bebas Neue ou Oswald 700

700 (Oswald)

36–48px

lh: 1.0–1.1

Titulo de secao. Maximo 3 por pagina. UPPERCASE.

Oswald 600

600

20–28px

lh: 1.2

Titulo de subsecao, card title. UPPERCASE preferido.

Body

DM Sans

400 (corpo), 500 (enfase)

15–17px

lh: 1.65–1.75

Todo texto corrido. NUNCA uppercase. min 15px em desktop, 14px mobile.

Label / Caption

JetBrains Mono

400 ou 700

9–12px

lh: 1.4

Labels, badges, categorias, metadata. UPPERCASE + letter-spacing 2–4px.

Componentes da Pagina

Navbar

Altura 56px, fundo #0a0a0a, borda-bottom 1px #222, sticky no topo, logo esquerda, links direita.

Exemplo

Hero

Min-height 100vh ou 640px, fundo preto, H1 Bebas 72–96px, subtitulo DM Sans, 1 CTA gold, noise overlay.

Exemplo

Cards de Servico

Grid 3 colunas, gap 2px, border-top 3px gold no card ativo, padding 24px, fundo #111.

Exemplo

Section de Cases

Fundo alternando #0a0a0a e #111, metrica em Bebas dourado, descricao DM Sans, borda esquerda gold.

Exemplo

CTA Section

Fundo preto, H2 Bebas grande, 1 botao gold centralizado, linha gold 3px acima e abaixo.

Exemplo

Footer

Fundo #000, borda-top 1px gold, logo, links em mono uppercase, texto DM Sans 13px gray-400.

Exemplo

Responsividade

Breakpoints e mudancas de layout

/* Breakpoints */
@media (max-width: 768px) {
  /* Mobile */
  .container     { padding: 0 20px; }
  h1             { font-size: 44px; }
  .card-grid     { grid-template-columns: 1fr; }
  .nav-links     { display: none; }  /* menu hamburguer */
}

@media (max-width: 1024px) {
  /* Tablet */
  .container     { padding: 0 32px; }
  h1             { font-size: 56px; }
  .card-grid     { grid-template-columns: repeat(2, 1fr); }
}

Hover states — transicoes permitidas

/* Apenas estas propriedades podem ter transicao */
a, button, .card {
  transition: color var(--transition),
              border-color var(--transition),
              background-color var(--transition),
              opacity var(--transition);
  /* --transition: 200ms ease */
}

/* Hover de card */
.card:hover {
  border-color: var(--gold);        /* borda acende */
  background: var(--black-elevated);
}

/* Hover de botao gold */
.btn-gold:hover {
  background: var(--gold-light);    /* fica mais brilhante */
  color: #000;
}

Transicoes em cor, borda e opacidade. 200ms ease — rapido e funcional.

Sem bounce, spring ou parallax. Animacao decorativa contradiz a seriedade da marca.

← AnteriorReels e Stories Próximo →Landing Pages