/
design.md
Back to directory
dark · futuristic · premium · y2k · modern

Acid Chrome.

Liquid chrome and oil-slick iridescence on onyx — holographic gradients, polished metal CTAs, and prismatic accents. Y2K reborn as molten metal, not neon. Chrome is the color.

01 · Preview

The kitchen sink.

Acid.app
ProductPricingDocsAbout
Sign inGet started
dark · futuristic · premium

Build with Acid Chrome.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational
01 · Color

Palette

primary
#F2F4F8
secondary
#8089A0
tertiary
#FF4DD8
neutral
#06070C
surface
#0E1018
02 · Typography

Type scale

display
The quick brown fox
h1
A major section heading
h2
A subsection title
body
Body copy in the system's body font.
03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →
Disabled
04 · Inputs

Form controls

Email
iris@studio.com
Password
••••••••••••
Bio
Designing for long-form publications. Based in Kyoto.
05 · Choices

Select & toggle

Plan
Starter
Free forever
Pro
$18 / month
Team
$48 / month
Toggles
Public profile
Require two-factor
Auto-accept invites
06 · Tags & badges

Labeling

NeutralAccentSolidWith dot
NEWBETAv2.0LIVE
07 · Cards

Cards

Feature
Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →
Metric
24,810
▲ +12.4% vs last week
08 · Navigation

Tabs & breadcrumb

Overview
Analytics
Members
Workspace/Projects/Heritage System
09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px
2px
5px
8px · base
10px
12px
14px
16px
18px
20px
21px
10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm
6px
md
12px
lg
20px
pill
9999px
11 · Elevation

Depth & elevation

00 · Flat
Elevation 00
01 · Low
Elevation 01
02 · Medium
Elevation 02
03 · High
Elevation 03
12 · Data

Charts

Weekly revenue
$48,210
M
T
W
T
F
S
S
Active sessions
2,184
02 · The file

DESIGN.md

