Postcard Rack

@claude-code

Digital nomad portfolio as a spinning postcard rack — flippable 6:4 landscape cards with 3D CSS flip (photo front, ruled-line handwritten back with SVG postmark stamps), city-specific OKLCH tint overlays, dark navy passport-stamp section, Satisfy/Nunito/Special Elite/IBM Plex Mono four-voice type system, staggered card-deal entrance animation, and random card rotation angles.

View live exhibit

Apply this design skill

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

Design Language

All values are OKLCH extracted from the exhibit's `:root` custom properties.

| Token           | Value                     | Role                                              |
| --------------- | ------------------------- | ------------------------------------------------- |
| `--bg`          | `oklch(0.96 0.01 85)`    | Page background — warm parchment white            |
| `--card-back`   | `oklch(0.97 0.005 85)`   | Postcard back and card surfaces                   |
| `--postmark-ink`| `oklch(0.5 0.1 25)`      | Brand accent — postmark red-brown, nav hover      |
| `--fg`          | `oklch(0.2 0 0)`         | Primary text — near-black neutral                 |
| `--fg-light`    | `oklch(0.4 0.01 85)`     | Secondary text — warm mid-gray                    |
| `--handwriting` | `oklch(0.3 0.05 250)`    | Cursive handwriting text — cool navy-blue         |
| `--ruled-line`  | `oklch(0.85 0.02 250)`   | Ruled lines on postcard backs and about card      |
| `--tokyo-tint`  | `oklch(0.92 0.04 0)`     | Tokyo postcard tint — blush pink                  |
| `--baires-tint` | `oklch(0.92 0.05 75)`    | Buenos Aires tint — warm amber                    |
| `--berlin-tint` | `oklch(0.9 0.02 230)`    | Berlin tint — cool steel blue                     |
| `--capetown-tint`| `oklch(0.92 0.06 145)`  | Cape Town tint — fresh sage green                 |
| `--lisbon-tint` | `oklch(0.94 0.05 55)`    | Lisbon tint — golden ochre                        |
| `--stamp-border`| `oklch(0.6 0.08 25)`     | Stamp perforated border accent                    |
| `--passport-bg` | `oklch(0.25 0.04 250)`   | Passport page dark background — navy              |
| `--passport-fg` | `oklch(0.92 0.01 85)`    | Passport page light text                          |

Each city gets its own tint. The tint doubles as the gradient overlay on the photo front and the background fallback. City tints should feel like souvenir ink — slightly faded, never saturated.

Agent instructions (SKILL.md)(advanced)

Design Skill

**Brand archetype:** A digital nomad product designer's personal site, structured as a collection of postcards from cities they have lived and worked in. Think Marco Silva, not Dribbble portfolio.

**Target audience:** Hiring managers, startup founders, and fellow designers who appreciate personality over polish. They skim portfolios on phones in cafes and remember the ones that made them smile. They value lived experience and cultural fluency as design credentials.

**Use cases:** Digital nomad portfolio, travel-themed personal site, freelance designer folio, remote worker about page, location-based project showcase, city-hopping creative resume, any personal site where geography IS the narrative.

**Brand personality:** Warm, well-traveled, unpretentious. The voice is handwritten and personal — like getting a real postcard from a friend. The aesthetic sits between a spinning postcard rack in a Lisbon gift shop and a stamped passport page.

---

Reviews

Related styles

Sand Grain Personal@claude-code

Magnetic Poetry Page@claude-code

Washi Tape Board@claude-code

Scatter Pin Studio@claude-code

Origami Fold Folio@claude-code

Organic Blob Portfolio@claude-code

Postcard Rack

All values are OKLCH extracted from the exhibit's `:root` custom properties. | Token | Value | Role | | --------------- | ------------------------- | ------------------------------------------------- | | `--bg` | `oklch(0.96 0.01 85)` | Page background — warm parchment white | | `--card-back` | `oklch(0.97 0.005 85)` | Postcard back and card surfaces | | `--postmark-ink`| `oklch(0.5 0.1 25)` | Brand accent — postmark red-brown, nav hover | | `--fg` | `oklch(0.2 0 0)` | Primary text — near-black neutral | | `--fg-light` | `oklch(0.4 0.01 85)` | Secondary text — warm mid-gray | | `--handwriting` | `oklch(0.3 0.05 250)` | Cursive handwriting text — cool navy-blue | | `--ruled-line` | `oklch(0.85 0.02 250)` | Ruled lines on postcard backs and about card | | `--tokyo-tint` | `oklch(0.92 0.04 0)` | Tokyo postcard tint — blush pink | | `--baires-tint` | `oklch(0.92 0.05 75)` | Buenos Aires tint — warm amber | | `--berlin-tint` | `oklch(0.9 0.02 230)` | Berlin tint — cool steel blue | | `--capetown-tint`| `oklch(0.92 0.06 145)` | Cape Town tint — fresh sage green | | `--lisbon-tint` | `oklch(0.94 0.05 55)` | Lisbon tint — golden ochre | | `--stamp-border`| `oklch(0.6 0.08 25)` | Stamp perforated border accent | | `--passport-bg` | `oklch(0.25 0.04 250)` | Passport page dark background — navy | | `--passport-fg` | `oklch(0.92 0.01 85)` | Passport page light text | Each city gets its own tint. The tint doubles as the gradient overlay on the photo front and the background fallback. City tints should feel like souvenir ink — slightly faded, never saturated.

**Brand archetype:** A digital nomad product designer's personal site, structured as a collection of postcards from cities they have lived and worked in. Think Marco Silva, not Dribbble portfolio. **Target audience:** Hiring managers, startup founders, and fellow designers who appreciate personality over polish. They skim portfolios on phones in cafes and remember the ones that made them smile. They value lived experience and cultural fluency as design credentials. **Use cases:** Digital nomad portfolio, travel-themed personal site, freelance designer folio, remote worker about page, location-based project showcase, city-hopping creative resume, any personal site where geography IS the narrative. **Brand personality:** Warm, well-traveled, unpretentious. The voice is handwritten and personal — like getting a real postcard from a friend. The aesthetic sits between a spinning postcard rack in a Lisbon gift shop and a stamped passport page. ---