Abstract Artistic Brutalism demo
Abstract Artistic Brutalism

An experimental neo-brutalist style with raw unpolished layouts, bold oversized typography, and abstract artistic elements suited for digital artist portfolios.
Category: Brutalism & Raw
Era: 2020s Modern
Prompt: 14.4 KB · 1940 words
# BUILD PROMPT — "ARTISTIC ABSTRACT BRUTALISM" LANDING PAGE

**Role & Mission:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt. The page is a portfolio landing page for a fictional experimental digital-art studio (invent a consistent identity — suggested name: **RAWFORM STUDIO** — and write all real English copy around it). Theme: **Artistic Abstract Brutalism** — artistic, experimental, unconventional, post-modern digital art (2026+). Keywords: digital art, experimental, portfolio, abstract, unconventional, raw, bold, artistic, disruptive, unique.

**Visual Direction (translated from source spec):** Concrete and metal textures, rough misaligned typography, aggressively cropped and overlapping images, broken grid layouts, distortion hover micro-interactions, abrupt transition animations, blood red and cobalt blue accents, raw and unconventional feel.

**Sections to build (in order):** Sticky Header/Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML.
* **Class/ID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.
* **Minimal HTML Modifications:** HTML must remain clean, semantic, and style-agnostic. All brutalist effects (rotation, cropping, distortion, overlap) are achieved purely in CSS.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root`, then override under `.dark` / `@media (prefers-color-scheme: dark)`:

* **Colors (Light Mode defaults):** `--primary: #8B0000` (Blood Red), `--secondary: #0047AB` (Cobalt Blue), `--bg-primary: #A9A9A9` (Concrete Gray), `--bg-secondary: #fefefe`, `--text-primary: #000000`, `--text-secondary: #3d3d3d`, `--text-success: #6B8E23` (Moss Green), `--text-error: #8B0000`, `--border-default: #000000`, `--border-error: #8B0000`, `--border-success: #6B8E23`.
* **Accent tokens:** `--accent-cobalt: #0047AB`, `--accent-ochre: #CC7722`, `--accent-moss: #6B8E23`, `--accent-burnt-orange: #CC5500` — assign one distinct accent per Features card and per Pricing tier.
* **Exception clause:** The palette's `#FFFFFF` is implemented as `#fefefe` per the token standard; pure `#ffffff` is forbidden.
* **Contrast Pairing:** Light mode pairs Concrete Gray backgrounds with black text; Dark Mode pairs near-black backgrounds (`--bg-primary: #0a0a0a`, `--bg-secondary: #1c1c1c`) with light text (`--text-primary: #fefefe`, `--text-secondary: #c0c0c0`). This pairing is mandatory in every theme. Blood Red and Cobalt are accent/large-display/border colors only (they fail 4.5:1 on gray for body text); body copy always uses `--text-primary`/`--text-secondary`. In Dark Mode, brighten blood red (e.g., `#c43a3a`) and cobalt (e.g., `#3a6fd8`) to maintain ≥3:1 for large text.
* **Borders & Shadows:** `--border-width: 4px` (the brutalist border weight). `--shadow-sm: 4px 4px 0 0 var(--shadow-color)` and `--shadow-md: 8px 8px 0 0 var(--shadow-color)` — hard offset shadows, zero blur, where `--shadow-color: #000000` in Light Mode and `#fefefe` in Dark Mode.
* **Radius:** `--radius-sm`, `--radius-md`, `--radius-lg` are all defined as `0px` — sharp corners are the brutalist radius; no rounded corners anywhere.
* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 80ms`, `--transition-normal: 150ms`, `--ease-standard: cubic-bezier(0.7, 0, 0.2, 1)`. Abruptness is achieved through very short durations and sharp easing curves — never through missing transitions.
* **Elevation/Stacking:** `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000`. Overlapping hero/collage elements use a separate low range (1–10) so they never conflict with interactive layers.

**1.3 Mandatory Dark Mode Support (Full Light/Dark — required by the theme spec)**
* **Implementation:** Provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`/`<body>`; all colors, borders, and hard-shadow colors must flip via variables only — no HTML restructuring.
* **Theme Switching:** A visible toggle in the sticky header, built as a real `<button>` with `aria-pressed` and a descriptive `aria-label` (e.g., "Toggle dark mode"), using a Google Material Symbol icon that swaps with the state.
* **Persistence:** Store the choice in `localStorage`; on first visit fall back to `prefers-color-scheme`. Apply the stored theme before first paint to prevent flashes.

