---
version: "valle-roleplay-1.0.0"
name: "Valle Roleplay"
description: "Sistema visual do servidor FiveM Valle Roleplay: grafite urbano, amarelo de sinalização, branco concreto e laranja-vermelho de pôr do sol. Cantos retos, cortes diagonais, molduras de canto, grid urbano e grão fotográfico. Tema único escuro, interface em português do Brasil."
colors:
  primary: "#F2E205"
  primary-foreground: "#0B0C0E"
  foreground: "#ECE8E1"
  destructive: "#FF4A2B"
  background: "#0B0C0E"
  surface: "#131417"
  surface-2: "#1B1C20"
  sidebar: "#0F1012"
  muted: "#17181B"
  text-primary: "#ECE8E1"
  text-body: "#C9C6BF"
  text-secondary: "#9C9A95"
  border: "rgb(236 232 225 / 0.14)"
  border-strong: "rgb(236 232 225 / 0.28)"
  input: "rgb(236 232 225 / 0.20)"
  ring: "#F2E205"
  success: "#8FBF7A"
  warning: "#FF9A3C"
  chart: ["#F2E205", "#FF4A2B", "#ECE8E1", "#9C9A95", "#5C5B58"]
typography:
  display-xl:
    fontFamily: "Barlow Condensed"
    fontSize: "clamp(56px, 8vw, 128px)"
    fontWeight: 800
    lineHeight: "0.95"
    letterSpacing: "0.01em"
    textTransform: "uppercase"
  display-lg:
    fontFamily: "Barlow Condensed"
    fontSize: "48px"
    fontWeight: 800
    lineHeight: "0.95"
    letterSpacing: "0.01em"
    textTransform: "uppercase"
  title-md:
    fontFamily: "Barlow Condensed"
    fontSize: "30px"
    fontWeight: 800
    lineHeight: "1"
    letterSpacing: "0.02em"
    textTransform: "uppercase"
  body-md:
    fontFamily: "Montserrat"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "1.7"
  label-strong:
    fontFamily: "Montserrat"
    fontSize: "12px"
    fontWeight: 800
    lineHeight: "1.2"
    letterSpacing: "0.18em"
    textTransform: "uppercase"
  kicker:
    fontFamily: "Montserrat"
    fontSize: "11px"
    fontWeight: 800
    lineHeight: "1.2"
    letterSpacing: "0.3em"
    textTransform: "uppercase"
  mono:
    fontFamily: "JetBrains Mono"
    fontSize: "12px"
    fontWeight: 600
    lineHeight: "1.4"
spacing:
  base: "4px"
  gap: "6px / 10px / 16px"
  card-padding: "20px–32px"
  section-padding: "96px–128px"
  container: "1280px (max-w-7xl) com gutter 16/24/32px"
rounded:
  all: "0px"
  note: "Cantos sempre retos. Formas especiais vêm de clip-path (cortes diagonais), nunca de border-radius."
components:
  button:
    background: "Amarelo #F2E205 com texto grafite; CTA principal com corte diagonal (clip-cut); hover vira branco concreto"
    typography: "12px, 800, caixa alta, tracking .18em"
    radius: "0"
  card:
    background: "#131417 com borda rgb(236 232 225 / .14), hachura diagonal sutil opcional; hover acende moldura/borda amarela"
    radius: "0"
  input:
    background: "Transparente com borda rgb(236 232 225 / .20); foco amarelo"
  badge:
    background: "Fundo translúcido do tom + borda do tom + texto do tom, 10px 800 caixa alta"
  table:
    header: "Referência (código penal, preços): cabeçalho amarelo com texto grafite 10px tracking .2em. Dados (painéis): cabeçalho grafite com filete amarelo de 2px"
  kbd:
    background: "Branco concreto, texto grafite 800, sombra sólida amarela 3px 3px"
  chips:
    active: "Borda #FF4A2B + fundo rgb(255 74 43 / .14) + texto branco"
---

# Valle Roleplay — Design System

> Cole este arquivo inteiro em qualquer IA (ou entregue a um designer) para aplicar o visual do Valle instantaneamente. Ele é autocontido: tokens, CSS pronto, regras de componentes, padrões, motion e guardrails.

## 1. Visão geral

O Valle Roleplay é um servidor brasileiro de GTA RP no FiveM. A identidade nasce da **tela de loading**: uma cidade ao pôr do sol vista através de uma interface de sinalização urbana.

