---
name: koold-design
description: Use this skill to generate well-branded interfaces and assets for Koold — a pharma cold chain intelligence platform. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping and production.
user-invocable: true
---

Read the README.md file within this skill, and explore the other available files.

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.

## Quick Reference

**Brand:** Koold — Pharma Cold Chain Intelligence  
**Tagline:** "Always monitoring. Always steady."  
**Aesthetic:** Cryogenic Authority — calm, precise, authoritative. Not decoration. Evidence.

**Fonts (local files in fonts/):**
- `Cormorant Garamond` — campaign headlines, emotional hooks (variable TTF in fonts/)
- `DM Sans` — body, UI, logo base (Google Fonts)
- `Outfit` — taglines, display, labels (Google Fonts)

**Colors:**
- `#0F384D` Deep Void — primary dark background
- `#37657B` Arctic Night — secondary surfaces, cards
- `#4A7A90` Storm Layer — mid-tone, borders
- `#FEEC7E` Signal Ice — accent, **max 15% of any frame**
- `#B2DE7B` Pulse Green — success, compliance
- `#589E84` Compliance — trust, healthcare
- `#F0EEE9` Cloud Dancer — primary light campaign background
- `#191919` Darkest Depth — text on light backgrounds

**Two campaign worlds:**
- Light (primary 70%): `#F0EEE9` bg + `#191919` text — social, campaigns
- Dark (secondary): `#0F384D` bg + `#F0EEE9` text + `#FEEC7E` accent ≤15%

**Logo files in assets/:**
- `logo_wordmark_web.png` — white/light wordmark (for dark bg)
- `logo_O_dark.png` — black Igloo-O (for light bg)
- `logo_O_light.png` — white Igloo-O (for dark bg)

**Key rules:**
- Border radius: 4px (sharp, precise — no "friendly bubble")
- No shadows on dark surfaces
- No gradients as primary fills
- No exclamation marks in copy
- No emojis except sparingly in LinkedIn (max 1–2)
- Start copy with customer's problem, never "We"

**Available deliverables:**
- `slides/index.html` — 10-slide pitch deck template
- `ui_kits/dashboard/index.html` — interactive cold chain dashboard
- `social/linkedin_templates.html` — 4 LinkedIn template types + post schedule
- `preview/` — all design system cards
