Design System Showcase

Educhain Design System

A professional design system built for educational technology. Clean, accessible, and purposeful.

Color Palette

Primary Colors - Emerald

Emerald 50

#ECFDF5

Emerald 100

#D1FAE5

Emerald 500

#10B981

Emerald 600

#059669

Neutral Colors - Gray Scale

Gray 50/900

#F9FAFB

Gray 100/800

#F3F4F6

Gray 600

#4B5563

Gray 900/100

#111827

Components

Buttons

Cards

Primary Card

Main content card with emerald accent and clean styling for important information.

Featured Card

Highlighted content with emerald background for special features.

Interactive Card

Hover effects and animations for enhanced user interaction.

Form Elements

Text Input

Select Dropdown

Textarea

Status Indicators

✓ Success✗ Error⚠ Warningℹ Info○ Neutral

Typography

Heading 1 - Bold & Strong

Heading 2 - Bold

Heading 3 - Semibold

Heading 4 - Semibold

Body Large - Perfect for introductory paragraphs and important content that needs emphasis with proper line height for readability.

Body Regular - Standard paragraph text that's easy to read with balanced contrast and spacing for comfortable long-form reading.

Small text - Used for captions, labels, metadata, and secondary information that supports the main content.

Code snippet with emerald syntax

EduChain Design System

Built for educational technology with accessibility, clarity, and user experience at its core. Every element serves a purpose in creating trustworthy digital credentials.

Accessible

WCAG 2.1 compliant with high contrast ratios

Consistent

Unified patterns across all components

Scalable

Grows with your educational platform