Lado B.
Press kit con forma de LP: portada de cartón gastado con el vinilo asomando, tracklist Lado A / Lado B, agenda en entradas con talón y rider como inserto. Oscuro cálido, crema y naranja tomate.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- Anybody
- Texto
- Onest
ParaContratantes, salas de conciertos, productores de eventos, prensa y marcas que buscan música
Secciones de la página01/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.
Del DESIGN.md, que por ahora está en portugués.
ParaContratantes, salas de conciertos, productores de eventos, prensa y marcas que buscan música
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Anybody en los títulos, Onest en el texto.
TítulosAnybody
Aag!
Lado B en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoOnest
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- artista con agenda de shows y rider técnico
- marca con color cálido y fuerte
- quien quiere parecer un disco, no una empresa
- portafolio que necesita un press kit descargable
- música clásica o erudita formal
- marca corporativa
- servicio de salud
- público infantil
- marca en tonos fríos o pastel
Tono
Lo que lo hace Lado B
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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" />).
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Lado B se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Lado B.