Sonoro Glitch Brutalism demo
Sonoro Glitch Brutalism

A raw, edgy brutalist web style with glitch effects and distorted typography, built for experimental electronic music festivals.
Category: Brutalism & Raw
Era: 2020s Modern
Prompt: 8.8 KB · 1189 words
# System Prompt for Coding AI: Landing Page — "Brutalismo Sonoro Glitch"

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* Keep all styling strictly inside a dedicated `style.css` file. The `style="..."` attribute is **forbidden** in HTML.
* Target all design properties, layout rules, and states via class or ID selectors only.
* HTML must remain clean, semantic, and agnostic of visual styling — changing the look requires modifying only the CSS file.

**1.2 CSS Variables & Theme Tokens**
Store all visual tokens in `:root`:

* **Colors:** `--primary: #FF00FF` (magenta), `--secondary: #00FFFF` (cyan), `--bg-primary: #1A1A1A` (dark gray — the base canvas, not pure black; reserve `#000000` for overlays/backdrops), `--bg-secondary: #000000`, `--text-primary: #FFFFFF`, `--text-secondary: #32CD32` (lime green), `--text-success: #32CD32`, `--text-error: #FF00FF` (magenta doubles as the disruptive error tone), `--border-default: #00FFFF`, `--border-error: #FF00FF`, `--border-success: #32CD32`, plus accents `--accent-yellow: #FFFF00`, `--accent-purple: #BF00FF`.
* **Contrast Pairing:** Dark backgrounds (`#000000`, `#1A1A1A`) always pair with light text (`#FFFFFF`, `#FFFF00`); any light surface pairs with `#000000` text. Enforce this in every theme state.
* **Radius & Shadows:** `--radius-sm: 0`, `--radius-md: 0`, `--radius-lg: 0` (brutalism = sharp corners, zero rounding), `--shadow-sm`, `--shadow-md` (hard offset shadows, e.g., `6px 6px 0 var(--primary)` — no blur).
* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 120ms`, `--transition-normal: 250ms`, `--ease-standard: steps(3, end)` (stepped easing reinforces the glitch aesthetic).
* **Elevation:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent overlap conflicts.

**1.3 Mandatory Dark Mode Support**
* Dark mode is the **default and primary mode** for this theme (`#000000`/`#1A1A1A` backgrounds, `#FFFFFF` text).
* Still define a light-mode alternative via `@media (prefers-color-scheme: light)` and/or a `.light` class: light background must NOT be pure white — use `#fefefe` paired with `#000000` text, keeping magenta/cyan accents.
* Theme choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit; include a visible toggle with correct `aria-pressed`/`aria-label` state.
* Glitch effects must remain legible in both modes (adjust `text-shadow` intensity per mode).

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox (`display: flex`).
* Every flex container defaults to `align-items: center` unless an explicitly justified exception exists (e.g., stacked step lists may use `align-items: stretch`).
* All layouts must be mobile-responsive out of the box: hero rows, pricing tiers, and feature cards convert to single columns on small viewports. No horizontal scrolling at any breakpoint.

