Plings Design System

.

Colors

Primary Colors

--primary-color: #009688;      /* Teal - Main brand color */
--primary-light: #8BC34A;      /* Light green - Secondary accent */
--primary-dark: #00695C;       /* Dark teal - Primary dark */

Secondary Colors

--secondary-color: #8BC34A;    /* Light green */
--accent-color: #DCE775;       /* Lime green - Accent */

Neutral Colors

--background-primary: #FFFFFF;    /* White background */
--background-secondary: #F5F5F5;  /* Light gray background */
--text-primary: #37474F;          /* Dark blue-gray - Primary text */
--text-secondary: #757575;        /* Medium gray - Secondary text */
--border-color: #E0E0E0;          /* Light gray borders */

Status Colors

--success-color: #8BC34A;      /* Light green - Success */
--warning-color: #DCE775;      /* Lime - Warning */
--error-color: #F44336;        /* Red - Error */
--info-color: #009688;         /* Teal - Info */

Object Status Colors

Objects can have multiple simultaneous statuses, each with its own color:

--status-active: #10B981;      /* Green - Active objects */
--status-for-sale: #3B82F6;    /* Blue - For sale objects */
--status-lost: #F59E0B;        /* Yellow - Lost objects */
--status-stolen: #EF4444;      /* Red - Stolen objects */
--status-broken: #F97316;      /* Orange - Broken objects */
--status-destructed: #6B7280;  /* Gray - Destructed objects */

Typography

Font Families

--font-primary: 'Poppins', sans-serif;
--font-secondary: 'Poppins', sans-serif;
--font-mono: 'Courier New', monospace;

Font Sizes

--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;

Font Weights

--font-light: 300;     /* Poppins Light */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;      /* Poppins Bold */

Brand Color Palette Reference

Color Name HEX RGB Usage
Primary Dark #00695C 0, 105, 92 Headers, emphasis
Primary #009688 0, 150, 136 Main brand, buttons
Light Green #8BC34A 139, 195, 74 Secondary actions
Lime Accent #DCE775 220, 231, 117 Highlights, warnings
Text Dark #37474F 55, 71, 79 Primary text

Logo Usage

Logo Specifications

  • Primary Logo: plings-logo.png (PNG format for compatibility)
  • Favicon: plings-favicon.png (32x32px PNG)
  • Apple Touch Icon: plings-apple-touch-icon.png (180x180px)
  • Navigation Height: 32px (automatically scaled)
  • Format: PNG preferred for consistency and compatibility

Logo Placement

  • Navigation: Logo-only display (clean, minimal)
  • Colors: Professional Plings brand colors from PNG logo
  • Hover Effect: Subtle opacity change on hover
  • Link: Logo links to homepage (/)
  • No Text: Logo stands alone without additional text

File Structure

backend/static/logos/
├── plings-logo.png              # Primary navigation logo (PNG)
├── plings-favicon.png           # PNG favicon (32x32px)
├── plings-favicon-32x32.png     # Standard favicon size
└── plings-apple-touch-icon.png  # iOS home screen icon (180x180px)

PNG Benefits

  • ✅ Universal browser support
  • ✅ No font dependency issues
  • ✅ Consistent rendering
  • ✅ Easier file management
  • ✅ Better transparency handling

Spacing

Spacing Scale

--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-16: 4rem;

Border Radius

--radius-sm: 0.125rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-full: 9999px;

Shadows

--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

Component Guidelines

Buttons

  • Primary button: Teal (#009688) background, white text, Poppins Bold
  • Secondary button: Light green (#8BC34A) background, white text
  • Button sizes: Small (32px), Medium (40px), Large (48px)
  • Button states: normal, hover (darker), active, disabled (gray)

Forms

  • Input fields: White background, dark gray (#37474F) text, teal focus border
  • Labels: Poppins Medium, dark gray color
  • Error states: Red border, red text

Cards

  • White background with subtle shadow
  • Teal accent borders or headers
  • 8px border radius

Implementation Notes

  • Extract brand colors from guidelines
  • Document typography system
  • Update CSS custom properties
  • Update HTML templates
  • Add Poppins font loading
  • Create base template with brand styling
  • Update login and dashboard templates
  • Add logo to navigation
  • Set up favicon system
  • Switch to PNG logo format
  • Implement actual PNG logos (horizontal & vertical)
  • Fix RLS policy for organization creation
  • Test across different screen sizes
  • Verify accessibility compliance