Antimetal

# Antimetal — Style Reference
> Electric storm over a blueprint — vivid neon signal cutting through deep navy atmosphere, then snapping to precise technical daylight.
Theme: mixed

Antimetal operates in two visual modes that coexist on one page: a deep navy-to-electric-blue hero that feels like staring into a server rack at night, and a near-white #f8f9fc product surface that reads like a technical dashboard in daylight. The transition between these modes is dramatic and intentional — dark atmospheric entry, then immediate pivot to a light, data-dense product UI. The single color that bridges both modes is a vivid chartreuse (#d0f100) used exclusively on primary CTAs, creating an almost jarring contrast against both the dark hero and the light product surface. Typography is custom throughout: abcdFont handles all UI at tight tracking (-0.016em), while ivarTextFont with OpenType alternates takes headlines at display sizes, giving the largest text a slightly editorial, high-craft quality uncommon in infrastructure tooling. Elevation is achieved through layered blue-tinted shadows (rgba(0,39,80,...)) rather than dark fills, so even raised surfaces feel part of the same chromatic family.

## Colors
| Name | Value | Role |
|------|-------|------|
| Midnight Navy | `#1b2540` | Primary text, heading color on light surfaces, nav text, icon fills, input text, border color across cards and form elements — the structural ink of the entire light-mode UI |
| Deep Cosmos | `#001033` | Blue action color for filled buttons, selected navigation states, and focused conversion moments. |
| Hero Gradient | `linear-gradient(180deg, #001033 0%, #0050f8 55%, #5fbdf7 100%)` | Full-bleed hero background — dark navy at top fading through electric blue to lighter cyan near bottom, creating depth behind the dot-pattern globe illustration |
| Chartreuse Pulse | `#d0f100` | Green action color for filled buttons, selected navigation states, and focused conversion moments. |
| Ice Veil | `#e0f6ff` | Ghost button borders in dark hero mode, subtle icon stroke tints, very-light atmospheric surface wash in the hero region |
| Blue Glow Radial | `radial-gradient(50% 50%, rgba(0, 128, 248, 0.32) 0%, rgba(95, 189, 247, 0.32) 20%, rgba(211, 239, 252, 0.32) 60%, rgba(248, 249, 252, 0) 100%)` | Supporting palette color for small decorative accents when the core palette needs contrast. |
| Storm Gray | `#596075` | Mid-tone text in body copy within darker surface contexts, muted border strokes |
| Slate Ink | `#6b7184` | Secondary body text, muted labels, icon fills at reduced emphasis |
| Ash Medium | `#7c8293` | Tertiary text, hairline border fills, subtle strokes on dividers and icon outlines |
| Fog Border | `#b1b5c0` | Hairline borders on buttons and cards in the light theme, icon stroke at minimum visibility |
| Ghost Canvas | `#f8f9fc` | Primary page background, card fill for feature sections, section backgrounds in the light product UI |
| Pure Surface | `#ffffff` | Elevated card surfaces above the ghost canvas — product UI cards, floating pill badges, modal-level surfaces |

## Typography
| Family | Role |
|--------|------|
| abcdFont | All UI text: navigation, buttons, body copy, labels, badges, inputs, card headings up to 28px. The weight range 400–480 is narrower than most variable fonts use — 480 acts as a 'medium' without the visual jump of a true 600 bold, giving the UI a composed, unshowy density. Used with tight tracking (-0.016em to -0.005em) at all sizes. |
| ivarTextFont | Hero and section display headlines exclusively. At weight 400 with OpenType features ss04/ss06/ss09/ss10/ss11 active, this serif alternative adds a high-craft editorial quality that contrasts sharply with the utilitarian sans UI — infrastructure tooling brands almost never use a serif at display scale, making this a signature differentiator. |