Brand Kit Page & Canonical Design Foundation — Design

Created: Sat 04 Jul 2026 07:10:33 CEST Updated: Sat 04 Jul 2026 07:10:33 CEST — Initial design Document Version: 1.0 — Initial design Security Classification: Internal Technical Documentation Target Audience: Frontend Developer, Product Owner Author: Paul Wisén (via Claude)

Problem & goals

The Plings brand assets (logos, brand guidelines, letterhead) live only in a Google Drive folder (“Plings Branding”). External print vendors and partners have no self-serve way to get correct, on-brand files, and the Drive folder is not a durable, public, or version-controlled home.

Two goals, delivered as one sub-project:

  1. Primary — public brand kit. A public page at plings.io/brand where anyone (no login) can preview and download the official logos, colours, typography and the brand guidelines. Independent of Google Drive.
  2. Secondary — canonical design foundation. Make the brand’s colours and typography the documented source of truth that the app (Plings-iOS) and website (Plings-Web) reference. The code already matches the brand (see below); this work codifies and documents that link rather than refactoring it.

Key finding: brand and code already agree

The brand guidelines define exactly five colours and Poppins as the typeface. The existing tailwind.config.ts already uses those exact hex codes, and Poppins is already loaded (index.html Google Fonts) and set as the default font (index.css → font-poppins). So goal 2 is a documentation/codification task, not a refactor. A canonical design-foundation doc already partially exists at docs/brand/design-system.md; we update it rather than create a new one.

Brand colour HEX RGB CMYK HSB Code token
Dark teal #00695C 0,105,92 100,0,12,58 173,100,41 primary.dark
Teal (primary) #009688 0,150,136 100,0,9,41 174,100,59 primary.DEFAULT
Green #8BC34A 139,195,74 28,0,62,23 88,62,76 secondary / primary.light
Lime accent #DCE775 220,231,117 4,0,49,9 66,49,91 accent
Dark slate (text) #37474F 55,71,79 30,10,0,69 200,30,31 text (accent.foreground)

Typography: Poppins — Bold (700) for headlines, Light (300) for body. Slogan uses Poppins Light.

Scope

In scope (assets): the full logo set, the brand guidelines (rendered as a structured web edition and offered as the downloadable PDF), the letterhead, and a font kit (the Poppins family, downloadable per weight and as a zip).

Explicitly excluded from the public page:

Decisions (from brainstorming)

Decision Choice
Access Fully public, no login, at plings.io/brand.
Design-foundation depth Document as canonical source (code already matches; no refactor now).
File hosting All files committed to the repo under public/static/brand/.
Personal stationery Excluded from public page.

Architecture

1. Assets in the repo

Files are downloaded from the Drive “Plings Branding” folder (via the Drive tool, base64 → written to disk) and committed under:

public/static/brand/
  logos/
    symbol/       plings_symbol{,-black,-white}.{png,jpg,ai,eps}
    horizontal/   plings_logo-horizontal{,-black,-white}.{png,jpg,ai,eps}
    vertical/     plings_logo-vertical{,-black,-white}.{png,jpg,ai,eps}
    full/         plings.{ai,eps,pdf}   (symbol + wordmark master; only full-lockup PDF exists)
  guidelines/     Plings-brand-guidelines.{pdf,ai,eps}
  stationery/     Plings_letterhead.{pdf,ai,eps,jpg}
  fonts/
    Poppins/      Poppins-*.ttf   (full family, copied from docs/brand/fonts/Poppins/)
    Poppins.zip   (whole family, generated at build/commit time)
    OFL.txt       (SIL Open Font License)

The Poppins TTFs already exist in the repo at docs/brand/fonts/Poppins/, but files under docs/ publish to docs.plings.io, not to the app. They are copied into public/static/brand/fonts/Poppins/ so the app’s CDN actually serves them. Poppins is licensed under the SIL Open Font License, which permits redistribution; OFL.txt is included alongside the fonts.

Rationale for the layout: grouped by logo variant so the manifest and the gallery map cleanly. PNG for web use/preview, JPG where only JPG is useful, and AI/EPS/PDF as the print/vector source vendors need. PSD editing sources are not published (large, editing-only); noted as backlog if a vendor ever needs them.

SVG note: the Drive folder has no SVG; only AI/EPS/PDF vector. Generating clean SVGs requires Illustrator and is out of scope. Backlog item.

2. Asset manifest — src/data/brandAssets.ts

A single typed data module describing every published asset, so the page renders from data and new assets are added in one place:

export interface BrandAsset {
  id: string;              // 'logo-horizontal'
  name: string;            // 'Horizontal logo'
  previewSrc: string;      // PNG used for on-page preview
  variants: {              // colour variants where they exist
    label: string;         // 'Standard' | 'Black' | 'White'
    files: { format: string; src: string; bytes?: number }[];
  }[];
}

Grouped exports: logos, guidelines, stationery, and fonts (weight label → .ttf path, plus the zip and licence).

3. The page — src/pages/Brand.tsx (route /brand)

Public route added to src/App.tsx alongside /about (no auth wrapper). Composed of small, single-purpose presentational components under src/components/brand/:

Each component takes its data as props and can be understood/tested in isolation. Downloads are plain <a href download> to the static files — no JS download logic, no backend, no GraphQL.

4. Discoverability

Add a “Brand” link in the site footer (and/or the About page). The page is otherwise reachable at a clean, shareable /brand URL to hand to vendors.

5. Canonical design-foundation doc

Update the existing docs/brand/design-system.md:

Data flow & error handling

Testing

Plings-Web has no unit-test runner, so per CLAUDE.md the gate is:

Documentation, ADR, use-case & flow (per CLAUDE.md)

Shipped in the same PR:

Non-goals