Design System Reference
Multi-Role Theme System - Reference for AI to create components
Teal - teal-professional
Teal Professional Theme - For Plant Owners
Color Palette
From: from-teal-500
To: to-teal-600
Gradient: bg-gradient-to-r from-teal-500 to-teal-600
#134e4a
#115e59
#f0fdfa
Sidebar: bg-teal-900
Border: border-teal-800
Main BG: bg-teal-50
Success: bg-teal-50 text-teal-600
Warning: bg-amber-50 text-amber-600
Danger: bg-red-50 text-red-600
Primary: bg-teal-50 text-teal-600
Secondary: bg-cyan-50 text-cyan-600
Tertiary: bg-amber-50 text-amber-600
Quaternary: bg-pink-50 text-pink-600
Typography
Page Title
Dashboard Overview
Card Title
Body text and descriptions
Font: IBM Plex Sans Thai (Supports Thai language)
Primary text: text-teal-900
Muted text: text-teal-600
Spacing & Border Radius
8px
buttons, inputs
12px icons
cards
Card padding: p-5 or p-6
Section gap: gap-6
Stats grid gap: gap-5
Content padding: p-7
Sidebar width: w-[260px]
Main margin: ml-[260px]
Components
Primary: bg-gradient-to-r from-teal-500 to-teal-600 rounded-[10px]
Text: text-white
Background: bg-teal-50
Border: border-teal-100
Primary: linear-gradient(135deg, #14b8a6, #0d9488)
Secondary: linear-gradient(135deg, #0891b2, #0e7490)
Total Revenue
Page Views
Last 7 days
Layout Patterns
Container: bg-teal-900 w-[260px] fixed
Active: bg-gradient-to-r from-teal-500 to-teal-600
Inactive: text-teal-300 hover:bg-teal-800
Container: bg-white border-b border-teal-100
Icon button: bg-teal-50 border-teal-100 rounded-[10px]
Grid: grid grid-cols-[2fr_1fr] gap-6
Stats: grid grid-cols-4 gap-5
Icons (Lucide)
Import: import { IconName } from 'lucide-react'
Size: w-4 h-4 (small), w-5 h-5 (normal)
Multi-Role Theme System - Design System Reference
Built with Next.js 16, Tailwind CSS 4, shadcn/ui, Lucide Icons
Roles: Admin (Slate Enterprise) | EPC (Charcoal Gold) | Producer (Teal Professional)