Ruído.
Glitch numérique sur ultraviolet sombre : séparation RVB, scanlines, neige et barres de signal perdu. Hero sur écran de moniteur avec REC et timecode, services sur une timeline de montage.
- Type
- Landing page
- Thème
- Sombre
- Titres
- Chakra Petch + Rubik Glitch
- Texte
- Inter
PourArtistes, marques et organisateurs d'événements de 18 à 40 ans qui commandent vidéo et son
Sections de la page01/11nav
Glitch digital sobre ultravioleta escuro: separação RGB, scanlines, chuvisco e barras de sinal perdido. Parece monitor de set, fita VHS e ilha de edição. Não é Windows 95 nem academia.
Extrait du DESIGN.md, en portugais pour l'instant.
PourArtistes, marques et organisateurs d'événements de 18 à 40 ans qui commandent vidéo et son
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Chakra Petch + Rubik Glitch pour les titres, Inter pour le texte.
TitresChakra Petch + Rubik Glitch
Aag!
Ruído en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteInter
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.
- marque avec néon, violet, cyan ou magenta
- portfolio vidéo solide
- qui vend de la création, pas du prix
- santé, juridique, finance
- public 50+
- marque sobre ou de luxe discret
- qui n'a pas de vrai portfolio à montrer
Ton
Ce qui fait Ruído
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
Hero como tela de monitor: moldura, cantos de visor, HUD com
RECpiscando, lente/ISO/formato, bateria e timecode rodando só com CSS (<Timecode>), faixa de tracking de VHS descendo, medidores L/R e uma "CAM B · sem sinal" com barras de cor. - 02
Glitch no hover dos títulos (
.ruido-titulo:hover): tremida com RGB deslocado. - 03
Showreel em player: nome do arquivo, play com sombra RGB, barra de progresso com capítulos.
- 04
Portfólio em grade de frames: placeholders ricos (
<Cena>: palco, horizonte synth, forma de onda, retrato em contraluz, cidade na chuva, túnel de motion). No hover, franja RGB, play e barra de progresso preenchendo. - 05
Serviços como timeline de edição: régua, faixas V1/V2/V3/A1/A2/FX, clipes posicionados (
--ini/--larg) e agulha vermelha varrendo. No celular os clipes ocupam a largura toda. - 06
Estúdio: mesa de som desenhada (VU animado, canais, faders) + lista de equipamentos em ficha técnica.
- 07
Contato "iniciar gravação": tela SMPTE "sem sinal", formulário tipo gravador em standby e botão REC.
- 08
Barras de cor como divisória entre seções, chuvisco animado cobrindo a página.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Fundo ultravioleta escuro
#0d0820. Superfícies#150d2ee#1d1440. Nunca preto puro. - Texto lilás claro
#f1ecff; secundário#a99ccc. - Primária magenta
#ff2bd6(botões, palavra glitch, clipes de vídeo). - Destaque ciano
#22e6ff(rótulos, sombra dura dos botões, clipes de áudio). - REC vermelho
#ff3b4e, só em gravação/agulha/ponto de REC. Amarelo#ffd24asó em medidor e faixa FX. - Separação RGB:
text-shadowciano à esquerda e magenta à direita (.ruido-titulo,.ruido-rgb). - Fontes: Chakra Petch 700 caixa-alta nos títulos; uma palavra por seção em Rubik Glitch (
.ruido-g); Inter no texto; JetBrains Mono em rótulos, timecode e HUD.
Regras
- Seções com
py-24, larguramax-w-6xl. Bordas finasborder-border, cantos quase retos (3px/10px). - Botão principal: magenta com sombra dura ciano (
shadow-[4px_4px_0_#22e6ff]). Máximo 2 por tela. - Rótulos sempre em mono caixa-alta espaçada, com numeração
[01]. - Fotossensibilidade: nenhuma animação pisca mais de 3x por segundo. REC pisca 1x/s; o glitch do título e o chuvisco trocam 3x/s (
steps(1)em 1s com 3 quadros). Não acelere. - `prefers-reduced-motion`: todas as animações próprias param (glitch, chuvisco, tracking, REC, timecode, letreiro, agulha e medidores). Qualquer animação nova entra no bloco do
tokens.css. - Nada de flash de tela inteira, inversão de cor ou fundo branco piscando.
- Não usar moldura de janela, botão chanfrado ou cinza de sistema (isso é o "disquete"), nem faixa de alerta amarela/preta e tipografia de academia (isso é o "choque").
Adaptar à marca do cliente
- Cor da marca vai em
--d-primary; mantenha o ciano como par (é ele que faz a separação RGB). Se a marca for ciano/azul, inverta: marca em--d-accente magenta na primária. - Logo do cliente entra no lugar das barras de cor da navegação.
- Frames: troque o conteúdo de
<Cena>por<img>/<video muted loop playsinline>comobject-coverem 16:9. - Reel: troque o link do player pelo embed real (Vimeo/YouTube) no mesmo
aspect-video. - Marca sóbria, pastel ou de luxo discreto? Esse design provavelmente não é o certo.
Deux fichiers.
Un prompt.
Ruído 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 Ruído.