- **Grafite** (`#0B0C0E`) é a noite da cidade — fundo de tudo.
- **Amarelo** (`#F2E205`) é a tinta de sinalização — ação principal, foco, destaque.
- **Branco concreto** (`#ECE8E1`) é o texto e a segunda perna do V.
- **Laranja-vermelho** (`#FF4A2B`) é o pôr do sol — urgência, perigo, progresso, filtro ativo.
- Formas **retas e cortadas na diagonal** (paralelogramos), **molduras de canto**, **barras grossas** e **hachuras**.
- Atmosfera: **grid urbano** a 7%, **grão fotográfico** animado, **sombras radiais quentes**, **fagulhas** subindo.
- Movimento **contido**: subir e aparecer (rise), trocar com fade, ticker contínuo, hover que acende amarelo.
- **Tema único escuro.** Não existe modo claro da interface.
- **Todo texto em português do Brasil.**

## 2. Tokens CSS prontos

### 2.1 `:root` completo

```css
:root {
  /* marca */
  --brand-yellow: #f2e205;
  --brand-white: #ece8e1;
  --brand-red: #ff4a2b;
  --brand-ink: #0b0c0e;
  --brand-ink-2: #131417;
  --brand-muted: #9c9a95;
  --line: rgb(236 232 225 / 0.14);
  --line-strong: rgb(236 232 225 / 0.28);

  /* papéis (compatível com shadcn/ui) */
  --background: #0b0c0e;
  --foreground: #ece8e1;
  --card: #131417;
  --card-foreground: #ece8e1;
  --popover: #131417;
  --popover-foreground: #ece8e1;
  --primary: #f2e205;
  --primary-foreground: #0b0c0e;
  --secondary: #1b1c20;
  --secondary-foreground: #ece8e1;
  --muted: #17181b;
  --muted-foreground: #9c9a95;
  --accent: #1f2024;
  --accent-foreground: #ece8e1;
  --destructive: #ff4a2b;
  --border: rgb(236 232 225 / 0.14);
  --input: rgb(236 232 225 / 0.2);
  --ring: #f2e205;
  --chart-1: #f2e205;
  --chart-2: #ff4a2b;
  --chart-3: #ece8e1;
  --chart-4: #9c9a95;
  --chart-5: #5c5b58;
  --radius: 0rem;
  --sidebar: #0f1012;
  --sidebar-foreground: #ece8e1;
  --sidebar-primary: #f2e205;
  --sidebar-primary-foreground: #0b0c0e;
  --sidebar-accent: #1b1c20;
  --sidebar-accent-foreground: #ece8e1;
  --sidebar-border: rgb(236 232 225 / 0.14);
  --sidebar-ring: #f2e205;

  /* status auxiliares */
  --success: #8fbf7a;
  --warning: #ff9a3c;

  /* fontes */
  --font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-mono-face: "JetBrains Mono", ui-monospace, monospace;

  color-scheme: dark;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--brand-yellow); color: var(--brand-ink); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--brand-yellow); }
::-webkit-scrollbar-track { background: transparent; }
```

### 2.2 Tailwind v4 (`@theme` + utilitários)

