Schoolasium Design System · v1.0.0

Build with consistency.
Ship with confidence.

The centralized design ecosystem for Schoolasium — production-ready components, semantic design tokens, brand assets, and AI-ready guidelines for building world-class EdTech experiences.

Browse ComponentsDesign TokensAI Guidelines
40+Components
120+Design Tokens
3Color Themes
WCAGAA Compliant
schoolasium.design/components
Button · variants
Color · primary
#EAB308
primary-500 · Brand Yellow
Code · usage
<Button
  variant="primary"
  size="md"
>
  Start Building
</Button>
WCAG AA · 11:1 contrast
Scroll to explore
Why Schoolasium DS

Everything you need to build faster

One platform for designers and developers to stay consistent, ship faster, and build experiences kids love to use.

Semantic Design Tokens

120+ tokens for color, typography, spacing, radius, shadows, and motion — all theme-aware and WCAG AA compliant.

40+ Components

Production-ready components from basic atoms to complex organisms — all with live previews, code snippets, and prop tables.

AI-Ready Guidelines

Curated prompt templates, usage rules, and do/don't examples that keep AI-generated code consistent with the design system.

Employee Portal

Private access for internal teams — downloadable assets, brand kits, internal templates, and team announcements.

Multi-Theme Support

Dark mode (default), light mode, and system theme — with smooth animated transitions and full token coverage.

Accessibility First

Every token pair verified against WCAG 2.2 AA. Keyboard navigation, ARIA patterns, and screen reader support built-in.

Built on your existing stack
Next.js · TypeScript · TailwindCSS · Framer Motion · Lucide Icons
Next.jsTypeScriptTailwindFramerLucide
Design Tokens

Tokens & Branding

Semantic, theme-aware tokens you can use as CSS variables, Tailwind classes, or raw values.

View all tokens

Primary — Schoolasium Yellow

Brand anchor. Use for CTAs, logo moments, and focal points.

--color-primary-500#EAB308

Secondary — Tech Cyan

Technology and action. Links, live data, sensor indicators.

--color-secondary-500#06B6D4

Accent — Creator Violet

Creative and premium moments. AI suggestions, achievements.

--color-accent-600#7C3AED

Typography Scale

Roboto · Open Sans · JetBrains Mono
Build with Code
72px
--text-display-2xl
Component Library
36px
--text-heading-xl
Design Tokens
24px
--text-heading-md
Consistent, accessible, and elegant.
18px
--text-body-lg
Secondary label text and captions for interface context.
14px
--text-body-sm
bg-primary-500 text-black rounded-lg
14px
--text-code-md
Component Ecosystem

40+ production-ready
components

From basic atoms to complex organisms — every component ships with live preview, code, and full docs.

Browse all
Basic
Button, Input, Textarea…
9
Layout
Card, Modal, Drawer…
8
Business
Product Card, Analytics Card, Stats Card…
10
Advanced
Command Menu, Data Table, Kanban…
9
Button · all variants
Live Preview · No iframeView docs →
AI-Ready Guidelines

Use AI the right way

Curated prompt templates that keep AI-generated code consistent with the Schoolasium design system.

View all guidelines
Good Prompt
Create a Button component using the Schoolasium Design System.
Use bg-primary-500 for the background, text-black for text,
rounded-xl for border radius, and px-5 py-2.5 for padding.
Include hover:bg-primary-400 and transition-colors duration-150.
Export as a named component with TypeScript props.
Avoid This
Make a button that looks cool with some gradient and shadows
AI usage rules
✓ Always reference design tokens, never hard-code hex values
✓ Use semantic token names: bg-primary-500, not bg-yellow-500
✓ Specify contrast ratios for any new color pairings
✓ Include hover and focus states in every interactive component
✗ Random gradients outside the brand palette
✗ Hard-coded colors like #FFD700 or rgb(255,200,0)
✗ Overriding outline:none without a focus replacement
✗ Mixing font families not in the design system
AI Workflow Tip

Paste the Schoolasium design token CSS file into your AI context window first. This grounds the model in your exact values before you ask for any component.

Resources Hub

Everything in
one place

Brand assets, fonts, design tokens, code templates, and documentation — organized and ready to use.

Browse resources
Public

Brand Assets

  • Horizontal Logo (PNG)
  • Square Mark (PNG)
  • Favicon Set
  • Brand Guidelines PDF
Public

Typography

  • Roboto (300, 400, 500, 700)
  • Open Sans (400, 600)
  • JetBrains Mono (400, 700)
  • Font Loading Config
Public

Design Tokens

  • design-tokens.json
  • tokens.css
  • _tokens.scss
  • tailwind.config.ts
🔒 Internal

Component Kits

  • Figma UI Kit (v1.0)
  • Icon Pack (SVG)
  • Illustration Set
  • Animation Presets
🔒 Internal

Code Templates

  • Next.js Starter
  • Component Registry
  • Storybook Config
  • ESLint + Prettier
Public

Documentation

  • MASTER.md (Design System Spec)
  • Brand Standards
  • Accessibility Checklist
  • Contribution Guide
Ready to build?

Start building with
Schoolasium DS

Join the design team and ship consistent, beautiful, accessible experiences for every student and teacher using Schoolasium.

Browse ComponentsAI GuidelinesEmployee Portal
v1.0.0
Stable Release
40+
Components
WCAG AA
Accessibility
MIT
License