Design System
ParentTeacher Design System
Educational Blue-Teal Palette with complete design specifications
Primary Color Palette
Typography
Primary Heading (700)
Secondary Heading (600)
Tertiary Heading (600)
Quaternary Heading (600)
This is regular body text (400). Inter provides excellent readability for interface elements and body text, especially on screens. The clean, modern aesthetic works well for educational content while maintaining a professional appearance.
This is medium body text (500) that can be used for emphasis.
Primary Heading (600)
Secondary Heading (600)
Tertiary Heading (400)
This is regular body text (400). Lora provides a more traditional, warm feel that’s appropriate for long-form educational content. The serif design can help with readability of lesson plans, educational articles, and instructional content.
This is italicized text for emphasis or quotes.
Typography Guidelines
- Primary Font Stack: ‘Inter’, system-ui, -apple-system, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif
- Secondary Font Stack: ‘Lora’, Georgia, “Times New Roman”, serif
- Body Text Size: 16px (1rem) minimum for good readability
- Line Height: 1.6 for body text
- Color Usage: Primary text #263238, Secondary text #546E7A
- Accessibility: Maintain minimum contrast ratio of 4.5:1 for normal text
UI Components & Patterns
Card Pattern
Cards with subtle shadows and rounded corners (8px radius) create a clean, accessible interface. Background color white (#FFFFFF).
Card Title
Card content with standard padding (1rem).
Form Elements
Form fields with clear labels and adequate spacing. Focus states use the teal accent color.
Navigation Pattern
Clean, accessible navigation with clear active states.
Alert Pattern
Informational alerts use the accent colors from the palette.
Background Recommendation
Recommended Page Background: #F5F7FA
This light blue-gray provides a subtle, calming backdrop that complements the ParentTeacher palette. It creates enough contrast with white content cards while maintaining a clean, professional appearance. This color is gentle on the eyes for extended viewing, which is important for parents and teachers who may spend significant time creating activities.
This demonstrates how white content cards (#FFFFFF) appear against the recommended background, creating a clean visual hierarchy with subtle depth.
Design Principles
Education-Focused
Design with educational goals in mind. Prioritize clarity and organization to support learning and teaching.
Empowerment
Create an interface that empowers parents and teachers to easily create high-quality educational content without technical barriers.
Consistency
Maintain consistent patterns, colors, and interactions throughout the application to build familiarity and comfort.
Efficiency
Design for efficiency to respect the limited time parents and teachers have, with intuitive workflows and helpful shortcuts.
Bootstrap Integration
Recommendations for Bootstrap Customization
To maintain the same infrastructure as SeniorActivities while implementing this ParentTeacher color scheme, consider these customization approaches:
- Custom Bootstrap Theme: Create a custom Bootstrap theme that overrides the default variables with your ParentTeacher colors (using Sass variables if possible).
- Custom CSS Classes: Define additional classes for the teal (#4498a9) and lime green (#9fd151) elements that aren’t part of Bootstrap’s default palette.
- Consistent Components: Use the same component structure across both sites, changing only colors and content.
- Shared Utilities: Create a shared utilities file that both sites can use for common patterns like card styles, form styles, etc.
By following these guidelines, you’ll ensure both sites maintain the same UX patterns while presenting different brand identities through color.