Ravox UIby Ravox Labs

Ravox Kit / Começar

Tema

Escolha a marca, o neutro e os cantos. O gerador monta o claro e o escuro de uma vez, mede o contraste de cada par e entrega as variáveis prontas para o globals.css.

Ponto de partida
Marca
#

Vira bg-marca, o texto por cima e o anel de foco.

Neutro
Cantos
Cores da casa

Avisos, etiquetas e estados usam as quatro. O rosa é também o destrutivo.

Contraste

Pedidos

Loja aberta
PedidoClienteSituaçãoTotal
#4127Marina AlbuquerquePagoR$ 186,40
#4126Otávio NeryAguardando PixR$ 74,90
#4125Lia CordeiroEnviadoR$ 312,00
#4124Caio MenezesEstornadoR$ 59,00

Cupom

Vale para o site e para o link de pagamento.

Estoque baixo

Café Serra do Caparaó 250 g tem 3 pacotes.

Pix recusado

O banco do cliente não respondeu no pedido #4126.
EnviadoPendente

Os 34 pares de cor passam nos dois modos. Algumas cores foram ajustadas para isso:

  • No claro, o amarelo foi de#d99400para#c68700
  • No claro, o lima foi de#6fa300para#6ea200
  • No claro, o azul foi de#2463ebpara#3070f9
  • No escuro, o rosa foi de#f0287apara#e41371

Contraste medido

Razão WCAG 2 no valor exato que vai para o CSS. Texto pede 4,5:1; ícones, pontos e o anel de foco pedem 3:1; borda pede 1,25:1, o bastante para a linha aparecer sem pesar.

Contraste de cada par de cores, no claro e no escuro
ParClaroEscuro
Texto no fundoCorpo de texto, botão principal. Mínimo 4,50.
17,84
17,11
Texto no cartãoCartão, menus, diálogos. Mínimo 4,50.
16,84
16,11
Texto apagado no fundoDicas, descrições, placeholder. Mínimo 4,50.
5,26
7,41
Texto apagado no cartãoDescrição do cartão, cabeçalho da tabela. Mínimo 4,50.
4,96
6,98
Texto apagado no secundárioBotão fantasma com hover, etiqueta. Mínimo 4,50.
4,54
6,24
Borda no fundoContorno de campo, tabela, separador. Mínimo 1,25.
1,33
1,40
Borda no cartãoDivisórias dentro do cartão. Mínimo 1,25.
1,25
1,32
Marca no fundoAnel de foco e realces. Mínimo 3,00.
4,88
4,00
Texto sobre a marcaBotão com a cor da marca. Mínimo 4,50.
4,95
4,95
Rosa no fundoPontos, ícones de aviso, texto de estado. Mínimo 3,00.
4,96
4,36
Texto sobre rosaBotão destrutivo (texto branco). Mínimo 4,50.
5,03
4,54
Amarelo no fundoPontos, ícones de aviso, texto de estado. Mínimo 3,00.
3,02
11,10
Texto sobre amareloEtiqueta cheia (texto #0b0b0c). Mínimo 4,50.
6,42
11,03
Lima no fundoPontos, ícones de aviso, texto de estado. Mínimo 3,00.
3,02
15,28
Texto sobre limaEtiqueta cheia (texto #0b0b0c). Mínimo 4,50.
6,41
15,19
Azul no fundoPontos, ícones de aviso, texto de estado. Mínimo 3,00.
4,30
5,14
Texto sobre azulEtiqueta cheia (texto #0b0b0c). Mínimo 4,50.
4,51
5,11

Levar para o projeto

Tailwind v4. Claro em :root, escuro em .dark, tudo em OKLCH.

  1. 1Projeto sem o Kit ainda? Instale o tema base primeiro (ele prepara o globals.css).

    npx shadcn@latest add https://ui.ravoxlabs.com/r/vault-tema.json

  2. 2Cole o bloco no fim do globals.css, depois do @import "tailwindcss" e de outro tema que já esteja lá: o último vence.

    globals.css
    /* Tema do Ravox Kit
   Neutro frio, marca #0e7c86, raio 10px. Claro em :root, escuro em .dark. */

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-ring: var(--ring);
  --color-marca: var(--marca);
  --color-marca-foreground: var(--marca-foreground);
  --color-vault-rosa: var(--vault-rosa);
  --color-vault-amarelo: var(--vault-amarelo);
  --color-vault-lima: var(--vault-lima);
  --color-vault-azul: var(--vault-azul);
  --radius-sm: calc(var(--radius) * 0.3333);
  --radius-md: calc(var(--radius) * 0.5);
  --radius-lg: calc(var(--radius) * 0.6667);
  --radius-xl: var(--radius);
  --radius-2xl: calc(var(--radius) * 1.3333);
  --radius-3xl: calc(var(--radius) * 2);
}

:root {
  --radius: 0.625rem;
  --background: oklch(0.995 0.0024 256);
  --foreground: oklch(0.2 0.0098 256);
  --card: oklch(0.975 0.007 256);
  --card-foreground: oklch(0.2 0.0098 256);
  --muted: oklch(0.945 0.0098 256);
  --muted-foreground: oklch(0.5275 0.0168 256);
  --border: oklch(0.9 0.0126 256);
  --ring: oklch(0.5362 0.0888 205.03);
  --marca: oklch(0.5362 0.0888 205.03);
  --marca-foreground: oklch(1 0 0);
  --vault-rosa: oklch(0.5701 0.2217 7.67);
  --vault-amarelo: oklch(0.6696 0.1408 75.69);
  --vault-lima: oklch(0.6512 0.1722 128.8);
  --vault-azul: oklch(0.5859 0.2154 262.75);
}

.dark {
  --background: oklch(0.145 0.0084 256);
  --foreground: oklch(0.95 0.0049 256);
  --card: oklch(0.185 0.0098 256);
  --card-foreground: oklch(0.95 0.0049 256);
  --muted: oklch(0.235 0.0112 256);
  --muted-foreground: oklch(0.7 0.0126 256);
  --border: oklch(0.29 0.0126 256);
  --ring: oklch(0.5362 0.0888 205.03);
  --marca: oklch(0.5362 0.0888 205.03);
  --marca-foreground: oklch(1 0 0);
  --vault-rosa: oklch(0.5967 0.2337 3.45);
  --vault-amarelo: oklch(0.8197 0.1706 78.47);
  --vault-lima: oklch(0.9005 0.1913 123.3);
  --vault-azul: oklch(0.6149 0.2079 262.36);
}

  3. 3O escuro liga com a classe dark no <html> (o next-themes com attribute="class" faz isso). A marca fica em bg-marca text-marca-foreground.