Design System

EduProjects

Centralized standards and reusable components for Edu products, ensuring consistent UI, faster delivery, and accessible learning experiences.

Foundations Components Motion Mascot
Browse Components Start with Tokens

System Status

v1.2.0 Stable
✓

Foundation

Colors, Typography, Icons

Stable
May 20
◐

Components

Buttons, Cards, Inputs

In Review
Jun 10
★

Animations

Motion & Interactions

New
Jun 15
✓

Design Tokens

Spacing, Radius, Shadows

Stable
May 1

Design Principles

This system provides a single source of truth for Edu UI/UX, aligning visual language, interaction patterns, and component usage across products and teams.

Learner-Centered

Clear hierarchy, calm typography, and friendly visuals that support focus and comprehension.

Actionable Feedback

Timely states and cues help users understand results and next steps with confidence.

Focused Simplicity

Remove visual noise and emphasize the primary task to reduce cognitive load.

Inclusive Access

Contrast, size, and spacing choices aim to serve diverse learners and contexts.

At a Glance

Colors

Brand palette, functional colors, and neutrals

Tokens

Spacing, radius, shadows, atomic values
Button

Components

Buttons, cards, inputs, UI elements
Mascot

Mascot

Our friendly guide and system mascot
✨

Animations

Motion, feedback and transitions

Resources

Figma Kit

Design Library v2.1

GitHub Repo

Source code & Issues

VS Code Ext

Code snippets

Quick Start

To use this design system in your project, simply include the CSS file in your HTML <head>:

<!-- Add Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&family=Roboto+Mono:wght@500;700&display=swap" rel="stylesheet">

<!-- Add Design System -->
<link rel="stylesheet" href="css/design-system.css">