> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sagozen.digital/llms.txt
> Use this file to discover all available pages before exploring further.

# Design Guidelines

> Complete design system with brand identity, colors, typography, spacing, and component specifications

# Design Guidelines

Complete design system for Pet Service Management System (PetCare Pro brand).

## Brand Identity

<CardGroup cols={2}>
  <Card title="Brand Name" icon="paw">
    **PetCare Pro** - "Ngôi nhà thứ hai ấm áp cho thú cưng của bạn"
  </Card>

  <Card title="Industry" icon="building">
    Pet Care & Hospitality
  </Card>

  <Card title="Target Audience" icon="users">
    Pet owners seeking premium care services
  </Card>

  <Card title="Brand Personality" icon="heart">
    Warm, Professional, Caring, Modern
  </Card>
</CardGroup>

### Logo & Brand Mark

**Icon:** Paw print (Font Awesome `fa-paw`)
**Colors:** White paw on coral red (#FF6B6B) circular background
**Sizes:** Mobile: 24px × 24px, Desktop: 32px × 32px

```tsx theme={null}
<div className="w-6 h-6 md:w-8 md:h-8 bg-[#FF6B6B] rounded flex items-center justify-center">
  <i className="fa-solid fa-paw text-white text-xs md:text-sm"></i>
</div>
```

***

## Color System

### Primary Palette

<Tabs>
  <Tab title="Brand Red (Coral)">
    ```
    Primary:  #FF6B6B  RGB(255, 107, 107)  // Main brand color
    Hover:    #FF5A5A  RGB(255, 90, 90)    // Interactive hover
    Active:   #E24D4D  RGB(226, 77, 77)    // Pressed/active
    ```

    **Usage:** Primary buttons, links & CTAs, brand accents, interactive elements

    **Contrast:** White text on #FF6B6B: 4.53:1 (AA compliant ✓)
  </Tab>

  <Tab title="Neutral Colors">
    ```
    Dark Gray:       #1F2937  // Primary text
    Slate:           #475569  // Secondary text
    Light Gray:      #6B7280  // Tertiary text
    Very Light Gray: #F1F1F1  // Scrollbar track
    ```

    **Usage:** Text hierarchy, subtle borders, disabled states
  </Tab>

  <Tab title="Background Colors">
    ```
    White:      #FFFFFF  // Primary background
    Cream:      #FFFBF5  // Secondary background
    Light Pink: #FFE5E5  // Tertiary/accent background
    Pale Pink:  #FFF5F5  // Notification background
    ```

    **Usage:** Page backgrounds, card backgrounds, hover states
  </Tab>

  <Tab title="Border Colors">
    ```
    Beige: #EADFD6  RGB(234, 223, 214)
    ```

    **Usage:** Card borders, input borders, dividers, navigation borders
  </Tab>
</Tabs>

### Semantic Colors

<CardGroup cols={2}>
  <Card title="Success (Green)" icon="check">
    ```
    bg-green-50
    text-green-600
    border-green-200
    ```

    Success messages, completed states, positive feedback
  </Card>

  <Card title="Warning (Yellow)" icon="triangle-exclamation">
    ```
    bg-yellow-50
    text-yellow-600
    border-yellow-200
    ```

    Warnings, pending states, caution messages
  </Card>

  <Card title="Error (Red)" icon="circle-xmark">
    ```
    bg-[#FFE5E5]
    text-[#FF6B6B]
    border-[#FF6B6B]
    ```

    Error messages, validation failures, alerts
  </Card>

  <Card title="Info (Blue)" icon="circle-info">
    ```
    bg-blue-50
    text-blue-600
    border-blue-200
    ```

    Information messages, tips, neutral notifications
  </Card>
</CardGroup>

***

## Typography

### Font Family

**System Font Stack:**

```css theme={null}
font-family: system-ui, -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, 'Helvetica Neue', Arial,
             'Noto Sans', sans-serif;
```

<Info>Native system fonts provide optimal performance and familiar reading experience across all platforms.</Info>

### Type Scale

| Level      | Class       | Size | Line Height | Usage                        |
| ---------- | ----------- | ---- | ----------- | ---------------------------- |
| Caption    | `text-xs`   | 12px | 16px (1.33) | Labels, captions, fine print |
| Body Small | `text-sm`   | 14px | 20px (1.43) | Secondary text, metadata     |
| Body       | `text-base` | 16px | 24px (1.5)  | Body text, paragraphs        |
| Subheading | `text-lg`   | 18px | 28px (1.56) | Card titles, emphasized text |
| Heading 3  | `text-xl`   | 20px | 28px (1.4)  | Section titles               |
| Heading 2  | `text-2xl`  | 24px | 32px (1.33) | Page titles, main headings   |
| Heading 1  | `text-3xl`  | 30px | 36px (1.2)  | Hero headings                |

### Font Weights

| Weight   | Class           | Value | Usage                    |
| -------- | --------------- | ----- | ------------------------ |
| Normal   | `font-normal`   | 400   | Body text, default       |
| Medium   | `font-medium`   | 500   | Emphasized text, labels  |
| Semibold | `font-semibold` | 600   | Subheadings, card titles |
| Bold     | `font-bold`     | 700   | Headings, CTAs           |

### Typography Examples

<CodeGroup>
  ```tsx Hero Heading theme={null}
  <h1 className="text-2xl md:text-3xl font-bold text-[#1F2937]">
    Chăm sóc thú cưng chuyên nghiệp
  </h1>
  ```

  ```tsx Section Heading theme={null}
  <h2 className="text-xl md:text-2xl font-semibold text-[#1F2937] mb-4">
    Dịch vụ của chúng tôi
  </h2>
  ```

  ```tsx Card Title theme={null}
  <h3 className="text-lg font-semibold text-[#1F2937] mb-2">
    Khách sạn thú cưng
  </h3>
  ```

  ```tsx Body Text theme={null}
  <p className="text-base text-[#475569] leading-relaxed">
    Chúng tôi cung cấp môi trường an toàn và thoải mái...
  </p>
  ```

  ```tsx Caption theme={null}
  <span className="text-xs text-[#6B7280]">
    Cập nhật 5 phút trước
  </span>
  ```
</CodeGroup>

***

## Spacing System

### Base Unit

**Base:** 4px (0.25rem)
**Scale:** 4, 8, 12, 16, 20, 24, 32, 40, 48, 64px

### Spacing Scale

| Token | Tailwind       | Value | Usage                         |
| ----- | -------------- | ----- | ----------------------------- |
| `1`   | `p-1`, `m-1`   | 4px   | Tight spacing, badges         |
| `2`   | `p-2`, `m-2`   | 8px   | Compact spacing, icon padding |
| `3`   | `p-3`, `m-3`   | 12px  | Comfortable spacing           |
| `4`   | `p-4`, `m-4`   | 16px  | Default component padding     |
| `5`   | `p-5`, `m-5`   | 20px  | Spacious padding              |
| `6`   | `p-6`, `m-6`   | 24px  | Section padding               |
| `8`   | `p-8`, `m-8`   | 32px  | Large section padding         |
| `10`  | `p-10`, `m-10` | 40px  | Extra large padding           |
| `12`  | `p-12`, `m-12` | 48px  | Hero section padding          |

### Spacing Patterns

<Tabs>
  <Tab title="Component Internal">
    ```tsx theme={null}
    // Small card
    <div className="p-4">

    // Medium card
    <div className="p-4 md:p-6">

    // Large card/modal
    <div className="p-6 md:p-8">
    ```
  </Tab>

  <Tab title="Component External">
    ```tsx theme={null}
    // Between sections
    <section className="mb-8 md:mb-12">

    // Between cards
    <div className="space-y-4 md:space-y-6">

    // Between form elements
    <div className="mb-4">
    ```
  </Tab>

  <Tab title="Grid Gaps">
    ```tsx theme={null}
    // Tight grid
    <div className="grid grid-cols-2 gap-2">

    // Default grid
    <div className="grid grid-cols-3 gap-4 md:gap-6">

    // Spacious grid
    <div className="grid grid-cols-2 gap-6 md:gap-8">
    ```
  </Tab>
</Tabs>

***

## Components

### Buttons

<Tabs>
  <Tab title="Primary Button">
    ```tsx theme={null}
    <button className="bg-[#FF6B6B] text-white px-4 md:px-6 py-2 rounded-md
                       hover:bg-[#FF5A5A] active:bg-[#E24D4D]
                       transition-colors text-sm md:text-base">
      Đặt dịch vụ
    </button>
    ```

    **States:**

    * Default: `bg-[#FF6B6B]`
    * Hover: `bg-[#FF5A5A]`
    * Active: `bg-[#E24D4D]`
    * Disabled: `opacity-50 cursor-not-allowed`
  </Tab>

  <Tab title="Secondary Button">
    ```tsx theme={null}
    <button className="border border-[#EADFD6] text-[#475569]
                       px-4 md:px-6 py-2 rounded-md
                       hover:bg-[#FFFBF5] active:bg-[#FFE5E5]
                       transition-colors text-sm md:text-base">
      Đăng nhập
    </button>
    ```
  </Tab>

  <Tab title="Icon Button">
    ```tsx theme={null}
    <button className="flex items-center space-x-2 text-[#1F2937]
                       hover:bg-[#FFE5E5] p-2 rounded-lg transition-colors">
      <i className="fa-solid fa-bell"></i>
    </button>
    ```
  </Tab>

  <Tab title="Button Sizes">
    ```tsx theme={null}
    // Small
    <button className="px-3 py-1.5 text-sm">

    // Medium (default)
    <button className="px-4 py-2 text-base">

    // Large
    <button className="px-6 py-3 text-lg">

    // Full width
    <button className="w-full px-4 py-2">
    ```
  </Tab>
</Tabs>

### Cards

<CodeGroup>
  ```tsx Default Card theme={null}
  <div className="bg-white p-4 md:p-6 rounded-lg border border-[#EADFD6]
                  shadow-sm hover:shadow-lg transition-shadow">
    <h3 className="text-lg font-semibold text-[#1F2937] mb-2">
      Card Title
    </h3>
    <p className="text-sm text-[#475569]">
      Card content goes here...
    </p>
  </div>
  ```

  ```tsx Highlighted Card theme={null}
  <div className="bg-white p-4 rounded-lg border-l-4 border-[#FF6B6B]
                  bg-[#FFF5F5] shadow-md">
    <!-- Content -->
  </div>
  ```

  ```tsx Card with Header theme={null}
  <div className="bg-white rounded-lg border border-[#EADFD6] shadow-sm overflow-hidden">
    <div className="px-4 py-3 border-b border-[#EADFD6] bg-[#FFFBF5]">
      <h3 className="font-medium text-[#1F2937]">Card Header</h3>
    </div>
    <div className="p-4">
      <!-- Content -->
    </div>
  </div>
  ```
</CodeGroup>

### Forms

<AccordionGroup>
  <Accordion title="Input Field">
    ```tsx theme={null}
    <div className="mb-4">
      <label className="block text-sm font-medium text-[#1F2937] mb-2">
        Email
      </label>
      <input
        type="email"
        className="w-full px-4 py-2 border border-[#EADFD6] rounded-md
                   focus:border-[#FF6B6B] focus:outline-none focus:ring-2
                   focus:ring-[#FF6B6B] focus:ring-opacity-20"
        placeholder="example@email.com"
      />
    </div>
    ```
  </Accordion>

  <Accordion title="Select Dropdown">
    ```tsx theme={null}
    <select className="w-full px-4 py-2 border border-[#EADFD6] rounded-md
                       focus:border-[#FF6B6B] focus:outline-none focus:ring-2
                       focus:ring-[#FF6B6B] focus:ring-opacity-20">
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
    ```
  </Accordion>

  <Accordion title="Textarea">
    ```tsx theme={null}
    <textarea
      className="w-full px-4 py-2 border border-[#EADFD6] rounded-md
                 focus:border-[#FF6B6B] focus:outline-none focus:ring-2
                 focus:ring-[#FF6B6B] focus:ring-opacity-20"
      rows="4"
    />
    ```
  </Accordion>

  <Accordion title="Error State">
    ```tsx theme={null}
    <div className="mb-4">
      <label className="block text-sm font-medium text-[#1F2937] mb-2">
        Email
      </label>
      <input
        type="email"
        className="w-full px-4 py-2 border border-red-500 rounded-md
                   focus:border-red-500 focus:ring-2 focus:ring-red-200"
      />
      <p className="text-sm text-red-500 mt-1">
        Vui lòng nhập email hợp lệ
      </p>
    </div>
    ```
  </Accordion>
</AccordionGroup>

***

## Best Practices

### Do's ✓

1. Use design tokens consistently
2. Follow mobile-first responsive design
3. Maintain accessibility standards
4. Add hover and focus states to interactive elements
5. Use semantic HTML
6. Keep animations subtle and purposeful
7. Test across devices and browsers
8. Use spacing scale consistently

### Don'ts ✗

1. Don't use arbitrary values unless absolutely necessary
2. Don't mix color systems (stick to brand palette)
3. Don't create custom shadows (use Tailwind scale)
4. Don't use inline styles
5. Don't skip accessibility features
6. Don't use too many different font sizes
7. Don't create custom spacing values
8. Don't ignore responsive breakpoints

***

## Resources

### Design Tools

* Figma/Adobe XD for mockups
* Chrome DevTools for debugging
* Tailwind CSS IntelliSense for VS Code

### Documentation

* [Tailwind CSS](https://tailwindcss.com)
* [Font Awesome](https://fontawesome.com)
* [Next.js](https://nextjs.org)
* [WCAG 2.1](https://www.w3.org/WAI/WCAG21/quickref/)

### Color Tools

* [Contrast checker](https://webaim.org/resources/contrastchecker/)
* [Color palette generator](https://coolors.co)
* [Accessibility insights](https://accessibilityinsights.io)

***

<CardGroup cols={2}>
  <Card title="Code Standards" icon="code" href="/code-standards">
    View coding conventions
  </Card>

  <Card title="Back to Home" icon="home" href="/">
    Return to homepage
  </Card>
</CardGroup>