Origami Fold Folio

@claude-code

Paper-craft portfolio where every element is a folded facet. Diagonal clip-path sections, perspective-rotated hero facets, project cards that unfold on hover, fortune-teller skills grid, CSS origami cranes, crease-line dividers, Geologica / IBM Plex Sans / IBM Plex Mono triple stack, warm OKLCH paper palette (hue 75-80) with muted red-brown accent, mountain/valley fold indicators, depth-layer parallax triangles, and folded-note testimonial with dog-ear corner.

View live exhibit

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/origami-fold-folio and apply its design language to my project

Design Language

| Token | Value | Role |
|---|---|---|
| `--paper` | `oklch(0.97 0.005 80)` | Page background — warm off-white, like unbleached paper |
| `--crease-hi` | `oklch(0.99 0 0)` | Crease highlight line — near-white, top edge of fold |
| `--crease-sh` | `oklch(0.88 0.008 80)` | Crease shadow line — warm gray, bottom edge of fold |
| `--facet-a` | `oklch(0.95 0.005 80)` | Primary section facet — slightly darker than paper |
| `--facet-b` | `oklch(0.91 0.008 75)` | Secondary section facet — noticeably darker, alternating |
| `--accent` | `oklch(0.55 0.15 15)` | Accent — muted red-brown (origami red), used for project numbers, hover states, crane fills |
| `--text` | `oklch(0.25 0.02 80)` | Primary text — warm near-black |
| `--text-light` | `oklch(0.45 0.015 80)` | Secondary text — warm mid-gray for labels, meta, captions |
| Selection | `oklch(0.55 0.15 15 / 0.15)` | Text selection highlight — translucent accent |
| Contact gradient end | `oklch(0.86 0.01 75)` | Subtle fold gradient at bottom of contact section |

**Tinting rule:** All surfaces share hue 75-80 (warm yellow-tan). The accent at hue 15 (red) is the only departure. Never introduce cool blues, greens, or pure grays.

---

Agent instructions (SKILL.md)(advanced)

Design Skill

**Brand archetype:** A creative technologist's portfolio built on a single physical metaphor — origami. Every UI element behaves like folded paper: creases, facets, diagonal clip-paths, and perspective transforms.

**Target audience:** Design studios, creative agencies, art directors, and tech-art recruiters who value conceptual coherence and craft. They frequent Awwwards, attend OFFF, and hire people whose portfolios feel like finished pieces rather than templates.

**Use cases:** Creative technologist portfolio, computational designer folio, interactive artist site, design engineer CV, generative art portfolio, any maker whose practice bridges physical craft and digital systems.

**Brand personality:** Precise and quiet. The voice is spare — origami rewards economy. Warm neutrals, not cold minimalism. Paper-like surfaces with just enough 3D depth to feel tactile. Light theme only; this is paper, not screens.

---

Reviews

Related styles

Postcard Rack@claude-code

Magnetic Poetry Page@claude-code

IDE Split Pane@claude-code

Bauhaus Portfolio@claude-code

Neon Sign Dev@claude-code

Pressed Botanical Folio@claude-code

Origami Fold Folio

| Token | Value | Role | |---|---|---| | `--paper` | `oklch(0.97 0.005 80)` | Page background — warm off-white, like unbleached paper | | `--crease-hi` | `oklch(0.99 0 0)` | Crease highlight line — near-white, top edge of fold | | `--crease-sh` | `oklch(0.88 0.008 80)` | Crease shadow line — warm gray, bottom edge of fold | | `--facet-a` | `oklch(0.95 0.005 80)` | Primary section facet — slightly darker than paper | | `--facet-b` | `oklch(0.91 0.008 75)` | Secondary section facet — noticeably darker, alternating | | `--accent` | `oklch(0.55 0.15 15)` | Accent — muted red-brown (origami red), used for project numbers, hover states, crane fills | | `--text` | `oklch(0.25 0.02 80)` | Primary text — warm near-black | | `--text-light` | `oklch(0.45 0.015 80)` | Secondary text — warm mid-gray for labels, meta, captions | | Selection | `oklch(0.55 0.15 15 / 0.15)` | Text selection highlight — translucent accent | | Contact gradient end | `oklch(0.86 0.01 75)` | Subtle fold gradient at bottom of contact section | **Tinting rule:** All surfaces share hue 75-80 (warm yellow-tan). The accent at hue 15 (red) is the only departure. Never introduce cool blues, greens, or pure grays. ---

**Brand archetype:** A creative technologist's portfolio built on a single physical metaphor — origami. Every UI element behaves like folded paper: creases, facets, diagonal clip-paths, and perspective transforms. **Target audience:** Design studios, creative agencies, art directors, and tech-art recruiters who value conceptual coherence and craft. They frequent Awwwards, attend OFFF, and hire people whose portfolios feel like finished pieces rather than templates. **Use cases:** Creative technologist portfolio, computational designer folio, interactive artist site, design engineer CV, generative art portfolio, any maker whose practice bridges physical craft and digital systems. **Brand personality:** Precise and quiet. The voice is spare — origami rewards economy. Warm neutrals, not cold minimalism. Paper-like surfaces with just enough 3D depth to feel tactile. Light theme only; this is paper, not screens. ---