# Kolding Snørefabrik — Design System

> _Dansk håndværk siden 2010._

Kolding Snørefabrik ApS is a **fictional Danish shoelace factory**, invented as a case study for an AI workshop (the case is explicitly flagged as 100% opdigtet in the source material). The brand exists to feel believable — so everything here should read as a real, proud, slightly dad-joking mid-size Danish manufacturer. Nothing playful-startup, nothing SaaS. Think: factory tour brochure, annual report, trade-fair booth.

**Positioning (in their own words):** _"Kolding Snørefabrik producerer ikke snørebånd som commodity. Det er tekniske komponenter med dokumenteret performance."_ — they don't make shoelaces, they make technical components.

**Founder myth:** Ainer Chatterson, maskiningeniør, founded it in 2010. The house style is the "Chattersonske menneskesyn" — decency (ordentlighed) as bedrock. Two in-house terms show up everywhere: **Chatterson-fletning** (a proprietary high-friction braid) and the **Chatterson-test** (brudstyrke + farveægthed batch test).

**Products:** six series — CORE (classic), GRIP+ (safety), FLEX (fashion), TECH (kevlar / marine), RE-CHATTER (sustainable monomaterial), CUSTOM (private label). 42 braiding machines, 1.4M meters/month, 24 employees, 28.2M DKK revenue (2024).

---

## 📁 Index — what's in this folder

| Path | What |
|---|---|
| `README.md` | This file. Brand overview, content rules, visual foundations, iconography. |
| `SKILL.md` | Cross-compatible skill definition — use this if downloading into Claude Code. |
| `colors_and_type.css` | All colour + type tokens (CSS vars + semantic roles). |
| `assets/` | Logos, seal, factory photo, laces hero, product crops. **Copy out, never hot-link.** |
| `source-pdfs/` | Original kursusmateriale PDFs — Virksomhedsprofil, Årsrapport, Personalehåndbog, Produktkatalog, Organisation, Tone of Voice. Treat as canon. |
| `preview/` | Small HTML cards that render into the Design System tab. |
| `ui_kits/marketing-site/` | The public-facing _Kursusmateriale_ site — recreated as reusable JSX components. |
| `slides/` | _(not generated — no deck template was provided)._ |

Source materials are all in Danish. Keep outputs in Danish unless the user asks otherwise — _switching to English breaks the voice._

**Source map**
- Local codebase: `kolding-snorefabrik/` (read-only mount). Single file: `kolding-snorefabrik/index.html` — the existing kursusmateriale landing page. This is our one source of truth for colour and layout.
- Original PDFs copied under `source-pdfs/` for durable reference.

---

## ✍️ CONTENT FUNDAMENTALS

### The voice in one line
**"Den varme tekniker"** — _the warm technician._ Proud of the nerdy detail, never arrogant. There is always room for a small smile.

### Three pillars
Every piece of copy should sit on one of these:
1. **Den nørdede detalje (innovation)** — explain ultralyds-tipping, Chatterson-fletning, kevlar cores, _excitedly_, but land it in plain language. _"Vi smelter enderne sammen med ultralyd. Det lyder som science fiction, men det betyder bare, at dine snørebånd aldrig flosser."_
2. **Hjertet i Kolding (mennesket)** — celebrate the 24 colleagues, the 3-skift, the people behind the machines. Warm, grateful. _"…det er altså Henrik, Sofie og resten af holdet, der sørger for, at kvaliteten sidder lige i skabet – også klokken 03.00 om natten."_
3. **Den grønne rejse (ESG)** — RE-CHATTER, monomateriale, genanvendelse. Visionary **but realistic** — no greenwashing. _"Vi vil gerne have vores gamle snørebånd tilbage! Ikke fordi vi savner dem, men fordi vi kan lave dem om til nye fibre."_

### Writing rules

| Do ✓ | Don't ✗ |
|---|---|
| "vi" / "vores" — collective first person | Cold passive corporate jargon |
| Explain nerdy terms so anyone follows | Assume the reader knows what "aglet" means |
| Humorous, human headlines | "For professional", dull headlines |
| Speak to customer needs (safety, holdbarhed, mode) | Talk only about ourselves |
| Document specs (brudstyrke, friktion, temperatur) | Brag without evidence |
| Frame products as _tekniske komponenter_ | Call products "varer" |

### Casing
- **Sentence case** for body and headlines in marketing prose.
- **UPPERCASE + wide tracking (0.18–0.32em)** for eyebrows, section labels, nav items, CTA buttons, meta.
- **Roman numerals (I, II, III, IV, V)** number long-form sections — borrowed from the annual-report register.
- Product series are ALL-CAPS as proper nouns: **CORE, GRIP+, FLEX, TECH, RE-CHATTER, CUSTOM**.

