21n

This design system presents a welcoming yet authoritative digital experience, reminiscent of a well-organized personal library. Its light theme and ample white space provide a calm backdrop for the sharp, precise typography. The muted, near-achromatic palette, punctuated by specific brand-colored highlights, directs attention without visual clutter, creating an environment balancing technical clarity with approachable softness through its rounded buttons. Prioritize Sen font at weight 700 for all display headings exceeding 36px, rendered in Deep Slate (#333333). Maintain a clear visual hierarchy using Deep Slate (#333333) for primary text and Graphite (#545454) for secondary text and details. Use Light Ash (#e5e7eb) for all primary borders and dividers to ensure subtle visual separation. Employ a 9999px border-radius for all primary and hero action buttons to achieve a soft, approachable pill shape. Utilize Accent Blue (#2c70dd) for all crucial interactive elements and actionable links to draw attention. Apply 25px horizontal padding and 17px vertical padding to content blocks for consistent 'comfortable' density. Ensure section transitions primarily use 'Cloud White' (#ffffff) backgrounds, maintaining a clean, expansive aesthetic. Avoid using highly saturated colors for backgrounds; maintain the near-achromatic palette for large surfaces. Do not deviate from the Sen typeface; a single family ensures typographic consistency even with varied weights and sizes. Refrain from introducing custom shadow effects; the system relies on flat design with subtle border colors for depth. Do not use square or sharp-cornered buttons or primary UI elements; maintain a radius of at least 6.26px. Avoid excessive text density; leverage the comfortable spacing (minimum 4px element gap) and ample line heights. Do not use dark backgrounds for main content areas; reserve them for specific, high-contrast CTA buttons if needed. Do not introduce gradients; the design relies on solid colors for its clean, precise aesthetic.