CSS variable theming, dark/light mode, Vercel-inspired color palette, border radii, and typography.

Design System

File: frontend/src/app/globals.css

The SLMS design system is implemented through CSS custom properties (variables) with Tailwind CSS integration, providing a cohesive Vercel-inspired aesthetic with full dark mode support.

Theme Architecture

globals.css
├── Tailwind Imports (@import)
├── @theme inline (CSS Variable → Tailwind mapping)
├── :root (Light theme values)
├── .dark (Dark theme values)
└── @layer base (Global element styles)

Color Palette

Light Theme (`:root`)

Token	Value	Usage
`--background`	`#fafafa`	Page background
`--foreground`	`#171717`	Primary text
`--card`	`#ffffff`	Card surfaces
`--primary`	`#171717`	Primary buttons, accents
`--primary-foreground`	`#ffffff`	Text on primary elements
`--secondary`	`#ffffff`	Secondary surfaces
`--muted`	`#f2f2f2`	Muted backgrounds
`--muted-foreground`	`#8f8f8f`	Secondary text
`--destructive`	`#ee0000`	Error states, delete actions
`--border`	`#ebebeb`	Borders and dividers
`--ring`	`#0070f3`	Focus rings (Vercel Blue)

Dark Theme (`.dark`)

Token	Value	Usage
`--background`	`#000000`	Pure black background
`--foreground`	`#ededed`	Off-white text
`--card`	`#0a0a0a`	Slightly elevated surfaces
`--primary`	`#ffffff`	White primary buttons
`--primary-foreground`	`#000000`	Black text on primary
`--muted`	`#111111`	Dark muted backgrounds
`--muted-foreground`	`#a1a1a1`	Muted text
`--border`	`#333333`	Dark gray borders

Border Radii

Mapped from design tokens to Tailwind via @theme inline:

Token	Value	Tailwind Class
`--radius-sm`	`6px`	`rounded-sm`
`--radius-md`	`12px`	`rounded-md`
`--radius-lg`	`16px`	`rounded-lg`
`--radius-full`	`9999px`	`rounded-full`

Typography

Font	Variable	Usage
Geist Sans	`--font-geist-sans`	Body text, UI labels, headings
Geist Mono	`--font-geist-mono`	Code blocks, IDs, barcodes

Fonts are loaded via Next.js next/font/google for zero-layout-shift performance.

Tailwind Integration

The @theme inline block bridges CSS variables to Tailwind utility classes:

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  /* ... all tokens mapped ... */
}

This allows using semantic class names like bg-background, text-foreground, border-border, text-muted-foreground, etc.

Global Base Styles

@layer base {
  * {
    @apply border-border outline-ring;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    @apply font-sans;
  }
}

All elements get consistent border and focus ring colors
Body uses the theme background and foreground
HTML uses the Geist Sans font family

Theme Switching

Theme switching is powered by next-themes:

CSS class method: The library adds/removes the .dark class on <html>
System preference detection: enableSystem listens for prefers-color-scheme
Persistence: Theme choice is stored in localStorage
No flash: suppressHydrationWarning on <html> prevents hydration mismatch
Toggle button: ThemeToggle component provides manual switching

Design Principles

Vercel-Inspired: Clean, minimal aesthetic with high contrast and generous whitespace
Semantic Tokens: Colors are referenced by purpose (foreground, muted, destructive) not by hue
Dark-First: The dark theme uses pure black (#000000) for deep OLED contrast
Consistent Borders: A single border-border token ensures uniform divider styling across all components

Design System

On this page