Design System
Atelier Paper
Craft, book, material, and studio warmth.
What is Atelier Paper for?
A warm craft system shaped by Arts and Crafts, artist books, decorated margins, handmade paper, printmaking, and studio objects.
Use Atelier Paper when a website needs to feel Warm, Handmade, Literary, Material and Quietly rich while still supporting practical pages for Makers, Interior design, Slow fashion, Independent publishing and Specialty retail. The system is designed for real commercial surfaces: reusable components, page sections, templates, prompt-tracked imagery, and documentation.
Primary package: @vui/design-atelier-paper · Route: /design-systems/atelier-paper
Character traits
- Warm
- Handmade
- Literary
- Material
- Quietly rich
Best uses
- Makers
- Interior design
- Slow fashion
- Independent publishing
- Specialty retail
Visual language and examples
Visual language
- Catalogue hero and maker studio preview.
Examples
- Catalogue previewA compact preview card for the design-system index.
Reference library
Atelier Paper translates Arts and Crafts, Morris pattern systems, private-press books, and studio craft into warm, tactile, readable web surfaces.
Research links
- The Met: The Arts and Crafts Movement in AmericaBaseline for craft as a response to mechanization and the designer as craftsperson.
- V&A: William Morris and wallpaper designReference for naturalistic pattern as disciplined, repeatable design rather than casual floral decoration.
- William Morris Gallery collectionCollection anchor for Morris across textiles, wallpapers, furniture, printing blocks, and related craft objects.
- William Morris Society: The Ideal BookPrivate-press reference for type, paper, ink, borders, title pages, initials, and binding as one system.
- Ashmolean: The many talents of May MorrisReference for embroidery, applied craft, and May Morris as a major designer-maker in her own right.
Representative artists
- William MorrisDesigner, writer, printer, and social reformer · 1860s-1890s. Use for natural pattern, bookish margins, craft integrity, and multi-medium design systems.
- May MorrisEmbroidery designer and craft educator · 1880s-1930s. Use for textile detail, needlework rhythm, and the softer technical side of Arts and Crafts.
- C. R. AshbeeArchitect, designer, and Guild of Handicraft founder · 1880s-1910s. Use for guild-based craft, metalwork, and the translation of social design ideals into objects.
- Emery WalkerPrinter, typographic adviser, and private-press collaborator · 1880s-1930s. Use for typography, printing process, paper, ink, and practical collaboration behind the Kelmscott Press.
Work gallery
- Design for Trellis WallpaperWilliam Morris, 1862. A reference for pattern that starts from observed garden structure and becomes repeatable ornament.
- Maids of HonourMay Morris, 1890s. A reference for embroidery density, soft botanical rhythm, and craft detail without visual mess.
- Illustrations of the Guild of HandicraftC. R. Ashbee and the Guild of Handicraft, 1890s. A reference for guild identity, publication craft, and maker-community documentation.
- Kelmscott Press booksWilliam Morris with Emery Walker, 1891-1898. A reference for a complete page system: type, margin, ornament, ink, paper, and binding.
Implementation primitives
- Paper textures
- Ink-like rules
- Decorated margins
- Botanical repeats
- Book-inspired image frames
NPM package
Import from @vui/design-atelier-paper.
Need package-specific docs and tokens? Use the package entrypoint in @vui/design-atelier-paper.
Generated visual library
Visual notebook for Atelier Paper
A working notebook of scenes, page plates, component specimens, material swatches, and reusable parts. Each group is placed by how it would be used in a real website, not by file count.
- 8Showcase scenesRead these as the destination: the business surface that proves the style can hold real hospitality, retail, or cultural content.
- 5Template previewsThese plates show page rhythm. The notebook keeps them larger so hierarchy, repeated sections, and commercial structure are legible.
- 5Component detailsComponents are the specimen drawer: controls, badges, plaques, labels, and navigation fragments that can be reused without turning into decoration.
- 5Material texturesTextures are not hero art. They sit like material swatches: quiet, repeatable, and close enough to judge surface quality.
- 18Cutouts and decoratorsDecorators are parts, not thumbnails. Corners, dividers, seals, tabs, and frames are placed by job so their use in a composition is easier to understand.
- 3Campaign platesCampaign pieces behave like public posters and launch cards: more theatrical, more vertical, and separated from reusable component parts.
- 2Responsive previewsResponsive previews are proof notes. They are grouped as device evidence rather than treated as another decorative image.
- 1Moodboard platesMoodboard plates summarize the period vocabulary: materials, type, color, and framing logic in one reference sheet.
8 specimens
Showcase scenes
Read these as the destination: the business surface that proves the style can hold real hospitality, retail, or cultural content.
Finished business scenes and hero imagery that show the design system in commercial context.
- Why it exists
- These scenes prove the style can carry a real service, product, or venue without becoming loose decoration.
- Feeling
- Immediate, inhabitable, and commercial: the visitor should feel the business could launch from this surface.
- Role
- Showcase scenes
- Count
- 8
5 more prompt-tracked specimens
- Afternoon Tea Salon reservation workflow scene with menu folio, course schedule, and prepared tea serviceBusiness Scene
- Afternoon Tea Salon bakery tasting menu and booking surface business sceneBusiness Scene
- Afternoon Tea Salon gift voucher and seasonal booking offer business sceneBusiness Scene
- Afternoon Tea Salon timed reservation form and seating availability sceneBusiness Scene
- Afternoon Tea Salon add-ons, dietary trust, and course-preparation business sceneBusiness Scene
5 specimens
Template previews
These plates show page rhythm. The notebook keeps them larger so hierarchy, repeated sections, and commercial structure are legible.
Full-page and saleable template compositions for evaluating page structure and visual rhythm.
- Why it exists
- These previews explain how the style becomes a complete page system with repeated sections and hierarchy.
- Feeling
- Ordered and evaluative: the page rhythm should feel clear enough for pricing, booking, browsing, or inquiry.
- Role
- Template previews
- Count
- 5
2 more prompt-tracked specimens
- Gift voucher shop template preview for Afternoon Tea Salon website-kit galleriesTemplate Preview
- Private event and bridal tea template preview for Afternoon Tea Salon website-kit galleriesTemplate Preview
5 specimens
Component details
Components are the specimen drawer: controls, badges, plaques, labels, and navigation fragments that can be reused without turning into decoration.
Closeups of buttons, labels, menus, plaques, cards, and other interface parts.
- Why it exists
- These specimens show how the period becomes interface decisions at button, label, card, and navigation scale.
- Feeling
- Precise and reusable: each part should feel like it belongs in a kit, not like a pasted ornament.
- Role
- Component details
- Count
- 5
1 more prompt-tracked specimens
- Course and add-on card grid component detail for Afternoon Tea Salon UI documentationComponent Detail
5 specimens
Material textures
Textures are not hero art. They sit like material swatches: quiet, repeatable, and close enough to judge surface quality.
Reusable paper, lacquer, label stock, grid, linework, and surface treatments.
- Why it exists
- These materials hold the sensory layer behind the system so surfaces stay consistent across sections.
- Feeling
- Tactile but restrained: texture should support reading and atmosphere without becoming the main event.
- Role
- Material textures
- Count
- 5
2 more prompt-tracked specimens
- Subtle pastry-box tissue texture for voucher and product-card backgroundsMaterial Texture
- Subtle tea-menu ink-rule texture for Afternoon Tea Salon page backgroundsMaterial Texture
18 specimens
Cutouts and decorators
Decorators are parts, not thumbnails. Corners, dividers, seals, tabs, and frames are placed by job so their use in a composition is easier to understand.
Transparent ornaments, frames, labels, branches, seals, markers, and reusable object accents.
- Why it exists
- These parts give designers reusable accents that can sit around real text, images, and controls.
- Feeling
- Decorative with discipline: the object should add period character while leaving live content in control.
- Role
- Cutouts and decorators
- Count
- 18
13 more prompt-tracked specimens
- Atelier Paper pressmark badge for studio notes and catalogue metadataTransparent Decorator
- Atelier Paper deckled photo mat for maker portfolio image framesTransparent Decorator
- Reusable isolated paper voucher ornament for Afternoon Tea Salon pages, previews, and UI compositionsCutout Ornament
- Reusable isolated menu-ribbon ornament for Afternoon Tea Salon pages, previews, and UI compositionsCutout Ornament
- Reusable isolated tea-service medallion for Afternoon Tea Salon pages, previews, and UI compositionsCutout Ornament
- Reusable isolated booking-token ornament for Afternoon Tea Salon pages, previews, and UI compositionsCutout Ornament
- Round handmade-paper menu seal for course cards, voucher previews, and tea-service detailsCutout Ornament
- Horizontal voucher ribbon for gift-card modules, menu strips, and booking summariesCutout Ornament
- Vertical cake-stand marker for tea menu chapters, booking cards, and service notesCutout Ornament
- Tea course tag for menu cards, service rows, and afternoon tea booking detailsCutout Ornament
- Tea-time booking slip for reservation time rows and voucher summariesCutout Ornament
- Gift voucher corner for shop modules, voucher cards, and tea-service offer panelsCutout Ornament
- Afternoon tea service badge for menu cards, voucher panels, and service highlightsCutout Ornament
3 specimens
Campaign plates
Campaign pieces behave like public posters and launch cards: more theatrical, more vertical, and separated from reusable component parts.
Posters, launch images, menu cards, announcement surfaces, and social campaign material.
- Why it exists
- These pieces test whether the style can handle announcements, offers, launches, and seasonal messages.
- Feeling
- Public and promotional: louder than components, but still visibly tied to the same design system.
- Role
- Campaign plates
- Count
- 3
2 specimens
Responsive previews
Responsive previews are proof notes. They are grouped as device evidence rather than treated as another decorative image.
Mobile, tablet, and device previews that prove the design language works across viewports.
- Why it exists
- These previews prove the system can move from desktop atmosphere into practical mobile evaluation.
- Feeling
- Stable and reassuring: identity should survive the smaller frame without losing hierarchy.
- Role
- Responsive previews
- Count
- 2
1 specimen
Moodboard plates
Moodboard plates summarize the period vocabulary: materials, type, color, and framing logic in one reference sheet.
Curated plates that summarize the period mood, materials, type, and layout references.
- Why it exists
- These plates establish the vocabulary that keeps generated imagery, materials, and components coherent.
- Feeling
- Editorial and connective: the plate should explain why the group belongs together before any single specimen is judged.
- Role
- Moodboard plates
- Count
- 1
Prompt-tracked inventory list
Showcase scenes
- catalogue hero and maker studio template preview
- maker and slow-fashion template preview
- Afternoon Tea Salon bookable tea-service scene with paper folio, menu tiers, and giftable hospitality cues
- Afternoon Tea Salon reservation workflow scene with menu folio, course schedule, and prepared tea service
- Afternoon Tea Salon bakery tasting menu and booking surface business scene
- Afternoon Tea Salon gift voucher and seasonal booking offer business scene
- Afternoon Tea Salon timed reservation form and seating availability scene
- Afternoon Tea Salon add-ons, dietary trust, and course-preparation business scene
Template previews
- Tea-room homepage template preview for Afternoon Tea Salon website-kit galleries
- Bakery afternoon-tea preorder template preview for Afternoon Tea Salon website-kit galleries
- Hotel lounge afternoon-tea booking template preview for Afternoon Tea Salon website-kit galleries
- Gift voucher shop template preview for Afternoon Tea Salon website-kit galleries
- Private event and bridal tea template preview for Afternoon Tea Salon website-kit galleries
Component details
- Timed tea-service booking strip component detail for Afternoon Tea Salon UI documentation
- Tiered afternoon-tea menu card component detail for Afternoon Tea Salon UI documentation
- Gift voucher selector and checkout summary component detail for Afternoon Tea Salon UI documentation
- Contact and dietary form component detail for Afternoon Tea Salon UI documentation
- Course and add-on card grid component detail for Afternoon Tea Salon UI documentation
Material textures
- paper surface texture for cards, panels, and folios
- Warm handmade paper background texture for Afternoon Tea Salon sections and cards
- Subtle printed menu-stock background texture for Afternoon Tea Salon previews
- Subtle pastry-box tissue texture for voucher and product-card backgrounds
- Subtle tea-menu ink-rule texture for Afternoon Tea Salon page backgrounds
Cutouts and decorators
- reusable folio object for layered compositions
- Atelier Paper folio tab for cards and notes
- Atelier Paper registration label for product annotations
- Atelier Paper press-rule divider
- Atelier Paper folded folio tab for page sections and maker product stories
- Atelier Paper pressmark badge for studio notes and catalogue metadata
- Atelier Paper deckled photo mat for maker portfolio image frames
- Reusable isolated paper voucher ornament for Afternoon Tea Salon pages, previews, and UI compositions
- Reusable isolated menu-ribbon ornament for Afternoon Tea Salon pages, previews, and UI compositions
- Reusable isolated tea-service medallion for Afternoon Tea Salon pages, previews, and UI compositions
- Reusable isolated booking-token ornament for Afternoon Tea Salon pages, previews, and UI compositions
- Round handmade-paper menu seal for course cards, voucher previews, and tea-service details
- Horizontal voucher ribbon for gift-card modules, menu strips, and booking summaries
- Vertical cake-stand marker for tea menu chapters, booking cards, and service notes
- Tea course tag for menu cards, service rows, and afternoon tea booking details
- Tea-time booking slip for reservation time rows and voucher summaries
- Gift voucher corner for shop modules, voucher cards, and tea-service offer panels
- Afternoon tea service badge for menu cards, voucher panels, and service highlights
Campaign plates
- Vertical launch poster and social campaign preview for Afternoon Tea Salon
- Square gift-voucher social campaign preview for Afternoon Tea Salon
- Horizontal menu announcement campaign banner for Afternoon Tea Salon
Responsive previews
- Mobile responsive homepage preview for Afternoon Tea Salon
- Tablet responsive voucher and booking-flow preview for Afternoon Tea Salon
Moodboard plates
- Curated material, color, ornament, and UI moodboard plate for Afternoon Tea Salon
Other design systems
Return to homepageRoute: /design-systems/atelier-paper