Design Guidelines

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

Brand Identity

Brand Name

PetCare Pro - “Ngôi nhà thứ hai ấm áp cho thú cưng của bạn”

Industry

Pet Care & Hospitality

Target Audience

Pet owners seeking premium care services

Brand Personality

Warm, Professional, Caring, Modern

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

<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

Brand Red (Coral)
Neutral Colors
Background Colors
Border Colors

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 elementsContrast: White text on #FF6B6B: 4.53:1 (AA compliant ✓)

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

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

Beige: #EADFD6  RGB(234, 223, 214)

Usage: Card borders, input borders, dividers, navigation borders

Semantic Colors

Success (Green)

bg-green-50
text-green-600
border-green-200

Success messages, completed states, positive feedback

Warning (Yellow)

bg-yellow-50
text-yellow-600
border-yellow-200

Warnings, pending states, caution messages

Error (Red)

bg-[#FFE5E5]
text-[#FF6B6B]
border-[#FF6B6B]

Error messages, validation failures, alerts

Info (Blue)

bg-blue-50
text-blue-600
border-blue-200

Information messages, tips, neutral notifications

Typography

Font Family

System Font Stack:

font-family: system-ui, -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, 'Helvetica Neue', Arial,
             'Noto Sans', sans-serif;

Native system fonts provide optimal performance and familiar reading experience across all platforms.

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

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

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

<h3 className="text-lg font-semibold text-[#1F2937] mb-2">
  Khách sạn thú cưng
</h3>

<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>

<span className="text-xs text-[#6B7280]">
  Cập nhật 5 phút trước
</span>

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

Component Internal
Component External
Grid Gaps

// 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">

// 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">

// 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">

Components

Buttons

Primary Button
Secondary Button
Icon Button
Button Sizes

<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

<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>

<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>

// 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">

Cards

<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>

<div className="bg-white p-4 rounded-lg border-l-4 border-[#FF6B6B]
                bg-[#FFF5F5] shadow-md">
  <!-- Content -->
</div>

<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>

Forms

Input Field

<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>

<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>

Textarea

<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"
/>

Error State

<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>

Best Practices

Do’s ✓

Use design tokens consistently
Follow mobile-first responsive design
Maintain accessibility standards
Add hover and focus states to interactive elements
Use semantic HTML
Keep animations subtle and purposeful
Test across devices and browsers
Use spacing scale consistently

Don’ts ✗

Don’t use arbitrary values unless absolutely necessary
Don’t mix color systems (stick to brand palette)
Don’t create custom shadows (use Tailwind scale)
Don’t use inline styles
Don’t skip accessibility features
Don’t use too many different font sizes
Don’t create custom spacing values
Don’t ignore responsive breakpoints

Design Guidelines

Design Guidelines

Brand Identity

Brand Name

Industry

Target Audience

Brand Personality

Logo & Brand Mark

Color System

Primary Palette

Semantic Colors

Success (Green)

Warning (Yellow)

Error (Red)

Info (Blue)

Typography

Font Family

Type Scale

Font Weights

Typography Examples

Spacing System

Base Unit

Spacing Scale

Spacing Patterns

Components

Buttons

Cards

Forms

Best Practices

Do’s ✓

Don’ts ✗

Resources

Design Tools

Documentation

Color Tools

Code Standards

Back to Home

​Design Guidelines

​Brand Identity

Brand Name

Industry

Target Audience

Brand Personality

​Logo & Brand Mark

​Color System

​Primary Palette

​Semantic Colors

Success (Green)

Warning (Yellow)

Error (Red)

Info (Blue)

​Typography

​Font Family

​Type Scale

​Font Weights

​Typography Examples

​Spacing System

​Base Unit

​Spacing Scale

​Spacing Patterns

​Components

​Buttons

​Cards

​Forms

​Best Practices

​Do’s ✓

​Don’ts ✗

​Resources

​Design Tools

​Documentation

​Color Tools

Code Standards

Back to Home

Design Guidelines

Brand Identity

Logo & Brand Mark

Color System

Primary Palette

Semantic Colors

Typography

Font Family

Type Scale

Font Weights

Typography Examples

Spacing System

Base Unit

Spacing Scale

Spacing Patterns

Components

Buttons

Cards

Forms

Best Practices

Do’s ✓

Don’ts ✗

Resources

Design Tools

Documentation

Color Tools