Antimetal

Overview

Antimetal embodies a design philosophy called 'Technical Warmth'—blending austere, production-grade precision with inviting, human-centered aesthetics. The brand serves infrastructure engineers and DevOps teams who demand both rigor and clarity. The visual language combines a warm, neutral palette (beige #d7d7d0, charcoal #1a1614) with strategic pops of technical orange (#ff7733) and olive accents (#e2e67d), creating an interface that feels simultaneously authoritative and approachable. The UI evokes a sense of calm control: complex systems rendered legible, autonomous agents working invisibly in the background.

The brand voice is precise, direct, and occasionally witty—never breathless or hyperbolic. Antimetal speaks to engineers as peers, using concrete language and avoiding marketing jargon. Example: 'Your infrastructure runs 24/7. So do we.' The tone balances technical depth with accessibility, acknowledging that production systems are high-stakes while maintaining confidence that the platform handles complexity gracefully.

Colors

The color system is rooted in a warm, desaturated foundation that evokes industrial materials—concrete, steel, and paper—while maintaining visual warmth through cream and beige tones. Primary (#1a1614, a near-black charcoal) anchors all interactive elements, text, and structural components, providing maximum contrast and legibility on the light surface. Secondary (#de4e1a, a burnt orange) and its lighter variant (#ff7733, a vibrant technical orange) are reserved for critical CTAs, alerts, and accent highlights—drawing attention without overwhelming. Tertiary (#bd4a28 and #e2e67d) provides supporting accent colors for status indicators and secondary UI elements.

Surface colors follow a carefully calibrated stack: the base surface is #d7d7d0 (warm beige), with container variants ranging fro

Typography

The type system pairs a serif display font (Test Signifier) for headlines with a geometric sans-serif (Geist) for body and UI text, creating visual contrast between editorial and functional layers. Display and headline levels use the serif at weights 400–600, with generous line-height (1.2–1.3x) to ensure readability at large sizes and to reinforce the brand's editorial, authoritative tone. Body text uses Geist at 16px (body-md) or 18px (body-lg) with 400 weight and 1.5x line-height, optimized for on-screen reading. Labels and UI text use Geist at 14px (label-md) with 500 weight and 0.01em letter-spacing, providing crisp, scannable interface copy. Monospace (JetBrains Mono) is reserved for code snippets, technical labels, and data displays, set at 12px with 0.1em letter-spacing to emphasiz

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid layout on mobile and tablet while constraining content on desktop to prevent line-length bloat. The gutter spacing is 30px (md spacing token), applied consistently to page margins and section separators. Vertical rhythm is established through lg spacing (40px) for major section breaks, md spacing (24px) for component groups, and sm spacing (12px) for internal component padding. The hero section spans full-width with asymmetric content: headline and CTA on the left (40–50% width), visualization on the right. Container max-widths vary by context (820px for narrow content, 1280px for full-width layouts), always respecting the gutter. White-space is generous—sections are separated by 60–80px of vertical spa

Elevation & Depth

Depth in Antimetal is achieved through subtle layering and glass-morphism rather than aggressive shadows. Level 1 (Base): the warm beige background (#d7d7d0) with no shadow, establishing the foundation. Level 2 (Standard Cards & Components): surface-container colors (#e8e8e0 to #f4f4e7) with a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)), creating gentle separation from the base. Level 3 (Glass Overlays & Navigation): frosted-glass surfaces using backdrop-filter: blur(14px) saturate(1.05) with background: rgba(255, 255, 255, 0.55), bordered by a 1px edge at rgba(255, 255, 255, 0.2) and an inset

Shapes

The shape philosophy is 'Precision with Softness'—sharp enough to feel technical and intentional, rounded enough to feel approachable and modern. Buttons and primary CTAs use full border-radius (9999px), creating pill-shaped buttons that feel friendly and clickable. Cards and containers use lg radius (8px), balancing geometric clarity with subtle softness. Input fields and secondary UI elements use DEFAULT radius (4px), maintaining a clean, technical appearance. Navigation pills and glass surfaces use full radius (9999px) to emphasize their floating, overlay nature. The rationale: full-radius

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use {colors.primary} (#1a1614) background with {colors.on-primary} (#f4f4e7) text, full border-radius (9999px), 12px vertical padding, and 24px horizontal padding (total height 44px). On hover, shift backgroundColor to {colors.primary-container} (#2a2724) with a 150ms ease-out transition. Secondary buttons are transparent with a 1px border at {colors.outline}, text color {colors.primary}, and the same padding and radius. On hover, apply backgroundColor: {colors.surface-container-high} (#dcdcd5). All buttons use {typography.label-md} (14px, 500 weight) and should never exceed 48px height to maintain visual proportion.

Glass & Overlay Surfaces Glass pills (used in navigation and floating UI) apply backdro

Do's and Don'ts

**Do**

• Do use full border-radius (9999px) on primary CTAs and glass overlays to signal interactivity and warmth.
• Do apply glass-morphism (backdrop-filter: blur(14px)) to navigation and floating UI to create visual hierarchy without harsh shadows.
• Do maintain generous vertical spacing (40–60px between sections) to create breathing room and guide the eye through content.
• Do use the serif (Test Signifier) exclusively for headlines and display text; never use it for body or UI labels.
• Do apply the technical orange (#ff7733) sparingly—only on primary CTAs, critical alerts, and key accent elements—to maintain visual impact.
• Do use the monospace font (JetBrains Mono) for code snippets, technical labels, and data displays to reinforce technical credibility.

**Don't**

• Don't use shadows deeper than 0 3px 8px rgba(0, 0, 0, 0.15); Antimetal relies on color and glass effects, not depth.
• Don't apply border-radius >12px to cards or containers; it dilutes the technical precision and feels overly soft.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph; maintain clear separation between editorial and functional layers.
• Don't use pure black (#000) or pure white (#fff) as primary colors; the brand uses warm, desaturated tones (#1a1614 and #f4f4e7) for sophistication.
• Don't apply the secondary orange (#ff7733) to non-interactive elements or backgrounds; reserve it for CTAs and alerts to maintain visual hierarchy.
• Don't use more than 2–3 accent colors in a single view; the warm beige and charcoal foundation should dominate, with orange and olive as supporting accents.