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 Sansfor a modern, high-contrast look in titles and section headers. - Body:
Interfor 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>
);