**1.4 Flexbox Layout & Mobile-First Alignment**
* **Flexbox Only:** Build all layout structures with Flexbox (`display: flex` / Tailwind flex utilities). Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.
* **Broken Grid via Flexbox:** Achieve the "broken grid" with flex-wrap rows whose children carry deliberate `transform: rotate()` (e.g., `rotate(-2deg)` / `rotate(1.5deg)`), `translateY`/`translateX` offsets, negative margins, and `z-index` overlaps — never with CSS Grid.
* **Mobile-Friendly First:** All offsets, rotations, and overlaps must be reduced or removed at small breakpoints so the layout stacks into a single column. Horizontal scrolling is forbidden at any viewport width; decorative transforms must never push content past the viewport edge.

**1.5 Framework Default & Tailwind CSS Integration**
* Use Tailwind CSS (Play CDN acceptable) for layout utilities, with all brutalist styling defined in `style.css` via `@layer` / custom classes that map back to the CSS variables.
* Reusable class vocabulary: `.btn`, `.card`, `.input-group`, plus the brutalist utilities `.broken-grid-item`, `.cropped-image`, `.distort-hover`, `.tilt-left`, `.tilt-right`, `.marquee`, `.texture-concrete`, `.texture-metal`.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** Load Google Fonts via `<link>`: **Archivo Black** (display headlines), **Space Grotesk** (body), **Space Mono** (labels, numerals, step counters). Bind to `--font-display`, `--font-base`, `--font-mono`.
* **Exception clause:** The requested system font "Arial Black" is replaced by its Google-hosted equivalent **Archivo Black** — Google Fonts are mandatory; do not reference system Arial.
* **Icons:** Google Material Symbols (outlined variant) only. Raw inline SVGs and local icon files are forbidden.
* **Misaligned Typography:** Achieve roughness via CSS only — mixed font sizes on one line, rotated spans, negative `letter-spacing`, and hard `text-shadow` offsets (e.g., `4px 4px 0 var(--primary)`).

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component (` .btn` variants: `.btn-primary`, `.btn-secondary`, `.btn-ghost`, `.btn-danger`)**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border: var(--border-width) solid var(--border-default)`, `box-shadow: var(--shadow-md)`, sharp corners, heavy display font, uppercase.
* **Hover:** Snappy "press" shift — element `translate(2px, 2px)` while shadow shrinks to `--shadow-sm`; `cursor: pointer`.
* **Focus:** Distinct from the ubiquitous black borders — `outline: 3px solid var(--accent-cobalt); outline-offset: 2px` (Light) / a bright accent outline in Dark Mode. Never remove focus styles.
* **Active/Pressed:** `transform: scale(0.97)` combined with the shadow collapse.
* **Loading:** Class-driven state that disables pointer events, prevents double-clicks, and renders an animated CSS spinner or rotating Material Symbol without changing button dimensions.
* **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`, shadow removed.
* **Success/Error:** Temporary feedback states using `--text-success` / `--text-error` with paired icons — never color alone.
* **Danger:** `.btn-danger` must be visually distinct in both Light and Dark themes.

**2.2 Card Component (`.card`, `.broken-grid-item`)**
* **Default:** Flexbox layout, `--bg-secondary` surface, 4px solid border, `--shadow-md` hard shadow, sharp corners.
* **Hover:** `transform: translateY(-2px)` plus a distortion micro-shift via `.distort-hover` (e.g., `skewX(-2deg) rotate(0.5deg)`), shadow grows to a larger offset.
* **Focus-within:** Border color shifts to `--accent-cobalt` when any child link/button receives focus.
* **Loading (Skeleton):** Shimmer animation (hard-edged gray blocks with a sweeping gradient) defined in CSS to prevent layout jumps.
* **Empty State:** Fallback layout with a large Material Symbol and clear guidance text.

**2.3 Form & Input Requirements (`.input-group`)**
* **States:** Empty, Focused (cobalt outline ring), Filled, Valid (moss green border + check Material Symbol), Invalid (blood red border, error text, error Material Symbol), Disabled, Read-only.
* **Structure:** Flex container wrapping a `<label>`, the input, and a dedicated error feedback element with `aria-live="polite"`.
* Used in the Final CTA email capture and the modal contact form.

**2.4 Modal / Popup Requirements (Final CTA "Start a Project" dialog)**
* **States:** Opening, Open, Loading, Success/Error, Closing — all animated with abrupt, short CSS transitions (`--transition-fast`, sharp easing).
* **UX Features:** Centered flex container (`align-items: center`), solid black backdrop at 80% opacity, Material Symbol close button, keyboard focus trapping, `role="dialog"`, `aria-modal="true"`, close via `Esc` and overlay click, focus returned to the trigger on close.

