# Acid Display Tech Zine

## Overview
A tech-magazine web style built on a near-black canvas where the accent is not one color but a clashing DUO — acid mint and ultraviolet — used together for energy. Headlines are set oversized in a heavy poster display face; elements are deliberately misaligned in an asymmetric zine collage rather than snapped to a grid. Depth comes from panel value steps, 2px duo-colored borders, and hard-offset snap shadows — never from blur or gradients. Dark is the canonical mode; the light map is a faithful adaptation.

## Colors & Roles
Canvas `background` is near-black (`#101014`), panels (`card`, `secondary`) step up in value (`#1B1B22` / `#252530`). Text is near-white `#ECECEC`; meta text is a desaturated gray `#8A8A95`. The identity is the duo: `primary` = acid mint (`#4FFFB0`, also the default `border`), `accent` = ultraviolet (`#7C4DFF`). Both must appear together — collapsing to one loses the style. Since primary-color red/yellow is banned here, `destructive` is mapped onto the ultraviolet accent rather than inventing a red. Mint is reserved for large display type, kickers, borders, and fills — never small body text (insufficient contrast).

## Typography Rules
Two families: `Clash Display` (Fontshare, free) weight 700 for headlines and giant index numbers; `Inter` for body (400) and uppercase kickers (700). Display is oversized and tracking-tight (`clamp(2.8rem, 6vw, 5.5rem)`, line-height 0.98, −0.02em). Giant issue/index numbers scale to `clamp(3rem, 8vw, 7rem)` in mint/violet duo coloring. Kickers are uppercase with wide 0.14em tracking. A mono (`JetBrains Mono`) is available for code/meta stamps. Google-Fonts fallbacks: Inter (sans), Space Grotesk (display), JetBrains Mono (mono).

## Layout Principles
Max content width 1280px on a 12-column base, but elements intentionally break it — crossing column boundaries, overlapping, rotated −3~3°. Vertical section rhythm is `clamp(72px, 8vw, 104px)`. Each section must resolve as a filled zine collage: headline + body + duotone image/giant index number overlapping in offset layers. Spacing rhythm is disciplined even where placement is loose: kicker→headline 12px, headline→lead 20px, lead→button 24px, card padding 24–28px, border widths uniform.

## Depth & Elevation
No blur shadows, no gradients, no glass, no noise. Depth is built from panel value steps and hard-offset snap shadows (`4px 4px 0 var(--accent)`) plus 2px duo-colored borders. The offset shadow appears instantly on hover alongside a `translate(-2px, -2px)` nudge.

## Shapes
Corners are near-square: radius 0–4px everywhere (cards, buttons, inputs, images). Never round beyond 4px.

## Component Stylings
- **Button**: mint solid + dark text, or violet solid + white text; radius 4px, padding 12px 28px, Inter 700 uppercase. Hover snaps in a `4px 4px 0` offset shadow + translate. Secondary = transparent with 2px violet outline.
- **Card**: panel background, 2px duo border (mint/violet alternating), radius 4px, 24–28px padding; giant index number + kicker + Clash title + Inter body. Hover offset-snaps. No dead internal whitespace.
- **Input**: panel fill, 2px violet outline, radius 4px; focus border switches to mint.
- **Nav**: 64px tall, canvas background, 2px mint/violet bottom line; wordmark left, uppercase kicker links + mint CTA right. Menu hover fills the text highlight with a violet field.
- **Chip**: mint or violet outline, Inter 700 uppercase, padding 4px 12px.

## Motion
Snappy. Scroll-in = opacity 0→1 + translateY(14px→0) + slight rotate(−2°→0) over 150ms. Hover = instant hard-offset shadow + translate(−2px, −2px); border swaps mint↔violet in 120ms. Easing `cubic-bezier(0.3, 0, 0.2, 1)`. No slow fades (>250ms), bounce, or parallax. `prefers-reduced-motion` drops transforms/rotation, keeping opacity only.

## Do's and Don'ts
**Do:** keep the mint + violet duo together; set headlines as oversized posters; fill empty voids with giant index numbers, duotone panels, and chips; build depth from hard-offset shadows and duo borders; misalign elements intentionally.
**Don't:** reduce the accent to one color; combine primary red/yellow with hard shadows; round cards past 4px or use emoji/glass; use gradient text or radial glow; put mint on small body text; use slow/bounce motion; leave flat dead voids or randomly floating fragments.

## Responsive Behavior
Content padding 20px mobile / 56px desktop; breakpoints at 768px and 1120px. The asymmetric zine layers collapse toward a single stacked column on mobile while preserving rotation and duo borders; display type scales via `clamp()`. Mobile nav becomes a 2px-bordered hamburger.

## Agent Prompt Guide
> Build this in the 'Acid Display Tech Zine' style: near-black canvas with a clashing acid-mint + ultraviolet DUO accent (never reduce to one), oversized Clash Display poster headlines, deliberately misaligned asymmetric zine layout (elements rotated −3~3deg, overlapping, breaking the 12-col grid), 2px duo-colored borders instead of shadows, hard-offset snap shadows (4px 4px 0) appearing instantly on hover with translate(−2px, −2px), uppercase 0.14em kickers in mint/violet, and snappy 120–180ms transitions. Fill empty voids with giant issue numbers and duotone panels — no flat dead space, no rounded cards, no gradients.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-acid-display-tech-zine` (authored spec, not extracted from a live URL), so all tokens are `manual` confidence. The acid-mint and ultraviolet accents trace to the pack's own color spec; derived neutrals (`#252530`, `#0C0C0F`) and the light-mode map are authored from those anchors. `destructive` intentionally reuses the ultraviolet accent because primary red is banned by the style. Display font is the free Clash Display (Fontshare); Space Grotesk is the practical Google-Fonts substitute for reproduction.