jdsadminllc 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-motiondisables shimmer and reflection animations