{"id":"9f9a4a4f-1a27-47ca-a65b-68b9850a84e4","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","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Antimetal","summary":"Electric storm over a blueprint — vivid neon signal cutting through deep navy atmosphere, then snapping to precise technical daylight.","description":"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.","industry":"devtools","colorScheme":"both","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"},{"name":"Deep Cosmos","hex":"#001033","role":"Blue action color for filled buttons, selected navigation states, and focused conversion moments.","group":"brand"},{"name":"Chartreuse Pulse","hex":"#d0f100","role":"Green action color for filled buttons, selected navigation states, and focused conversion moments.","group":"accent"},{"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"},{"name":"Ghost Canvas","hex":"#f8f9fc","role":"Primary page background, card fill for feature sections, section backgrounds in the light product UI","group":"neutral"},{"name":"Pure Surface","hex":"#ffffff","role":"Elevated card surfaces above the ghost canvas — product UI cards, floating pill badges, modal-level surfaces","group":"neutral"},{"name":"Slate Ink","hex":"#6b7184","role":"Secondary body text, muted labels, icon fills at reduced emphasis","group":"neutral"},{"name":"Ash Medium","hex":"#7c8293","role":"Tertiary text, hairline border fills, subtle strokes on dividers and icon outlines","group":"neutral"},{"name":"Storm Gray","hex":"#596075","role":"Mid-tone text in body copy within darker surface contexts, muted border strokes","group":"neutral"},{"name":"Fog Border","hex":"#b1b5c0","role":"Hairline borders on buttons and cards in the light theme, icon stroke at minimum visibility","group":"neutral"},{"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%)"},{"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%)"}],"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\""}],"typeScale":[{"role":"caption","size":13,"lineHeight":1,"letterSpacing":-0.21},{"role":"body","size":16,"lineHeight":1.5,"letterSpacing":-0.16},{"role":"subheading","size":18,"lineHeight":1.33,"letterSpacing":-0.09},{"role":"heading-sm","size":22,"lineHeight":1.29,"letterSpacing":-0.22},{"role":"heading","size":28,"lineHeight":1.17,"letterSpacing":-0.14},{"role":"heading-lg","size":40,"lineHeight":1.05,"letterSpacing":-0.4},{"role":"display","size":48,"lineHeight":1.04,"letterSpacing":-0.48}],"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."]},"components":[{"name":"Chartreuse CTA Button","role":"Primary conversion action — 'Book a demo', 'Start saving time'"},{"name":"Dark Ghost Button","role":"Secondary action on dark hero — navigation items, 'Log in'"},{"name":"Light Ghost Button","role":"Secondary action on light surface — 'Explore', inline CTAs"},{"name":"Dark Solid Button","role":"Tertiary dark-mode CTA — 'Book a demo' nav variant on dark header"},{"name":"Feature Card (Elevated)","role":"Primary product UI showcase card in light sections"},{"name":"Section Background Card","role":"Content grouping surface in light feature sections"},{"name":"Code / Data Chip","role":"Inline code references, small data containers"},{"name":"Badge Pill (Floating)","role":"Status labels, category tags — 'Urgent', 'Production', alert count badges"},{"name":"Announcement Banner Pill","role":"Top-of-page product announcement — 'New / Introducing...' link"},{"name":"Sidebar Navigation Icon","role":"Vertical product sidebar — icon-only navigation in the product UI"},{"name":"Text Input","role":"Form fields — email or search inputs"}],"customSections":[{"title":"Agent Prompt Guide","content":"**Quick Color Reference**\n- text: #1b2540\n- background (light): #f8f9fc\n- background (dark hero): #001033\n- border / shadow ring: rgba(0,39,80,0.04) as 1px outer shadow\n- accent: #e0f6ff (ghost button borders on dark)\n- primary action: #d0f100 (filled action)\n\n**Example Component Prompts**\n\n1. Create a Primary Action Button: #d0f100 background, #6b7184 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n\n\n3. **Alert Badge Pill:** 16px radius, rgba(255,255,255,0.01) fill, #1b2540 text at 14px abcdFont weight 450, padding 12px 20px 12px 12px, shadow rgba(0,39,80,0.08) 0px 6px 16px -3px + rgba(0,39,80,0.04) 0px 0px 0px 1px. Use for status labels like 'Urgent', 'Production', alert counts.\n\n4. **Sticky Navigation Bar:** #001033 background. Logo left in #fafeff. Center nav: abcdFont 15px weight 400, #fafeff, letter-spacing -0.015em, 8px gap between items. Right: ghost pill ('Log in') with transparent fill + #e0f6ff border, #fafeff text; filled pill ('Book a demo') with #d0f100 fill, #1b2540 text, 9999px radius, padding 0 16px.\n\n5. **Product UI Dashboard Card:** White #ffffff fill, 20px radius, shadow rgba(0,39,80,0.03) 0px 56px 72px -16px + 4-layer shadow stack. Internal sidebar icons at #6b7184, 24px, outlined style. Active icon state: #d0f100 background chip behind icon. Issue title at 22px abcdFont weight 480, #1b2540. Tab labels at 14px weight 400 #6b7184."},{"title":"Animation Philosophy","content":"Motion is expressive and deliberate — not decorative micro-transitions. The dominant duration is 0.6s (72 instances) with a spring easing (linear() with overshoot) for element entrances, and 1s for atmospheric animations like the dot-globe. The spring curve linear(0 0%, 0.026 1.8%, 0.108 3.9%, 0.59 12.2%, 0.792 16.5%, 0.931 21%, 0.978 23.4%, 1.01 25.9%, 1.033 29.3%, 1.04 33.3%, 1.001 56.9%, 1 100%) creates a slight overshoot snap — the UI elements feel like they physically arrive rather than ease in. Named animations include home-fix-list-items-animation (staggered list item entry) and mask-size (revealing content through a growing mask). Commonly transitioned properties include transform, scale, translate, and rotate together (15 instances each), suggesting coordinated multi-property entrance animations rather than individual property fades."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777506947507-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777506947507-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/9f9a4a4f-1a27-47ca-a65b-68b9850a84e4-1777561558774-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/9f9a4a4f-1a27-47ca-a65b-68b9850a84e4-1777561558774-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/9f9a4a4f-1a27-47ca-a65b-68b9850a84e4-1777561558774-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/9f9a4a4f-1a27-47ca-a65b-68b9850a84e4-1777561558774-preview-detail-poster.jpg"},"similarStyleIds":["3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","90ce5883-bb24-4466-93f7-801cd617b0d1","8b5cfe6d-a2bd-4edb-854e-9185cec46c09","bc4fb98b-37ec-480a-b7a9-acd197cbebb9","7b083729-e694-4b66-82a3-befb08451722","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","c60a19c1-259a-4001-95d9-6a3826f5c06e","c81d2be0-05b7-4755-8046-f2d19fbc448c","8601c8ef-e1ea-4186-adb2-6f9a74caf436","41547c7a-3bbe-49f0-95d6-9701c9df9a5e","0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d","408a149c-702f-4442-99df-bea49d9c0d9b","1ae4bcfe-c613-42fc-aab7-f9583381e7cc","34baa524-5d5b-4165-bbab-d01f05e6d6b9","b8a8976c-52d9-4ebb-95ea-4c40f4a9acab","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","3172cd4d-118a-4a16-a259-6b634d32322e","c3ceca5c-d329-4559-b947-016172941ba2","e869e214-f672-4ac3-bfc2-bd25de7b003b","5a7ec81f-03b6-4d21-a706-0d1d323d8899"],"exports":{"designMdUrl":"/references/refero/9f9a4a4f-1a27-47ca-a65b-68b9850a84e4/design.md","tokensJsonUrl":"/references/refero/9f9a4a4f-1a27-47ca-a65b-68b9850a84e4/tokens.json","tailwindV4Url":"/references/refero/9f9a4a4f-1a27-47ca-a65b-68b9850a84e4/tailwind-v4.css","cssVariablesUrl":"/references/refero/9f9a4a4f-1a27-47ca-a65b-68b9850a84e4/tailwind-v4.css"}}