Affinity

Affinity presents a dark, theatrical stage for creativity, utilizing deep black canvases to highlight vibrant, floating artistic elements. Typography is a confident mix of a bespoke serif for headlines, bringing a classic yet bold presence, paired with a modern sans-serif for functional text. Bright, almost neon green serves as the primary accent, signaling interactive states and calls to action with an energetic pop against the dark backdrop, while subtle elevation and distinct radii define interactive components, ensuring a tactile, precise feel. Always use Canvas Black (#000000) as the primary page background. Utilize Affirmative Green (#a7f175) exclusively for primary calls to action and active interactive states, ensuring high contrast. Employ Affinity Serif Variable for all prominent headlines, varying sizes but maintaining its inherent normal letter spacing. Apply Canva Sans for all body text, navigation, and button labels, setting letterSpacing: 0.01em for consistent readability. Default to an 8px border radius for most elements like buttons and cards, creating a consistent soft corner styling. Use a 9999px border radius for pill-shaped secondary action buttons to distinguish them from primary actions. Maintain a clear visual hierarchy by differentiating card backgrounds: Paper White for light cards, Foreground Black for dark cards, and Dark Card Surface for elevated dark cards. Do not use generic system serifs for headlines; Affinity Serif Variable is critical for brand identity. Avoid using multiple chromatic colors for primary calls to action; Affinity Green has a singular role. Do not use subtle elevation shadows on cards; the design prioritizes flat surfaces with clear background color differentiation. Refrain from altering the positive letter-spacing of Canva Sans; it's a core aspect of its visual rhythm. Do not use square corners for interactive elements; 8px or 9999px radii are preferred. Avoid using light text on light backgrounds or dark text on dark backgrounds without sufficient contrast, as the system relies on high contrast pairings. Do not use more than two levels of dark background (#000000, #0f1015, #211d1d) unless explicitly defined for a unique component.