On Shop

On Shop embodies a stark, high-performance aesthetic: a monochrome canvas where bold black typography and clean product photography take center stage. Interaction is delivered with confident, compact components, relying on border treatments and solid fills rather than shadows for visual hierarchy. The design communicates authority through precise spacing and a focused absence of unnecessary visual noise. Use Pitch Black (#000000) for all primary body text, headings, and key icons. Apply Cloud White (#ffffff) as the dominant background for all main page content sections. Implement 24px of horizontal padding within primary filled buttons for a confident, compact feel. Utilize 'On' font family with specific letter-spacing for large headlines (e.g., -0.0200em for 63px type) to achieve a precise, condensed look. Maintain a clear hierarchy using solid fills and borders for component states, avoiding complex shadows. Employ 40px border-radius for all primary button shapes to ensure a soft, approachable pill-like form amidst the stark typography. Structure layouts using a 48px vertical gap between main sections to provide generous breathing room without excess. Do not introduce additional saturated colors; maintain the monochrome palette with minimal functional accents. Avoid decorative gradients or complex overlays; keep surfaces clean and flat. Do not use subtle variations of gray for primary backgrounds or text that compete with Pitch Black and Cloud White. Avoid system default links; ensure all interactive text uses explicit Pitch Black (#000000) or Cloud White (#ffffff) styling. Do not use drop shadows for elevation; rely on color contrast, borders, and spacing. Avoid pixel-perfect spacing and alignment that doesn't adhere to the 4px base unit or defined spacing tokens. Do not use generic font sizes; adhere to the defined type scale to maintain typographic rhythm.