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,85
17,10
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,22
7,40
Texto apagado no cartãoDescrição do cartão, cabeçalho da tabela. Mínimo 4,50.
4,92
6,97
Texto apagado no secundárioBotão fantasma com hover, etiqueta. Mínimo 4,50.
4,50
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,27
4,57
Texto sobre a marcaBotão com a cor da marca. Mínimo 4,50.
4,54
4,54
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,11
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,29
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,15
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 quente, marca #1f8a5b, raio 14px. 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.875rem;
  --background: oklch(0.995 0.0036 70);
  --foreground: oklch(0.2 0.0098 70);
  --card: oklch(0.975 0.007 70);
  --card-foreground: oklch(0.2 0.0098 70);
  --muted: oklch(0.945 0.0098 70);
  --muted-foreground: oklch(0.53 0.0168 70);
  --border: oklch(0.9 0.0126 70);
  --ring: oklch(0.563 0.1191 158.94);
  --marca: oklch(0.563 0.1191 158.94);
  --marca-foreground: oklch(0.15 0.0021 286.14);
  --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 70);
  --foreground: oklch(0.95 0.0049 70);
  --card: oklch(0.185 0.0098 70);
  --card-foreground: oklch(0.95 0.0049 70);
  --muted: oklch(0.235 0.0112 70);
  --muted-foreground: oklch(0.7 0.0126 70);
  --border: oklch(0.29 0.0126 70);
  --ring: oklch(0.563 0.1191 158.94);
  --marca: oklch(0.563 0.1191 158.94);
  --marca-foreground: oklch(0.15 0.0021 286.14);
  --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.