School

This design system evokes a digital scrapbook or a quirky desktop environment, blending structured content with playful, almost childlike elements. The visual language is defined by a gridded card layout, each card a slightly rounded container. Eclectic color accents, often within illustrations or as background highlights, punctuate a predominantly neutral gray canvas. IBM Plex Mono's technical precision paired with Helvetica's classic readability creates a subtle tension, mirroring the creative studio's 'conceptual yet practical' ethos. Use Desktop Gray (#F2F2F2) as the default page background to establish the primary canvas. Apply Card Surface (#DBDBDB) and 10px border-radius to all primary content cards. Headlines should primarily use Helvetica, varying weights (300, 400, 700) and sizes (18px, 44px) for hierarchy. Body text and secondary information must use IBM Plex Mono, 400 weight, with varying sizes (11px, 14px, 16px). Employ Attention Yellow (#F9F5A2) as a background highlight for specific words or phrases to draw playful attention. All interactive input fields should have Input Fill (#EDEDED) background, a 1px Ink (#303030) top border, and 25px border-radius. Use 8px or 12px for internal padding within cards to ensure consistent element spacing. Avoid generic button styles; prefer a pill shape (20px radius) for badges and inputs to maintain the system's character. Do not use highly saturated colors for large background areas; save vivid colors for illustrations or small, deliberate accents. Do not introduce new shadow styles; adhere to rgba(0, 0, 0, 0.16) 0px 3px 6px 0px for elevated cards. Refrain from using System Blue (#0064E2) as a general background or text color; reserve it for distinct interactive states. Do not use letter-spacing values other than 'normal' for either font; the expressive quality comes from font choice and weight variation. Avoid sharp corners on interactive or card elements; the system prefers soft rounding (10px, 20px, 25px).