Woset

Woset employs a playful yet considered aesthetic, reminiscent of a child's art cart organized with care. The system uses a clean, light canvas, punctuated by a vibrant primary yellow that brings a pop of creative energy. Typography is grounded, with a custom sans-serif family that balances friendliness with legibility. Components often feature generous border-radii, giving them a soft, approachable feel, while the overall density remains comfortable to allow product illustrations to breathe. Use Canvas (#e5e7eb) as the primary background for all page sections and underlying surfaces. Apply a 30px border-radius to all buttons and input fields to maintain a soft, approachable feel, unless explicitly overridden for a specific component variation. Utilize Ink Black (#000000) for all primary text, headings, and significant interactive text, ensuring high contrast against light backgrounds. Employ Crayon Yellow (#ecca53) exclusively for primary calls-to-action or active states, making these elements distinct and energetic. Maintain a clear elementGap of 22px between logically grouped UI elements, and a sectionGap of 60px between major content blocks. Prioritize Macan for all textual content, using weight 400 for body text and weight 500 for larger headlines. Ensure all interactive fields and ghost buttons feature a 1px border using Muted Ash (#bbbab7) or Ink Black (#000000). Do not use Crayon Yellow (#ecca53) for decorative purposes or text that is not a primary action or active state indication. Avoid harsh, angular corners; always prefer the defined 30px border-radius for interactive elements unless a specific component variant dictates otherwise (e.g., the Full-Width Primary Button). Do not introduce new border colors or weights; stick to 1px Ink Black (#000000) or Muted Ash (#bbbab7) for borders. Do not introduce drop shadows for elevation; rely on spacing, background color changes, and borders for visual hierarchy. Avoid using highly saturated, non-brand colors outside of the specified decorative background fills (Deep Violet, Forest Green, Artisan Red). Do not use the A1 Gothic M font for general body text or headlines; reserve it for its specific defined content role. Do not reduce the elementGap below 22px or sectionGap below 60px, as it will disrupt the comfortable density.