jdsadminllc 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