```css
@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-body);
  --font-heading: var(--font-heading);
  --font-mono: var(--font-mono-face);

  --color-brand-yellow: var(--brand-yellow);
  --color-brand-white: var(--brand-white);
  --color-brand-red: var(--brand-red);
  --color-brand-ink: var(--brand-ink);
  --color-brand-ink-2: var(--brand-ink-2);
  --color-brand-muted: var(--brand-muted);
  --color-line: var(--line);
  --color-line-strong: var(--line-strong);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0;

  --animate-rise: rise 1.1s ease-out both;
  --animate-fade: fade 0.3s ease-out both;
  --animate-ticker: ticker 40s linear infinite;
  --animate-grain: grain 0.9s steps(4) infinite;
}

/* Título display */
@utility font-display {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
}
/* Kicker: rótulo pequeno espaçado */
@utility text-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase;
}
/* Cortes diagonais (paralelogramo) */
@utility clip-cut { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
@utility clip-cut-sm { clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); }
/* Grid urbano (use com opacity ~.07 e máscara radial) */
@utility bg-urban-grid {
  background-image:
    linear-gradient(var(--brand-white) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-white) 1px, transparent 1px);
  background-size: 120px 120px;
}
/* Hachura diagonal sutil dos painéis */
@utility bg-hatch {
  background-image: repeating-linear-gradient(135deg, rgb(236 232 225 / 0.015) 0 2px, transparent 2px 9px);
}
/* Divisor tracejado diagonal */
@utility bg-slash {
  background: repeating-linear-gradient(120deg, var(--line-strong) 0 3px, transparent 3px 9px);
}
/* Sombras radiais quentes (pôr do sol + vinheta) */
@utility bg-brand-shade {
  background:
    radial-gradient(ellipse at 70% 38%, rgb(255 120 40 / 0.22) 0%, rgb(255 74 43 / 0) 45%),
    radial-gradient(ellipse 34% 40% at 50% 52%, rgb(11 12 14 / 0.62) 0%, rgb(11 12 14 / 0) 100%),
    radial-gradient(ellipse at 50% 46%, rgb(11 12 14 / 0.15) 0%, rgb(11 12 14 / 0.7) 75%),
    linear-gradient(0deg, rgb(11 12 14 / 0.95) 0%, rgb(11 12 14 / 0) 34%),
    linear-gradient(180deg, rgb(11 12 14 / 0.75) 0%, rgb(11 12 14 / 0) 22%);
}
/* Grão fotográfico (camada inset:-50%, opacity .09, animate-grain) */
@utility bg-grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Barra lateral do drawer: amarelo 38% + vermelho até 46% */
@utility bg-drawer-bar {
  background: linear-gradient(180deg, var(--brand-yellow) 0 38%, var(--brand-red) 38% 46%, transparent 46%);
}
@utility shadow-kbd { box-shadow: 3px 3px 0 var(--brand-yellow); }
@utility text-glow { text-shadow: 0 0 18px rgb(242 226 5 / 0.55), 0 2px 10px rgb(0 0 0 / 0.8); }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
```

### 2.3 CSS puro (sem Tailwind)

```css
.clip-cut { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.urban-grid {
  position: fixed; inset: 0; opacity: .07; pointer-events: none;
  background-image: linear-gradient(#ece8e1 1px, transparent 1px), linear-gradient(90deg, #ece8e1 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: radial-gradient(ellipse at center, transparent 30%, #000 85%);
}
.grain {
  position: fixed; inset: -50%; opacity: .09; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .9s steps(4) infinite;
}
```

## 3. Tipografia

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Montserrat:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
```

Next.js: `next/font/google` com `Barlow_Condensed` (600/700/800, `--font-barlow`), `Montserrat` (400–800, `--font-montserrat`) e `JetBrains_Mono` (400/600, `--font-mono-face`).

| Papel | Fonte | Tamanho | Peso | Extras |
| --- | --- | --- | --- | --- |
| Display (hero) | Barlow Condensed | clamp(56px, 8vw, 128px) | 800 | caixa alta, line-height .95, tracking .01em |
| Título de página | Barlow Condensed | 44–48px | 800 | caixa alta |
| Título de seção/card | Barlow Condensed | 24–30px | 800 | caixa alta, tracking .02em |
| Corpo | Montserrat | 14–16px | 500 | line-height 1.7, cor `#C9C6BF` em texto longo |
| Rótulo/botão | Montserrat | 11–13px | 800 | caixa alta, tracking .12–.24em |
| Kicker | Montserrat | 11px | 800 | caixa alta, tracking .3em, amarelo |
| Mono | JetBrains Mono | 12–13px | 400/600 | IDs, licenses, passaportes, logs |
| Números | Barlow Condensed | 36–64px | 800 | `tabular-nums` |

Regras: títulos **sempre** em caixa alta Barlow Condensed; nunca use Barlow para parágrafos; nunca use itálico; números de dinheiro com `tabular-nums`.

## 4. Forma

- **Cantos retos em tudo** (`border-radius: 0`). Avatares também são quadrados.
- **Corte diagonal** (`clip-cut` 8% / `clip-cut-sm` 16%) em: CTA principal, número de passo, badge "Destaque", botão de play, desconto.
- **Moldura de canto**: dois cantos de 22px (superior direito + inferior esquerdo) em `--line-strong`, 1px. No hover crescem para 30px e ficam amarelos.
- **Barra lateral do drawer**: 6px à esquerda, amarelo 0–38%, vermelho 38–46%, transparente depois. Use em painéis, diálogos e menus laterais.
- **Divisor**: barra amarela 54×4px + 6px de gap + barra 22×4px + hachura diagonal `bg-slash` até o fim.
- **Bloco de informação**: `border-left: 4px solid amarelo` + fundo `rgb(236 232 225 / .04)`.
- **Bordas** de 1px em `--line` (`/.14`); `--line-strong` (`/.28`) para hover e separadores verticais.

