{"id":"9f9a4a4f-1a27-47ca-a65b-68b9850a84e4","name":"Antimetal","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/9f9a4a4f-1a27-47ca-a65b-68b9850a84e4","originalSiteUrl":"https://antimetal.com","capturedAt":"2026-04-29T23:58:04.471Z","colors":[{"name":"Midnight Navy","hex":"#1b2540","role":"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","group":"brand","cssVariable":"--color-midnight-navy"},{"name":"Deep Cosmos","hex":"#001033","role":"Blue action color for filled buttons, selected navigation states, and focused conversion moments.","group":"brand","cssVariable":"--color-deep-cosmos"},{"name":"Chartreuse Pulse","hex":"#d0f100","role":"Green action color for filled buttons, selected navigation states, and focused conversion moments.","group":"accent","cssVariable":"--color-chartreuse-pulse"},{"name":"Ice Veil","hex":"#e0f6ff","role":"Ghost button borders in dark hero mode, subtle icon stroke tints, very-light atmospheric surface wash in the hero region","group":"accent","cssVariable":"--color-ice-veil"},{"name":"Ghost Canvas","hex":"#f8f9fc","role":"Primary page background, card fill for feature sections, section backgrounds in the light product UI","group":"neutral","cssVariable":"--color-ghost-canvas"},{"name":"Pure Surface","hex":"#ffffff","role":"Elevated card surfaces above the ghost canvas — product UI cards, floating pill badges, modal-level surfaces","group":"neutral","cssVariable":"--color-pure-surface"},{"name":"Slate Ink","hex":"#6b7184","role":"Secondary body text, muted labels, icon fills at reduced emphasis","group":"neutral","cssVariable":"--color-slate-ink"},{"name":"Ash Medium","hex":"#7c8293","role":"Tertiary text, hairline border fills, subtle strokes on dividers and icon outlines","group":"neutral","cssVariable":"--color-ash-medium"},{"name":"Storm Gray","hex":"#596075","role":"Mid-tone text in body copy within darker surface contexts, muted border strokes","group":"neutral","cssVariable":"--color-storm-gray"},{"name":"Fog Border","hex":"#b1b5c0","role":"Hairline borders on buttons and cards in the light theme, icon stroke at minimum visibility","group":"neutral","cssVariable":"--color-fog-border"},{"name":"Hero Gradient","hex":"#0050f8","role":"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","group":"brand","gradient":"linear-gradient(180deg, #001033 0%, #0050f8 55%, #5fbdf7 100%)","cssVariable":"--color-hero-gradient"},{"name":"Blue Glow Radial","hex":"#0080f8","role":"Supporting palette color for small decorative accents when the core palette needs contrast.","group":"accent","gradient":"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%)","cssVariable":"--color-blue-glow-radial"}],"typography":[{"role":"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.","sizes":"13px, 14px, 15px, 16px, 17px, 18px, 20px, 22px, 24px, 28px","family":"abcdFont","weight":"400, 450, 480","lineHeight":"1.00–1.60 depending on size (tighter at larger sizes)","substitute":"Inter Variable or DM Sans","letterSpacing":"-0.016em at smallest sizes, -0.015em mid-range, -0.010em at 20-24px, -0.005em at 28px"},{"role":"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.","sizes":"32px, 40px, 46px, 48px","family":"ivarTextFont","weight":"400","lineHeight":"1.04–1.25","substitute":"Freight Display Pro or Fraunces","letterSpacing":"-0.010em uniformly across all display sizes","fontFeatureSettings":"\"ss04\", \"ss06\", \"ss09\", \"ss10\", \"ss11\""}],"spacing":{"radius":{"cards":"20px","badges":"16px","inputs":"0px","buttons":"9999px","pillLarge":"60px","cardsSmall":"6px","cardsMedium":"16px"},"elementGap":"8px","sectionGap":"80px","cardPadding":"20px","pageMaxWidth":"1200px"},"radius":{"cards":"20px","badges":"16px","inputs":"0px","buttons":"9999px","pillLarge":"60px","cardsSmall":"6px","cardsMedium":"16px"},"shadows":{"surfaces":[{"hex":"#001033","name":"Hero Dark Canvas","level":0,"purpose":"Full-bleed dark hero; behind the blue gradient — deepest surface, seen only in the top section"},{"hex":"#f8f9fc","name":"Ghost Canvas","level":1,"purpose":"Primary page background for all light content sections below the hero fold"},{"hex":"#ffffff","name":"Pure Surface","level":2,"purpose":"Elevated product UI cards, floating panels, announcement pill backgrounds"},{"hex":"#0c264d05","name":"Data Chip Surface","level":3,"purpose":"Barely-there tint for code chips and inline data containers — almost invisible, only perceived against white"}]},"guidelines":{"do":["Use 9999px radius on ALL buttons and interactive pill elements — this applies across both dark and light surfaces without exception.","Reserve #d0f100 exclusively for the primary CTA fill; never use it for decorative elements, icons, or backgrounds other than action buttons.","Apply blue-tinted shadows using rgba(0,39,80,...) for all card elevation — never use neutral black-based shadows like rgba(0,0,0,...) on light surfaces.","Use ivarTextFont with font-feature-settings 'ss04','ss06','ss09','ss10','ss11' only at 32px and above; abcdFont handles everything below 32px.","Maintain the hero-to-light transition as the singular dark section — subsequent sections stay on #f8f9fc with #ffffff elevated cards; do not add additional dark bands.","Apply letter-spacing -0.016em to -0.005em on abcdFont across all sizes; avoid default browser tracking which makes the type feel unset.","Use the 1px outer shadow ring (rgba(0,39,80,0.04) 0px 0px 0px 1px) as a border substitute on cards and badges — avoid explicit border-color properties."],"dont":["Don't use #d0f100 in hero sections or dark backgrounds for decorative illustration fills — it appears only as a filled button background.","Don't apply radius other than 9999px to buttons — even small utility buttons in the product UI use the pill shape.","Don't mix ivarTextFont into body copy or UI labels below 32px; the serif is strictly a display instrument.","Don't use more than two surface levels in light sections (#f8f9fc canvas + #ffffff card) — the design system has almost no mid-tone fill colors between these two steps.","Don't create dark sections beyond the hero; the page's rhythm depends on a single dramatic dark entry followed by sustained light product canvas.","Don't use black-based text (#000000 or near-black) — all text is #1b2540, even at maximum emphasis, preserving the blue-navy chromatic identity in the type.","Don't set input borders to rounded — inputs use 0px radius by design, creating deliberate contrast against the pill-heavy button and badge language."]}}