Lado B.
Press kit shaped like an LP: worn cardboard cover with the vinyl sliding out, Side A / Side B tracklist, gigs as tickets with stubs and the rider as an insert. Warm dark, cream and tomato orange.
- Type
- Landing page
- Theme
- Dark
- Headings
- Anybody
- Body
- Onest
ForBookers, venues, event producers, press and brands looking for music
Page sections01/08Topo e navegação
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.
From DESIGN.md, which is in Portuguese for now.
ForBookers, venues, event producers, press and brands looking for music
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Anybody for headings, Onest for body text.
HeadingsAnybody
Aag!
Lado B in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyOnest
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- artist with a gig calendar and technical rider
- brand with a strong, warm color
- anyone who wants to look like a record, not a company
- portfolio that needs a downloadable press kit
- formal classical music
- corporate brand
- healthcare service
- children's audience
- brand in cool or pastel tones
Tone
What makes it Lado B
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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 emrepeating-radial-gradient, brilho parado.ladob-brilho, selo laranja com selo/gravadora/33⅓). Gira devagar e sai mais um pouco no hover (.ladob-toca). - 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. - 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-carimbopara "esgotado". - 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").
- 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" />).
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
Identidade
- Fundo preto quente
#141312(nunca preto puro); faixas alternadas emsurface#1d1b19. - Papelão creme
#e9d8b4com grão (.ladob-papel): capa, contracapa, ingressos e encarte. Texto sobre o papelão é sempre tinta#141312/#5b4f40. - Uma cor forte: laranja-tomate
#ff5a36para 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 emprefers-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 emArteCapa). Precisa ser quente e forte o bastante sobre o preto e sobre o creme. - Troque o creme
--d-accentse a capa real do disco tiver outro papel (kraft, cinza), mantendo a tinta escura por cima. - Banda:
artista.linhascom o nome da banda; Lado A vira "a banda" (formação, história). - Artista sem disco lançado: troque
discopelo nome do projeto ou da turnê; o código de catálogo pode ser o ano ou a sigla do artista.
Two files.
One prompt.
Lado B becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.
Prompt for the agent Use with AI
Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.
Similar
Landings that share a tone or niche with Lado B.