# Metallic

> Chrome/silver gradients, reflective surfaces, and premium tech aesthetic with liquid-metal depth.

- Skill: `jdsadminllc/metallic` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/metallic`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/metallic/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/metallic

---

# Metallic
## Mission
Convey premium, high-tech sophistication through reflective surfaces, chrome gradients, and the illusion of polished metal.
## Brand
### 🎨 Colors
- `#E8E8E8` — Primary (bright silver)
- `#B8B8B8` — Secondary (mid-tone metal)
- `#6B6B6B` — Accent (dark steel)
- `#1A1A1A` — Background (onyx black)
- `#F5F5F5` — Text on dark (near-white)
- `#0D0D0D` — Text on light (deep charcoal)
### 🔤 Typography
- Heading: **Orbitron** (Google Fonts) — futuristic geometric sans
- Body: **Inter** (Google Fonts) — clean, precise sans-serif
- Scale: xs 0.75rem | sm 0.875rem | base 1rem | lg 1.125rem | xl 1.5rem | 2xl 2.25rem | 3xl 3rem
### 📐 Spacing
- Grid: 12-column, 24px gutter, precise alignment
- Section padding: 5rem vertical, 2rem horizontal
- Card gaps: 2rem in a rigid grid
### 🧩 Components
- Buttons: linear-gradient chrome finish (light → mid → light), 4px radius, subtle inner highlight, dark text on light gradient
- Cards: dark backgrounds with 1px semi-transparent white border, subtle reflection streak (gradient overlay at 15% opacity)
- Nav: frosted-glass effect (backdrop-filter blur), thin 1px bottom border silver gradient
- Hero: dark background with radial gradient spotlight, headline with linear-gradient text (chrome effect), subtle particle/sparkle accents
- Footer: solid dark steel, subtle top gradient border
### ♿ Accessibility
- Contrast ratio 4.5:1 minimum — verify gradient backgrounds produce sufficient contrast
- Focus states: 2px solid white ring with 2px offset on dark, 2px solid dark ring on light
- Respect `prefers-reduced-motion` — disable shimmer/reflection animations
- Minimum body font size 16px (1rem)
### ✍️ Writing Tone
- Precise, technical, confident. Short declarative sentences. Feature-forward, benefit-light.
- Labels in title case. Numbers use monospace styling. Avoid exclamation marks.
## Do / Don't
### ✅ Do
- Use linear gradients to simulate brushed metal and chrome reflections
- Apply subtle inner shadows and highlights for debossed/embossed effects
- Keep backgrounds dark to make metallic surfaces pop
- Use thin 1px borders in semi-transparent white for depth
- Add subtle specular highlight streaks on key surfaces (hero, cards)
### ❌ Don't
- Use flat colors where gradients can create depth
- Apply heavy box-shadows — metallic depth comes from gradients, not drop shadows
- Mix warm tones (gold, copper) — stay in silver/chrome/steel family
- Use thick borders — thin and precise
- Overuse animation — subtle is premium; gaudy is cheap
## Quality Gates
- [ ] At least 3 distinct gradient styles (chrome button, card highlight, text effect) are present
- [ ] All interactive elements have hover/active states with gradient shifts
- [ ] No element uses flat background colors — gradients or semi-transparent overlays only
- [ ] Thin borders (≤1px) separate all major sections
- [ ] Contrast verified on gradient backgrounds at all breakpoints
- [ ] `prefers-reduced-motion` disables shimmer and reflection animations