UI System & Shadcn/UI

Overview

The Japanese ATS (Applicant Tracking System) utilizes a modern UI system built on Radix UI primitives and Tailwind CSS, orchestrated via shadcn/ui. This architecture ensures a highly accessible, accessible, and performant user interface that maintains a professional aesthetic suitable for recruitment software.

The system emphasizes high readability, clear status indicators, and smooth transitions to guide users through the application and administrative workflows.

Design Tokens & Theme

The UI is defined by a set of CSS variables located in src/index.css. These tokens control the visual identity of the application.

Color Palette

The system uses a sophisticated color palette designed for clarity and professional data presentation:

• Primary (--primary): A professional blue (#3b82f6) used for main actions and branding.
• Accent (--accent): A teal/mint color used for highlights and specific call-to-actions.
• Status Colors: Custom tokens are defined for application states:
  • --success: Green (Accepted)
  • --warning: Amber (Pending/Action Required)
  • --info: Blue/Cyan (Reviewed)
  • --destructive: Red (Rejected/Errors)

Typography

The application uses a dual-font strategy:

• Headings: Plus Jakarta Sans for a modern, high-contrast look in titles and section headers.
• Body: Inter for maximum legibility in forms, tables, and applicant data.

Custom Gradients & Shadows

To enhance the visual hierarchy, several custom utility classes are available:

• .gradient-primary: A 135-degree blue-to-cyan gradient.
• .gradient-hero: A high-impact gradient used for landing sections.
• .shadow-primary: A soft, colored glow effect for primary buttons and cards.

Component Architecture

The project follows the shadcn/ui "copy-and-paste" philosophy. Components are located in src/components/ui/ and are built as thin wrappers around Radix UI primitives.

Common UI Components

| Component | Usage | | :--- | :--- | | Button | Standardized buttons with variants like default, outline, and ghost. | | Badge | Used for status indicators (e.g., "Pending", "Accepted"). | | Toaster | Accessible toast notifications for form submissions and admin actions. | | Select | Styled dropdowns for degree selection and course preferences. | | Form | Accessible form fields with built-in validation messages (via React Hook Form + Zod). |

Custom Components

NavLink

The NavLink component (located in src/components/NavLink.tsx) is a specialized wrapper around react-router-dom’s NavLink. It simplifies the application of active and pending styles.

Usage:

import { NavLink } from "@/components/NavLink";

<NavLink 
  to="/admin/dashboard" 
  className="text-gray-500" 
  activeClassName="text-primary font-bold"
>
  Dashboard
</NavLink>

Motion & Transitions

The system includes pre-configured animations to improve the perceived speed and user experience of the interface. These are available as Tailwind utility classes:

• animate-fade-in: Gradually fades an element in.
• animate-slide-up: Fades an element in while sliding it up 20px (ideal for form headers).
• animate-scale-in: A subtle "pop" effect used for success modals and cards.

Example Usage:

<div className="card-elevated animate-scale-in">
  {/* Content that pops in when rendered */}
</div>

Dark Mode Support

The UI system is fully compatible with dark mode. Theme variables are re-defined in the .dark class block within src/index.css, adjusting background contrasts and surface colors to ensure the ATS remains readable in low-light environments.

To toggle or force dark mode, ensure the dark class is applied to the html or body element.

Utility Functions

The project uses a standard cn utility (located in src/lib/utils.ts) to merge Tailwind classes efficiently, handling conditional logic and preventing class conflicts.

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

const MyComponent = ({ className, isActive }) => (
  <div className={cn("base-styles", isActive && "active-styles", className)}>
    Content
  </div>
);