Lado B.
Press kit en forme de LP : pochette en carton usé avec le vinyle qui dépasse, tracklist Face A / Face B, dates en billets à talon et rider en livret d'insert. Sombre et chaud, crème et orange tomate.
- Type
- Landing page
- Thème
- Sombre
- Titres
- Anybody
- Texte
- Onest
PourProgrammateurs, salles de concert, producteurs d'événements, presse et marques en quête de musique
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourProgrammateurs, salles de concert, producteurs d'événements, presse et marques en quête de musique
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Anybody pour les titres, Onest pour le texte.
TitresAnybody
Aag!
Lado B en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteOnest
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- artiste avec agenda de concerts et fiche technique (rider)
- marque avec une couleur chaude et forte
- ceux qui veulent ressembler à un disque, pas à une entreprise
- portfolio qui a besoin d'un press kit téléchargeable
- musique classique ou savante formelle
- marque corporate
- service de santé
- public enfant
- marque aux tons froids ou pastel
Ton
Ce qui fait Lado B
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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" />).
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Lado B devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Lado B.