Design system · set/2026

Um mundo, não um tema.

Este é o sistema de design público do ViceCut: a marca, os tokens, a tipografia, o kit de componentes e os arquivos para download. A LP e o app são o mesmo lugar: fundo quase preto azulado, lavanda como único accent, hierarquia por tamanho e peso. Tudo aqui é renderizado com os mesmos tokens do produto.

01 · Marca

Play cortado com coqueiro

O play é a silhueta principal, recortado em três tiras horizontais deslocadas: os cortes, as N×M variações. O coqueiro (tronco curvo, copa serrilhada) é recorte em negativo dentro do play. Preenchimento em degradê do pôr do sol (violeta #8a6bb8 → pêssego #e9a0a8 → laranja #f7a25e) sobre quadrado #0c0d1b com raio 12/64.

Versões

Positiva · cor (logo.svg)
Mono · branco (logo-mono.svg)
Mono sobre accent
Negativa · sobre claro (mono em hero)

Wordmark e escala

“ViceCut” em Geist 600, sentence case (V e C maiúsculos), sem letter-spacing. Nunca em caixa alta, nunca em Oswald.

ViceCut

Lockup horizontal · símbolo + “ViceCut” em Geist 600, sentence case, sem tracking

64
32
24
16

Três variantes trocadas pelo tamanho: grande (> 32 px, copa serrilhada), média (≤ 32 px, copa lisa) e pequena (≤ 24 px, só play + cortes).

Área de proteção

Área de respiro = metade do lado do símbolo, em todas as direções. Nada entra nessa faixa: texto, borda de card, outro logo.

Tamanho mínimo 16 px. Abaixo de 24 px use a variante pequena (o componente troca sozinho; em arquivo, use logo-pequeno.svg).

Usos errados

Esticar ou distorcer
Recolorir o degradê
VICECUT
Wordmark em caixa alta ou com tracking
Coqueiro forçado abaixo de 24 px
Rotacionar
Sombra, contorno ou glow no símbolo

No código

components/ui/Logo.tsx
import { Logo, Simbolo } from "@/components/ui/Logo";

<Logo tamanho={26} />            // símbolo + wordmark
<Logo tamanho={24} mono />       // branco, currentColor
<Simbolo tamanho={16} />         // só o símbolo (troca a variante pelo tamanho)
02 · Cores

Camadas de branco sobre dois pretos azulados

Um accent funcional (lavanda) e o ouro só para preço e selo. Camadas de branco: .92 texto · .55 secundário · .35 decoração · .22 borda forte · .14 borda hover · .08 borda · .04 superfície. Proibido: verde, âmbar, vermelho e o rosa antigo. Erro e perigo usam accent.

Tokens

  • fundo
    #111117fundo da página e das seções neutras
  • hero
    #0c0d1bhero da LP, seções alternadas, texto sobre accent/ouro
  • glow
    #1f1f38glows radiais do fundo, nunca texto
  • superficie
    #16161fmodal, popover, toast (opacos)
  • superficie2
    #1c1c28option do select, hover de painel opaco
  • vidro
    rgba(255,255,255,.04)base do .glass (nav, sidebar, topbar)
  • borda
    rgba(255,255,255,.08)borda padrão, divisores, grades gap-px
  • bordaHover
    rgba(255,255,255,.14)hover de bloco, pill/aba ativa
  • bordaForte
    rgba(255,255,255,.22)botão secundário (outlined fino)
  • texto
    rgba(255,255,255,.92)· 17:1texto principal, títulos, selos
  • texto2
    rgba(255,255,255,.55)· 6,1:1secundário, placeholder, meta, micro-label
  • texto3
    rgba(255,255,255,.35)· 3,3:1só decoração, nunca texto lido
  • accent
    #988bd0· 6,2:1CTA, link, ativo, seleção, foco, erro, progresso
  • accentLight
    #d9d1f6· 13:1fim do gradiente do botão, hover de link, toast de erro
  • ouro
    #e8a517· 8,8:1preço, selo, prioridade: só isso

Gradientes

  • --gradiente-accent
    botão primário, avatar, ícone de destaque do plano
  • --gradiente-vice
    só o traço do hero e a linha de 3 px do card Vitalício
  • pôr do sol (logo)
    só dentro do símbolo, não é token de UI

Variáveis CSS

globals.css · @theme
:root {
  --color-fundo: #111117;
  --color-hero: #0c0d1b;
  --color-glow: #1f1f38;
  --color-superficie: #16161f;
  --color-superficie2: #1c1c28;
  --color-vidro: rgba(255,255,255,.04);
  --color-borda: rgba(255,255,255,.08);
  --color-bordaHover: rgba(255,255,255,.14);
  --color-bordaForte: rgba(255,255,255,.22);
  --color-texto: rgba(255,255,255,.92);
  --color-texto2: rgba(255,255,255,.55);
  --color-texto3: rgba(255,255,255,.35);
  --color-accent: #988bd0;
  --color-accentLight: #d9d1f6;
  --color-ouro: #e8a517;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
}
03 · Tipografia

Oswald na LP, Geist no app

Oswald em caixa alta com tracking fica só na LP (display, hero, rótulos de seção) e nos micro-labels, sempre via utility, nunca digitada. Dentro do app tudo é Geist Sans em sentence case; Geist Mono para números tabulares, ids e datas. Medida de prose ≤ 65ch, display máximo 96 px, nada de gradiente em texto.

  • titulo-displayOswald 700 · uppercase · .01em · 44 → 72 → 96 pxh1 do hero da LP
    Escale conteúdo
    10x mais rápido
  • titulo-h2Oswald 600 · uppercase · 3,5 px · 22 → 30 pxseções da LP
    O que você recebe
  • microOswald 500 · 11 px · uppercase · 1,5 pxselos, rótulo de seção, rótulo de campo, th
    01 · Destrave
  • titulo-paginaGeist 700 · 24 px · -0,025emPageHeader de toda página do app
    Novo template
  • titulo-secao · titulo-cardGeist 600 · 15 / 14 pxh2 de seção no app, título de card
    BibliotecaLote de variações
  • botãoGeist 600 · 13 px (sm 12,5 · lg 14) · sentence case · nowraptodo botão e CTA
    Garantir acesso vitalício
  • hero-numGeist 700 · 36 px · -1,5 px · tabularStatTile, resumo N×M
    4/4
  • corpoGeist 300-400 · 15-16 px (LP) · 14 px (app)parágrafos, inputs
    O que levaria 3 horas na timeline, o ViceCut entrega em minutos.
  • monoGeist Mono · 11-12 px · tabularids, datas, n/total
    4/4 prontos · 15/01/2030 10:00
FamíliaPesosOndeObter
Oswald400 · 500 · 600 · 700display e títulos da LP, micro-labels (uppercase só via utility)site oficial ↗SIL Open Font License
Geist Sans300 → 700todo o app: títulos em sentence case, botões, corposite oficial ↗SIL Open Font License
Geist Mono400 · 500números tabulares, ids, datas, contadoressite oficial ↗SIL Open Font License
04 · Raios

Escala única e raio concêntrico

Quatro raios e um círculo. Regra concêntrica: elemento que encosta no canto de um contêiner tem raio = raio externo − padding, mínimo 6 (card 12 com padding 4 → 8; sidebar 16 com padding 12 → 6). Nenhum botão, CTA, chip ou aba em pill.

md · 6 pxbotões (todas as variantes), inputs, select, chips, item de nav, swatch
lg · 8 pxitem interno do segmento md, thumbs soltas, ícone de módulo
xl · 12 pxcards, tabelas, popover, modal, toast, select aberto
2xl · 16 pxsidebar, gaveta, janela dos mockups, card do login
full · fullsó avatar, badge de status, spinner, trilho fino ≤ 6 px

Concêntrico na prática

Card 12 com padding 4 → item 8. Segmento md: trilho 12, padding 4, item 8. Segmento sm: trilho 8, padding 3, item 6.

12 − 4 = 8
16 − 12 → 6 (mín.)
padding ≥ raio → livre
05 · Espaçamento

Escala de 4 px, padding por papel

Mais espaço acima de um título que abaixo dele. Grade de itens sem gap visível usa gap-px bg-borda: a linha fina vira a grade. Padding de card é uma escala fechada, escolhida pelo papel, nunca um valor solto por tela.

4
8
12
16
24
32
48
64
96
  • bloco18 px (LP: 24 / 32)card de conteúdo, formulário, integração, passo do wizard
  • tile de KPI16 / 14 pxStatTile e card de progresso do job
  • item de lista18 / 14 pxlote recente, item de publicação
  • card de mídia8 · 12 pxpack, variação do job, biblioteca do editor

Seções: LP py-16 sm:py-24; página secundária hero pt-16 sm:pt-24 e blocos py-12 sm:py-16. App: página gap-6 (8 com rótulos), seção → conteúdo gap-3/4, campo gap-1.5. Container: LP max-w-6xl; prose max-w-3xl: uma largura por página, nunca três.

06 · Componentes

O kit, renderizado ao vivo

Tudo abaixo é importado de web/components/ui/*, os mesmos componentes que o app usa, sem cópia. Um primário por região; alvo ≥ 36 px no app (40 padrão) e 48 na LP; foco visível em accent; texto de controle nunca quebra.

Botao

Geist 600, sentence case, rounded-md. Tamanhos sm 36 / md 40 / lg 48. CTA com seta = seta inline (setaBotao), nunca círculo separado.

uso
<Botao variante="primario" tamanho="md">Gerar 4 vídeos</Botao>
<a href="/app" className={classeBotao("secundario", "", "lg")}>Ver a plataforma</a>

Badge · MicroLabel

Badge: accent (positivo/conectado), ouro (preço/prioridade), neutro (o resto, inclusive erro, o texto diz o estado). Rounded-full só aqui.

ConectadoPrioridadeNa filaCanceladoEm breveÚltimos lotes

Chip

Filtro/toggle, h-9, rounded-md, aria-pressed. Ativo = accent/15 + borda accent/50.

Segmented

Trilho .seg (borda + pill-fundo) em md (itens 8 dentro de 12) ou sm (6 dentro de 8). Mede pelo conteúdo; rola sem barra se não couber.

Campo

Label em MicroLabel, controle h-10 rounded-md em pill-fundo com hover/focus/invalid; dica e erro (erro em accent, nunca vermelho). tipo=select renderiza o Select Radix.

Digite o @ completo, sem espaços.
Confira o e-mail: falta o @.

Card · StatTile

card-app: raio 12, borda .08, bleed radial lavanda no topo e linha de luz de 1 px. interativo sobe 3 px. Sem card dentro de card.

Lotes gerados12últimos 30 dias
Vídeos prontos48cor accent
Na fila de render
Card

Hover só clareia a borda (bordaHover).

Card interativo

Sobe 3 px em 220 ms e ganha shadow-cardHover.

07 · Ícones

Stroke 1.6, cantos redondos

Kit do app em components/ui/Icones.tsx: viewBox 24, stroke 1.6, pontas e junções arredondadas (chevrons e hambúrguer em 1.9-2). 19 px na nav, 16 inline, 15 em menus, 14 no chevron. Nunca emoji ou glifo Unicode como ícone.

  • Adicionar
  • Admin
  • Ajuda
  • Baixar
  • Busca
  • Calendario
  • Check
  • Chevron
  • ChevronDireita
  • ChevronEsquerda
  • Colapsar
  • Comentario
  • Curtida
  • Editor
  • Fechar
  • Instagram
  • Integracoes
  • Mais
  • Menu
  • Pack
  • Painel
  • Play
  • Publicacoes
  • Raio
  • Sair
  • Scrap
  • Seta
  • Sino
  • Templates
  • TikTok
  • Upload
  • Vazio
  • YouTube
uso
import { IconeBaixar } from "@/components/ui/Icones";

<IconeBaixar tamanho={16} />   // herda currentColor
08 · Voz e tom

Direto, em pt-BR, sem hype

O ViceCut fala como uma ferramenta que respeita o tempo de quem cria. Sentence case em tudo dentro do app (botões, títulos, menus). Caixa alta só existe na LP e só via utility. Números são fatos da ferramenta, nunca métrica de audiência inventada. Sem promessa de renda.

Fazer
  • Sentence case: “Gerar 4 vídeos”, “Publicar tudo”, “Nenhum lote gerado ainda”.
  • Verbo no início do botão; o rótulo diz o que acontece.
  • Erro diz o problema e a saída: “Conecte o Instagram primeiro”.
  • Empty state ensina o próximo passo.
  • pt-BR sempre; termos do produto (ViceScrap, Pack Viral, Scale N×M) sem tradução.
  • Aviso legal Rockstar/Take-Two em todo rodapé.
Não fazer
  • CAIXA ALTA digitada em conteúdo ou botão.
  • Hype: “revolucionário”, “incrível”, “o melhor do mundo”.
  • Promessa de renda ou de alcance.
  • Emoji como ícone ou pontuação.
  • Reticências e exclamação em sequência.
  • Falar de GTA 6 como se fôssemos a Rockstar.
Em vez de

GERE VÍDEOS VIRAIS EM SEGUNDOS!!! 🚀 A ferramenta mais INCRÍVEL do mercado.

Escreva

Um conteúdo vira dezenas de publicações prontas, agendadas direto no Instagram.

09 · Paisagem

Vice City em vetor, duas variantes

O SVG Paisagem (components/lp/Paisagem.tsx) desenha o skyline art déco em lavanda/rosado, coqueiros e o céu do pôr do sol, tudo procedural, sem raster. A variante quadro tem o degradê para fundo no topo (encaixa abaixo de um bloco escuro); secao é a cena inteira.

<Paisagem variante="quadro" imagem={false} />
<Paisagem variante="secao" imagem={false} />
10 · Templates de post

Instagram: carrossel, prova, oferta, Reels

Peças geradas por scripts/marca/instagram.py com os tokens desta página: capa e slide de carrossel, antes/depois, prova em números, demonstração da UI, oferta e capa de Reels, em 1:1, 4:5 e 9:16. Clique para abrir em tamanho real.

11 · Downloads

O kit de marca, pronto para usar

Todos os arquivos são estáticos e servem direto deste domínio. As fontes não são redistribuídas: Oswald é do Google Fonts e Geist é da Vercel. Os links oficiais estão na tabela de tipografia e dentro de paleta.json.

vicecut-brand-kit.zip

4.5 MB

Tudo desta página num arquivo: SVGs, PNGs do símbolo e do lockup em 4 tamanhos, paleta em JSON e CSS, templates de post e um LEIA-ME com as regras de uso.

Baixar o kit completo

Vetores (SVG)

Fonte da verdade do símbolo. Use SVG sempre que a plataforma aceitar.

Símbolo em PNG

256 · 512 · 1024 · 2048 px. Transparente, sobre #111117 e mono branco.

  • iconeícone: quadrado #0c0d1b + glifo em degradê sunset
  • glifo-degrade-transparenteglifo em degradê violeta→pêssego→laranja, fundo transparente
  • glifo-degrade-fundoglifo em degradê sobre fundo #111117
  • glifo-mono-brancoglifo mono branco, fundo transparente
  • glifo-mono-branco-fundoglifo mono branco sobre fundo #111117

Lockup em PNG

Símbolo + “ViceCut” com a área de respiro já incluída.

  • wordmark-transparentelockup ViceCut (símbolo + Geist 600), fundo transparente
  • wordmark-fundolockup ViceCut sobre fundo #111117
  • wordmark-mono-brancolockup ViceCut mono branco, fundo transparente

Paleta

Tokens em JSON (com raios, fontes e gradientes) e como variáveis CSS.

Tabela de tamanhos e pesos

ArquivoDimensõesPeso
logo.svgvetor4 KBbaixar
logo-mono.svgvetor3 KBbaixar
logo-pequeno.svgvetor941 Bbaixar
favicon.svgvetor2 KBbaixar
icon.svgvetor2 KBbaixar
icone-256.png256×2567 KBbaixar
icone-512.png512×51215 KBbaixar
icone-1024.png1024×102430 KBbaixar
icone-2048.png2048×204865 KBbaixar
glifo-degrade-transparente-256.png256×2565 KBbaixar
glifo-degrade-transparente-512.png512×51211 KBbaixar
glifo-degrade-transparente-1024.png1024×102422 KBbaixar
glifo-degrade-transparente-2048.png2048×204851 KBbaixar
glifo-degrade-fundo-256.png256×2566 KBbaixar
glifo-degrade-fundo-512.png512×51212 KBbaixar
glifo-degrade-fundo-1024.png1024×102423 KBbaixar
glifo-degrade-fundo-2048.png2048×204852 KBbaixar
glifo-mono-branco-256.png256×2563 KBbaixar
glifo-mono-branco-512.png512×5126 KBbaixar
glifo-mono-branco-1024.png1024×102414 KBbaixar
glifo-mono-branco-2048.png2048×204839 KBbaixar
glifo-mono-branco-fundo-256.png256×2564 KBbaixar
glifo-mono-branco-fundo-512.png512×5129 KBbaixar
glifo-mono-branco-fundo-1024.png1024×102420 KBbaixar
glifo-mono-branco-fundo-2048.png2048×204850 KBbaixar
wordmark-transparente-256.png1137×51237 KBbaixar
wordmark-transparente-512.png2274×102479 KBbaixar
wordmark-transparente-1024.png4550×2048182 KBbaixar
wordmark-transparente-2048.png9102×4096450 KBbaixar
wordmark-fundo-256.png1137×51246 KBbaixar
wordmark-fundo-512.png2274×102494 KBbaixar
wordmark-fundo-1024.png4550×2048212 KBbaixar
wordmark-fundo-2048.png9102×4096510 KBbaixar
wordmark-mono-branco-256.png1137×51227 KBbaixar
wordmark-mono-branco-512.png2274×102459 KBbaixar
wordmark-mono-branco-1024.png4550×2048143 KBbaixar
wordmark-mono-branco-2048.png9102×4096375 KBbaixar
paleta.jsonvetor3 KBbaixar
paleta.cssvetor2 KBbaixar

Regenerar

terminal
.venv/bin/python scripts/marca/exportar_marca.py

Rasteriza com cairosvg, rsvg-convert ou sharp (o que houver), copia os SVGs oficiais e os posts, escreve paleta, manifesto e o zip.