## 5. Regras de componentes

### Botão
- **Principal (brand)**: fundo amarelo, texto grafite, `clip-cut`, 12px 800 caixa alta tracking .18em, altura 40/44px. Hover: fundo branco concreto. Foco: fundo branco + filete interno grafite (o clip-path corta outlines externos).
- **Secundário (cut)**: fundo branco concreto, texto grafite, `clip-cut`; hover amarelo.
- **Default**: amarelo reto (formulários, toolbars).
- **Outline**: borda `--line-strong`, texto branco; hover borda e texto amarelos.
- **Ghost**: sem borda; hover fundo `--muted`.
- **Destrutivo**: texto laranja-vermelho com fundo translúcido; em confirmação final, sólido `#FF4A2B` com texto grafite.
- Ícones lucide de 14px à esquerda (`data-icon="inline-start"`).

### Card
- Fundo `#131417`, borda 1px `--line`, sem sombra, cantos retos, padding 20–32px.
- Opcional: `bg-hatch` (hachura 135°), barra lateral do drawer, moldura de canto.
- Hover: borda `--line-strong` ou amarela, leve `translateY(-4px)` em cards clicáveis, imagem com `scale(1.05)`.

### Input / Select / Textarea
- Fundo transparente, borda `--input`, cantos retos, altura 40px, texto 14px.
- Foco: borda amarela + ring amarelo 2px a 30–60%.
- Erro: borda e mensagem em `#FF4A2B`.
- Label 12px 700 ou kicker.

### Badge / status
- Texto 10px 800 caixa alta tracking .16em, padding 2×8px, borda 1px do tom, fundo do tom a 12–14%, ponto quadrado de 6px.
- Tons: **brand** amarelo · **danger** `#FF4A2B` · **success** `#8FBF7A` · **warning** `#FF9A3C` · **info** branco concreto · **muted** cinza.

### Tabela
- **Referência** (código penal, tabela de preços): cabeçalho **amarelo** com texto grafite 10px 800 tracking .2em, sticky; linhas com borda inferior `--line`; hover `rgb(236 232 225 / .04)`; primeira coluna 800; números `tabular-nums`; "Inafiançável" em `#FF4A2B` 700.
- **Dados** (painéis): cabeçalho grafite com filete amarelo de 2px embaixo, texto 10px 800 branco; linha clicável ganha barra amarela interna de 3px à esquerda no hover; paginação "Anterior / 1 2 3 / Próxima" com página atual amarela.

### Sidebar (painéis)
- Fundo `#0F1012`, borda direita `--line`, hachura sutil.
- Topo: V + "Valle Roleplay" (Barlow) + nome do app em kicker amarelo, com barra amarela/vermelha à esquerda.
- Item: 14px 600 branco a 75%; ativo: fundo amarelo a 10%, texto amarelo, barra interna de 3px amarela à esquerda.
- Rodapé: avatar quadrado + nome + cargo (cor do cargo) com menu "Sair".

### Header público
- Transparente sobre o hero; ao rolar vira `rgb(11 12 14 / .85)` com blur e borda inferior.
- Esquerda: wordmark (V + VALLE / ROLEPLAY). Centro: links 11px 800 tracking .22em; sublinhado amarelo de 2px que cresce no hover.
- Direita: "Discord" (outline) + "Entrar" (brand).

### Kbd
- Fundo branco concreto, texto grafite 800, padding 5×9px, min-width 50px, **sombra sólida amarela 3px 3px**.

### Tabs / chips
- **Navegação (tabs)**: botões 12px 800 tracking .18em com borda `--line`; ativo **amarelo sólido** com texto grafite.
- **Filtros (chips)**: 11px 700 tracking .12em, borda `--line`, texto cinza; ativo **borda laranja-vermelha + fundo `rgb(255 74 43 / .14)` + texto branco**.

### Accordion (regras)
- Linha: código em caixa branca (texto grafite 11px 800, min-width 48px) + título 14px 700 + seta amarela `›` que gira 90°.
- Aberto: o código vira **amarelo**; corpo 13px line-height 1.65 em `#C9C6BF`, recuado 64px.

### Diálogo / drawer
- Fundo `rgb(11 12 14 / .94)` com hachura, borda `--line`, sombra `-30px 0 80px rgb(0 0 0 / .6)` (drawer), barra lateral amarela/vermelha.
- Título Barlow 34–44px caixa alta precedido de kicker amarelo. Botão fechar 42×42 com borda que vira amarelo sólido no hover.
- Backdrop `rgb(5 5 6 / .55)`.

