Preview image. Unlock full-res
Shifting Gradual Horizon — a continuous, subtle color transition across surfaces, like watching a sunrise or sunset unfold.
New Genre evokes a serene, almost academic atmosphere through subtle color gradients and precise typography. The core is a unique gradient background that shifts from deep, muted tones to soft, almost ethereal lightness, underpinning minimalist content blocks. Typography relies on custom fonts with generous letter-spacing, particularly noticeable in headlines, signaling thoughtfulness and understated authority rather than bold declarations. Interactive elements are sparingly defined, primarily through rounded shapes and light borders, maintaining a sense of quiet professionalism. Prioritize the Sky Gradient as the primary background for full-page or hero segments to establish the atmospheric and shifting visual identity. Use Serrif Condensed Regular with -0.02em letter-spacing for all significant headlines to emphasize precision and a slightly formal tone. Maintain a clear hierarchy with Ebon Depth #000000 or Onyx Shadow #0c1018 for primary text and Mist Gray #9e9fa3 for secondary information. Apply 90px border-radius for all primary action buttons ('pill buttons') and 50px radius for input fields, establishing a soft, approachable interaction style. Ensure consistent horizontal padding of 24px for all major content blocks and card elements to maintain a structured, spacious feel. Leverage the Saans Variable font family for all body, subheading, and UI text, ensuring its specific negative letter-spacing for a tight, refined look. Avoid harsh, solid background colors; instead, opt for gradients or Whisper White #ffffff to preserve the site's ethereal quality. Do not use overly bold or heavy font weights; the system relies on lighter weights like Saans Variable 300-500 and Serrif Condensed Regular 400. Refrain from using strong, single-color accents; instead, any accent should be subtle, transparent, or part of a larger gradient. Do not introduce sharp corners or small radii on interactive elements; all buttons and inputs should adhere to 50px or 90px border-radius. Avoid dense, information-heavy sections without adequate section gaps (48-52px) or element gaps (6-24px); maintain a compact yet breathable layout. Do not use default browser link styling; ensure all links use Saans Variable and are styled consistently with the navigation links or body text.
