Quizlet

This design system feels like a friendly, structured learning environment, prioritizing clarity and interactive engagement. The dominant near-gray background (#F6F7FB) provides a clean canvas, while a palette of vivid and moderate hues—primarily a bold violet (#4255FF) and accent colors like light blue (#98E3FF) and vibrant pink (#EEAAFF)—define interactive elements and illustrate content categories. The consistent use of hurme_no2-webfont with varying weights creates a cohesive textual experience, balancing readability with a distinctive, approachable character. Use 'Page Background' (#f6f7fb) as the foundational canvas for all pages. Apply 'Quizlet Violet' (#4255ff) exclusively for primary call-to-action buttons and key interactive elements to maintain focus. Utilize hurme_no2-webfont weight 700 for headlines and primary CTA button text to ensure clear hierarchy and impact. Maintain 8px border-radius for all content cards and larger container elements, and 4px for input fields and smaller interactive items. Employ the Stormcloud Ink shadow (rgba(40, 46, 62, 0.1) 0px 4px 16px 0px) for elevated components like cards and navigation to create subtle depth. Employ 16px padding for internal spacing within content blocks and 48px for vertical separation between major sections. Use Stormcloud Ink (#282e3e) for main body text and prominent informational text, and Slate Text (#586380) for secondary text details. Do not introduce new highly saturated colors outside of the defined accent palette, as they will clash with the established brand hues. Avoid using 200px border-radius on any element other than primary buttons to preserve their distinctive pill shape. Do not use generic system fonts; only hurme_no2-webfont should be used for all text content. Refrain from heavy, dark shadows; the subtle Stormcloud Ink shadow is sufficient for elevation. Do not use 0px border-radius on any visible component unless it's a specific, text-only navigation link, to preserve a soft, approachable aesthetic. Do not cluster too much vibrant imagery; allow the core UI colors and clean layout to guide user attention. Avoid using Pure White (#ffffff) for any primary text color; it's reserved for backgrounds and text on dark buttons.