Educated Horizons Design System
This design system provides consistent colors, typography, and component styles for the Educational Attainment and Fertility Rate Dashboard. It uses a blue-to-purple color progression to visually represent educational milestones.
Educated Horizons Design System
Color Palette
Education Groups
UI Colors
Choropleth Map Colors
Typography
Source Serif Pro
h1. Heading
h2. Heading
h3. Heading
h4. Heading
Inter
h5. Heading
h6. Heading
subtitle1. A little smaller subtitle.
subtitle2. An even smaller subtitle.
body1. Default paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. The fox jumped over the lazy dog.
body2. Smaller paragraph text often used for secondary content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
caption textoverline textUI Components
Buttons & Interactive Elements
Cards
Card Subtitle
Cards are used to group related content and actions about a single subject.
Lists
- List Item 1
Description of item 1
- List Item 2
Description of item 2
- List Item 3
Description of item 3
Visualization Styles
Chart Specifications
Bar Charts
• Colors: Education palette
• Axes: Minimal gridlines (#ECEFF1)
• Labels: Clear, consistent formatting
• Tooltips: On hover with detailed data
Line Charts
• Colors: Education palette
• Line weight: 2.5px
• Markers: Small circles on hover
• Annotations: For key events
• Legend: Interactive, toggleable
Choropleth Maps
• Colors: Teal gradient
• Borders: Darker shade or neutral
• Scale: 5-7 discrete steps
• Tooltips: On hover with state details
• Selection: Clear visual indication
Accessibility Features
Color Blindness Considerations
Alternative encodings when colors alone aren't enough:
Interactive Elements
• Minimum touch target size: 44×44px
• Animation duration: 400ms
• Contrast ratio: ≥4.5:1 for text
• Focus indicators: Visible on keyboard navigation
• ARIA attributes: For screen reader support