Analogue

Analogue's design system evokes a sense of understated analog precision, mirroring the brand's focus on classic gaming hardware. It uses a strictly monochromatic grayscale palette with stark black backgrounds and white text, punctuated only by occasional product renders that introduce vivid color. Generous negative space and precise typography create an atmosphere of luxury and meticulous craftsmanship, while deeply rounded pill-shaped elements offer a subtle, almost mechanical softness. Use Obsidian (#000000) for all main page and card backgrounds to maintain the deep, dark aesthetic. Prioritize Glacial White (#ffffff) for primary text and calls to action against dark backgrounds to ensure high contrast and legibility. Apply 17.6256px border radius to all card-like containers, and the maximum 16777200px (or full pill shape) to buttons and tags. Employ circularXx (substitute Circular Std) with precise negative letter-spacing for all typography, specifically targeting -0.0300em for body text and tighter for headlines. Maintain generous vertical spacing between sections, using 41px to 103px as a base, to create visual breathing room and emphasize content blocks. Utilize Frost Gray (#e5e7eb) sparingly for borders and subtle element distinctions, reserving it for secondary contrast against Obsidian. Ensure all interactive text elements use Glacial White (#ffffff) at circularXx weight 400, size 15px, with subtle letter spacing adjustments. Avoid using highly saturated or bright colors outside of product photography; the palette is strictly monochromatic. Do not use box-shadows for elevation; depth is created through background changes between Obsidian and Frost Gray, or product photography. Refrain from using square or lightly rounded corners for buttons or interactive tags; embrace the distinct 16777200px pill radius. Do not vary line-height significantly for body text; aim for the 1.5 ratio for optimal reading comfort against the dark background. Avoid breaking compositional elements with hard lines or excessive borders; rely instead on spacing and background color shifts to define areas. Do not use generic system fonts; always implement circularXx (or Circular Std) to maintain the brand's precise and modern typographic identity. Never use 999999 (Faded Gray) or bfbfbf (Steel Accent) for critical text or primary actions, as their lower contrast is reserved for secondary information.