**2.5 Toast Requirements**
* A `.toast` component at `--z-toast` with `aria-live="assertive"` for form success/error feedback (e.g., email capture), styled as a hard-bordered black block with white text, auto-dismissing with an abrupt exit animation.

---

## 3. SECTION-BY-SECTION BUILD SPECIFICATIONS

**3.0 Sticky Header/Nav:** Full-width bar with 4px black bottom border, studio wordmark in Archivo Black (slightly rotated), anchor links to every section, and the dark mode toggle. Include a visually hidden "Skip to content" link as the first focusable element.

**3.1 Hero:** Full-viewport broken-grid collage. Oversized mixed-size rotated display headline, two `.cropped-image` elements (picsum placeholders, `https://picsum.photos/seed/<seed>/<width>/<height>.jpg`) aggressively cropped via `clip-path` and overlapping via negative margins and `z-index`. Concrete/metal textures generated purely with CSS gradients (`.texture-concrete`, `.texture-metal`) — no external texture files. One `.btn-primary` ("View the Work") and one `.btn-ghost` ("Commission a Piece") CTA. Optional full-width `.marquee` ticker strip below the hero with an abrupt looping animation.

**3.2 Features (3 cards):** Three `.card.broken-grid-item` elements deliberately offset (rotations ±1–2deg, staggered `translateY`). Each card: one Material Symbol icon, a title, real copy about the studio's services, and its own accent color (cobalt, ochre, burnt orange). All three carry `.distort-hover`.

**3.3 How It Works (3 steps):** Steps labeled 01 / 02 / 03 in oversized Space Mono numerals, alternating left/right alignment, connected by raw dashed borders. Each step uses the `.card` base with a title, description, and Material Symbol.

**3.4 Testimonials:** Three staggered, slightly rotated quote cards with oversized `format_quote` Material Symbols, real fictional quotes from artists/clients with name and role attributions.

**3.5 Pricing (3 tiers):** Three `.card` tiers with distinct names and real copy. The middle tier is highlighted: thicker blood red border, a rotated "MOST RAW" badge, slight `scale(1.02)` / `rotate(-1deg)`, and must remain visually distinct in both themes. Each tier lists features with check/close Material Symbols and its own `.btn` CTA.

**3.6 FAQ:** Accessible accordion — each item is a `<button>` with `aria-expanded` controlling a panel (`role="region"`), abrupt open/close transitions, and a Material Symbol plus-icon that rotates 45deg when open. Fully keyboard operable. Write 5–6 real questions and answers.

**3.7 Final CTA:** High-impact block on a blood red background with white text (verify pairing in both themes), oversized rotated headline, an email capture `.input-group` with a `.btn` (all input states + toast feedback), and a "Start a Project" `.btn-secondary` that opens the modal dialog from Section 2.4 containing a mini contact form.

**3.8 Footer with secondary links:** Grouped secondary links (About, Process, Journal, Contact, Privacy, Terms), social links with Material Symbol icons, and copyright. All links must have visible focus states. Hard 4px top border.

---

## 4. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid sizing, mobile-first breakpoints, zero horizontal overflow at any width — including when broken-grid transforms are active.
* **Abrupt but Present Transitions:** Every state change transitions with `var(--transition-fast)` or `var(--transition-normal)` using sharp easing; abruptness comes from short durations, never from missing transitions.
* **Reduced Motion:** Under `prefers-reduced-motion: reduce`, disable all rotations, distortion hovers, marquee scrolling, and shimmer animations; keep color/state changes instant but visible.
* **Accessibility (a11y):** Maintain ≥4.5:1 contrast for body text and ≥3:1 for large display text in both Light and Dark modes. Never rely on color alone — pair every state with text or icon cues. Use semantic HTML5 elements, correct ARIA roles/labels on the accordion, modal, toggle, and toasts, logical DOM/focus order, and full keyboard operability with no mouse-only interactions.
* **Mandatory Visual Feedback:** Every click, hover, focus, and submission triggers a visible state change.
* **Destructive Actions:** Any destructive/dangerous styling must be visually distinct in both themes.

---

## 5. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference; no inline styles anywhere.
* **Naming Convention:** One consistent flat kebab-case utility vocabulary throughout (`.btn`, `.card`, `.broken-grid-item`, `.cropped-image`, `.distort-hover`, `.section-hero`, etc.) — never mix conventions.
* **Copy:** All user-facing copy written in English, real and specific to the fictional studio identity — no lorem ipsum. Picsum image placeholders are permitted only for portfolio imagery.
* **Completeness:** Deliver the full landing page — every section, every component state, both themes — functional on the first attempt.