## 6. Padrões

- **Hero cinematográfico**: vídeo do logo em `object-fit: cover`, `filter: blur(4px) saturate(1.15) brightness(.6)`, `transform: scale(1.75)` com origem `100% 42%` → `bg-brand-shade` → grid urbano 7% com máscara radial → grão 9% → fagulhas. Centro: logo (260–470px) com `drop-shadow(0 18px 40px rgb(0 0 0 / .6))`, etapas em caixa alta tracking .32em (atual em amarelo com brilho), status ao vivo e CTAs.
- **Rodapé do hero (barra do loading)**: 76px, fundo `rgb(11 12 14 / .86)` com blur, borda superior; V à esquerda; rótulo "Últimas novidades:" com separador vertical; **ticker**; "Players 128/256" com número amarelo; bloco do V inclinado (`skewX(-20deg)`) no canto.
- **Ticker**: 11px 600 tracking .2em caixa alta, itens separados por `·` amarelo com 34px de gap, loop de 40s, máscara de fade nas pontas.
- **Molduras**: botões de menu, cards de destaque e o CTA "Conheça a cidade" usam moldura de canto.
- **Bento**: grid de 6 colunas — card principal 3×2 com V gigante a 12% e barra do drawer, cards menores com ícone em quadrado que vira amarelo no hover.
- **Passos 01–04**: card com borda, número em paralelogramo amarelo (30×30, Barlow 18px) posicionado a 14px, título 13px 800 caixa alta e texto 12px cinza.
- **Números**: grade com bordas compartilhadas, valor Barlow 48–64px, kicker cinza e filete amarelo no topo que cresce no hover.
- **Dashboard**: sidebar + header sticky de 56px + `PageHeader` (breadcrumb, kicker, título display, ações, divisor) + linha de `StatCard` (barra lateral do tom, valor Barlow 36px) + tabela de dados.
- **Auth**: tela cheia com fundo da marca, logo, card com moldura de canto ativa e barra do drawer, título "Entre na cidade", botão Discord amarelo com corte.

## 7. Motion

| Nome | Uso | Especificação |
| --- | --- | --- |
| rise | entrada de blocos e do logo | 1.1s ease-out, de `translateY(14px)` + opacidade 0; cascata de 80–150ms |
| fade | troca de aba/conteúdo | .3s ease-out, de `translateY(8px)` |
| ticker | faixa de novidades | 40s linear infinito, `translateX(-50%)` em lista duplicada; pausa no hover |
| grain | textura | .9s steps(4) infinito |
| hover | botões, links, molduras | .2s; tudo **acende amarelo**; molduras crescem de 22 para 30px |
| drawer | menus laterais | .38s `cubic-bezier(.2,.8,.2,1)` de `translateX(104%)` |
| pulse | status ao vivo | ponto com `animate-ping` |
| fagulhas | atmosfera | 45 partículas 0.4–2.2px `rgba(255,150,70,.12–.52)` subindo .08–.43px/frame com leve oscilação |

Respeite `prefers-reduced-motion` (desligue ticker, grão e fagulhas). Nada de bounce exagerado, parallax pesado ou rotação 3D.

## 8. Uso do logo

- Versões: **completo** (PNG transparente 1362×1155, proporção preservada), **wordmark** (V + "VALLE" Barlow 800 + "ROLEPLAY" 9px tracking .42em amarelo) e **V** (símbolo).
- O V em SVG: `viewBox="0 0 200 220"` — perna amarela `10,10 70,10 92,80 54,128`, perna concreto `54,128 92,80 100,105 130,10 190,10 115,210 85,210`, corte grafite `94,156 → 172,70` com traço 7.
- **Área de proteção**: no mínimo a largura da perna amarela do V (≈ 30% da altura do V) em todos os lados.
- **Tamanhos mínimos**: completo 160px de largura (digital) · wordmark 120px · V 16px.
- Sobre fundo claro use a versão para fundo claro; sobre fotos/vídeo use a sombra suave `drop-shadow(0 18px 40px rgb(0 0 0 / .6))` e escureça o fundo.
- **Correto**: proporção preservada, cores oficiais, área de proteção respeitada, contraste com grafismos moderados.
- **Incorreto**: distorcer/esticar, trocar as cores, excesso de glow/3D/sombras, modificar o V, aplicar sobre fundo poluído com baixa legibilidade.

