Examdee Design System 🎒

A friendly, education-focused design system built with React, TypeScript, and TailwindCSS.

Designed for clarity, accessibility, and a delightful learning experience. This system includes two distinct visual identities:

• Student UI: Gamified, bouncy, and high-energy (using Nunito).
• Admin UI: Professional, structured, and high-density (using Inter).

Project Structure

├── apps/docs          # Next.js documentation site
├── packages/ui        # Core component library & tokens
├── packages/cli       # CLI tool to install components (examdee)
├── registry/          # Component registry for the CLI
└── scripts/           # Sync & Build scripts

Quick Start (Documentation)

To run the documentation locally:

pnpm install
pnpm dev

The docs will be available at http://localhost:3333.

Using the CLI

You can add components to your own project using the Examdee CLI:

# Initialize project
npx examdee-cli init

# Add a component
npx examdee-cli add button

Syncing with Figma

This system is built for tight integration with Figma Variables. To sync tokens:

1. Add your FIGMA_ACCESS_TOKEN to your environment.
2. Run the sync command:

pnpm figma:sync

Deployment

The documentation is ready to be deployed to Vercel.

• Root Directory: .
• Framework: Next.js
• Output Directory: apps/docs/.next (Next.js default)
• Build Command: pnpm build (Turbo will handle the monorepo build)

Developed by the Examdee Team. 🚀