Valle Roleplay · Design system 1.0
Tudo o que faz o Valle parecer o Valle: marca, cores, tipografia, formas, texturas, movimento e todos os componentes prontos. Nasceu da tela de loading — e vale para todos os sites da cidade.
O DESIGN.md é autocontido: cole em qualquer IA para aplicar o design instantaneamente.
01 · Marca e logo
Três versões: logo completo, wordmark e o V. Sempre nas cores oficiais, com proporção preservada e área de proteção.
Completo · fundo escuro
Fundo claro
Wordmark
V
Área de proteção
x = largura da perna amarela do V (≈ 30% da altura do V). Nada de texto, borda ou outro grafismo dentro dessa área.
Tamanhos mínimos
Completo · 160pxAbaixo disso, use a versão seguinte (completo → wordmark → V).
Uso correto
Proporção preservada
Cores oficiais
Área de proteção
Contraste com grafismos moderados
Uso incorreto
Distorcido
Cores alteradas
Excesso de glow, 3D e sombras
V modificado / baixa legibilidade
Guia oficial de uso (referência)
02 · Paleta
O amarelo é tinta de sinalização: use só onde há ação ou destaque (até ~10% da tela). O resto é grafite e concreto.
Primary · ação principal, foco, destaque, kicker
Foreground · texto, perna do V, CTA secundário
Destructive · perigo, progresso, filtro ativo
Background · a noite da cidade
Card · superfícies e painéis
Secondary · botões secundários, hover
Muted · texto secundário, legendas
Corpo de leitura sobre grafite
Linhas e bordas
Tons de status
success #8FBF7A e warning #FF9A3C são auxiliares — só em badges e gráficos, nunca como cor de marca.
03 · Tipografia
Barlow Condensed 800 em caixa alta para títulos e números. Montserrat para tudo que se lê. Mono para dados técnicos.
Valle Roleplay
Menu da cidade
Regras da cidade
Estrada do Vale
Enquanto a cidade carrega, conheça as regras e o código penal. Todo cidadão é responsável por conhecê-los.
Entrando na cidade
Dica da cidade
license:3f9a1c… · passaporte 1024
128/256
Google Fonts
04 · Forma
Nenhum canto arredondado. O movimento da forma vem dos cortes diagonais, das molduras de canto e das barras grossas.
Cantos retos · radius 0
O terceiro (arredondado) não existe no Valle.
Corte diagonal · clip-cut / clip-cut-sm
Moldura de canto
22px → 30px e amarelo no hover.
Divisor com hachura
Barra lateral do drawer
Valle Roleplay
Menu da cidade
Bloco de informação
Dica da cidade
Aperte F9 para abrir o menu principal do personagem.
05 · Texturas
Camadas sempre atrás do conteúdo, discretas e performáticas. Grid urbano a 7%, grão a 9%, hachura quase invisível.
06 · Iconografia
Ícones lineares do lucide-react em branco concreto; amarelo só quando o ícone é o destaque ou o estado ativo. Marcas (Discord) em SVG próprio.
Tamanhos
Vocabulário
07 · Motion
Entradas que sobem 14px, trocas com fade, ticker contínuo e hovers que acendem amarelo. Tudo respeita prefers-reduced-motion.
Clique para repetir as entradas
Rise
1.1s ease-out · translateY(14px)
Fade
.3s ease-out · troca de aba
Hover
.2s · acende amarelo
Pulse
status ao vivo · ping
08 · Componentes
Todos os componentes shadcn de @workspace/ui/components/* já estilizados, mais os componentes da marca em @workspace/ui/components/valle/*. Nunca recrie em HTML cru.
Componentes · 6
Botões, grupos e alternâncias. Todo CTA principal usa a variante brand com corte diagonal.
@workspace/ui/components/badge@workspace/ui/components/toggle@workspace/ui/components/toggle-groupEmprego selecionado: policia
@workspace/ui/components/kbdAbra o celular com K, o inventário com Tab e a busca do painel com Ctrl+K.
Componentes · 14
Campos com linha inferior, rótulos em caixa alta e foco amarelo. Combine sempre com Field.
@workspace/ui/components/input@workspace/ui/components/textarea@workspace/ui/components/label@workspace/ui/components/checkbox@workspace/ui/components/radio-group@workspace/ui/components/switch@workspace/ui/components/slider@workspace/ui/components/select@workspace/ui/components/native-select@workspace/ui/components/comboboxBase UI: lista filtrável com digitação.
@workspace/ui/components/input-otpCódigo de vínculo enviado pelo bot no Discord:
valor: —
@workspace/ui/components/input-group@workspace/ui/components/fieldComposição de formulário: FieldSet, FieldGroup, Field, FieldLabel, FieldDescription e FieldError.
@workspace/ui/components/calendarAgenda de eventos
17 de outubro
Corrida noturna na serra, 21h. Inscrições na oficina do Mecânico Zé.
Componentes · 9
Camadas por cima do conteúdo: diálogos, gavetas, popovers e menus. Fundo grafite, borda de linha e cantos retos.
@workspace/ui/components/dialog@workspace/ui/components/alert-dialog@workspace/ui/components/sheet@workspace/ui/components/drawer@workspace/ui/components/popover@workspace/ui/components/hover-cardTicket atribuído a @admin.valle.
@workspace/ui/components/tooltipComponentes · 7
Avisos, toasts, carregamento e estados vazios. Erros usam o laranja-vermelho da marca.
@workspace/ui/components/alert@workspace/ui/components/sonnerO Toaster já está montado no ValleProviders. Dispare com toast() do pacote sonner.
@workspace/ui/components/progress@workspace/ui/components/spinner@workspace/ui/components/skeleton@workspace/ui/components/empty@workspace/ui/components/markerMarcadores de linha do tempo / separadores de data em listas e chats.
default
separator
border
Componentes · 7
Tabelas, gráficos e cartões. Gráficos usam as cores --chart-1 a --chart-5 da marca.
@workspace/ui/components/table| Passaporte | Personagem | Emprego | Whitelist | Ping |
|---|---|---|---|---|
| #1024 | Tony Valente | Polícia Militar | Aprovada | 38 ms |
| #1187 | Maria Rocha | Hospital | Aprovada | 52 ms |
| #1302 | Jefinho Borges | Mecânica | Em análise | 71 ms |
| #1455 | Duda Salgado | Desempregada | Reprovada | 104 ms |
| Total online | 128 | |||
@workspace/ui/components/chartChartContainer + recharts 3 com ChartTooltip e ChartLegend.
Jogadores por hora · hoje
Receita da loja por semana (R$)
@workspace/ui/components/card@workspace/ui/components/itemAtivo até 14/11/2026
Aprovada em 02/03/2025
Personagem principal · passaporte #1024
@workspace/ui/components/avatar@workspace/ui/components/accordion@workspace/ui/components/collapsibleComponentes · 5
Estrutura e divisão de espaço: separadores, proporções, painéis redimensionáveis e rolagem.
@workspace/ui/components/separatorValle Roleplay
Servidor de roleplay sério desde 2024.
@workspace/ui/components/aspect-ratio@workspace/ui/components/resizablereact-resizable-panels v4 — tamanhos em string são porcentagem.
Tickets
#482 Carro sumiu da garagem após restart
#479 Revisão de banimento — RDM
#471 VIP Ouro não entregou o salário extra
#482 · Carro sumiu da garagem
Arraste as alças para redimensionar os painéis.
@workspace/ui/components/scroll-area@workspace/ui/components/directionDirectionProvider define a direção de leitura para os primitivos radix (sliders, menus, abas).
useDirection(): rtl
Volume do rádio: 30%
Componentes · 3
Galerias, anexos e blocos de código. Imagens reais entram no lugar dos placeholders com grid urbano.
@workspace/ui/components/carouselPorto de Valle
Contrabando e empregos de estivador.
Praça central
Ponto de encontro e eventos da prefeitura.
Serra
Corridas noturnas e trilhas off-road.
Hospital
Nova recepção e UTI ampliada.
Delegacia
Celas, sala de interrogatório e garagem.
Local 1 de 5
@workspace/ui/components/attachmentAnexos de ticket com estados idle, uploading, processing, error e done.
@workspace/ui/components/code-block-- resources/valle-bridge/server.luaRegisterNetEvent("valle:whitelist:check", function(license) local src = source local ok = exports["valle-bridge"]:isWhitelisted(license) if not ok then DropPlayer(src, "Whitelist pendente: valle.gg/whitelist") endend)Config.MaxPlayers = 128Config.MaxPlayers = 256Config.Whitelist = true[valle-bridge] ERRO: não foi possível conectar à API em 127.0.0.1:3333 (ECONNREFUSED)Componentes · 5
Componentes de conversa usados no chat dos tickets, no questionário da whitelist e nos logs do bot.
@workspace/ui/components/message@workspace/ui/components/bubbleVariantes: default, secondary, muted, tinted, outline, ghost e destructive.
@workspace/ui/components/message-scrollerRolagem do chat com auto-scroll e botão para voltar ao fim.
@workspace/ui/components/questionnaireQuestionário passo a passo — o formato do formulário de whitelist.
@workspace/ui/components/tracePassos de uma rotina automática (bot / worker) com status running, pending e error.
SELECT * FROM accounts WHERE license = 'license:5f2a…'
SELECT * FROM characters WHERE account_id = 1024
Componentes · 29
Componentes próprios da marca em components/valle — construídos em cima do shadcn e compartilhados entre os apps.
@workspace/ui/components/valle/logofull
wordmark
Valle Roleplaymark
VMark
@workspace/ui/components/valle/brand-backgroundPor padrão é fixed atrás da página; aqui está com className='absolute' dentro de uma caixa relative isolate.
Atmosfera
Bem-vindo a Valle
sombra quente + grid urbano + grão + poeira
@workspace/ui/components/valle/kickerTemporada 3 · brand
Atualizado há 2 dias · muted
Manutenção às 06h · danger
@workspace/ui/components/valle/slash-dividerRegras da cidade
Barra amarela 54px + 22px + hachura diagonal até o fim.
@workspace/ui/components/valle/section-headingLoja oficial
Todo valor arrecadado mantém o servidor online e financia eventos semanais.
Como entrar
@workspace/ui/components/valle/page-headerTicket #482
Aberto por Tony Valente · categoria Suporte · prioridade Alta
@workspace/ui/components/valle/cut-badge@workspace/ui/components/valle/corner-framePasse o mouse: os cantos crescem e acendem em amarelo.
Hover
Passe o mouse aqui
Ativo
active=true
@workspace/ui/components/valle/status-badgeToneBadge — todos os tons
LabelBadge com ticketStatusLabels
@workspace/ui/components/valle/stat-cardJogadores online
128
Whitelists pendentes
9
Tickets abertos
23
Vendas no mês
R$ 18,4 mil
@workspace/ui/components/valle/data-tableTanStack Table + Table/Pagination/Skeleton do shadcn.
| # | Assunto | Status | Prioridade | Atualizado |
|---|---|---|---|---|
| #482 | Carro sumiu da garagem após restart | Aberto | Alta | 15/10/2026 |
| #479 | Revisão de banimento — RDM | Aguardando staff | Normal | 14/10/2026 |
| #471 | VIP Ouro não entregou o salário extra | Respondido | Normal | 13/10/2026 |
| #455 | Denúncia de metagaming no assalto ao banco | Fechado | Urgente | 10/10/2026 |
Página 1 de 12 · 1.204 registros
Vazio
| # | Assunto | Status | Prioridade | Atualizado |
|---|---|---|---|---|
Nada por aqui Nenhum registro encontrado com os filtros atuais. | ||||
@workspace/ui/components/valle/user-avatar@workspace/ui/components/valle/live-status-pill@workspace/ui/components/valle/filter-chipsSelecionado: todos
@workspace/ui/components/valle/search-inputvalor: —
@workspace/ui/components/valle/ticker@workspace/ui/components/valle/confirm-dialog@workspace/ui/components/valle/stateCarregando jogadores
Cidade fora do ar
Não conseguimos falar com o servidor FiveM agora.
@workspace/ui/components/valle/product-cardPrioridade na fila, salário extra e acesso à garagem exclusiva do Valle por 30 dias.
Moeda premium para trocar por roupas, placas personalizadas e itens cosméticos.
@workspace/ui/components/valle/news-cardO porto de Valle abriu as portas com contrabando, empregos legais de estivador e um rebalanceamento completo dos salários da cidade.
Ler maisInscrições abertas na oficina do Mecânico Zé. Premiação de $ 250.000 e um carro exclusivo para o primeiro lugar.
Ler mais@workspace/ui/components/valle/rules-accordion@workspace/ui/components/valle/penal-code-table| Art. | Crime | Pena | Multa | Fiança |
|---|---|---|---|---|
| Art. 121 | Homicídio dolosoCrimes contra a vida | 60 meses | $ 150.000 | Inafiançável |
| Art. 129 | Lesão corporalCrimes contra a vida | 15 meses | $ 25.000 | $ 40.000 |
| Art. 306 | Dirigir sob efeito de álcoolTrânsito | 5 meses | $ 12.000 | $ 15.000 |
| Art. 311 | Fuga em alta velocidadeTrânsito | 10 meses | $ 30.000 | $ 35.000 |
@workspace/ui/components/valle/markdownA análise leva até 48 horas. Você recebe o resultado por DM no Discord.
| Etapa | Prazo |
|---|---|
| Questionário | imediato |
| Análise da staff | até 48h |
Use /ticket no Discord se tiver dúvidas.
@workspace/ui/components/valle/site-header@workspace/ui/components/valle/login-screenTela cheia (min-h-svh). Aqui reduzida a 60% dentro de uma caixa com transform.
Painel do cidadão
Use a sua conta do Discord para acessar. Sem senha, sem cadastro extra.
Ao entrar você concorda com as regras da cidade e com a política de privacidade.
@workspace/ui/components/valle/app-shellCasca de tela cheia dos painéis (customer/staff) — Sidebar, header com trigger e menu do usuário com Sair. Não renderizada aqui; veja a demo da Sidebar acima.
<AppShell
app={{ name: "Painel da staff", href: "/" }}
nav={[{ label: "Gestão", items: [
{ title: "Jogadores", href: "/jogadores", icon: UsersIcon },
{ title: "Tickets", href: "/tickets", icon: LifeBuoyIcon, badge: 23 },
] }]}
user={{ username: "admin.valle", roleName: "Moderador" }}
>
{children}
</AppShell>@workspace/ui/components/valle/providersTema escuro fixo (next-themes), react-query, TooltipProvider e o Toaster. Já envolve esta página no layout do app.
// app/layout.tsx
<body>
<ValleProviders>{children}</ValleProviders>
</body>09 · Padrões de layout
Estruturas recorrentes nos sites do Valle. Use como ponto de partida — a densidade e o ritmo importam tanto quanto as cores.
Hero cinematográfico
Vídeo desfocado + sombras + grid + grão. Logo central, etapas, status ao vivo, 2 CTAs, ticker na base.
Bento
Grid de 6 colunas: card principal 3×2 com V gigante e barra do drawer; cards menores com ícone.
Dashboard
Sidebar com item ativo amarelo, header sticky, PageHeader com divisor, StatCards e tabela de dados.
Tabela de referência
Chips de categoria + busca + tabela com cabeçalho amarelo; inafiançável em vermelho.
Formulário
Kicker + título, campos com borda reta e foco amarelo, ação principal com corte à direita.
Auth
Tela cheia com fundo da marca, logo, card com moldura ativa e barra do drawer, botão Discord.
10 · Voz e tom
Português do Brasil, segunda pessoa, frases curtas e vocabulário de RP. Botões com verbos de ação. Erros sem culpa e sempre com saída.
Princípios
Submit
Enviar whitelist
Login
Entrar com Discord
Loading...
Conectando ao vale…
Error 500: Internal Server Error
Não conseguimos falar com a cidade agora. Tente novamente em instantes.
No data
Nada por aqui ainda.
Você foi banido por violar os termos.
Seu acesso está suspenso. Veja o motivo e, se quiser, peça revisão por ticket.
11 · Acessibilidade
A paleta nasceu para ser lida de longe. Mantenha o foco amarelo visível, alvos de 40px, texto em todo status e respeite o movimento reduzido.
Checklist
Leve o design com você
DESIGN.md pronto para qualquer IA
Tokens, CSS, regras de componentes, padrões, motion, do/don't e um prompt de exemplo.