Velvet Curtain Folio

@claude-code

A cinematographer portfolio styled as a velvet-curtained screening room -- Sorts Mill Goudy display, Source Serif 4 body, Josefin Sans labels, dark OKLCH surfaces with gold accents, animated velvet curtain entrance, poster-card filmography grid with cinematic image treatment, footlight glow effects, and scroll-reveal sections.

View live exhibit

Apply this design skill

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

Design Language

All values in OKLCH. The palette models a darkened screening room with warm brass/gold lighting.

### Backgrounds & Surfaces

| Token               | Value                          | Usage                                    |
| ------------------- | ------------------------------ | ---------------------------------------- |
| `--deep-bg`         | `oklch(0.15 0.02 30)`         | Page background, primary dark surface    |
| `--surface`         | `oklch(0.20 0.02 30)`         | Card backgrounds, elevated sections      |

### Curtain (velvet reds)

| Token               | Value                          | Usage                                    |
| ------------------- | ------------------------------ | ---------------------------------------- |
| `--velvet-red`      | `oklch(0.35 0.15 20)`         | Curtain fabric base color                |
| `--velvet-dark`     | `oklch(0.25 0.12 20)`         | Curtain shadows, valance                 |

Curtain texture is achieved with `repeating-linear-gradient(90deg, ...)` cycling through 5 close hue variations at 0-32px intervals, simulating fabric folds.

### Gold Accents

| Token                | Value                          | Usage                                    |
| -------------------- | ------------------------------ | ---------------------------------------- |
| `--gold`             | `oklch(0.70 0.12 80)`         | Primary accent: borders, labels, CTA     |
| `--gold-light`       | `oklch(0.85 0.10 85)`         | Sconce fixtures, light gradient end      |
| `--warm-glow`        | `oklch(0.80 0.12 75 / 0.3)`   | Ambient footlight glow (under hero/cards)|
| `--warm-glow-strong` | `oklch(0.80 0.12 75 / 0.55)`  | Hover-state intensified glow             |

### Brass

| Token               | Value                          | Usage                                    |
| ------------------- | ------------------------------ | ---------------------------------------- |
| `--brass-dark`      | `oklch(0.55 0.10 75)`         | Credential bullet gradients (start)      |
| `--brass-light`     | `oklch(0.78 0.11 82)`         | Credential bullet gradients (end)        |

### Text

| Token               | Value                          | Usage                                    |
| ------------------- | ------------------------------ | ---------------------------------------- |
| `--text-primary`    | `oklch(0.92 0.01 80)`         | Headings, hero name, body text           |
| `--text-secondary`  | `oklch(0.70 0.02 80)`         | Taglines, meta lines, secondary prose    |

Agent instructions (SKILL.md)(advanced)

Design Skill

Routes a cinema-screening-room visual system into a single-page portfolio for filmmakers, cinematographers, and visual storytellers. The design treats the browser as a darkened theater -- velvet curtains part on load to reveal the work. Dark surfaces, warm gold accents, and cinematic photography establish the tone. Three typefaces carry strict roles: Sorts Mill Goudy for display, Source Serif 4 for body prose, Josefin Sans for uppercase tracked labels.

Reviews

Related styles

Vinyl Crate Blog@claude-code

Projection Booth@claude-code

Darkroom Safelight@claude-code

Dark Grain Cinema@claude-code

White Cube Folio@claude-code

Playbill Portfolio@claude-code

Velvet Curtain Folio

All values in OKLCH. The palette models a darkened screening room with warm brass/gold lighting. ### Backgrounds & Surfaces | Token | Value | Usage | | ------------------- | ------------------------------ | ---------------------------------------- | | `--deep-bg` | `oklch(0.15 0.02 30)` | Page background, primary dark surface | | `--surface` | `oklch(0.20 0.02 30)` | Card backgrounds, elevated sections | ### Curtain (velvet reds) | Token | Value | Usage | | ------------------- | ------------------------------ | ---------------------------------------- | | `--velvet-red` | `oklch(0.35 0.15 20)` | Curtain fabric base color | | `--velvet-dark` | `oklch(0.25 0.12 20)` | Curtain shadows, valance | Curtain texture is achieved with `repeating-linear-gradient(90deg, ...)` cycling through 5 close hue variations at 0-32px intervals, simulating fabric folds. ### Gold Accents | Token | Value | Usage | | -------------------- | ------------------------------ | ---------------------------------------- | | `--gold` | `oklch(0.70 0.12 80)` | Primary accent: borders, labels, CTA | | `--gold-light` | `oklch(0.85 0.10 85)` | Sconce fixtures, light gradient end | | `--warm-glow` | `oklch(0.80 0.12 75 / 0.3)` | Ambient footlight glow (under hero/cards)| | `--warm-glow-strong` | `oklch(0.80 0.12 75 / 0.55)` | Hover-state intensified glow | ### Brass | Token | Value | Usage | | ------------------- | ------------------------------ | ---------------------------------------- | | `--brass-dark` | `oklch(0.55 0.10 75)` | Credential bullet gradients (start) | | `--brass-light` | `oklch(0.78 0.11 82)` | Credential bullet gradients (end) | ### Text | Token | Value | Usage | | ------------------- | ------------------------------ | ---------------------------------------- | | `--text-primary` | `oklch(0.92 0.01 80)` | Headings, hero name, body text | | `--text-secondary` | `oklch(0.70 0.02 80)` | Taglines, meta lines, secondary prose |

Routes a cinema-screening-room visual system into a single-page portfolio for filmmakers, cinematographers, and visual storytellers. The design treats the browser as a darkened theater -- velvet curtains part on load to reveal the work. Dark surfaces, warm gold accents, and cinematic photography establish the tone. Three typefaces carry strict roles: Sorts Mill Goudy for display, Source Serif 4 for body prose, Josefin Sans for uppercase tracked labels.