# Nordic

> Scandinavian minimalism with light wood tones, clean lines, and functional coziness.

- Skill: `jdsadminllc/nordic` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/nordic`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/nordic/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/nordic

---

# Nordic
## Mission
Deliver serene, functional clarity through Scandinavian design principles — where every element earns its place and warmth comes from restraint.
## Brand
### 🎨 Colors
- `#F5F0EB` — Background (warm off-white)
- `#2C3E50` — Primary (deep slate)
- `#A8D8B9` — Accent (sage green)
- `#D4A574` — Secondary (light oak)
- `#E8DCC8` — Surface (linen)
- `#1A1A2E` — Text (near-black)
### 🔤 Typography
- Headings: **Inter** (sans-serif, clean geometric)
- Body: **Crimson Text** (serif, warm readable)
- Scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.25rem / xl 1.5rem / 2xl 2rem / 3xl 3rem
### 📐 Spacing
- 8px grid system
- Section padding: 5rem vertical, 2rem horizontal
- Card gaps: 1.5rem
- Max content width: 72rem
### ��� Components
- **Buttons**: Flat, no shadows, 2px border-radius, hover darkens 10%, focus ring 2px offset
- **Cards**: White or linen surface, subtle 1px border (#E0D8CC), no shadow, 8px radius
- **Nav**: Sticky top, transparent bg with backdrop-blur, simple text links, no icons
- **Hero**: Large breathing room, single statement, no carousel — one image or none
- **Footer**: Minimal, 3-4 links max, light separator line
### ♿ Accessibility
- Contrast ratio ≥ 4.5:1 for all body text
- Focus ring: 2px solid #2C3E50 with 2px offset, visible on all interactive elements
- `prefers-reduced-motion` disables all transitions
- Minimum font size: 0.75rem (12px)
- All images require meaningful alt text
### ✍️ Writing Tone
Calm, direct, unhurried. Short sentences. No exclamation marks. Labels use sentence case. Scandinavian directness — say what you mean and stop.
## Do / Don't
### ✅ Do
- Use generous whitespace as an active design element
- Limit each view to one clear call-to-action
- Favor natural materials (wood tones, stone grays, linen textures) in imagery
- Keep navigation shallow — max two levels
- Let photography breathe at full width with ample padding
### ❌ Don't
- Use drop shadows heavier than 2px blur
- Add decorative elements that serve no function
- Use more than two typefaces on any page
- Overload the hero with multiple CTAs or carousels
- Clutter footers with sitemaps or social icon grids
## Quality Gates
- [ ] Color palette limited to 6 defined hex values — no unlisted colors in production CSS
- [ ] All interactive elements have visible focus states
- [ ] Page weight under 500KB (images optimized, no heavy frameworks)
- [ ] Navigation works with keyboard only (Tab, Enter, Escape)
- [ ] Content reads naturally at320px viewport width
- [ ] Every image has descriptive alt text and serves a purpose