Plings Design System

Created: (pre-existing) Updated: Sat 04 Jul 2026 07:40 CEST — Established as the canonical colour/typography source; added CMYK/HSB + token mapping, “Where this is implemented”, real asset paths; trimmed stale checklist. Document Version: 2.0 — Canonical design foundation Security Classification: Internal Technical Documentation Target Audience: Frontend Developer, iOS Developer, Designer Author: Paul Wisén

This document is the canonical source of truth for Plings colour and typography. Web (tailwind.config.ts / src/index.css) and iOS must reference these exact values. The values come from the brand guidelines (docs/brand/design-system.md mirrors the guidelines PDF). The public, human-facing edition is the Brand Kit page at /brand. Decision & rationale: ADR-0047.

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 CMYK HSB Tailwind token Usage
Primary Dark #00695C 0, 105, 92 100, 0, 12, 58 173, 100, 41 primary.dark Headers, emphasis
Primary #009688 0, 150, 136 100, 0, 9, 41 174, 100, 59 primary.DEFAULT Main brand, buttons
Light Green #8BC34A 139, 195, 74 28, 0, 62, 23 88, 62, 76 secondary / primary.light Secondary actions
Lime Accent #DCE775 220, 231, 117 4, 0, 49, 9 66, 49, 91 accent Highlights, warnings
Text Dark #37474F 55, 71, 79 30, 10, 0, 69 200, 30, 31 text / accent.foreground Primary text

Where this is implemented

  • Web colours: tailwind.config.ts (primary/secondary/accent) use these exact hex codes; src/index.css mirrors them as HSL custom properties (light + dark).
  • Web typography: Poppins is loaded in index.html (Google Fonts, weights 300–700) and set as the default font family in tailwind.config.ts / src/index.css (font-poppins).
  • iOS: must reference these same values (see ROADMAP backlog: wire iOS colours to the documented tokens).
  • Downloadable assets & font kit: public/static/brand/ — surfaced publicly on the Brand Kit page (/brand). Full guidelines PDF: public/static/brand/guidelines/Plings-brand-guidelines.pdf.

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

Brand assets are committed under public/static/brand/ (served by Vercel CDN) and surfaced on the public Brand Kit page (/brand):

public/static/brand/
├── logos/{symbol,horizontal,vertical}/   # PNG/JPG/AI/EPS × {standard,black,white}
├── logos/full/                           # plings.{ai,eps,pdf} — full lockup master
├── guidelines/                           # Plings-brand-guidelines.{pdf,ai,eps}
├── stationery/                           # Plings_letterhead.{ai,eps,jpg}
└── fonts/Poppins/                        # full Poppins family (.ttf) + Poppins.zip + OFL.txt

App favicons/nav logos remain under public/static/logos/ and public/static/icons/.

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 status

The colour palette and Poppins typography above are implemented in tailwind.config.ts / src/index.css / index.html, and published on the Brand Kit page (/brand). Remaining/related follow-ups are tracked in the repo ROADMAP.md Backlog (e.g. wire iOS colours to these documented tokens, SVG logo exports).