Skip to main content

🎨 Toto Dashboard Styling Standards

📋 Overview​

This document outlines the consistent styling patterns implemented across all dashboard pages to ensure a unified, professional appearance and improved user experience.

🏗️ Layout Standards​

Container & Spacing​

// Standard container for all pages
<div className="container mx-auto p-6 max-w-7xl">
  {/* Page content */}
</div>

Page Headers​

{/* Header */}
<div className="flex items-center justify-between mb-8">
  <div>
    <h1 className="text-3xl font-bold text-gray-900">Page Title</h1>
    <p className="text-gray-600 mt-1">Page description and purpose</p>
  </div>
  <div className="flex items-center gap-3">
    {/* Action buttons */}
  </div>
</div>

Section Spacing​

  • Header to content: mb-8
  • Between major sections: mb-8
  • Between cards: gap-6
  • Between form elements: gap-4 or gap-6

🃏 Card Standards​

Standard Card Styling​

<Card className="border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
  <CardHeader className="pb-4">
    <CardTitle className="text-xl font-semibold text-gray-900">Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    {/* Card content */}
  </CardContent>
</Card>

Card Variations​

  • Primary cards: border border-gray-200 shadow-sm hover:shadow-md transition-shadow
  • Interactive cards: Add cursor-pointer and enhanced hover effects
  • Modal cards: border-0 shadow-2xl for overlays

🎯 Typography Standards​

Page Titles​

<h1 className="text-3xl font-bold text-gray-900">Page Title</h1>

Section Headers​

<h2 className="text-xl font-semibold text-gray-900">Section Title</h2>

Card Titles​

<CardTitle className="text-xl font-semibold text-gray-900">Card Title</CardTitle>

Descriptions​

<p className="text-gray-600 mt-1">Description text</p>

Labels​

<label className="block text-sm font-semibold text-gray-700 mb-3">Field Label</label>

🎨 Color Standards​

Primary Colors​

  • Text: text-gray-900 (main text), text-gray-700 (secondary text)
  • Backgrounds: bg-white (cards), bg-gray-50/50 (subtle backgrounds)
  • Borders: border-gray-200 (card borders), border-gray-100 (subtle borders)

Status Colors​

  • Success: bg-green-100 text-green-800
  • Warning: bg-yellow-100 text-yellow-800
  • Error: bg-red-100 text-red-800
  • Info: bg-blue-100 text-blue-800
  • Neutral: bg-gray-100 text-gray-800

Interactive Elements​

  • Primary buttons: bg-primary hover:bg-primary/90
  • Secondary buttons: variant="outline" hover:bg-gray-50
  • Hover states: hover:shadow-md transition-shadow

🔧 Component Standards​

Buttons​

// Primary action
<Button className="px-6 bg-primary hover:bg-primary/90 transition-colors">
  Button Text
</Button>

// Secondary action
<Button variant="outline" className="px-6 hover:bg-gray-50 transition-colors">
  Button Text
</Button>

// Destructive action
<Button variant="destructive" className="px-6">
  Delete
</Button>

Form Elements​

// Input fields
<Input className="h-11 text-base" />

// Select dropdowns
<select className="w-full p-3 border border-gray-200 rounded-lg bg-white focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all h-11" />

// Textareas
<textarea className="w-full p-4 border border-gray-200 rounded-lg bg-white min-h-[120px] resize-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" />

Badges​

<Badge className="border-0 font-medium text-sm px-4 py-2 capitalize">
  Badge Text
</Badge>

📱 Responsive Design​

Grid Layouts​

// Responsive grid with consistent breakpoints
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  {/* Grid items */}
</div>

Flexbox Layouts​

// Responsive header layout
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
  {/* Header content */}
</div>

🎭 Interactive States​

Hover Effects​

  • Cards: hover:shadow-md transition-shadow
  • Buttons: hover:bg-gray-50 transition-colors
  • Links: hover:text-primary transition-colors

Focus States​

  • Form elements: focus:ring-2 focus:ring-primary/20 focus:border-primary
  • Buttons: Maintain existing focus indicators

Loading States​

// Standard loading spinner
<div className="flex items-center justify-center h-64">
  <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
</div>

📊 Data Display​

Stats Cards​

<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
  <div className="flex items-center justify-between">
    <div>
      <p className="text-sm font-medium text-gray-600">Label</p>
      <p className="text-2xl font-bold text-gray-900">Value</p>
      <p className="text-xs text-gray-500 mt-1">Subtitle</p>
    </div>
    <div className="p-3 bg-color-50 rounded-lg">
      <Icon className="h-6 w-6 text-color-600" />
    </div>
  </div>
</div>

Tables​

<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
  <table className="w-full">
    <thead>
      <tr className="border-b border-gray-200">
        <th className="text-left py-3 px-4 font-medium text-gray-700">Header</th>
      </tr>
    </thead>
    <tbody>
      <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
        <td className="py-4 px-4">Content</td>
      </tr>
    </tbody>
  </table>
</div>

🚀 Implementation Checklist​

For New Pages​

  • Use container mx-auto p-6 max-w-7xl container
  • Implement standard header with mb-8 spacing
  • Use consistent card styling with borders and shadows
  • Apply standard typography hierarchy
  • Include proper loading states
  • Use consistent color palette
  • Implement responsive grid layouts

For Existing Pages​

  • Update container classes to match standards
  • Standardize header spacing and typography
  • Update card styling to include borders
  • Ensure consistent button styling
  • Standardize form element styling
  • Update color usage to match palette

📝 Examples​

Complete Page Structure​

export default function ExamplePage() {
  return (
    <div className="container mx-auto p-6 max-w-7xl">
      {/* Header */}
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Page Title</h1>
          <p className="text-gray-600 mt-1">Page description</p>
        </div>
        <div className="flex items-center gap-3">
          <Button variant="outline">Secondary Action</Button>
          <Button>Primary Action</Button>
        </div>
      </div>

      {/* Content Section */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <Card className="border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-xl font-semibold text-gray-900">Card Title</CardTitle>
          </CardHeader>
          <CardContent>
            {/* Card content */}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

🔍 Maintenance​

Regular Reviews​

  • Review new pages for compliance
  • Update existing pages during refactoring
  • Ensure consistent implementation across team
  • Document any new patterns or variations

Quality Assurance​

  • Visual consistency across all pages
  • Responsive behavior on all devices
  • Accessibility compliance
  • Performance optimization

Last Updated: January 2025
Version: 1.0
Maintained By: Development Team