Studio
Studio
Antimetal tasarım sistemi açık temalı bir arayüz dili kullanıyor. Ana marka rengi Deep Cosmos (#001033); metinler Midnight Navy (#1b2540), arka plan Ghost Canvas (#f8f9fc). Tipografide abcdFont ve ivarTextFont kullanılıyor. Bu DESIGN.md dosyası 10 renk token'ı ve 7 kademeli bir yazı ölçeği içeriyor; Claude, Cursor veya v0 gibi yapay zekâ araçlarına verildiğinde Antimetal tarzında tutarlı arayüzler üretmelerine yardımcı olur.
Bağımsız Stil İncelemesi
Electric storm over a blueprint — vivid neon signal cutting through deep navy atmosphere, then snapping to precise technical daylight.
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.
| Renk | HEX | CSS token | Kullanım (İngilizce) |
|---|---|---|---|
| Midnight Navy | #1b2540 | --color-midnight-navy | 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 | --color-deep-cosmos | Blue action color for filled buttons, selected navigation states, and focused conversion moments. |
| Chartreuse Pulse | #d0f100 | --color-chartreuse-pulse | Green action color for filled buttons, selected navigation states, and focused conversion moments. |
| Ice Veil | #e0f6ff | --color-ice-veil | Ghost button borders in dark hero mode, subtle icon stroke tints, very-light atmospheric surface wash in the hero region |
| Ghost Canvas | #f8f9fc | --color-ghost-canvas | Primary page background, card fill for feature sections, section backgrounds in the light product UI |
| Pure Surface | #ffffff | --color-pure-surface | Elevated card surfaces above the ghost canvas — product UI cards, floating pill badges, modal-level surfaces |
| Slate Ink | #6b7184 | --color-slate-ink | Secondary body text, muted labels, icon fills at reduced emphasis |
| Ash Medium | #7c8293 | --color-ash-medium | Tertiary text, hairline border fills, subtle strokes on dividers and icon outlines |
| Storm Gray | #596075 | --color-storm-gray | Mid-tone text in body copy within darker surface contexts, muted border strokes |
| Fog Border | #b1b5c0 | --color-fog-border | Hairline borders on buttons and cards in the light theme, icon stroke at minimum visibility |
| Font | Ağırlıklar | Yedek font |
|---|---|---|
| abcdFont | 400, 450, 480 | Inter Variable or DM Sans |
| ivarTextFont | 400 | Freight Display Pro or Fraunces |
| Rol | Boyut | Satır yüksekliği | Token |
|---|---|---|---|
| caption | 13px | 1 | --text-caption |
| body | 16px | 1.5 | --text-body |
| subheading | 18px | 1.33 | --text-subheading |
| heading-sm | 22px | 1.29 | --text-heading-sm |
| heading | 28px | 1.17 | --text-heading |
| heading-lg | 40px | 1.05 | --text-heading-lg |
| display | 48px | 1.04 | --text-display |
