# Koold Design System
**Version:** 1.0 | **April 2026** | **Created by:** CIRCAT MEDIA

---

## Company Overview

**Koold** is an AI-first, SAP-native Cold Chain Monitoring & Predictive Analytics platform for the pharmaceutical and life sciences industry. Koold protects temperature-sensitive pharma products through real-time monitoring, AI predictions, and seamless SAP integration.

- **Tagline:** "Always monitoring. Always steady."
- **Positioning:** "Pharma-native, not generic IoT"
- **Target Markets:** Phase 1 — DACH, BeNeLux, UK · Phase 2 — EMEA
- **Key Personas:** CSCO, CQO, CFO in Pharma/Biotech (500–10,000 employees)
- **Competitors:** SkyCell, Sensitech, Tive, Controlant, Zetes, Roambee
- **USP:** Native SAP Integration + AI-first + Pharma-pure + DSCSA Module

> **What Koold sells psychologically:** Not software. Professional safety. The buyer is a risk-averse professional in a regulated industry. They buy on fear reduction + peer validation + professional indemnification.

---

## Sources

Files provided for this design system:
- `uploads/CI.md` — Color palette and typography overview (v2.0)
- `uploads/KOOLD_DESIGN_SYSTEM.md` — Full design system reference (v1.0, 719 lines)
- `uploads/posting_text.md` — LinkedIn campaign post example (Post 01)
- `uploads/prompt_Slide1.md` — Flux AI image prompt for campaign visuals
- `uploads/Slide1.png` / `Slide2.png` / `Slide3.png` — Produced campaign slides (Post 01, 3-slide carousel)
- `uploads/KOOLD_Logo_WebQual.png` — Web-quality wordmark (light/white version)
- `uploads/KOOLD_O_solo_WebQual.png` — Solo Igloo-O icon (light/white)
- `uploads/KOOLD_O_solo_WebQual_Dark.png` — Solo Igloo-O icon (dark/black)

No Figma link or codebase was provided. Design system is based on brand documentation and produced assets.

---

## CONTENT FUNDAMENTALS

### Language & Tone
- **Language:** English for all external content; German for internal documents
- **Casing:** Sentence case for body; UPPERCASE for H3 labels/tags
- **Voice:** Calm, precise, authoritative — never loud or excited
- **Person:** Never "we" as the first word. Always start with the customer's problem or insight
- **Punctuation:** No exclamation marks (too emotional). Periods on every statement — even taglines.
- **Emoji:** Maximum 1–2 per LinkedIn post, only as functional markers (🌡️). Never in headlines or slides.

### Copywriting Style
- Short, declarative sentences (1–2 lines max)
- Metaphors from: heartbeat, pulse, stillness, precision, protection, cold
- Numbers as anchors: "€40,000 per incident", "47 failures prevented"
- Pattern interrupts: unexpected personification ("Your cold chain has a pulse.")
- Paradox as power: "Nothing happened. That's the job."
- Questions that expose discomfort: "How many hours until you know about a temp violation?"

### Emotional Arc (always follow this sequence)
```
UNEASE → RECOGNITION → HOPE → TRUST → ACTION
```

### What NOT to write
- No superlatives without proof ("best", "leading", "world-class")
- No tech jargon without explanation
- No "We are excited to announce…"
- No "We leverage cutting-edge solutions"

### Example Copy
- **Hook:** "Your cold chain has a pulse. We are listening."
- **Silence:** "Nothing happened. That's the job."
- **Precision:** "We don't predict. We precalculate."
- **CTA:** "Schedule a Consultation · KOOLD.COM"

---

## VISUAL FOUNDATIONS

### Aesthetic Direction: "Cryogenic Authority"
> *"The aesthetic emerges from cold intelligence — the visual language of systems that operate below the threshold of human perception. Every composition is a schematic of invisible forces. This is not decoration. It is evidence."*

### Colors
See `colors_and_type.css` for all CSS custom properties.

| Name | Hex | Role |
|------|-----|------|
| Deep Void | `#0F384D` | Primary dark background — authority, depth |
| Arctic Night | `#37657B` | Secondary background — cards, surfaces |
| Storm Layer | `#4A7A90` | Tertiary mid-tone — gradients, dividers |
| Signal Ice | `#FEEC7E` | Accent — CTAs, highlights. **Max 15% of any frame** |
| Pulse Green | `#B2DE7B` | Success, compliance-positive |
| Compliance | `#589E84` | Trust, healthcare data |
| Cloud Dancer | `#F0EEE9` | Warm white — primary light campaign background |
| Darkest Depth | `#191919` | Campaign black — text on light backgrounds |

**Two primary worlds:**
- **Light (primary, 70%):** Cloud Dancer `#F0EEE9` bg + Darkest Depth `#191919` text — LinkedIn, social, campaigns
- **Dark (secondary):** Deep Void `#0F384D` bg + Cloud Dancer text + Signal Ice accent ≤15%

### Typography
Three fonts, all Google Fonts:
- **Cormorant Garamond** — Campaign headlines, emotional hooks, serif authority
- **DM Sans** — Body text, UI, logo base
- **Outfit** — Taglines, brand voice, display weight statements