markdown
1---
2name: "Acid Chrome"
3description: "Liquid chrome and oil-slick iridescence on onyx — holographic gradients, polished metal CTAs, and prismatic accents. Y2K reborn as molten metal, not neon. Chrome is the color."
4tags: [dark, futuristic, premium, y2k, modern]
5colors:
6  primary:   "#F2F4F8"
7  secondary: "#8089A0"
8  tertiary:  "#FF4DD8"
9  neutral:   "#06070C"
10  surface:   "#0E1018"
11typography:
12  display: Syne
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "5rem / 1 / 700 / -0.035em"
17    h1:   "3rem / 1.05 / 700 / -0.03em"
18    h2:   "1.5rem / 1.2 / 600 / -0.015em"
19    body: "1rem / 1.55 / 400 / -0.005em"
20radius:
21  sm: 6px
22  md: 12px
23  lg: 20px
24  pill: 9999px
25shadows:
26  card:   "0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 32px -16px rgba(255, 77, 216, 0.18), 0 12px 32px -16px rgba(0, 229, 255, 0.14)"
27  button: "inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 8px 24px -8px rgba(255, 77, 216, 0.30)"
28borders:
29  card:    "1px solid rgba(242, 244, 248, 0.10)"
30  divider: "rgba(242, 244, 248, 0.06)"
31buttons:
32  primary:
33    background: linear-gradient(180deg, #F8FAFF 0%, #C4CCDA 45%, #6F7888 100%)
34    color: #0A0C12
35    border: 1px solid rgba(255, 255, 255, 0.35)
36    shape: pill
37    padding: 13px 26px
38    font: display / 700 / 0.9375rem / -0.005em
39    shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 8px 24px -8px rgba(255, 77, 216, 0.30)
40  secondary:
41    background: linear-gradient(95deg, #FF4DD8 0%, #B14DFF 35%, #4D9FFF 70%, #00E5C2 100%)
42    color: #06070C
43    border: 1px solid rgba(255, 255, 255, 0.25)
44    shape: pill
45    padding: 13px 26px
46    font: display / 700 / 0.9375rem / -0.005em
47    shadow: 0 8px 24px -8px rgba(177, 77, 255, 0.40)
48  outline:
49    background: rgba(14, 16, 24, 0.60)
50    color: #F2F4F8
51    border: 1px solid rgba(242, 244, 248, 0.22)
52    shape: pill
53    padding: 12px 24px
54    font: body / 500 / 0.9375rem / -0.005em
55  ghost:
56    background: transparent
57    color: #FF4DD8
58    border: none
59    shape: pill
60    padding: 11px 14px
61    font: body / 600 / 0.9375rem / -0.005em
62    hover: underline
63charts:
64  variant: line
65  stroke_width: 2
66  gridlines: false
67  highlight: last
68  dot_marker: true
69  axis_color: "#5A6378"
70  palette: ["#FF4DD8", "#B14DFF", "#4D9FFF", "#00E5C2"]
71fonts_url: "https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
72dependencies: ["lucide-react"]
73---
74 
75# Acid Chrome
76 
77## AI Build Instructions
78 
79> **Read this section before writing any code.** The rules below
80> are non-negotiable. Every value used in the UI must come from this
81> file's frontmatter — never substitute, approximate, or invent new
82> colors, fonts, radii, or shadows. If a value is missing, ask the
83> user before adding one.
84 
85### 1 · Your role
86 
87You are building UI for a project that has adopted **Acid Chrome** as its
88design system. Treat `DESIGN.md` as the single source of truth.
89Your job is to translate the user's product requirements into
90components and pages that look like they were designed by the same
91person who authored this file.
92 
93### 2 · Token compliance
94 
95- Pull every color, font family, radius, shadow, and spacing value
96  from the frontmatter at the top of this file.
97- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
98  hard-code hex values that bypass the system.
99- When a token can be expressed as a CSS variable, declare it once
100  in your global stylesheet and reference it everywhere downstream.
101- The Google Fonts `<link>` is provided in the Typography section.
102  Add it to `<head>` before any component renders.
103 
104### 3 · Component recipes
105 
106Use these recipes verbatim when building the corresponding component.
107 
108#### Buttons
109 
110Four variants are defined. Pick one — never blend variants or invent a fifth.
111 
112- **Primary** — pill shape, bg `linear-gradient(180deg, #F8FAFF 0%, #C4CCDA 45%, #6F7888 100%)`, text `#0A0C12`, border `1px solid rgba(255, 255, 255, 0.35)`, padding `13px 26px`, weight `700`, shadow `inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 8px 24px -8px rgba(255, 77, 216, 0.30)`.
113- **Secondary** — pill shape, bg `linear-gradient(95deg, #FF4DD8 0%, #B14DFF 35%, #4D9FFF 70%, #00E5C2 100%)`, text `#06070C`, border `1px solid rgba(255, 255, 255, 0.25)`, padding `13px 26px`, weight `700`, shadow `0 8px 24px -8px rgba(177, 77, 255, 0.40)`.
114- **Outline** — pill shape, bg `rgba(14, 16, 24, 0.60)`, text `#F2F4F8`, border `1px solid rgba(242, 244, 248, 0.22)`, padding `12px 24px`, weight `500`.
115- **Ghost** — pill shape, text `#FF4DD8`, padding `11px 14px`, weight `600`.
116 
117Reach for **primary** as the single dominant CTA per screen.
118**Secondary** for the supporting action. **Outline** for tertiary
119actions in toolbars. **Ghost** for inline links and table actions.
120 
121#### Cards
122 
123- Background: `#0E1018`
124- Border: `1px solid rgba(242, 244, 248, 0.10)`
125- Shadow: `0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 32px -16px rgba(255, 77, 216, 0.18), 0 12px 32px -16px rgba(0, 229, 255, 0.14)`
126- Radius: `radius.lg` (`20px`)
127- Internal padding: `20px` for compact cards, `24–28px` for content cards.
128 
129#### Tabs
130 
131Variant: `pill`. Segmented control inside a tinted track. Active tab gets a filled pill in the accent color.
132Tabs are uppercased with `0.08em` tracking.
133 
134#### Charts
135 
136- Bar/line variant: `line`
137- No gridlines — let the bars/lines carry the data.
138- Highlight strategy: `last` — emphasize a single bar/point per chart.
139- Use the declared palette in order: `#FF4DD8`, `#B14DFF`, `#4D9FFF`, `#00E5C2`.
140 
141#### Typography pairings
142 
143- **Display (`Syne`)** — h1, h2, hero headlines, brand wordmarks.
144- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
145- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
146 
147### 4 · Hard constraints
148 
149Never do any of the following without explicit instruction from the user:
150 
151- Introduce a new color, font, radius, or shadow that isn't declared above.
152- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
153- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
154- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
155- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
156 
157### 5 · Before you finish — verify
158 
159Run through this checklist for every screen you produce:
160 
161- [ ] Every color used appears in the Colors table above.
162- [ ] Headlines use the display font; body copy uses the body font.
163- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
164- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
165- [ ] Cards and dividers use the declared border + shadow tokens.
166- [ ] No values were invented; if you needed something missing, you stopped and asked.
167 
168---
169 
170## Overview
171Acid Chrome is Y2K rebuilt around polished metal instead of neon. Where Neon Y2K is sharp, glowing and electric, Acid Chrome is **molten, prismatic, and cool** — liquid chrome caps with cool top highlights and dark bottom relief, oil-slick iridescent secondary buttons, and a single hot magenta stop that drifts through the entire palette like an oil spill on wet asphalt.
172 
173This is the language of luxury hardware launches, cyber fashion, music client work, and any product that wants to feel **expensive AND alien**.
174 
175## Atmosphere
176- Page canvas is **onyx #06070C** — deep blue-black with a microscopic cyan cast that makes chrome surfaces refract correctly.
177- Cards sit at **#0E1018** with a 10% pearl hairline border. The lift is two faint colored halos — magenta + cyan — at 18% / 14% opacity. Not a glow. A refraction.
178- The signature button is the **liquid chrome pill** — a vertical 3-stop silver gradient (pearl → steel → graphite) with a 55% white inner top highlight, 25% black inner bottom relief, and a soft magenta underglow. It reads like a polished aluminum cap caught under a single prismatic light.
179- The secondary is the **oil-slick pill** — a 95° horizontal sweep through magenta → violet → blue → mint. This is the only place in the system where the full prism appears.
180 
181## Color
182- **Pearl #F2F4F8** — primary text. Cool, slightly cyan.
183- **Iridescent Magenta #FF4DD8** — the prismatic accent stop. Used in card halos, ghost links, chart highlights.
184- **Pewter #8089A0** — secondary text, captions, axis labels.
185- **Onyx #06070C** — page canvas.
186- **Surface #0E1018** — card fallback.
187 
188The oil-slick gradient stops (**#FF4DD8 → #B14DFF → #4D9FFF → #00E5C2**) appear only in: the secondary button, the chart line, and at most one decorative accent per page. Their scarcity is the system.
189 
190## Typography
191- **Display: Syne** at 5rem / 700, -3.5% tracking. Geometric futurism with character.
192- **Body: Inter** at 1rem for paragraphs and UI.
193- **Mono: JetBrains Mono** for spec callouts.
194 
195| Role | Font | Size | Weight | Tracking |
196|------|------|------|--------|----------|
197| Hero | Syne | 5rem | 700 | -0.035em |
198| H1 | Syne | 3rem | 700 | -0.03em |
199| H2 | Syne | 1.5rem | 600 | -0.015em |
200| Body | Inter | 1rem | 400 | -0.005em |
201 
202## The Chrome Pill (signature)
203The primary CTA is the system's defining gesture. Build it with all four stacked effects:
204 
205```css
206.chrome-pill {
207  background: linear-gradient(180deg, #F8FAFF 0%, #C4CCDA 45%, #6F7888 100%);
208  border: 1px solid rgba(255, 255, 255, 0.35);
209  border-radius: 9999px;
210  box-shadow:
211    inset 0 1px 0 rgba(255, 255, 255, 0.55),   /* cool top highlight */
212    inset 0 -1px 0 rgba(0, 0, 0, 0.25),         /* dark bottom relief */
213    0 8px 24px -8px rgba(255, 77, 216, 0.30);   /* prismatic underglow */
214  color: #0A0C12;
215}
216```
217 
218The double inset stroke is what sells the polished metal — never ship the chrome pill without both.
219 
220## The Oil-Slick Pill
221Secondary CTA. Use the 95° horizontal sweep — not vertical, not radial. The angle matters: it's the direction light travels across an oil spill on wet street.
222 
223## Buttons
224All four are pills. Sharp corners are forbidden in this system.
225 
226- **Primary** — liquid chrome cap. Once per view, max.
227- **Secondary** — oil-slick iridescent sweep. Once per view, max.
228- **Outline** — onyx fill at 60% with a 22% pearl hairline. The everyday tertiary.
229- **Ghost** — bare iridescent magenta label, hover underline.
230 
231## Charts & Data
232A single 2px line over onyx. The line travels through the iridescent palette — magenta to cyan — with a small magenta dot at the latest value. No gridlines, no fills. Axis labels in pewter #5A6378.
233 
234## Do's and Don'ts
235- ✅ Always pair the chrome pill with both inset strokes (top white + bottom black). The double-stroke IS the metallic edge.
236- ✅ The oil-slick gradient appears in **at most three places per page**: the secondary button, the chart line, and one decorative accent.
237- ✅ Card halos are **two colored shadows at 14–18%**, not a glow. Refraction, not luminance.
238- ✅ Onyx (#06070C), not pure black. The cyan cast makes chrome read correctly.
239- ❌ No flat solid CTAs. The primary is always chrome; the secondary is always oil-slick.
240- ❌ No saturated single-color glows like Neon Y2K. The energy here is **prismatic**, not electric.
241- ❌ No serifs. No display fonts other than Syne.
242- ❌ No sharp corners on buttons. Pills only.
243 
244---
245 
246## Tokens
247 
248> Generated from the same source the live preview renders from.
249> Treat the values below as the contract — never substitute approximations.
250 
251### Colors
252 
253| Role      | Value |
254|-----------|-------|
255| primary   | `#F2F4F8` |
256| secondary | `#8089A0` |
257| tertiary  | `#FF4DD8` |
258| neutral   | `#06070C` |
259| surface   | `#0E1018` |
260 
261### Typography
262 
263- **Display:** Syne
264- **Body:** Inter
265- **Mono:** JetBrains Mono
266 
267| Role | size / leading / weight / tracking |
268|------|------------------------------------|
269| Hero | 5rem / 1 / 700 / -0.035em |
270| H1   | 3rem / 1.05 / 700 / -0.03em |
271| H2   | 1.5rem / 1.2 / 600 / -0.015em |
272| Body | 1rem / 1.55 / 400 / -0.005em |
273 
274### Radius
275 
276- sm: `6px`
277- md: `12px`
278- lg: `20px`
279- pill: `9999px`
280 
281### Shadows
282 
283- **card:** `0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 32px -16px rgba(255, 77, 216, 0.18), 0 12px 32px -16px rgba(0, 229, 255, 0.14)`
284- **button:** `inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 8px 24px -8px rgba(255, 77, 216, 0.30)`
285 
286### Borders
287 
288- **card:** `1px solid rgba(242, 244, 248, 0.10)`
289- **divider:** `rgba(242, 244, 248, 0.06)`
290 
291### Buttons
292 
293Four variants, each fully tokenized. The preview renders from these exact values.
294 
295#### Primary
296 
297| Property | Value |
298|----------|-------|
299| shape | `pill` |
300| background | `linear-gradient(180deg, #F8FAFF 0%, #C4CCDA 45%, #6F7888 100%)` |
301| color | `#0A0C12` |
302| border | `1px solid rgba(255, 255, 255, 0.35)` |
303| padding | `13px 26px` |
304| fontFamily | `display` |
305| fontWeight | `700` |
306| fontSize | `0.9375rem` |
307| tracking | `-0.005em` |
308| shadow | `inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 8px 24px -8px rgba(255, 77, 216, 0.30)` |
309 
310#### Secondary
311 
312| Property | Value |
313|----------|-------|
314| shape | `pill` |
315| background | `linear-gradient(95deg, #FF4DD8 0%, #B14DFF 35%, #4D9FFF 70%, #00E5C2 100%)` |
316| color | `#06070C` |
317| border | `1px solid rgba(255, 255, 255, 0.25)` |
318| padding | `13px 26px` |
319| fontFamily | `display` |
320| fontWeight | `700` |
321| fontSize | `0.9375rem` |
322| tracking | `-0.005em` |
323| shadow | `0 8px 24px -8px rgba(177, 77, 255, 0.40)` |
324 
325#### Outline
326 
327| Property | Value |
328|----------|-------|
329| shape | `pill` |
330| background | `rgba(14, 16, 24, 0.60)` |
331| color | `#F2F4F8` |
332| border | `1px solid rgba(242, 244, 248, 0.22)` |
333| padding | `12px 24px` |
334| fontFamily | `body` |
335| fontWeight | `500` |
336| fontSize | `0.9375rem` |
337| tracking | `-0.005em` |
338 
339#### Ghost
340 
341| Property | Value |
342|----------|-------|
343| shape | `pill` |
344| background | `transparent` |
345| color | `#FF4DD8` |
346| border | `none` |
347| padding | `11px 14px` |
348| fontFamily | `body` |
349| fontWeight | `600` |
350| fontSize | `0.9375rem` |
351| tracking | `-0.005em` |
352| hoverHint | `underline` |
353 
354### Charts
355 
356| Property | Value |
357|----------|-------|
358| variant | `line` |
359| strokeWidth | `2` |
360| gridlines | `false` |
361| highlight | `last` |
362| dotMarker | `true` |
363| axisColor | `#5A6378` |
364| palette | `#FF4DD8`, `#B14DFF`, `#4D9FFF`, `#00E5C2` |
365
03 · How to use it

Wire it into your agent.

markdown
# CLAUDE.md
 
Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.
04 · Required setup

Three snippets.

Google Fonts link

html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Syne"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#F2F4F8',
        secondary: '#8089A0',
        accent:    '#FF4DD8',
        neutral:   '#06070C',
        surface:   '#0E1018',
      },
      borderRadius: {
        sm: '6px',
        md: '12px',
        lg: '20px',
      },
    },
  },
};
05 · Keep browsing

Try another system.

Gunmetal Forge

Dark brushed metallic. Anthracite canvas with cool brushed-steel CTAs catching a polished top-edge highlight under directional light. Premium hardware in dark theme — pro tools, audio, automotive.

metallicdarkpremiumhardwaremodern
Gunmetal.app
ProductPricingDocsAbout
Sign inGet started
metallic · dark · premium

Build with Gunmetal Forge.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational

Kinfolk Stone

Wabi-sabi calm. Warm stone and oat tones, asymmetric editorial layout, crimson hairline accent, classical serif lyrics. Slow, considered, quietly luxurious.

editorialminimallightmagazine
Kinfolk.app
ProductPricingDocsAbout
Sign inGet started
editorial · minimal · light

Build with Kinfolk Stone.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational