Deep-navy engineering surface derived from the ArchiTECH logo: near-black blue-tinted background, a metallic-silver + electric-blue brand mark, blueprint grid and circuit-trace motifs. Color strategy: Committed — electric blue carries identity against a dark, near-monochrome navy field; silver is the secondary metal. Not dark "because tools look cool dark," but because the logo is a backlit metal blade on black, and the product is a terminal setup — the scene is a developer at night running commands.
| Role | Value | Notes |
|---|---|---|
| Background | #070b12 |
Near-black, blue-tinted |
| Surface | #0f1722 / #13202e |
Panels, raised elements |
| Line | #1b2a3a / #26384c |
Hairlines, borders |
| Ink (text) | #e8eef6 |
Body, ≥12:1 on bg |
| Muted | #8fa3bd |
Secondary text, ≥4.5:1 on bg |
| Accent (electric blue) | #2e9bff → #5cb4ff → #8fccff |
Brand blue ramp |
| Silver | #c7d4e3 / #9fb0c4 |
Wordmark "Archi", metal blade |
| Success | #46d39a |
"You get this", copied state |
| Danger | #ff5d6c |
"You don't get this", warnings |
Accent kept ≤ ~15% of surface area; the navy field dominates. No gradient-clipped text (solid blue accent + glow instead).
System/Inter sans stack in multiple weights (400/500/600/700/800) for UI and prose; JetBrains-Mono-class monospace for all commands, code, step numbers, and small technical labels. Contrast comes from weight and the sans/mono split, not a second display family. Display heading clamp max ≈ 4.25rem, letter-spacing ≥ -0.035em, text-wrap: balance on headings.
Custom ease-out curves only (--ease-out-quart, --ease-out-quint, --ease-out-expo, drawer curve) — no bounce/elastic. One signature entrance: the brand blade draws on (stroke + glow) with the hero content staggering in beneath it; a slow conic glow and animated circuit traces give the navy field life. Section reveals are subtle and visible by default (IntersectionObserver enhances, never gates). Buttons: hover lift + glow, :active scale 0.97. Tabs: sliding indicator + content slide. Code blocks: hover highlight, copy → check flip. Full prefers-reduced-motion fallback to instant/crossfade.
The canonical reference artwork ships as architech-bg.png (1024×1536, extracted from the redesign reference) and renders as a fixed right-anchored backdrop (.bg-art, cover, left/edge fades via gradient + mask, slow 30s Ken-Burns scale drift). On top, a light runtime SVG ambient layer adds the motion: a cyan scan beam sweeping the artwork every 9s, seven pulsing vertex stars with cross flares, drifting mono data glyphs rising on the left, survey crosses, a horizon glow pool, and receding ground lines. The PNG must travel with the HTML file. A lightweight canvas particle field (≤85 pts, transform/opacity only, paused when tab hidden) adds depth. Whole scene sits at z-0, pointer-events:none, opacity .62 (.38 mobile, labels hidden <900px), drifts on pointer parallax, and renders fully static under reduced motion (final state, no WAAPI, particles off).
Cursor spotlight (--mx/--my radial) on cards/panels; ≤4° 3D tilt on feature & reality cards; magnetic pull (+ press scale) on primary CTAs; scrollspy underline on nav links; back-to-top button after 600px. All gated behind (pointer:fine) + (hover:hover), tilt/magnetic additionally behind no-reduced-motion.
Sticky blurred nav with mark + split wordmark and social icon buttons; hero with rotating-ring blade lockup, tagline pills; honest-disclaimer panel; three feature panels (hover-lift); platform tab group (Mac/Windows) driving a numbered step timeline with connector lines and interactive copyable code blocks; two-column yes/no "reality" panels (icon + color, never color alone); CTA band; footer with brand lockup, tagline, and LinkedIn / Instagram / GitHub buttons.
Single column, 1020px max content width, fluid clamp() spacing. Numbered step sequence is the one legitimate use of numeric markers (it is an ordered flow). Feature/reality groupings use flex/grid only where the 2D affordance is real. No repeated tracked-uppercase eyebrows.