Martin Laxenaire

This design system presents a playful yet structured aesthetic with high-contrast monochrome text layered over vibrant, organic color fields. It prioritizes bold typography and dynamic background elements, creating an engaging user experience without heavy-handed decoration. The system balances sharp, interactive elements with a distinct underlying fluidity for visual interest, using an 'experience point' metaphor to drive user engagement. Surfaces are bright and clean, allowing the expressive typography and occasional bursts of color to define the visual identity. Prioritize Canvas White (#ffffff) as the dominant background, with Ink Black (#121212) for all text and UI outlines. Use MonumentExtended UltraBold for all primary headings and impactful statements at sizes 63px and above, ensuring tight line heights (0.75-0.85) for visual density. Employ the rounded pill shape with 16.22px or 20.93px radius for all interactive buttons and active states. Introduce Candy Pink (#f9d9f7) as a background fill for content sections to create visual rhythm and a playful atmosphere, ensuring Ink Black text maintains AAA contrast. Maintain comfortable density with an elementGap of 21px and a sectionGap of 42px for consistent vertical spacing. Apply Ink Black (#121212) as a 1px border for all interactive elements and surfaces that require definition against the Canvas White background. Use 'Swiss' at 16-21px for all body copy and descriptive text, prioritizing readability. Avoid using multiple chromatic colors in active UI elements; reserve vibrant colors mainly for decorative backgrounds or illustrations. Do not deviate from the specified MonumentExtended weights and line heights for headings; their distinct visual impact relies on these precise values. Do not use subtle variations of gray for additional neutrals; stick to Canvas White and Ink Black for core UI elements. Avoid using drop shadows for elevation; rely on solid borders and background color changes for surface distinction. Do not introduce square or minimally rounded corners (e.g., 4px radius) for interactive components; maintain the distinct pill-like radius (16.22px or 20.93px). Do not use generic system fonts for body text; always substitute with 'Swiss' or its designated replacement 'Inter'. Avoid large negative letter spacing outside of the defined typography scale; maintain normal letter spacing for most text.