# Acid Chrome Y2K acid-green chrome on black: Syne ExtraBold in caps, pill buttons with a banded chrome stripe, hot-pink flares and Space Mono ticket details. For clubs, festivals, labels and music platforms. > 由 freedesignmd-library 提交 ac4258d5449a3c280aed4b1ac737684ce7646ede 的结构化规则转换；不是上游原有 Markdown。 ## 设计原则 Acid Chrome is a 2001 flyer pinned to a club wall. The canvas is near-black (`#07080a`), the hero color is an acid green (`#c6ff1a`) and the hero texture is a banded chrome stripe, bright, dark, bright, like a reflection on a bumper. Headlines are Syne ExtraBold in all caps at sizes that crowd the viewport, buttons are fat pills, and ticket information (doors, BPM, row, price) is set in Space Mono as if printed by a thermal receipt. A single hot-pink flare shows up in small doses: a sticker, a live dot, a sold-out stamp. ## 标志性设计 - `--chrome-stripe`: acid-green banded gradient on primary pills and headline fills - Syne ExtraBold in caps at display size, tight tracking, often cropped by the viewport edge - Sticker badges: rotated -4 degrees, 2px black outline, pink or green fill - Space Mono ticket rows: DOORS 23:00 / BPM 138 / ROW B7 / €22 - Infinite marquee ticker of lineup names under the nav, paused on hover ## 浅色配色 | 角色 | 值 | | --- | --- | | background | `#f0f2ea` | | foreground | `#0b0d08` | | card | `#fbfcf7` | | cardForeground | `#0b0d08` | | muted | `#e2e6d8` | | mutedForeground | `#4a5040` | | primary | `#b8f000` | | primaryForeground | `#0b0d08` | | secondary | `#dfe3d3` | | secondaryForeground | `#0b0d08` | | accent | `#d9f56a` | | accentForeground | `#2b3300` | | border | `rgba(11,13,8,0.18)` | | input | `rgba(11,13,8,0.34)` | | ring | `#3f5a00` | | destructive | `#c4143c` | | destructiveForeground | `#ffffff` | | success | `#0b7a45` | | successForeground | `#ffffff` | | warning | `#ffb020` | | warningForeground | `#1e1200` | ## 深色配色 | 角色 | 值 | | --- | --- | | background | `#07080a` | | foreground | `#f1f3ee` | | card | `#101214` | | cardForeground | `#f1f3ee` | | muted | `#1a1d20` | | mutedForeground | `#a1a79d` | | primary | `#c6ff1a` | | primaryForeground | `#0a0d02` | | secondary | `#1f2327` | | secondaryForeground | `#eef1e8` | | accent | `#2a3300` | | accentForeground | `#e6ff8a` | | border | `rgba(255,255,255,0.12)` | | input | `rgba(255,255,255,0.2)` | | ring | `#c6ff1a` | | destructive | `#ff5a7a` | | destructiveForeground | `#170409` | | success | `#4ef0a0` | | successForeground | `#03140b` | | warning | `#ffb020` | | warningForeground | `#1e1200` | ## 字体 ```json { "display": "Syne", "body": "Archivo", "mono": "Space Mono", "googleFontsUrl": "https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Archivo:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap", "fallbacks": { "display": "ui-sans-serif, system-ui, -apple-system, sans-serif", "body": "ui-sans-serif, system-ui, -apple-system, sans-serif", "mono": "ui-monospace, SFMono-Regular, Menlo, monospace" } } ``` ## 排版 ```json { "display": { "font": "display", "size": 112, "leading": 0.92, "weight": 800, "tracking": "-0.04em", "uppercase": true }, "h1": { "font": "display", "size": 64, "leading": 0.98, "weight": 800, "tracking": "-0.035em", "uppercase": true }, "h2": { "font": "display", "size": 32, "leading": 1.05, "weight": 700, "tracking": "-0.02em", "uppercase": true }, "h3": { "font": "display", "size": 20, "leading": 1.2, "weight": 700, "tracking": "-0.01em" }, "body": { "font": "body", "size": 16, "leading": 1.55, "weight": 400, "tracking": "0em" }, "small": { "font": "body", "size": 14, "leading": 1.5, "weight": 500, "tracking": "0em" }, "label": { "font": "mono", "size": 11, "leading": 1.3, "weight": 700, "tracking": "0.1em", "uppercase": true }, "mono": { "font": "mono", "size": 13, "leading": 1.5, "weight": 400, "tracking": "0em" } } ``` ## 间距 ```json [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 ] ``` ## 布局 ```json { "maxWidth": 1360, "columns": 12, "gutter": 20, "sectionY": 96, "sectionYMobile": 56, "measure": "52ch", "notes": [ "Edge-to-edge sections: headlines may bleed past the container and clip at the viewport.", "Lineup and ticket lists use full-width rows 72px tall with a mono time column.", "Keep a marquee ticker directly under the nav on landing pages, 40px tall." ] } ``` ## 圆角 ```json { "sm": "8px", "md": "14px", "lg": "24px", "xl": "36px", "full": "9999px" } ``` ## 动效 ```json { "duration": { "instant": 70, "fast": 130, "base": 220, "slow": 520 }, "easing": { "standard": "cubic-bezier(0.3, 0, 0.1, 1)", "out": "cubic-bezier(0.34, 1.56, 0.64, 1)", "in": "cubic-bezier(0.6, 0, 1, 0.6)" }, "reveal": { "distance": 24, "stagger": 50 }, "signature": { "name": "Sticker slap", "description": "Stickers and cards land with a springy out-curve that overshoots 6%, rotating from 8 degrees to their resting -4. Chrome pills shift their stripe 40% vertically on hover. The marquee ticker scrolls linearly at 40px per second and never eases." } } ``` ## 图像 ```json "High-contrast flash photography of crowds, hands and lasers, desaturated and printed through a green or pink duotone. Cut-out 3D chrome shapes (stars, spheres, wordmarks) float over photos. Always add film grain at 8% and a mono caption with date and venue." ``` ## 图标 ```json "Chunky 2px stroke icons with round caps at 24px, always inside a 40px circle outlined in `foreground`. Play and ticket icons fill with `primary` when active. Stars and sparkles are filled four-point shapes, used as bullets." ``` ## 组件规则 ```json { "button": { "base": "display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 30px; font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; border-radius: var(--radius-full); border: 1px solid transparent; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard)", "primary": { "rest": "background: var(--chrome-stripe); color: var(--primary-foreground); border-color: var(--foreground); box-shadow: var(--shadow-sm)", "hover": "transform: translate(-2px, -2px); box-shadow: var(--shadow-md)", "active": "transform: translate(2px, 2px); box-shadow: none" }, "secondary": { "rest": "background: var(--secondary); color: var(--secondary-foreground); border-color: var(--foreground)", "hover": "background: var(--accent); color: var(--accent-foreground)", "active": "transform: translate(2px, 2px)" }, "outline": { "rest": "background: transparent; color: var(--foreground); border-color: var(--foreground)", "hover": "background: var(--foreground); color: var(--background)", "active": "transform: translate(2px, 2px)" }, "ghost": { "rest": "background: transparent; color: var(--foreground)", "hover": "background: var(--ticket); color: var(--foreground)", "active": "background: var(--muted)" }, "focus": "outline: 3px solid var(--ring); outline-offset: 3px", "disabled": "opacity: 0.4; cursor: not-allowed; box-shadow: none; filter: grayscale(1)" }, "input": { "rest": "display: block; width: 100%; height: 52px; padding: 0 24px; font-family: var(--font-mono); font-size: 15px; color: var(--foreground); background: var(--card); border: 2px solid var(--foreground); border-radius: var(--radius-full); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard)", "placeholder": "color: var(--muted-foreground); opacity: 1", "hover": "border-color: var(--primary)", "focus": "border-color: var(--ring); box-shadow: var(--shadow-sm)", "invalid": "border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 22%, transparent)", "disabled": "opacity: 0.5; cursor: not-allowed; background: var(--muted)" }, "card": { "rest": "background: var(--card); color: var(--card-foreground); border: 2px solid var(--foreground); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 24px; transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out)", "hover": "transform: translate(-3px, -3px); box-shadow: var(--shadow-lg)" }, "badge": { "base": "--tone: var(--primary); --tone-foreground: var(--primary-foreground); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; white-space: nowrap", "solid": "background: var(--tone); color: var(--tone-foreground); border: 1px solid var(--tone)", "soft": "background: color-mix(in oklab, var(--tone) 18%, var(--card)); color: var(--foreground); border: 1px solid color-mix(in oklab, var(--tone) 34%, transparent)", "outline": "background: transparent; color: var(--foreground); border: 2px solid var(--foreground)" }, "nav": { "bar": "display: flex; align-items: center; gap: 4px; height: 68px; padding: 0 24px; background: color-mix(in oklab, var(--background) 86%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 2px solid var(--foreground)", "link": "padding: 6px 12px; border-radius: var(--radius-full); font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard)", "linkHover": "color: var(--foreground); background: var(--muted)", "linkActive": "color: var(--primary-foreground); background: var(--primary)" }, "table": { "table": "width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums", "th": "text-align: left; height: 40px; padding: 0 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--foreground); color: var(--background)", "td": "height: 60px; padding: 0 16px; border-bottom: 2px solid var(--border); color: var(--foreground); transition: background-color var(--duration-fast) var(--ease-standard)", "rowHover": "background: var(--accent); color: var(--accent-foreground)" }, "dialog": { "overlay": "position: fixed; inset: 0; background: rgba(7,8,10,0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 24px", "panel": "width: min(520px, 100%); background: var(--card); color: var(--card-foreground); border: 2px solid var(--foreground); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 32px" }, "tabs": { "list": "display: inline-flex; gap: 4px; padding: 4px; background: var(--muted); border-radius: var(--radius-full)", "tab": "height: 42px; padding: 0 16px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--muted-foreground); cursor: pointer; font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; transition: color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard)", "tabHover": "color: var(--foreground)", "tabActive": "background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm)" }, "link": { "rest": "color: var(--foreground); text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 3px; text-underline-offset: 4px; transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard)", "hover": "background: var(--primary); color: var(--primary-foreground); text-decoration-color: transparent" } } ``` ## 额外规则 ```json { "primary": "Acid green: primary pills, sticker fills, live indicators. On light it is a lime fill with black text, never a text color.", "ring": "Acid green on dark; deep olive on light so focus stays visible on pale canvas." } ``` ## 推荐做法 - Set display text in uppercase Syne ExtraBold and let it crowd the viewport - Give every interactive surface a hard offset shadow (`--shadow-md`) that collapses on press - Print ticket details in Space Mono with times in 24-hour format - Use pink `flare` for one sticker or live dot per screen at most - Pair acid-green fills with black text only ## 避免做法 - Don't use acid green as text on light backgrounds; it fails contrast - Don't use soft blurred shadows; the offset shadow is the only elevation - Don't mix chrome stripe with more than one other gradient on a screen - Don't set body copy in Syne; it's a display-only face - Don't use pink and green at equal weight; green leads, pink punctuates ## 来源 https://github.com/tammo1007/freedesignmd-library/blob/ac4258d5449a3c280aed4b1ac737684ce7646ede/design-systems/acid-chrome.ts 源码按上游 MIT 许可分发，详见随附 LICENSE。