Ruído.
Glitch digital sobre ultravioleta oscuro: separación RGB, scanlines, estática y barras de señal perdida. Hero en pantalla de monitor con REC y timecode, servicios en una línea de tiempo de edición.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- Chakra Petch + Rubik Glitch
- Texto
- Inter
ParaArtistas, marcas y productores de eventos de 18 a 40 años que contratan video y sonido
Secciones de la página01/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.
Del DESIGN.md, que por ahora está en portugués.
ParaArtistas, marcas y productores de eventos de 18 a 40 años que contratan video y sonido
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Chakra Petch + Rubik Glitch en los títulos, Inter en el texto.
TítulosChakra Petch + Rubik Glitch
Aag!
Ruído en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInter
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.
- marca con neón, violeta, cian o magenta
- portafolio fuerte en video
- quien vende creación, no precio
- salud, jurídico, finanzas
- público 50+
- marca sobria o de lujo discreto
- quien no tiene un portafolio real para mostrar
Tono
Lo que lo hace Ruído
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Ruído 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 Ruído.