### Layout & Spacing
- **Grid:** 12-column, 24px gutter, max-width 1280px
- **Base unit:** 8px scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128px
- **White space:** Generous. Stillness is part of the message. Never pack a composition.

### Backgrounds
- No gradients as primary fills (they feel cheap against this brand)
- No textures or patterns — negative space IS the texture
- Photography (when used): arctic landscapes, igloo, cold infrastructure, 3AM industrial. Deep blue-teal tones. No people.
- AI-generated via Flux Schnell with deep shadow, cinematic grain

### Borders & Radius
- **Default radius:** 4px — sharp, precise. No "friendly bubble" design.
- **Pill:** 100px (for badges/chips only)
- **Border color:** `#37657B` (Arctic Night) on dark; `rgba(15,56,77,0.15)` on light

### Shadows
- Dark layouts: no shadows
- Light layouts: `0 4px 16px rgba(15,56,77,0.12)`

### Cards
- Background: `#37657B` (Arctic Night)
- Border: `1px solid #4A7A90`
- Radius: 4px
- Padding: 24px
- Accent variant: `border-left: 3px solid #FEEC7E`

### Animations & Hover
- Transitions: `0.2s ease` — calm, not bouncy
- Hover: Background fills in Signal Ice; text flips to Deep Void
- No bounce, no spring, no playful easing
- Press states: subtle opacity shift (0.85)

### Imagery
- Color: Deep blue-teal, cinematic
- Subjects: arctic landscape, igloo, cold storage, pharma infrastructure
- Style: minimal, dark-toned, no people, no faces
- Signal Ice (`#FEEC7E`) used as warm interior light in igloo imagery

### Iconography
- **Style:** Minimal line icons. Thin stroke weight. No flat-color blobs.
- **System:** Lucide Icons (CDN) — closest match to brand aesthetic
- **No emoji in formal contexts.** Unicode chars (→ · ·) used as text punctuation.
- The Igloo-O is the brand's only proprietary icon — see `assets/logo_O_dark.png` and `assets/logo_O_light.png`

---

## ICONOGRAPHY

The brand uses a single custom pictogram: the **Igloo-O**. This is the centrepiece of the logo and can stand alone as:
- Profile picture / avatar
- Favicon / app icon
- Standalone monogram in campaign layouts

**Files:**
- `assets/logo_O_dark.png` — Black igloo on transparent bg (use on light/Cloud Dancer backgrounds)
- `assets/logo_O_light.png` — White igloo on transparent bg (use on dark/Deep Void backgrounds)

**Usage rules:**
- Never replace the Igloo-O with a standard circle or DM Sans "O"
- Never add color to the Igloo-O (it is always monochrome)
- The icon consists of: outer ring (monitoring), igloo arch (containment), tunnel opening (data gateway), inner negative space (silence = perfection)

**General icons:** Use Lucide Icons from CDN (`https://unpkg.com/lucide@latest`). Thin stroke, no fill. Color: Cloud Dancer or Signal Ice on dark; Darkest Depth on light.

---

## File Index

```
README.md                    ← This file
colors_and_type.css          ← All CSS custom properties + type scale
SKILL.md                     ← Agent skill descriptor

assets/
  logo_wordmark_web.png      ← White/light wordmark (for dark bg)
  logo_O_light.png           ← White Igloo-O icon (for dark bg)
  logo_O_dark.png            ← Black Igloo-O icon (for light bg)
  reference_slide1.png       ← Reference: Template A (Hook)
  reference_slide2.png       ← Reference: Template B (Statement)
  reference_slide3.png       ← Reference: Template CTA (Brand)

preview/
  colors_primary.html        ← Primary color palette swatches
  colors_semantic.html       ← Semantic color roles
  type_display.html          ← Display/headline type specimens
  type_body.html             ← Body/UI type specimens
  type_scale.html            ← Full type scale
  spacing.html               ← Spacing + radius + shadow tokens
  components_buttons.html    ← Button states
  components_cards.html      ← Card variants
  components_badges.html     ← Badge/KPI chips
  logo_usage.html            ← Logo usage guidelines
  social_templates.html      ← Social media template previews
  brand_voice.html           ← Copy examples and voice guide

slides/
  index.html                 ← Slide deck shell + all slide types
  TitleSlide.jsx             ← Title/cover slide component
  ContentSlide.jsx           ← Content/body slide component
  StatSlide.jsx              ← Data/KPI highlight slide
  QuoteSlide.jsx             ← Big quote slide
  CTASlide.jsx               ← Call to action slide

ui_kits/
  dashboard/
    README.md                ← Dashboard UI kit overview
    index.html               ← Interactive dashboard prototype
    Sidebar.jsx              ← Navigation sidebar
    MetricCard.jsx           ← KPI metric cards
    AlertBanner.jsx          ← Alert/notification banner
    SensorMap.jsx            ← Sensor status map
    ChartLine.jsx            ← Temperature line chart

social/
  linkedin_templates.html    ← All 4 LinkedIn template types (interactive)
```
