# Claude

> Claude

- Skill: `jdsadminllc/claude` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/claude`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/claude/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/claude

---

# Claude
## Mission
Create interfaces that feel thoughtful, trustworthy, and human — like a well-designed book more than a software dashboard.
## Brand
### 🎨 Colors
- `#faf8f5` — Warm cream background
- `#f3eee8` — Card / surface cream
- `#d9593d` — Terracotta accent (primary)
- `#2d2d2a` — Text primary (warm near-black)
- `#6b6b65` — Text secondary (warm gray)
- `#e8e3db` — Subtle border
### 🔤 Typography
- Headings: Crimson Text (Google Fonts)
- Body: Source Serif 4 (Google Fonts)
- Scale: xs 0.75rem, sm 0.875rem, base 1rem, lg 1.125rem, xl 1.375rem, 2xl 1.75rem, 3xl 2.25rem
### 📐 Spacing
- Grid: 8-column centered, max-width 720px for reading, 1024px for interfaces
- Section padding: 3rem vertical, 2rem horizontal
- Card gaps: 1.25rem
### 🧩 Components
- Buttons: Subtle — 6px radius, terracotta fill for primary, warm gray outline for secondary, generous 16px-24px horizontal padding, text weight 500
- Cards: 10px radius, cream surface `#f3eee8`, 1px `#e8e3db` border, 20px padding, subtle shadow only on hover
- Nav: Minimal — cream background, logo left, 3-5 text links right, no dropdowns if avoidable, 1px bottom border
- Hero: Centered, max 600px text block, serif headline, warm subhead, one deliberate CTA
- Footer: Light cream `#f3eee8`, small serif text, simple link columns, no heavy branding
### ♿ Accessibility
- Minimum contrast ratio 4.5:1 for body text (`#2d2d2a` on `#faf8f5`)
- Focus states: 2px terracotta ring with 2px offset
- Reduced motion: Instant transitions, no hover animations
- Minimum font size 0.875rem for body text
### ✍️ Writing Tone
- Voice: Thoughtful, measured, intellectually curious — never rushed
- Labels: Sentence case, descriptive, natural language
- Use "Claude" persona rules: honest about limits, never overpromise, cite sources
## Do / Don't
### ✅ Do
- Lead with typography — headings should command the page without being loud
- Use generous white space around text blocks — reading comfort is the first priority
- Keep the terracotta accent to 5-10% of visible surface area
- Use warm grays instead of cool grays for all secondary elements
- Let content breathe — 60-75 characters per line for body text
### ❌ Don't
- Use pure white (`#ffffff`) — always warm it toward cream
- Add bright, saturated colors — they clash with the warm palette
- Use more than 2 type sizes on any single view
- Add heavy shadows or depth effects — keep it flat and book-like
- Use animation for anything functional — subtle fades only
## Quality Gates
- [ ] Body text is 0.875rem minimum on all viewports
- [ ] Line length is 60-75 characters for prose blocks
- [ ] Terracotta accent used on ≤ 10% of visible area
- [ ] No pure white surfaces — all light backgrounds are cream-tinted
- [ ] Focus states visible on all interactive elements
- [ ] Warm grays only — no cool/blue-gray values in the palette