Squarespace

Squarespace embodies a refined, editorial aesthetic with a stark contrast between a dominant dark mode hero and a light canvas for content. Typography relies on a precise, custom sans-serif with subtle letter-spacing variations to convey authority. Components are understated, often ghost-like or subtly outlined, emphasizing content over heavy ornamentation. The system prioritizes functional clarity and a premium, minimalist feel. Use Absolute Zero (#000000) as the default background for hero sections and footer areas to establish a premium, high-contrast feel. Apply Clarkson font consistently for all text, varying weights (300, 400, 500) and sizes according to the type scale to maintain stylistic unity. Utilize 8px border radius for all cards, standard buttons, and input fields to ensure a subtle, consistent softness. Implement a 100px border radius for pill-shaped elements like tags or category buttons. Maintain 12px as the standard elementGap for horizontal and vertical spacing between small elements. Reserve Graphite (#2f2f2f) for primary actions, ensuring its distinction against the black and white palette. Ensure headings use negative letter-spacing from Clarkson font (-0.06em to -0.001em depending on size) to create a tight, editorial look. Avoid using bright or overly saturated colors, as the palette is largely monochromatic with controlled accents. Do not use heavy shadows or deep elevation for components; surfaces should remain flat or subtly defined with borders. Do not introduce new font families; the system relies on Clarkson and Clarkson Serif for all typographic needs. Avoid arbitrary border radii; stick to 8px, 100px, 3px, and 30px as defined by the system for specific components. Do not use generic padding values; adhere to the specified spacing tokens like 12px, 16px, 24px, and 40px. Refrain from using color to indicate states (success/error) unless explicitly defined; rely on text and icons for such feedback. Do not break the light content / dark hero pattern; this contrast is central to the visual identity.