/dev/ui
Galeria viva da linguagem visual: dark, refinada, alto nos momentos e calma no trabalho. Componentes e estados num lugar só.
Ver variações de navegação →Relógio do torneio
O momento alto da marca: um relógio só pro torneio, número gigante em Big Shoulders, vermelho como joia. Estourou o tempo, fica negativo e vermelho.
Cor · papéis semânticos
Os componentes usam estes papéis, nunca a cor crua.
Cor · paleta crua (marca)
Reservada para os momentos de marca e a TV.
Tipografia
Big Shoulders só em display/números. Geist no corpo, dados e formulários.
Display · Big Shoulders
Eyebrow de seção
Título de seção (Geist)
Corpo de texto em Geist, legível e neutro. É o cavalo de batalha do produto: listas, formulários, descrições. A marca fica quieta aqui pra leitura fluir.
Texto secundário em muted-foreground, para apoio e legendas.
Mono · 12.400 fichas · 000.000.000-00
Botões
Variantes e tamanhos. Primário é a joia vermelha.
Badges / status
O vermelho aparece pequeno, como acento.
Cards
Profundidade por luz e sombra suave, não por borda forte.
Card com gradiente animado
A luz vermelha sobe de baixo, animada (o glow do Open Bar da LP). Para o momento premium.
Campos
Label, dica e erro. Foco com anel vermelho discreto.
é o CPF que você usou na compra do ingresso
E-mail não confere com o ingresso.
Avatares
Iniciais por padrão, com destaque opcional.
Ficha do jogador
O componente recorrente do pôquer (mesa e cockpit): pagamento, fogo e pedido de troca.
Estados
Carregando e vazio, sempre previstos.
Nenhum evento ainda
Assim que o organizador te incluir, aparece aqui.
Métricas (StatBand)
Os números sobem ao montar (count-up) e entram em sequência. Usado no cockpit e na TV.
Fichas · meu dinheiro
Toca a ficha pra somar: ela afunda e o total conta sozinho. É interativo, clica nas fichas.
Reações (do nosso jeito)
Sem emoji. Toca uma reação: o selo bate no avatar com flicker e o anel pulsa na cor dela. ALL IN, BLUFF, RESPEITO, BAD BEAT, BORA, FICHA (gira e cai) e FOGO.
Mesa de pôquer (retangular · 10 lugares)
Mesa retangular com rail, feltro e linha de aposta, lugares distribuídos nos lados. Os jogadores entram escalonados; quem está pegando tem aura. Toca num jogador pra reagir.
toca num jogador pra reagir
Hot streak (progressão)
Cada eliminação esquenta o visual: aura cada vez mais forte (mas suave), anel na cor do tier e, nos tiers altos, chama. Proposta inicial de 4 níveis, pra afinar.
Card de mesa (cockpit)
A mesa no painel do admin: fichas dos jogadores, contagem, alocar. A mesa final tem acento vermelho.
Countdown
Conta regressiva pro evento. Cada dígito reanima quando muda (repara nos segundos).
Pódio
Fim do torneio: os degraus sobem em sequência, o campeão ganha coroa e brilho. Pra TV e resultados.
Botão de ícone e spinner
Ações compactas e carregamento.
Dialog e confirmação
Modal acessível (Base UI) com entrada animada. O destrutivo confirma ações como eliminar.
Sheet (folha)
Sobe de baixo no mobile. É a folha de pagamento do buy-in/rebuy por PIX.
Tabs
Abas, ex.: dashboard ingressos / inscrições.
Funil e receita dos ingressos.
Select e dropdown
Escolher (mover para mesa) e menu de ações.
Switch
Liga/desliga (auto-avançar blinds, venda aberta).
Tooltip
Dica em hover, pras ações do cockpit.
Toast
Feedback de ações. Clica pra disparar.
Momentos da TV
O show no telão. Clica pra ver o selo de eliminação e a chuva de fichas (a reação flutuante virou o burst no avatar).
QR Code
Ingresso e entrada. Modo escuro sobre creme pra escanear bem.
mesapigroup.com/ingresso/abc123
Padrões de layout
Shell do admin (sidebar agrupada + topbar com relógio ao vivo + bottom nav no mobile) e o scaffold do /me, com a tela real dentro.
Operação ao vivo
BB 800
Mesa 2
Pague o buy-in das fichas pra sentar.