Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Instructure
EdTechInstructure embodies an education-first aesthetic that balances professional authority with approachable warmth. The vibrant royal blue creates trust and reliability while the geometric red accent adds energy and innovation, telling a story of transformative learning experiences.
Design Identity
Signature Color
Instructure Royal Blue
#2D4FE7
Educational authority and trustworthy learning platform expertise
Visual Identity
Bold geometric shapes in contrasting colors (red circles, blue rectangles) overlaid on photography create a distinctive layered composition that signals innovation in traditional education.
Component Style
Soft, rounded corners with generous padding create approachable, touchable elements. Primary buttons feature confident rounded rectangles with no harsh edges, emphasizing accessibility and warmth over corporate sharpness.
Spacing Philosophy
Generous breathing room with asymmetrical layouts - large content blocks get substantial margins while maintaining intimate 16-24px gaps between related elements, creating a learning-focused hierarchy.
Design Principles
- Geometric overlays always use primary brand colors (blue/red) at 80-90% opacity
- Headlines use 48px bold CircularXX for maximum impact
- Body text maintains 16px with 25.6px line height for readability
- Button radius stays consistently around 24-32px for friendly approachability
- Photography always features collaborative, diverse learning scenarios
Target Audience
Education leaders, instructional designers, and learning professionals who need enterprise-grade solutions but value human-centered design over sterile corporate tools
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 16px | 400 | 25.6px | |
| h1 | 48px | 700 | normal | |
| h2 | 40px | 700 | normal | |
| h3 | 32px | 700 | normal | |
| h4 | 24px | 700 | normal | |
| h5 | 40px | 700 | 48px | |
| p | 36px | 500 | 36px | |
| a | 16px | 400 | 25.6px | |
| button | 12px | 400 | 15px | |
| input | 13px | 400 | 16.25px |
Color Palette
#ffffff#000000
