Swiss Poster Folio

Apply this design skill

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

Design Language

All colors use OKLCH. The palette is achromatic except for one signature accent.

| Token          | Value                     | Material Name | Usage                                              |
|----------------|---------------------------|---------------|------------------------------------------------------|
| `--white`      | `oklch(1.0 0 0)`         | Paper White   | Page background, header bg (96% opacity), footer text |
| `--black`      | `oklch(0.0 0 0)`         | Ink Black     | Primary text, structural borders, footer bg          |
| `--gray-bg`    | `oklch(0.96 0 0)`        | Warm Gray     | Services section background                          |
| `--gray-text`  | `oklch(0.4 0 0)`         | Meta Gray     | Secondary text, labels, meta values, nav links       |
| `--swiss-red`  | `oklch(0.55 0.25 29)`    | Swiss Red     | Accent: category tags, active nav, hover states, red section bg |

### Border Colors (inline)

- Structural thick: `3px solid var(--black)` — header, section headers, red section, about, clients, contact
- Structural thin: `1px solid oklch(0.0 0 0 / 0.12)` — used as `--border-thin`
- Subtle dividers: `1px solid oklch(0.0 0 0 / 0.1)` — philosophy, project rows, about data cells
- Services grid: `1px solid oklch(0.0 0 0 / 0.08)` — internal service item borders
- Client divider text: `oklch(0.0 0 0 / 0.15)` — slash separator color

Agent instructions (SKILL.md)(advanced)

Design Skill

**Target audience:** Graphic designers, art directors, and design studios presenting work in the Swiss International Style tradition. Clients are cultural institutions, corporate identities, editorial publishers, and architecture firms.

**Use cases:** Designer portfolio website, design studio showcase, art director personal site, creative agency landing page.

**Brand personality:** Systematic. Disciplined. Objective. Every element justifies its presence through function. Beauty emerges from the precision of the grid, not from decoration. The voice is confident and sparse, like a Muller-Brockmann poster.

---

Reviews

Related styles

Bauhaus Portfolio@claude-code

Concrete Form Folio@claude-code

Type Specimen Folio@claude-code

Sand Grain Personal@claude-code

Playbill Portfolio@claude-code

Kinetic Editorial Agency@claude-code

All colors use OKLCH. The palette is achromatic except for one signature accent. | Token | Value | Material Name | Usage | |----------------|---------------------------|---------------|------------------------------------------------------| | `--white` | `oklch(1.0 0 0)` | Paper White | Page background, header bg (96% opacity), footer text | | `--black` | `oklch(0.0 0 0)` | Ink Black | Primary text, structural borders, footer bg | | `--gray-bg` | `oklch(0.96 0 0)` | Warm Gray | Services section background | | `--gray-text` | `oklch(0.4 0 0)` | Meta Gray | Secondary text, labels, meta values, nav links | | `--swiss-red` | `oklch(0.55 0.25 29)` | Swiss Red | Accent: category tags, active nav, hover states, red section bg | ### Border Colors (inline) - Structural thick: `3px solid var(--black)` — header, section headers, red section, about, clients, contact - Structural thin: `1px solid oklch(0.0 0 0 / 0.12)` — used as `--border-thin` - Subtle dividers: `1px solid oklch(0.0 0 0 / 0.1)` — philosophy, project rows, about data cells - Services grid: `1px solid oklch(0.0 0 0 / 0.08)` — internal service item borders - Client divider text: `oklch(0.0 0 0 / 0.15)` — slash separator color

**Target audience:** Graphic designers, art directors, and design studios presenting work in the Swiss International Style tradition. Clients are cultural institutions, corporate identities, editorial publishers, and architecture firms. **Use cases:** Designer portfolio website, design studio showcase, art director personal site, creative agency landing page. **Brand personality:** Systematic. Disciplined. Objective. Every element justifies its presence through function. Beauty emerges from the precision of the grid, not from decoration. The voice is confident and sparse, like a Muller-Brockmann poster. ---