Poly

Poly's visual system evokes a smart, understated productivity environment. It employs a near-monochromatic palette for structural elements, allowing a single vibrant orange-red gradient to serve as a focused accent for branding and calls to action. Typography balances a clean sans-serif for body text with distinctive custom display fonts for impact, featuring subtle letter-spacing for refined text blocks. Components are clean and minimal with soft rounded corners and a focus on clarity through considered use of shadows for depth. Use 'Canvas White' #f4f4f4 as the primary background for most sections to maintain a bright, open feel. Apply 'Ink Black' #000000 for all primary text and critical UI elements to ensure high contrast and readability. Reserve the 'Poly Gradient' (linear-gradient(134.77deg, rgb(244, 130, 77) 25.1%, rgb(244, 41, 25) 74.9%)) exclusively for primary calls to action and brand accents. Employ an 8px border-radius for all interactive elements like buttons and any card-like containers to establish a consistent soft edge. Maintain a clear visual hierarchy by using 'Inter' for body and functional text, and 'Haffer Variable' or 'Bogue' for headings as appropriate. Utilize 12px for 'elementGap' to define comfortable spacing between interactive elements and components. Introduce subtle elevation using rgba(0, 0, 0, 0.2) 2px 2px 5px 0px for interactive elements on hover, giving them a slight lift off the surface. Do not use saturated colors other than the 'Poly Gradient' for interactive elements or brand accents. Avoid arbitrary border-radius values; stick to the standard 8px for a cohesive look. Do not use the 'Poly Gradient' or any significant chromatic colors for body text or secondary UI elements. Do not exceed a page max-width of 1280px for core content, allowing for a contained reading experience. Refrain from using strong, opaque shadows; leverage the subtle inset/offset shadow style for visual depth. Do not use more than two distinct font families on any single screen to avoid visual clutter. Avoid dense information blocks; instead, use 'sectionGap' of 48px to create comfortable visual breaks between major content areas.