# 04 Quiet Atelier

**Philosophy and fit.** Let a small selection of work convey confidence through space and restraint. Suitable for independent designers, photographers, craftspeople, and small professional practices with strong visual portfolios.

**Visual grammar.** The opening view pairs a short introduction with one carefully positioned image, followed by a staggered sequence of selected projects. Use a modest text navigation and an index rather than a persistent sidebar. Warm white, brown-black ink, muted clay accents, a refined serif heading, and a small neutral sans create a subdued rhythm. Avoid treating every project as an identically sized tile.

**Specimen and flow.** _Alder Studio_ presents furniture and interiors. Visitors choose a project, move through its image-and-caption sequence, and open an enquiry form prefilled with that project. Supporting states show the complete project index and locally validated enquiry feedback.

**Adaptation and identity.** Mobile converts the staggered composition into an intentional image sequence with captions directly beneath each image. Preserve selective curation, spaciousness, and material imagery; avoid enormous empty areas, hidden contact information, and compulsory animation. **Effort: low.**

## Implemented sample

Alder Studio is an expansive, bounded design reference. All organisations, events, prices, statistics and research claims are fictional fixtures. The page includes a complete primary composition and two local supporting routes that show its interaction and content hierarchy.

## Defining features

- Selective project curation
- Staggered imagery with captions
- Material-led case studies

## Adaptable choices

Brand, subject, accent and equivalent licensed typefaces can change. Preserve composition and navigation. Do not turn the hierarchy into a uniform collection of cards.

## Tokens and typography

Heading: Libre Baskerville. Reading: DM Sans. Local WOFF2 fonts with system fallbacks. Page #f6f2eb; surface #ffffff; text #3c372d; accent #79614e. Eight-pixel base spacing; reading measure 65ch; width 1240px. See tokens.css for role values and Demo.vue for composition. Palette and type match the working specimen.

## States

- Entry: /preview/04-quiet-atelier/start
- A room to return to: /preview/04-quiet-atelier/project
- Project enquiry: /preview/04-quiet-atelier/enquiry

## Neighbours and adaptation

- [22 Specimen Shop](../22-specimen-shop/DESIGN.md) uses large object plate with precise caption and a restrained purchase rail and numbered object index. This reference keeps spacious introduction and staggered image-caption project sequence and modest text navigation and project index.
- [28 Grand Hotel](../28-grand-hotel/DESIGN.md) uses arrival photographs with an accompanying booking rail and comparable rooms and stay, explore, and explicit availability. This reference keeps spacious introduction and staggered image-caption project sequence and modest text navigation and project index.

## Assets

See [asset record](../../../docs/ASSETS.md). All vector diagrams and sample writing are original to this repository. Photos are illustrative, not evidence of the fictional brands. Font faces: Libre Baskerville, DM Sans.

## Verification

Reviewed working sample. Browser checks cover entry-page reflow at 320, 390, 768, and 1440 pixels, keyboard entry, direct routes, and automated accessibility; both supporting routes are checked at 390 pixels. Capture metadata is stored in public/previews/04/capture.json and names the source content hash. Accessibility scans are supplementary; no formal WCAG certification or field-performance claim is made.