**1.5 Framework Default**
* Use Tailwind CSS (or clean custom CSS via `@layer`/`@apply`) unless another framework is requested. All utilities must map back to CSS variables or generic reusable classes (`.btn`, `.card`, `.input-group`, `.glitch-image`, `.pixel-font`, `.text-overlay`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** Load Google Fonts — primary display font **"Press Start 2P"** for headings (pixelated, condensed feel), and a condensed secondary such as **"Archivo Black"** or **"Oswald"** for body copy. Bind to `--font-display` and `--font-base`.
* **Icons:** Use Google Material Symbols/Icons only. Raw inline SVGs and local icon files are **forbidden**.
* Apply `text-shadow: 2px 2px var(--primary)` (magenta offset) on key headings for the chromatic aberration effect.

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44x44px touch target. Brutalist style: solid `#000000` fill, `2px dashed var(--secondary)` border, hard offset shadow `4px 4px 0 var(--primary)`, uppercase pixel font.
* **Hover:** Shadow offset grows (`6px 6px 0`) and button translates `-2px, -2px`; background flickers to magenta with cyan text — strong, instant visual feedback.
* **Focus:** Distinct 3px solid cyan focus ring via `outline` using CSS variables.
* **Active/Pressed:** `transform: scale(0.97)` plus shadow collapse to `0 0 0` (button "stamps" into the page).
* **Loading:** Disables interactions, prevents double-clicks, renders an animated Google Icon spinner (rotating `"sync"` symbol) without distorting button dimensions.
* **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`.
* **Success/Error:** Temporary feedback states driven by `--text-success` / `--text-error` with a brief glitch flicker animation.
* **Danger (`.btn-danger`):** Magenta background, white text — visually distinct in both modes.

**2.2 Card Component (Features, Pricing Tiers, Testimonials)**
* **Default:** Flexbox layout, `--bg-secondary` background, `2px dashed var(--secondary)` or solid `var(--primary)` borders, hard offset shadow, generous padding via `--spacing-gap`.
* **Hover:** `transform: translateY(-2px)` plus a short glitch shake/flicker (RGB-split via layered `text-shadow`/`box-shadow` in magenta+cyan) — strong visual feedback per the theme spec.
* **Focus-within:** Border switches to solid magenta when a child link/button receives focus.
* **Loading (Skeleton):** CSS shimmer animation (stepped, harsh flicker rather than smooth fade) to prevent layout jumps.
* **Empty State:** Structured fallback with a Google Icon and clear guidance text.

**2.3 Form & Input Requirements**
* **States:** Empty, Focused (cyan outline ring), Filled, Valid (lime green border + check icon), Invalid (magenta border, error text, error icon), Disabled, Read-only.
* **Structure:** Flex container wrapping label, input, and dedicated error feedback container. Inputs styled brutally: transparent/black fill, `2px solid #FFFFFF` borders, pixel font labels.
* **FAQ section:** If implemented as accordion, use `<details>`/`<summary>` or ARIA-correct custom widget with full keyboard operability and visible focus states.

**2.4 Modal / Popup (if any CTA requires one)**
* **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions (glitch-slice entrance: clip-path steps, not fades).
* **UX:** Centered flex container, black backdrop overlay at 90% opacity, Google Icon close button, keyboard focus trapping, close via `Esc` or overlay click.

## 3. CORE UX & MICRO-INTERACTION RULES

* **Glitch Effects (theme-critical):** Define `@keyframes glitch-effect` (0.5s infinite alternate) applying layered magenta/cyan `text-shadow` offsets and small `clip-path`/`transform` jitter to `.glitch` elements. Apply to hero headline, section titles, and hover states. Keep loops short and repetitive per the spec.
* **Intentional Low-Res Images:** Apply `image-rendering: pixelated` and subtle CSS pixelation (e.g., small background-size scaling) to `.glitch-image` elements — this is a deliberate aesthetic, not a bug.
* **Text Overlays:** `.text-overlay` class positions condensed uppercase text over images with magenta/cyan offset shadows; ensure overlay contrast in both modes.
* **Reduced Motion:** All glitch/shake/loop animations must be disabled under `@media (prefers-reduced-motion: reduce)` — content remains fully legible without animation.
* **Accessibility:** Sufficient contrast in both modes. Never rely on color alone to communicate state (pair color with icons/text). Semantic HTML5 elements, correct ARIA roles/labels, logical DOM/focus order, full keyboard operability, `aria-live` regions for dynamic feedback.
* **Responsive by Default:** Fluid sizing, no horizontal overflow. Pixel font sizes must scale down on mobile (use `clamp()`).
* **Mandatory Visual Feedback:** Every click, hover, or submission triggers a visible state change.
* **Destructive/danger actions:** Visually distinct in both light and dark themes.

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** Separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference. No inline CSS.
* **Sections to build:** Hero (glitch headline, festival name, date/location, primary CTA), Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers — highlight the middle tier), FAQ (accordion), Final CTA, Footer with secondary links.
* **Copy:** All user-facing copy in **English** — edgy, raw, underground festival voice (e.g., "SIGNAL // OVERDRIVE", "NO MAINSTREAM. NO MERCY."). No lorem ipsum; write real copy for every section.
* **Naming Convention:** One consistent convention (BEM or the fixed utility set: `.btn`, `.card`, `.glitch-image`, `.pixel-font`, `.text-overlay`) across the entire deliverable — never mix.
* **No Unrequested Placeholders:** Every section ships complete with real content, working theme toggle, and all specified states.