# antimetal.com — Design System

## 1. Visual Theme & Atmosphere

Antimetal reads as enterprise software that has been quietly, confidently designed. The palette is cool blue-navy on near-white: a pairing that signals financial trustworthiness without the stiffness of traditional fintech. There is no garish CTA orange, no startup gradient. The atmosphere is restrained premium — the kind of design that lets the product's capabilities speak first. A subtle translucent header, soft shadow on a primary card, and a lone accent of sky blue (`rgb(224, 246, 255)`) are the only ornamental gestures.

## 2. Color Palette & Roles

**Backgrounds**
- Page: `rgb(248, 249, 252)` — near-white with a barely-perceptible cool tint
- Header: `rgba(248, 249, 252, 0.8)` — frosted glass over the page background
- Card/elevated surface: `rgba(12, 38, 77, 0.04)` — the navy bleeds slightly into surfaces

**Text**
- Primary: `rgb(27, 37, 64)` — deep navy, not black; sophisticated and warm
- Secondary/muted headings: `oklab(0.959716 -0.0186663 -0.0181907 / 0.56)` — navy at 56% opacity, for h3 labels

**Accent / Highlight**
- Sky blue surface: `rgb(224, 246, 255)` — used sparingly for icon backgrounds or feature callouts
- Dark hero block: `rgb(27, 37, 64)` — the navy used as a full-bleed dark section

**Borders / Inputs**
- Input border: `rgba(12, 38, 77, 0.06)` — barely visible
- Input background: `rgba(12, 38, 77, 0.02)` — almost invisible tint

The palette is architecturally simple: one dark color (navy), one light ground (near-white), one highlight (sky blue). All other values are opacity variants of the same navy.

## 3. Typography Rules

A single custom typeface — **abcdFont** — handles every text element, with `system-ui` as fallback. This is a bespoke or licensed grotesque, signaling brand investment. No serif, no mono, no decorative weight.

- **body, links, labels**: 16px / 400 / 24px line-height — comfortable reading
- **h3 (section labels)**: 15px / 400 / 20px — deliberately not large; hierarchy comes from position
- **buttons**: 14px / 450 weight — slightly heavier than body, tighter at 20px
- **inputs**: 15px / 400 with a subtle `-0.075px` letter-spacing

Weight variation is minimal (400 to 450). This is a design that earns distinction through spacing and color, not typographic loudness. No italic usage detected.

## 4. Component Stylings

**Primary card/panel**: `rgba(12, 38, 77, 0.04)` background with a sophisticated multi-layer shadow — three outer shadows creating depth, plus four inset shadows for a glossy highlight on top edge. The shadow recipe: `rgba(24,37,66,0.32) 0px 1px 3px, rgba(24,37,66,0.12) 0px 0.5px 0.5px, rgba(24,37,66,0.44) 0px 12px 24px -12px` (outer) + `rgba(219,247,255,0.48) 0px 0.5px 0.5px inset` (inner highlight).

**Buttons**: Transparent background, navy text, no visible border on default state. Focus state brings no visible change — interaction is minimal by design.

**Inputs**: Near-invisible styling — `rgba(12,38,77,0.02)` background, `rgba(12,38,77,0.06)` border. Form elements dissolve into the page.

**Border radius**: Two values only — `10px` for cards/inputs, and an extreme `3.35544e+07px` (effectively 100%) for pill/circular elements.

## 5. Layout Principles

Single-column, centered content with clear max-width containment. Breakpoint at 992px suggests a tablet-first pivot. The nav is sticky and frosted. Content hierarchy is managed through vertical spacing and subtle color differentiation rather than columns or dividers.

The dark hero block (`rgb(27, 37, 64)`) is used as a full-bleed section to break the light-ground monotony — a single dramatic contrast moment.

## 6. Depth & Elevation

The signature shadow is the brand's most expressive detail: a seven-value compound shadow combining hard edge, ambient fill, long drop, and inner highlight. This creates a card that looks almost physically lifted from the page surface. No other elevation level is visible — it's binary: flat page or one elevated card.

## 7. Do's and Don'ts

**Do**
- Use navy (`rgb(27,37,64)`) as the sole text and accent color
- Apply the compound shadow only to primary cards — it's precious
- Keep forms invisible; let content breathe on the near-white ground
- Use `10px` radius for interactive components, pill radius for badges/tags only

**Don't**
- Introduce additional accent colors; the sky-blue is already at the edge
- Use bold or heavy type weights — 450 is the ceiling
- Add decorative borders or dividers; spacing does that work
- Use pure black or pure white; every value should carry the cool blue undertone

## 8. Responsive Behavior

One breakpoint at 992px. Below this, the nav likely collapses, single-column layout persists. The frosted header may adjust opacity. Button and input sizing stays consistent — no dramatic font scaling.

## 9. Agent Prompt Guide

> Build with Antimetal's visual language: near-white page (`rgb(248,249,252)`), deep navy text (`rgb(27,37,64)`), bespoke grotesque typeface at regular weight only. One elevated card style using the compound multi-layer shadow. Inputs and forms are near-invisible. The only accent is sky blue (`rgb(224,246,255)`) used sparingly on icon backgrounds. No gradients, no color explosions — restraint is the brand.

---

*Generated by Sparkbites — extracted from live CSS analysis*