Preview image. Unlock full-res
Academic blueprint on a clean whiteboard. Clarity and structure in a digitally-enhanced learning space.
This design system feels like a thoughtfully organized learning environment, clean and accessible, with a strong institutional identity. Its visual precision is built on harmonious Google Sans typography and a distinctive palette of blue and green accents on a stark white background. The use of soft border radii and subtle shadow planes prevents the interface from feeling sterile, instead fostering an approachable and encouraging atmosphere. Prioritize Google Sans Display for all hierarchical headlines to maintain authoritative, clear communication. Use Classroom Blue (#1a73e8) exclusively for primary calls to action and critical interactive elements. Employ the 200px border-radius for all primary buttons and interactive 'chips' to maintain the signature pill shape. Maintain a clear visual hierarchy by differentiating text with Text Dark (#202124), Text Medium (#3c4043), and Text Subtle (#5f6368). Apply Border Light (#dadce0) for all subtle dividers, borders, and outlined states to ensure a soft, unobtrusive separation. Utilize a base spacing unit of 8px, scaling up consistently for element, card, and section spacing (e.g., 8px, 16px, 24px, 32px, 64px). Employ Sky Tint (#e8f0fe) or Mint Glaze (#ceead6) for subtle background shifts to break content monotony without harsh transitions. Avoid using harsh shadows; instead, opt for subtle, barely-there elevations to maintain the light, modern aesthetic. Do not introduce new typefaces; strictly adhere to Google Sans Display and Google Sans Text. Refrain from using saturated colors other than Classroom Blue or Educator Green to prevent visual clutter and maintain brand consistency. Do not use sharp corners; the soft 8px radius for containers and the 200px radius for buttons are fundamental to the system's character. Avoid dense, text-heavy blocks without visual breaks; incorporate generous white space and imagery to maintain readability and visual comfort. Do not deviate from the established type scale; maintain consistent font sizes and line heights for defined roles (e.g., headline, body, caption). Do not use dark backgrounds for main content areas; maintain Page White (#f8f9fa) as the dominant background color to reinforce the light theme.