### Punctuation quirks
- Em-dashes separate ideas — plentifully.
- **❦** (fleuron) appears as a divider flourish in the hero.
- Numbers carry Danish formatting: `1,4 mio.`, `28,2 mio. DKK`, `45 kg`, `24/5`, `60–180 cm`.
- Danish characters mandatory: ø, å, æ. Never anglicize place names.

### Emoji
Used **moderately** in social copy per the Tone of Voice doc (examples: 🇩🇰, a small smile). Never emoji-as-bullet. Never emoji in product UI, headers, CTA, or buttons. When in doubt, **do without**.

### Voice signature
Every long-form post ends "as if from someone you'd want to grab a coffee with — professional, knowledgeable, always with a glimt i øjet." This is called the **Louise-signatur** (Louise Hartmann, Head of Marketing).

### Example headlines (canon)
- _"Snørefabrik med tradition og kvalitet"_
- _"Kvalitet, der holder"_
- _"Alt materiale til AI-workshoppen samlet ét sted"_
- _"En opdigtet snørefabrik — skabt til at øve sig på"_

---

## 🎨 VISUAL FOUNDATIONS

### Palette
- **Forest green** (#0f3321 → #2a6b4a) — dominant. Hero, nav, footer, primary CTA. Always paired with…
- **Tarnished gold** (#c9a961) — the _only_ accent. Dividers, eyebrows, seal, icons, button lift. Not yellow — oxidised brass, think old plaque.
- **Paper / cream** (#faf5ec, #f5ece0) — page and section fills. Never pure white at page level; white only on cards.
- **Ink** (#2a2a2a, #5a5a5a) — body + secondary text on paper.

**Semantic only:** there are no `success / warning / error` hues in this system. If an app-level UI needs them, extend the green scale (darker = more emphasis) and use the gold for a single highlight. Don't introduce blues or reds ad hoc.

### Type
- **Cormorant Garamond** (serif, weights 400–700, italics allowed) — display, titles, card headings, numerals. Italics carry emphasis — `<em>` in the display is gold-coloured italic.
- **Inter** (sans, weights 300–700) — body, labels, nav, meta, tables.
- Weight usage: serif sits at 500–600 (medium) for warmth. Don't pull it to 700 except on facts/numerals. Sans runs 400 for body, 600 for labels, 300 for the hero lead.
- Line-height: 1.1 (display), 1.6 (body), 1.75 (lead).
- **Never Inter for display. Never Cormorant for running body.** The mix is the brand.

### Backgrounds
- Page: `--ksf-paper` flat.
- Hero / footer / "download all" block: **forest green** with a tight dark gradient overlay (`rgba(15,51,33,0.88) → 0.92`) _over a photo_ (factory, laces) — never flat green alone for the hero.
- Section breaks: flip to `--ksf-cream` for contrast; don't stack two cream sections in a row.
- **No** glassmorphism, no coloured gradients, no purple/blue haze, no generated SVG illustration — use real photography.

### Borders, rules, hairlines
- Card border: **1px solid rgba(201,169,97,0.25)** — a gold hairline, not grey.
- Section divider: a single 60–80px **gold underline**, centred, 1–2px tall — appears under eyebrows and after hero ornaments.
- Category header has a full-width hairline under it.
- The "Download all" section is framed by **vertical gold rules** 20px in from each edge — a signature detail.

### Corners
- **Sharp (0 radius)** by default. Cards, CTAs, inputs — all rectangular. This is deliberate; it reads as classic manufacturer, not consumer tech.
- **Full circle** only for: brand mark monogram (KSF), character avatars, decorative dots.
- **Pills (20px radius)** only for small meta chips like character mentions.
- **Small radius (4px)** only for tooltips.

### Shadows + elevation
- Default cards: no shadow, just the gold hairline.
- Hover: `0 20px 48px rgba(15, 51, 33, 0.18)` lift + `inset 0 1px 0 gold` top edge glow.
- Gold CTA: `0 4px 16px rgba(201, 169, 97, 0.20)` → `0 8px 24px rgba(201, 169, 97, 0.35)` on hover.
- No inner shadows, no neumorphism, no coloured glows beyond those two.

### Hover + press
- Links / nav: text flips from cream → gold; an **underline grows from 0 → 100%** using `transition: width 0.3s`.
- Cards: `translateY(-8px) scale(1.02)` with the signature ease.
- Green `.dl-btn`: a gold panel slides in from `left:-100%` → `0`; text colour inverts to green-dark; icon slides right 4px.
- Gold `.btn-gold`: lifts `translateY(-3px)` and brightens to `gold-light`.
- All motion: **`cubic-bezier(0.34, 1.56, 0.64, 1)`** — a slight overshoot. This is the signature ease. Linear or `ease-out` look flat compared to it.
- Press state: let the hover state release; no additional scale-down.

### Animation
- Content entrance: `fadeInUp` (30px / 0.6–0.8s), `slideInLeft` (40px / 0.7s). Staggered `backwards`.
- Ambient: the brand-mark circle **float**s (±8px over 3s). Hero divider **pulse-glow**s (0.6 → 1 opacity over 3s). Use sparingly — one ambient motion per view.
- Page transitions: smooth scroll, nothing more.

### Layout rules
- Nav: **sticky**, forest-green, 22px vertical padding.
- Content column: `max-width: 1280px` for material grids, `780px` for text-dense intros.
- Section padding: `80–110px` vertical, `48px` horizontal (24px on mobile).
- The grid for cards: `repeat(auto-fill, minmax(300px, 1fr))`, gap 20px.
- Facts strip is always 4 columns on desktop, 2 on mobile, bordered top+bottom with 3px gold rules — a tiny identifiable pattern.

### Imagery treatment
- **Moody, warm, cinematic.** Dark backgrounds, shallow DOF, brass/olive/navy subjects. Laces photographed on black stone. Factory shot in an overcast, painterly light. People in the org chart are head-and-shoulders, neutral wall, soft daylight.
- Colour grade: warm shadows, slightly desaturated, no heavy filters. **No grain, no b&w, no duotone.**
- Every hero image is overlaid with the forest-green gradient at ~90% opacity so text always sits on a green-cream field, not a photograph.

### Transparency + blur
- **Never** frosted glass / backdrop-filter surfaces.
- Transparency only in three places: the hero photo overlay, the gold hairline (25% alpha), hover-state gradient tint on cards (4% gold).

### Protection strategy
- Text over photography always sits over a **90%-opacity green gradient**, not a blur. The photo is atmosphere, not a background the text has to cope with.

### The seal (signature motif)
The **KSF seal** — circular gold stamp reading `KOLDING SNØREFABRIK · KSF · SIDEN 2010 · DANSK HÅNDVÆRK` — is the single most recognisable brand element. Treat it like a wax stamp: appears once per surface, bottom-right of hero photography, or as a footer corner mark. Don't resize it under 120px.

---

## 🔣 ICONOGRAPHY

**The source material uses TWO icon systems, both live.**

### 1. Feather / Lucide outline icons (inline SVG)
The index.html uses hand-written Feather-style SVGs: `viewBox="0 0 24 24"`, `stroke="currentColor"`, `stroke-width="2.5"`, `stroke-linecap="round"`, `stroke-linejoin="round"`, **no fill**. The download arrow, chevrons, and tool-card glyphs all follow this exact spec. Used for UI affordances (download, navigate, interact).

**Prescribed CDN substitute:** [Lucide](https://unpkg.com/lucide-static@0.469.0/icons/) — same lineage as Feather, actively maintained, matches the stroke weight. Use this for any new UI icon. _(Substitution flagged — the source project hand-rolled its SVGs rather than depending on a library, so we're adopting Lucide as the canonical pick.)_

### 2. Decorative "badge" icons (AI-generated, flat beige/tan)
On the brochure's bottom strip you see `DANSK PRODUKTION I KOLDING`, `PÅLIDELIGE PARTNERSKABER`, `LEVERING TIL HELE VERDEN` — each paired with a monoline beige glyph on the dark green background (house, handshake, globe). These are illustrative, appear once, and should be treated as _images_, not icons.

Catalog categories on the produktkatalog use the same style for "Bæredygtige materialer / Fleksibel produktion / Kvalitet testet / Hurtig levering". Copy the PNG/crop rather than redrawing.

### Unicode + glyphs
Used intentionally:
- **❦** (floral heart / fleuron) — hero divider ornament.
- **·** (middle dot) — in eyebrow labels (`Kursusmateriale · AI-workshop · Grumpy Productions`).
- **—** (em-dash) — preferred over colons to introduce clauses.
- **I II III IV V** — Roman-numeral section numbers.
- **🇩🇰** — flag, permitted in social copy per Tone of Voice.

### Emoji
See Content Fundamentals — moderate, social only, never UI.

### Logos + monograms
- **Full wordmark lockup** — `assets/logo-block.png` — factory silhouette + "KOLDING SNØREFABRIK" + tagline. Use on dark green surfaces.
- **Circle monogram (KSF)** — rendered live in CSS (`.brand-mark` — 52px, 2px gold border, gold serif "KSF", 18px, letter-spacing 0.05em). Use in nav + footer.
- **Gold seal** — `assets/ksf-seal.png` — signature stamp. Use sparingly.
- **Laces hero** — `assets/laces-hero.png` / `laces-closeup.png` — the canonical product imagery. Moody, dark, direct.
- **Factory exterior** — `assets/factory-photo.png` — authentic place anchor.

### Rules of thumb
- Flat-icon packs with colour fills (Font Awesome solid, Material filled) are **wrong** for this brand — use outlined Lucide/Feather only.
- Never draw your own "clever" icons. If it's not in the source and not in Lucide, ask the user.
- Never mix icon weights — stick to stroke 2.5 throughout a surface.
