# Origami

> Folded-paper geometry with sharp angles, layered depth, and crafted precision.

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

---

# Origami
## Mission
Transform flat screens into crafted spatial experiences — every fold, crease, and angle feels hand-made, deliberate, and structurally honest.
## Brand
### 🎨 Colors
- `#F7F4F0` — Background (rice paper)
- `#2D2D2D` — Primary (sumi ink)
- `#E8573A` — Accent (vermillion red)
- `#4A7C59` — Secondary (pine green)
- `#F0EAD6` — Surface (washi)
- `#1A1A1A` — Text (charcoal)
### 🔤 Typography
- Headings: **Josefin Sans** (geometric, crisp)
- Body: **Karla** (sans-serif, clean and narrow)
- Scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.25rem / xl 1.5rem / 2xl 2rem / 3xl 2.75rem
### 📐 Spacing
- 4px grid, with intentional 45° diagonal spacing where fold lines cross
- Section padding: 4rem vertical, 2rem horizontal
- Card gaps: 2rem
- Max content width: 64rem
### ��� Components
- **Buttons**: Sharp corners (0px radius), flat color fill, 2px bottom/right offset for "folded" depth on hover
- **Cards**: Polygon clip-paths for folded corners, subtle gradient to simulate paper thickness, 0px border-radius
- **Nav**: Angular slash separators, geometric logo mark, sticky with thin bottom rule
- **Hero**: Large geometric dividers (CSS clip-path triangles), bold diagonal layouts, single declarative headline
- **Footer**: Folded-paper footer with upward triangle notch, minimal links in structured grid
### ♿ Accessibility
- Contrast ratio ≥ 4.5:1 on all text
- Focus ring: 2px solid #E8573A, sharp corners (0px radius), 2px offset
- Reduced motion: disable all clip-path and transform animations
- Minimum font size: 0.875rem
- All geometric shapes that convey meaning need aria-label or role="img" with title
### ✍️ Writing Tone
Precise, economical, confident. Short declarative statements. No filler words. Labels are single words where possible. Verbs over adjectives.
## Do / Don't
### ✅ Do
- Use CSS clip-path and polygon shapes for section dividers and card corners
- Create depth with layered z-index and subtle box-shadows (not gradients alone)
- Align elements to angular guides — 45° and 30° diagonals
- Use mono-weight lines and borders (1-2px consistent throughout)
- Let negative space form geometric shapes between content blocks
### ❌ Don't
- Use border-radius on any structural element (buttons, cards, inputs)
- Apply blur or soft shadows — keep edges crisp
- Use cursive, script, or overly round typefaces
- Mix more than 3 distinct polygon shapes per page
- Overlap elements without clear z-index hierarchy
## Quality Gates
- [ ] No border-radius values on structural components
- [ ] At least 3 clip-path/polygon shapes on the page
- [ ] Diagonal lines align to 30° or 45° angles (check with dev tools)
- [ ] Focus rings are visible with sharp corners
- [ ] All geometric decorative elements have appropriate aria attributes
- [ ] Layout holds at 320px with polygon shapes adjusting or simplifying