1---
2name: "Liquid Metal"
3description: "Dark graphite glassmorphism — heavy 48px backdrop blur on near-opaque graphite panes, hairline pewter borders, and brushed-silver text accents. No color, no glow, no aurora. Just clean machined glass over a flat charcoal canvas with subtle metallic gradients on display type."
4tags: [dark, glass, minimal, premium, modern]
5colors:
6  primary:   "#E8EAEE"
7  secondary: "#8C92A0"
8  tertiary:  "#C8CDD6"
9  neutral:   "#0E1013"
10  surface:   "#15181D"
11typography:
12  display: Inter
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.25rem / 1.04 / 600 / -0.035em"
17    h1:   "2.75rem / 1.08 / 600 / -0.03em"
18    h2:   "1.625rem / 1.2 / 500 / -0.02em"
19    body: "1rem / 1.55 / 400 / -0.005em"
20radius:
21  sm: 8px
22  md: 14px
23  lg: 20px
24  pill: 9999px
25shadows:
26  card:   "0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(232, 234, 238, 0.10)"
27  button: "inset 0 1px 0 rgba(232, 234, 238, 0.14)"
28borders:
29  card:    "1px solid rgba(220, 225, 235, 0.08)"
30  divider: "rgba(220, 225, 235, 0.06)"
31glass:
32  surface: "rgba(30, 34, 40, 0.28)"
33  blur:    64px
34  saturate: 115%
35  border:  "1px solid rgba(220, 225, 235, 0.14)"
36  shadow:  "0 1px 0 rgba(0, 0, 0, 0.25)"
37  inner_highlight: "inset 0 1px 0 rgba(232, 234, 238, 0.10)"
38  backdrop: "radial-gradient(at 18% 22%, rgba(60, 66, 76, 0.55) 0%, transparent 55%), radial-gradient(at 82% 78%, rgba(36, 40, 48, 0.65) 0%, transparent 50%), radial-gradient(at 50% 50%, rgba(48, 52, 60, 0.35) 0%, transparent 65%), #0E1115"
39buttons:
40  primary:
41    background: linear-gradient(180deg, rgba(232, 234, 238, 0.22) 0%, rgba(180, 188, 200, 0.10) 100%)
42    color: #F4F6FA
43    border: 1px solid rgba(232, 234, 238, 0.32)
44    shape: pill
45    padding: 12px 24px
46    font: 600 / 0.9375rem / -0.01em
47    shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20)
48    backdrop_blur: 40px
49    backdrop_saturate: 130%
50  secondary:
51    background: rgba(40, 46, 54, 0.28)
52    color: #E8EAEE
53    border: 1px solid rgba(220, 225, 235, 0.14)
54    shape: pill
55    padding: 12px 24px
56    font: 500 / 0.9375rem / -0.01em
57    shadow: inset 0 1px 0 rgba(232, 234, 238, 0.08)
58    backdrop_blur: 40px
59    backdrop_saturate: 120%
60  outline:
61    background: rgba(20, 23, 28, 0.40)
62    color: #E8EAEE
63    border: 1px solid rgba(220, 225, 235, 0.14)
64    shape: pill
65    padding: 11px 22px
66    font: 500 / 0.9375rem / -0.01em
67    backdrop_blur: 24px
68    backdrop_saturate: 110%
69  ghost:
70    background: transparent
71    color: rgba(232, 234, 238, 0.70)
72    border: none
73    shape: pill
74    padding: 11px 16px
75    font: 500 / 0.9375rem
76charts:
77  variant: line
78  stroke_width: 1.75
79  gridlines: false
80  highlight: last
81  dot_marker: true
82  axis_color: "#5A6070"
83  palette: ["#C8CDD6", "#8C92A0", "#5A6070"]
84fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
85dependencies: ["lucide-react"]
86---
87 
88# Liquid Metal
89 
90## AI Build Instructions
91 
92> **Read this section before writing any code.** The rules below
93> are non-negotiable. Every value used in the UI must come from this
94> file's frontmatter — never substitute, approximate, or invent new
95> colors, fonts, radii, or shadows. If a value is missing, ask the
96> user before adding one.
97 
98### 1 · Your role
99 
100You are building UI for a project that has adopted **Liquid Metal** as its
101design system. Treat `DESIGN.md` as the single source of truth.
102Your job is to translate the user's product requirements into
103components and pages that look like they were designed by the same
104person who authored this file.
105 
106### 2 · Token compliance
107 
108- Pull every color, font family, radius, shadow, and spacing value
109  from the frontmatter at the top of this file.
110- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
111  hard-code hex values that bypass the system.
112- When a token can be expressed as a CSS variable, declare it once
113  in your global stylesheet and reference it everywhere downstream.
114- The Google Fonts `<link>` is provided in the Typography section.
115  Add it to `<head>` before any component renders.
116 
117### 3 · Component recipes
118 
119Use these recipes verbatim when building the corresponding component.
120 
121#### Buttons
122 
123Four variants are defined. Pick one — never blend variants or invent a fifth.
124 
125- **Primary** — pill shape, bg `linear-gradient(180deg, rgba(232, 234, 238, 0.22) 0%, rgba(180, 188, 200, 0.10) 100%)`, text `#F4F6FA`, border `1px solid rgba(232, 234, 238, 0.32)`, padding `12px 24px`, weight `600`, shadow `inset 0 1px 0 rgba(255, 255, 255, 0.20)`.
126- **Secondary** — pill shape, bg `rgba(40, 46, 54, 0.28)`, text `#E8EAEE`, border `1px solid rgba(220, 225, 235, 0.14)`, padding `12px 24px`, weight `500`, shadow `inset 0 1px 0 rgba(232, 234, 238, 0.08)`.
127- **Outline** — pill shape, bg `rgba(20, 23, 28, 0.40)`, text `#E8EAEE`, border `1px solid rgba(220, 225, 235, 0.14)`, padding `11px 22px`, weight `500`.
128- **Ghost** — pill shape, text `rgba(232, 234, 238, 0.70)`, padding `11px 16px`, weight `500`.
129 
130Reach for **primary** as the single dominant CTA per screen.
131**Secondary** for the supporting action. **Outline** for tertiary
132actions in toolbars. **Ghost** for inline links and table actions.
133 
134#### Cards
135 
136- Background: `#15181D`
137- Border: `1px solid rgba(220, 225, 235, 0.08)`
138- Shadow: `0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(232, 234, 238, 0.10)`
139- Radius: `radius.lg` (`20px`)
140- Internal padding: `20px` for compact cards, `24–28px` for content cards.
141 
142> This system ships a **glass treatment** — see the Glass token table.
143> Apply `backdrop-filter: blur(64px)` to translucent panes.
144> The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract.
145 
146#### Charts
147 
148- Bar/line variant: `line`
149- No gridlines — let the bars/lines carry the data.
150- Highlight strategy: `last` — emphasize a single bar/point per chart.
151- Use the declared palette in order: `#C8CDD6`, `#8C92A0`, `#5A6070`.
152 
153#### Typography pairings
154 
155- **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks.
156- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
157- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
158 
159### 4 · Hard constraints
160 
161Never do any of the following without explicit instruction from the user:
162 
163- Introduce a new color, font, radius, or shadow that isn't declared above.
164- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
165- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
166- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
167- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
168 
169### 5 · Before you finish — verify
170 
171Run through this checklist for every screen you produce:
172 
173- [ ] Every color used appears in the Colors table above.
174- [ ] Headlines use the display font; body copy uses the body font.
175- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
176- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
177- [ ] Cards and dividers use the declared border + shadow tokens.
178- [ ] No values were invented; if you needed something missing, you stopped and asked.
179 
180---
181 
182## Overview
183Liquid Metal is dark glassmorphism stripped of every color cue. Where Aurora Glass detonates a vivid mesh behind translucent panes, Liquid Metal sits on a **flat charcoal canvas** — two neutral stops, no orbs, no glow. The glass itself does the talking: 48px backdrop blur, graphite tint at 55% opacity, cool pewter hairlines, and a metallic top-edge gloss that reads as machined aluminum under frost.
184 
185This is the industrial machined-metal language: industrial, cool, premium. Every surface feels milled.
186 
187## Atmosphere
188- The page background is a **flat vertical graphite gradient** — `#14171C` to `#0B0D11`. No mesh, no aurora, no color. The neutrality is deliberate: it makes the glass read as glass, not as a tinted overlay.
189- Cards are **graphite panes** at 55% opacity with a heavy 48px blur. They have weight — closer to brushed steel under glass than to floating bubbles.
190- Buttons are **frosted pills**. The primary uses a vertical silver gradient (18% → 10%) to suggest a brushed metal cap with a cool hairline rim. No color, no glow shadow.
191- Borders are **cool pewter hairlines** at 10–14% — they catch light without ever introducing hue.
192- Shadows are **deep and heavy** (80px blur, -24px y, 75% opacity) paired with a 1px cool top highlight and a 1px dark bottom relief. That double-stroke is the metallic edge.
193 
194## Liquid Metal Text Accents
195Display type uses **brushed silver** as the accent stop — `#C8CDD6` paired with the primary ivory `#E8EAEE` to create a subtle metallic gradient on hero titles, callout numerals, and accent words. Apply it with `background-clip: text` and a 180° linear gradient (silver top, ivory bottom) so the text reads like polished steel under cool light.
196 
197```css
198.metal-text {
199  background: linear-gradient(180deg, #E8EAEE 0%, #C8CDD6 60%, #8C92A0 100%);
200  -webkit-background-clip: text;
201  background-clip: text;
202  color: transparent;
203}
204```
205 
206Use this on hero words, large numerals, and section accents only — never on body text.
207 
208## Typography
209**Inter** at every level. Hero compresses to -3.5% tracking; body breathes at -0.5%. Display weight is **600**, never 700 — heavy weights look plastic on glass.
210 
211| Role | Size      | Weight | Tracking  |
212|------|-----------|--------|-----------|
213| Hero | 4.25rem   | 600    | -0.035em  |
214| H1   | 2.75rem   | 600    | -0.03em   |
215| H2   | 1.625rem  | 500    | -0.02em   |
216| Body | 1rem      | 400    | -0.005em  |
217 
218## Color
219- **Ivory #E8EAEE** — primary text on graphite glass. Cool, slightly cyan-leaning.
220- **Brushed Silver #C8CDD6** — the metallic accent stop. Used in display gradients only, never as a solid fill.
221- **Pewter #8C92A0** — captions, axis labels, secondary chrome.
222- **Graphite #15181D** — opaque surface fallback when glass is not available.
223- **Charcoal #0E1013** — the page canvas.
224 
225**No saturated colors exist in this system.** No mint, no violet, no rose. The accent is brightness, not hue.
226 
227## Buttons
228All four are frosted glass pills. **There are no solid buttons.**
229 
230- **Primary** — brushed silver glass with a vertical 18%→10% white gradient, cool hairline border at 28%, double-stroke shadow (cool top, dark bottom). Reads as a polished metal cap.
231- **Secondary** — graphite pane at 55%, hairline pewter border, 32px backdrop blur.
232- **Outline** — whisper-glass at 40% with a 14% hairline ring.
233- **Ghost** — bare label, no surface.
234 
235All four are **pills** (9999px). Sharp corners only on hairlines.
236 
237## Charts & Data
238A single 1.75px brushed-silver line over the flat graphite canvas. **No gridlines, no fills, no second color.** A small dot marks the latest value. Axis labels in pewter `#5A6070`. The chart should read like an oscilloscope sweep on a darkroom monitor.
239 
240## Do's and Don'ts
241- ✅ Always render the flat graphite canvas. The neutrality is what makes the glass read as metal.
242- ✅ Use `background-clip: text` with the silver gradient on hero accents.
243- ✅ Pair every glass surface with a cool top highlight (1px white at 14–22%) AND a dark bottom relief (1px black at 40%). The double-stroke is the metallic edge.
244- ✅ Keep cards at ~55% opacity with 48px blur — heavier than aurora, never bubble-light.
245- ❌ No colored gradients anywhere. No mint, no blue, no violet. Brightness only.
246- ❌ No glow shadows. Shadows are deep and dark, not luminous.
247- ❌ No saturation boost on the backdrop — keep `saturate: 100%`. Color in the canvas would defeat the metallic read.
248- ❌ No solid CTAs. Even the primary is frosted glass with a silver gradient.
249 
250---
251 
252## Tokens
253 
254> Generated from the same source the live preview renders from.
255> Treat the values below as the contract — never substitute approximations.
256 
257### Colors
258 
259| Role      | Value |
260|-----------|-------|
261| primary   | `#E8EAEE` |
262| secondary | `#8C92A0` |
263| tertiary  | `#C8CDD6` |
264| neutral   | `#0E1013` |
265| surface   | `#15181D` |
266 
267### Typography
268 
269- **Display:** Inter
270- **Body:** Inter
271- **Mono:** JetBrains Mono
272 
273| Role | size / leading / weight / tracking |
274|------|------------------------------------|
275| Hero | 4.25rem / 1.04 / 600 / -0.035em |
276| H1   | 2.75rem / 1.08 / 600 / -0.03em |
277| H2   | 1.625rem / 1.2 / 500 / -0.02em |
278| Body | 1rem / 1.55 / 400 / -0.005em |
279 
280### Radius
281 
282- sm: `8px`
283- md: `14px`
284- lg: `20px`
285- pill: `9999px`
286 
287### Shadows
288 
289- **card:** `0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(232, 234, 238, 0.10)`
290- **button:** `inset 0 1px 0 rgba(232, 234, 238, 0.14)`
291 
292### Borders
293 
294- **card:** `1px solid rgba(220, 225, 235, 0.08)`
295- **divider:** `rgba(220, 225, 235, 0.06)`
296 
297### Glass
298 
299Translucent panes with backdrop-filter — the preview renders cards from these exact values.
300 
301| Property | Value |
302|----------|-------|
303| surface | `rgba(30, 34, 40, 0.28)` |
304| blur | `64px` |
305| saturate | `115%` |
306| border | `1px solid rgba(220, 225, 235, 0.14)` |
307| shadow | `0 1px 0 rgba(0, 0, 0, 0.25)` |
308| innerHighlight | `inset 0 1px 0 rgba(232, 234, 238, 0.10)` |
309| backdrop | `radial-gradient(at 18% 22%, rgba(60, 66, 76, 0.55) 0%, transparent 55%), radial-gradient(at 82% 78%, rgba(36, 40, 48, 0.65) 0%, transparent 50%), radial-gradient(at 50% 50%, rgba(48, 52, 60, 0.35) 0%, transparent 65%), #0E1115` |
310 
311### Buttons
312 
313Four variants, each fully tokenized. The preview renders from these exact values.
314 
315#### Primary
316 
317| Property | Value |
318|----------|-------|
319| shape | `pill` |
320| background | `linear-gradient(180deg, rgba(232, 234, 238, 0.22) 0%, rgba(180, 188, 200, 0.10) 100%)` |
321| color | `#F4F6FA` |
322| border | `1px solid rgba(232, 234, 238, 0.32)` |
323| padding | `12px 24px` |
324| fontWeight | `600` |
325| fontSize | `0.9375rem` |
326| tracking | `-0.01em` |
327| shadow | `inset 0 1px 0 rgba(255, 255, 255, 0.20)` |
328| backdropBlur | `40px` |
329| backdropSaturate | `130%` |
330 
331#### Secondary
332 
333| Property | Value |
334|----------|-------|
335| shape | `pill` |
336| background | `rgba(40, 46, 54, 0.28)` |
337| color | `#E8EAEE` |
338| border | `1px solid rgba(220, 225, 235, 0.14)` |
339| padding | `12px 24px` |
340| fontWeight | `500` |
341| fontSize | `0.9375rem` |
342| tracking | `-0.01em` |
343| shadow | `inset 0 1px 0 rgba(232, 234, 238, 0.08)` |
344| backdropBlur | `40px` |
345| backdropSaturate | `120%` |
346 
347#### Outline
348 
349| Property | Value |
350|----------|-------|
351| shape | `pill` |
352| background | `rgba(20, 23, 28, 0.40)` |
353| color | `#E8EAEE` |
354| border | `1px solid rgba(220, 225, 235, 0.14)` |
355| padding | `11px 22px` |
356| fontWeight | `500` |
357| fontSize | `0.9375rem` |
358| tracking | `-0.01em` |
359| backdropBlur | `24px` |
360| backdropSaturate | `110%` |
361 
362#### Ghost
363 
364| Property | Value |
365|----------|-------|
366| shape | `pill` |
367| background | `transparent` |
368| color | `rgba(232, 234, 238, 0.70)` |
369| border | `none` |
370| padding | `11px 16px` |
371| fontWeight | `500` |
372| fontSize | `0.9375rem` |
373 
374### Charts
375 
376| Property | Value |
377|----------|-------|
378| variant | `line` |
379| strokeWidth | `1.75` |
380| gridlines | `false` |
381| highlight | `last` |
382| dotMarker | `true` |
383| axisColor | `#5A6070` |
384| palette | `#C8CDD6`, `#8C92A0`, `#5A6070` |
385