## 9. Do / Don't

**Faça**
- Fundo grafite em tudo, amarelo só onde há ação ou destaque (≤ 10% da tela).
- Títulos em Barlow Condensed caixa alta; texto em Montserrat.
- Cantos retos; cortes diagonais só em elementos de ação/número.
- Kicker amarelo acima de títulos de seção.
- Grid urbano, grão e sombras quentes como **camadas de fundo** discretas.
- Estados vazios e de erro com texto humano em PT-BR.

**Não faça**
- `border-radius`, pílulas arredondadas, glassmorphism colorido, gradientes roxos/azuis.
- Amarelo como cor de texto longo sobre fundo claro, ou texto amarelo sobre branco (contraste 1.1:1).
- Mais de um CTA amarelo cortado por bloco.
- Fontes extras, itálico, sombras difusas coloridas, neon.
- Modo claro, "dark mode toggle", emojis na interface.
- Texto em inglês ("Submit", "Loading…", "Previous").

## 10. Acessibilidade

| Combinação | Contraste | Uso |
| --- | --- | --- |
| Amarelo `#F2E205` sobre grafite `#0B0C0E` | 14,6:1 | AAA — CTA, kicker, destaque |
| Grafite sobre amarelo | 14,6:1 | AAA — texto de botão |
| Branco concreto sobre grafite | 16,0:1 | AAA — texto principal |
| `#C9C6BF` sobre grafite | 11,5:1 | AAA — texto longo |
| Cinza `#9C9A95` sobre grafite | 7,0:1 | AAA — texto secundário |
| Laranja-vermelho sobre grafite | 5,8:1 | AA — alertas, "Inafiançável" |
| Grafite sobre laranja-vermelho | 5,8:1 | AA — botão destrutivo sólido |
| Amarelo sobre branco | 1,1:1 | **proibido** |

- Foco sempre visível em amarelo (ring 2px ou fundo branco nos botões cortados).
- Alvos de toque ≥ 40px. Ícones decorativos com `aria-hidden`; ícones-botão com `aria-label` em PT-BR.
- Não comunique status só por cor: badges sempre têm texto.
- `prefers-reduced-motion` respeitado em todas as animações.

## 11. Voz e tom

- Fala com o **cidadão** da cidade, na segunda pessoa ("você"), direta e calorosa, com vocabulário de RP: cidade, vale, cidadão, personagem, whitelist, staff, ticket.
- Frases curtas. Verbos de ação nos botões: "Jogar agora", "Entrar no Discord", "Enviar whitelist", "Abrir ticket".
- Títulos com atitude: "Rua sem saída" (404), "Entre na cidade" (login), "A cidade não para" (números).
- Erros sem culpa e com saída: "Não conseguimos falar com a cidade agora. Tente novamente em instantes."
- Datas no formato brasileiro (`15/10/2026 às 19:40`), dinheiro real em `R$ 19,90`, dinheiro do jogo em `$ 48.250`.

## 12. Guardrails

- Não achate a identidade num grid genérico de SaaS: mantenha hero cinematográfico, molduras, cortes e barras.
- Não troque a paleta nem o modo de cor.
- Preserve a densidade do loading: rótulos pequenos espaçados + títulos grandes condensados.
- Botões, cards, inputs e badges compartilham a mesma linguagem: reto, borda 1px, acende amarelo.
- Efeitos (vídeo, grão, fagulhas) são sempre secundários ao conteúdo e performáticos.

## 13. Prompt de exemplo

```text
Aplique o design Valle Roleplay neste componente seguindo o DESIGN.md acima:
- tema escuro único: fundo #0B0C0E, cards #131417 com borda 1px rgb(236 232 225 / .14), cantos retos (radius 0);
- títulos em Barlow Condensed 800 caixa alta, texto em Montserrat, kicker 11px 800 tracking .3em amarelo acima do título;
- ação principal amarela #F2E205 com texto grafite e corte diagonal (clip-path: polygon(8% 0,100% 0,92% 100%,0 100%)), hover branco concreto #ECE8E1;
- perigo/filtro ativo em #FF4A2B; foco amarelo visível;
- detalhes: divisor (barra amarela 54px + 22px + hachura diagonal), moldura de canto que acende amarela no hover, barra lateral amarela/vermelha em painéis;
- motion contido: rise de 14px em 1.1s na entrada, hover .2s;
- todo texto em português do Brasil.
Mantenha a API/props do componente e só mude estilos e textos.
```