# Acid Display Tech Zine 짙은 캔버스 위에서 애시드 민트·울트라바이올렛 듀오가 충돌하고, 굵은 포스터 디스플레이 활자와 의도적으로 어긋난 비대칭 진(zine) 레이아웃·하드 오프셋 스냅 모션으로 짠 테크 매거진 스타일. - taxonomy: cinematic-dark · acid-tech-zine, dark-canvas, duo-accent, poster-display, asymmetric-zine, hard-offset · complexity=high - page types: landing, editorial, marketing, portfolio - best for: 테크 매거진·에디토리얼 랜딩, 제품/이슈 발표 히어로, 듀오 강조가 필요한 브랜드 캠페인 - avoid for: 데이터 밀도가 높은 대시보드, 차분한 기업 문서 사이트, 접근성상 저대비 본문이 많은 화면 - provenance: authored (design-diversity 팩 'web-acid-display-tech-zine' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual ## Design rules # 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. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Acid Display Tech Zine — theme.css (generated, do not edit) */ :root { --radius: 4px; --radius-selector: 2px; --radius-field: 4px; --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace; --font-display: 'Clash Display', 'Arial Black', Helvetica, sans-serif; --spacing: 8px; --shadow: 4px 4px 0px 0px color-mix(in oklab, oklch(0.579 0.247 288.2) 100%, transparent); --ks-display-weight: 700; --ks-display-tracking: -0.02em; --background: oklch(0.985 0.002 285); --foreground: oklch(0.180 0.008 285.5); --card: oklch(1 0 0); --card-foreground: oklch(0.180 0.008 285.5); --popover: oklch(1 0 0); --popover-foreground: oklch(0.180 0.008 285.5); --primary: oklch(0.860 0.170 159.4); --primary-foreground: oklch(0.175 0.008 285.5); --secondary: oklch(0.945 0.006 285); --secondary-foreground: oklch(0.220 0.010 285.3); --muted: oklch(0.955 0.004 285); --muted-foreground: oklch(0.500 0.020 285.9); --accent: oklch(0.560 0.240 288.2); --accent-foreground: oklch(0.985 0.002 285); --destructive: oklch(0.560 0.240 288.2); --destructive-foreground: oklch(0.985 0.002 285); --border: oklch(0.800 0.170 159.4); --input: oklch(0.900 0.006 285); --ring: oklch(0.560 0.240 288.2); --chart-1: oklch(0.860 0.170 159.4); --chart-2: oklch(0.560 0.240 288.2); --chart-3: oklch(0.500 0.020 285.9); --chart-4: oklch(0.700 0.130 165); --chart-5: oklch(0.680 0.190 290); } .dark { --background: oklch(0.175 0.008 285.5); --foreground: oklch(0.943 0.002 285); --card: oklch(0.225 0.014 285.3); --card-foreground: oklch(0.943 0.002 285); --popover: oklch(0.225 0.014 285.3); --popover-foreground: oklch(0.943 0.002 285); --primary: oklch(0.892 0.180 159.4); --primary-foreground: oklch(0.175 0.008 285.5); --secondary: oklch(0.269 0.020 285.0); --secondary-foreground: oklch(0.943 0.002 285); --muted: oklch(0.225 0.014 285.3); --muted-foreground: oklch(0.637 0.016 285.9); --accent: oklch(0.579 0.247 288.2); --accent-foreground: oklch(0.943 0.002 285); --destructive: oklch(0.579 0.247 288.2); --destructive-foreground: oklch(0.943 0.002 285); --border: oklch(0.892 0.180 159.4); --input: oklch(0.269 0.020 285.0); --ring: oklch(0.579 0.247 288.2); --chart-1: oklch(0.892 0.180 159.4); --chart-2: oklch(0.579 0.247 288.2); --chart-3: oklch(0.637 0.016 285.9); --chart-4: oklch(0.700 0.130 165); --chart-5: oklch(0.720 0.180 290); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

Field Report / Acid Issue

Acid signal,
violet noise.

A dark-canvas tech zine where two accents clash on purpose — mint and ultraviolet, never one.

Read issue Archive

01

Signal

Duo or nothing

Mint and violet carry the charge together.

02

Craft

Hard offset, no blur

Depth is a 4px snap shadow, not a gradient.

03

Layout

Misaligned on purpose

Rotated panels break the grid like a zine.

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/acid-display-tech-zine.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `