Mr. Marcel School

Mr. Marcel School employs a vibrant, educational workshop aesthetic, combining a primarily dark canvas with high-contrast, playful chromatic accents. The density is balanced, favoring clear separation between content blocks. Typography is confident yet friendly, set against dark surfaces with selective use of bright colors for emphasis. Components are sharp-edged, often outlined, and avoid heavy shadows, creating a lightweight, graphic feel. Prioritize Midnight Canvas (#242424) for primary backgrounds and Soft Black Surface (#191919) for elevated elements, maintaining a dark theme. Use Muted Sage (#dbf3d0) for primary interactive elements and key brand accents to create visual punctuation. Apply a 0px border-radius for most rectangular UI elements like cards and some buttons to maintain a sharp, graphic feel. Utilize 50% border-radius for circular elements, such as ghost buttons or profile picture frames, for clear distinction. Maintain a clear visual hierarchy with Sofia Pro in various weights for headings and body text, especially the larger sizes of 52px and 74px for display text. Employ Pale Lavender (#abc1e8) for informational accents and active navigational items to guide user attention. Ensure generous padding of 30px within Dark Content Cards to provide ample breathing room around content. Avoid applying heavy drop shadows; the system favors flat or outlined elements over dimensional ones. Do not use generic blue for primary action or informational states; instead, leverage Muted Sage (#dbf3d0) and Pale Lavender (#abc1e8). Refrain from using gradients broadly; the UI is characterized by flat colors and sharp contrasts. Do not introduce rounded corners arbitrarily; follow the established 0px for cards/blocks and 50% for circular elements. Avoid dense, information-packed sections without clear visual breaks; prioritize comfortable density for readability. Do not use standard system fonts when Sofia Pro or Helvetica (where specified) are designated for content. Do not override the distinct letter-spacing for Helvetica at 15px (0.0070em); this is a specific design choice.