Design Vaultby Ravox
Landingescuroautoralurbanocaloroso
LLado B

Lado B.

Press kit em forma de LP: capa de papelão gasto com o vinil saindo, tracklist Lado A / Lado B, agenda em ingressos com canhoto e rider como encarte. Escuro quente, creme e laranja-tomate.

Tipo
Landing page
Tema
Escuro
Títulos
Anybody
Texto
Onest

ParaContratantes, casas de show, produtores de evento, imprensa e marcas atrás de trilha

Baixar .zip Você tem acesso aos arquivos
Abrir em tela cheia
/preview/ladob

Seções da página01/08Topo e navegação

Todo o texto fica em content.ts e as cores em tokens.css.
Conceito

Press kit de músico, DJ ou banda montado como um LP com encarte. A página é o disco: capa de papelão na frente, tracklist na contracapa, rider no encarte. Nada de site de agência.

ParaContratantes, casas de show, produtores de evento, imprensa e marcas atrás de trilha

Paleta

As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.

Tipografia

Anybody nos títulos, Onest no texto.

TítulosAnybody

Aag!

Lado B em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoOnest

A fonte de leitura carrega parágrafos longos sem cansar.

Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.

0123456789 · R$ 1.234,56 · 25/09 às 19h30

Para quem serve

O que a skill /escolher-design compara com o cliente.

Combina com
  • artista com agenda de shows e rider técnico
  • marca com cor quente e forte
  • quem quer parecer disco, não empresa
  • portfólio que precisa de press kit para baixar
Evitar para
  • música clássica ou erudita formal
  • marca corporativa
  • serviço de saúde
  • público infantil
  • marca em tons frios ou pastel
Nichos
músicoDJbandaprodutor musicalselo independentecoletivo de festapercussionistaartista de palcoestúdio de gravação

Tom

autoralurbanocalorosográficode rua

O que faz ser Lado B

As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.

  1. 01

    Capa + vinil: capa quadrada com arte em SVG (sol laranja cortado por faixas pretas), anel de desgaste (.ladob-anel), quinas gastas (.ladob-quinas) e o disco saindo pela direita (.ladob-vinil, sulcos em repeating-radial-gradient, brilho parado .ladob-brilho, selo laranja com selo/gravadora/33⅓). Gira devagar e sai mais um pouco no hover (.ladob-toca).

  2. 02

    Tracklist Lado A / Lado B: A = quem é o artista (bio, som, influências, estrada); B = o que ele vende (show, set, trilha, aula) com duração ou formato em mono. Fio pontilhado (.ladob-guia) entre nome e tempo; número vira laranja no hover.

  3. 03

    Ingressos com canhoto destacável: picote tracejado, recortes redondos, borda serrilhada (.ladob-serra), número, setor e data. O canhoto se solta no hover. Carimbo .ladob-carimbo para "esgotado".

  4. 04

    Rider como encarte: papelão com dobra no meio, tabela de canais em mono à esquerda e mapa de palco em SVG à direita, com um selo redondo de texto circular ("Rider técnico · Rev. 03").

  5. 05

    Código de catálogo (LDB-002) na lombada do topo, na capa, no selo e no rodapé, com código de barras em CSS (.ladob-barras). Marcas de lado em círculo (<Lado letra="A" />).

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

  • Fundo preto quente #141312 (nunca preto puro); faixas alternadas em surface #1d1b19.
  • Papelão creme #e9d8b4 com grão (.ladob-papel): capa, contracapa, ingressos e encarte. Texto sobre o papelão é sempre tinta #141312 / #5b4f40.
  • Uma cor forte: laranja-tomate #ff5a36 para o selo do disco, o botão principal, a marca B e carimbos. Não entra segunda cor saturada.
  • Fontes: Anybody nos extremos da largura. Expandida (.ladob-exp, wdth 150) para nome do artista, cidades e "Booking"; condensada (.ladob-cond, wdth 50) para títulos de seção, nomes de faixa e botões. Onest no texto corrido. Azeret Mono em tudo que é dado: código de catálogo, duração, canal, número de ingresso.

Regras

  • Uma ação principal por tela: "Chamar pra tocar" / "Baixar press kit". O resto é link mono.
  • Cantos quase retos (rounded-d = 3px). Nada de pílula, nada de sombra difusa colorida.
  • Movimento: só o disco (hover), o canhoto (hover) e as entradas data-sobe/data-revela. Tudo para em prefers-reduced-motion.
  • Texto na voz do artista, primeira pessoa, frases curtas e concretas. Nada de "experiência única".

Adaptar à marca do cliente

  • Cor do artista: troque só --d-primary (selo, botão, carimbo, sol da capa em ArteCapa). Precisa ser quente e forte o bastante sobre o preto e sobre o creme.
  • Troque o creme --d-accent se a capa real do disco tiver outro papel (kraft, cinza), mantendo a tinta escura por cima.
  • Banda: artista.linhas com o nome da banda; Lado A vira "a banda" (formação, história).
  • Artista sem disco lançado: troque disco pelo nome do projeto ou da turnê; o código de catálogo pode ser o ano ou a sigla do artista.
Como usar

Dois arquivos.
Um prompt.

O Lado B vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.

Prompt para o agente

Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.

  1. 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
  2. 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
  3. 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
  4. 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.

Parecidos

Landings com tom ou nicho em comum com Lado B.

Ver catálogo
LandingescuroVer design

Ruído

LandingescuroVer design

Revelação

LandingescuroVer design

Letreiro

LandingescuroVer design

Brasa