Component Design System

The ProctorAI Component Design System is built on a foundation of Tailwind CSS v4, Radix UI primitives, and Framer Motion. It follows a "Shadcn-plus" philosophy: providing highly accessible, headless components styled with modern utility classes and enhanced with hardware-accelerated animations.

Design Philosophy

The system is designed for high-stakes environments where clarity and performance are critical.

• Accessibility: Built on Radix UI to ensure keyboard navigation and screen reader support.
• Motion-First: Every state transition (modals, alerts, tab switches) uses Framer Motion to provide visual cues without sacrificing performance.
• Dynamic Feedback: Real-time data is represented through color-coded status indicators and live-updating charts.

Core Utilities

Class Merging (cn)

To support dynamic styling and override base component classes, the system uses a cn utility. This combines clsx for conditional logic and tailwind-merge to handle Tailwind v4's cascaded styles correctly.

import { cn } from "@/lib/utils";

// Usage
<div className={cn("base-styles", isWarning && "text-red-500", customClassName)}>
  Component
</div>

Styling & Theming

The system leverages Tailwind v4 CSS variables defined in src/app/globals.css. It uses a custom color palette optimized for proctoring visibility:

| Token | CSS Variable | Purpose | | :--- | :--- | :--- | | Navy | --color-navy | Primary backgrounds, headers, and text. | | Cyan Accent | --color-cyan-accent | Primary actions, buttons, and "active" states. | | Status Red | --color-red-500 | Critical violations and high-risk alerts. | | Status Amber | --color-amber-500 | Moderate risk and warnings. | | Status Emerald| --color-emerald-500 | Compliance, passing checks, and safety. |

Layout Components

Navbar

A persistent navigation component that supports both marketing (transparent/glassmorphism) and application (solid/authenticated) states.

import Navbar from "@/components/Navbar";

export default function Page() {
  return (
    <>
      <Navbar />
      <main>Content</main>
    </>
  );
}

Interactive Components

Motion Containers

The system uses framer-motion for entrance animations and state transitions. Standard entrance patterns (e.g., fadeUp) are used to ensure a cohesive feel across the dashboard and analytics.

import { motion } from "framer-motion";

<motion.div
  initial={{ opacity: 0, y: 10 }}
  animate={{ opacity: 1, y: 0 }}
  className="rounded-xl border bg-white p-4"
>
  Dashboard Metric
</motion.div>

Alert & Status Indicators

Used for proctoring events. These components dynamically adjust their visual weight based on a severity or riskScore prop.

// Example of dynamic status styling using cn and helper functions
<span className={cn(
  "px-2 py-1 rounded-full text-xs font-medium",
  getStatusColor(student.status)
)}>
  {student.status}
</span>

Data Visualization

The system integrates Recharts for proctoring analytics. All charts are wrapped in ResponsiveContainer and styled to match the navy/cyan theme.

Key Chart Types:

• Area Charts: Tracking risk scores over a time series.
• Bar Charts: Comparing violation types (Gaze, Tab Switch, Audio).
• Pie Charts: Visualizing the distribution of risk levels across a student cohort.

import { AreaChart, Area, ResponsiveContainer } from "recharts";

// Configuration used in analytics
<ResponsiveContainer width="100%" height={300}>
  <AreaChart data={riskOverTimeData}>
    <Area 
      type="monotone" 
      dataKey="score" 
      stroke="#00bcd4" 
      fill="url(#colorGradient)" 
    />
  </AreaChart>
</ResponsiveContainer>

User Feedback (Sonner)

The proctor and student experiences use sonner for non-intrusive notifications.

• Proctor Notifications: Used for incoming live alerts (e.g., "Gaze deviation detected").
• Student Notifications: Used for system check results and anti-cheat warnings (e.g., "Please return to fullscreen").

import { toast } from "sonner";

// Triggering a violation warning
toast.warning("Anti-cheat Alert", {
  description: "Browser tab switch detected. This event has been logged.",
});

Icons

All iconography is provided by lucide-react, ensuring a consistent stroke weight (2px) and style across marketing and dashboard surfaces.