Ssense

This design system evokes a raw, editorial aesthetic, balancing high fashion photography with an almost stark, functional UI. The interplay of classic serif typography for headlines and a utilitarian sans-serif for body text creates a tension, amplified by the near-monochromatic palette. Minimal use of color and a focus on content photography establishes a luxurious but unpretentious feel, prioritizing visual storytelling over decorative elements. Always use a clear hierarchy of #000000 for primary text, #333333 for secondary text, and #888888 for tertiary text. Prioritize 'JHA Times Now' (100) at large sizes (56px) for main editorial headlines to achieve a soft, luxurious feel. Maintain generous vertical spacing between sections, opting for a minimum 'sectionGap' of 64px. Utilize '#f4f4f4' as a background for subtly differentiated content blocks, providing context without visual noise. Apply 'Favorit SSENSE Inter' at 11px/400 weight for all utility and metadata text to maintain a consistent discreetness. For CTA buttons, use a 1px border of #333333 and a Canvas White (#ffffff) background with Ink Black (#000000) text. Use tight letter-spacing for headlines and display text, particularly the negative values for 'Favorit SSENSE Inter1' at larger sizes, to ensure a compact, architectural look. Avoid using bright or saturated colors; maintain the monochromatic palette with slight textural variations in grays and whites. Do not use heavy font weights (e.g., 600-700) for headlines; the ultra-light 'JHA Times Now 100' is preferred for high-impact text. Refrain from excessive border radii on elements; most components should be sharp-edged, with minimal rounding only where detected (e.g., 10px on specific links). Do not use drop shadows for elevation; rely on background color changes (#f4f4f4, #e8e8e8) or subtle borders to define layers. Avoid decorative elements or excessive UI chrome; the design should foreground content and photography.