Ruído.
Digital glitch on dark ultraviolet: RGB split, scanlines, static and lost-signal bars. Hero on a monitor screen with REC and timecode, services on an editing timeline.
- Type
- Landing page
- Theme
- Dark
- Headings
- Chakra Petch + Rubik Glitch
- Body
- Inter
ForArtists, brands and event producers 18-40 who hire video and sound
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForArtists, brands and event producers 18-40 who hire video and sound
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Chakra Petch + Rubik Glitch for headings, Inter for body text.
HeadingsChakra Petch + Rubik Glitch
Aag!
Ruído in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyInter
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.
- brand with neon, purple, cyan or magenta
- strong video portfolio
- selling creation, not price
- healthcare, legal, finance
- 50+ audience
- sober or quietly luxurious brand
- anyone without a real portfolio to show
Tone
What makes it Ruído
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Ruído 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 Ruído.