Arc

Arc's design feels like an iridescent canvas beneath structured content. A clean, spacious base of near-white #fffcec and #ffffff is contrasted by vibrant, gradient-heavy headers and footers that burst with energetic blues and purples. Typography utilizes tight letter-spacing for headlines, lending a crisp, almost digital precision, while interactive elements are defined by a singular, deep violet #3139fb and a distinct pill-shaped button style. Prioritize Marlin Soft SQ for all headlines and navigation, applying tight letter spacing values like -0.05em at 46px to maintain the crisp, modern feel. Use Arc Violet (#3139fb) as the dominant accent for all interactive elements, ensuring visual consistency for brand actions. Apply the Pill Download Button's 22px border-radius and rgba(0, 0, 0, 0.85) background to all primary call-to-action buttons for consistency. Employ the Canvas (#ffffff) and Wash (#fffcec) backgrounds in an alternating fashion for major page sections to create a subtle shift in depth. Use a base vertical padding of 8px and horizontal padding of 22px for buttons to preserve the brand's unique button proportions. For any UI elements requiring a subtle lift, incorporate a soft shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 0px. Maintain a clear hierarchy of text colors: use Charcoal Text (#000000) for headlines, Body Text (#696969) for main paragraphs, and Muted Text (#595853) for secondary information. Avoid using harsh or opaque shadows; stick to the light, transparent shadow styles provided. Do not introduce new color hues for interactive elements; confine brand interactions to Arc Violet (#3139fb) and Action Violet (#2702c2). Avoid generic button shapes; adhere to either the 10px radius for ghost buttons or the 22px pill shape for primary CTAs. Do not let headlines breathe with positive letter spacing; maintain the characteristic negative tracking for impact. Avoid using stock photography; instead, focus on clean product screenshots within browser frames. Do not deviate from the established spacing hierarchy; all elements should align with the 4px base unit, with element gaps at 24px and section gaps at 48px. Don't use gradients for subtle UI elements; confine them to large, thematic areas like hero sections or structural backgrounds.