Design System
Nouveau Botanica
Organic, botanical, asymmetrical, and flowing.
What is Nouveau Botanica for?
A fluid web system drawn from Art Nouveau, botanical illustration, curved ironwork, floral poster art, and nature-led decoration.
Use Nouveau Botanica when a website needs to feel Organic, Flowing, Botanical, Asymmetrical and Readable while still supporting practical pages for Florists, Wellness studios, Perfume, Beauty and Artist portfolios. The system is designed for real commercial surfaces: reusable components, page sections, templates, prompt-tracked imagery, and documentation.
Primary package: @vui/design-nouveau-botanica · Route: /design-systems/nouveau-botanica
Character traits
- Organic
- Flowing
- Botanical
- Asymmetrical
- Readable
Best uses
- Florists
- Wellness studios
- Perfume
- Beauty
- Artist portfolios
Visual language and examples
Visual language
- Catalogue hero and botanical product preview.
Examples
- Catalogue previewA compact preview card for the design-system index.
Reference library
Nouveau Botanica turns Art Nouveau, botanical illustration, curved architecture, and poster ornament into fluid but readable interface structure.
Research links
- The Met: Art NouveauBaseline for natural inspiration, sinuous line, whiplash curves, applied arts, architecture, and illustration.
- Britannica: Art NouveauReference for the 1890-1910 period and long organic line across architecture, interiors, posters, and illustration.
- Mucha Foundation: Art PostersReference for ornamental poster language, panels, figure framing, and public decorative style.
- Cooper Hewitt: Art Nouveau, the New RococoReference for botanical movement through tulips, acanthus, stems, fronds, and flowing wallpaper structure.
- V&A: Art Nouveau collection overviewReference for Art Nouveau across drawing, architecture, metalwork, glass, ceramics, jewelry, and posters.
Representative artists
- Alphonse MuchaPoster artist and decorative designer · 1890s-1930s. Use for figure framing, halos, panel systems, decorative borders, and commercial art with high identity.
- Hector GuimardArchitect and designer · 1890s-1910s. Use for organic structural line, Paris Metro-like silhouettes, and architecture-to-component translation.
- Victor HortaArchitect · 1890s-1910s. Use for curved spatial flow, ironwork logic, and integrated interior detail.
- Margaret Macdonald MackintoshDecorative artist and Glasgow Style designer · 1890s-1920s. Use for elongated figures, symbolic botanical forms, bookplates, panels, and quiet mystical rhythm.
- Aubrey BeardsleyIllustrator · 1890s. Use for black-and-white line discipline and controlled decadent contrast.
Work gallery
- Art PostersAlphonse Mucha, 1895-1900 focus. A reference for ornamental public identity, panel framing, and flowing figure-and-border systems.
- Entrance Gate to Paris Subway StationHector Guimard, c. 1900. A reference for organic line becoming an architectural interface and entry gesture.
- Major Town Houses of Victor HortaVictor Horta, 1890s-1900s. A reference for integrated structure, movement, and detail across whole environments.
- Book plate design for John Edwards: The Tree of KnowledgeMargaret Macdonald Mackintosh, 1896. A reference for symbolic linework and compact ornamental framing.
Implementation primitives
- Long curves
- Botanical linework
- Vine-like dividers
- Asymmetrical frames
- Expressive display typography
NPM package
Import from @vui/design-nouveau-botanica.
Need package-specific docs and tokens? Use the package entrypoint in @vui/design-nouveau-botanica.
Generated visual library
Visual notebook for Nouveau Botanica
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.
- 27Cutouts 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
- Rose pastry atelier product consultation business scene for Rose Parlour Atelier website imageryBusiness Scene
- Bridal floral consultation business scene for Rose Parlour Atelier website imageryBusiness Scene
- Perfume consultation and scent-note purchase business scene for Rose Parlour Atelier website imageryBusiness Scene
- Beauty service and skincare product launch business scene for Rose Parlour Atelier website imageryBusiness Scene
- Bouquet ordering and delivery care business scene for Rose Parlour Atelier website imageryBusiness 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
- Perfume consultation template preview for Rose Parlour Atelier website-kit galleriesTemplate Preview
- Beauty service and skincare launch template preview for Rose Parlour Atelier 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
- Care-note and delivery/service card component detail for Rose Parlour Atelier 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
- Muted rose petal paper background texture for Rose Parlour Atelier UI surfacesMaterial Texture
- Faint whiplash-line paper background texture for Rose Parlour Atelier UI surfacesMaterial Texture
27 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
- 27
22 more prompt-tracked specimens
- Nouveau Botanica floral frame for cards and product-feature panelsTransparent Decorator
- Nouveau Botanica organic product frame for perfume or florist product cardsTransparent Decorator
- Nouveau Botanica perfume cap label plaque for beauty product cardsTransparent Decorator
- Nouveau Botanica whiplash stem divider for section transitionsTransparent Decorator
- Reusable isolated botanical label frame for Rose Parlour Atelier pages, previews, and UI compositionsCutout Ornament
- Reusable isolated botanical label-frame ornament for Rose Parlour Atelier pages, previews, and UI compositionsCutout Ornament
- Reusable isolated rose corner ornament for Rose Parlour Atelier pages, previews, and UI compositionsCutout Ornament
- Reusable isolated vine divider ornament for Rose Parlour Atelier pages, previews, and UI compositionsCutout Ornament
- Rose-led bridal consultation frame for hero insets, package previews, and soft commerce cardsCutout Ornament
- Perfume consultation stem divider for ingredient rows, appointment panels, and section transitionsCutout Ornament
- Organic consultation plaque for bridal packages, floral service cards, and perfume appointment modulesCutout Ornament
- Rose consultation cartouche for bridal packages, perfume cards, and soft commerce panelsCutout Ornament
- Scent-note divider for ingredient rows, consultation notes, and appointment sectionsCutout Ornament
- Bridal package seal for appointment CTAs, service packages, and floral commerce cardsCutout Ornament
- Appointment label for bridal consultation cards, package rows, and soft commerce panelsCutout Ornament
- Floral corner for package cards, consultation panels, and bridal service framesCutout Ornament
- Perfume sample tag for scent notes, consultation cards, and service detail modulesCutout Ornament
- Bouquet divider for floral service rows, package separators, and bridal content sectionsCutout Ornament
- Organic price label for florist, pastry, perfume, and consultation product cardsCutout Ornament
- Studio service frame for bridal, florist, perfume, and pastry consultation panelsCutout Ornament
- Botanical note tab for appointment notes, scent notes, and product-card annotationsCutout Ornament
- Floral appointment badge for booking CTAs, consultation highlights, and service cardsCutout 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 perfume or florist template preview
- florist and botanical shop template preview
- Florist consultation business scene for Rose Parlour Atelier website imagery
- Rose pastry atelier product consultation business scene for Rose Parlour Atelier website imagery
- Bridal floral consultation business scene for Rose Parlour Atelier website imagery
- Perfume consultation and scent-note purchase business scene for Rose Parlour Atelier website imagery
- Beauty service and skincare product launch business scene for Rose Parlour Atelier website imagery
- Bouquet ordering and delivery care business scene for Rose Parlour Atelier website imagery
Template previews
- Florist studio homepage template preview for Rose Parlour Atelier website-kit galleries
- Rose pastry atelier product-order template preview for Rose Parlour Atelier website-kit galleries
- Bridal floral consultation template preview for Rose Parlour Atelier website-kit galleries
- Perfume consultation template preview for Rose Parlour Atelier website-kit galleries
- Beauty service and skincare launch template preview for Rose Parlour Atelier website-kit galleries
Component details
- Floral consultation card component detail for Rose Parlour Atelier UI documentation
- Bouquet and package selector cards component detail for Rose Parlour Atelier UI documentation
- Perfume scent-note selector component detail for Rose Parlour Atelier UI documentation
- Bridal inquiry form and care-note module component detail for Rose Parlour Atelier UI documentation
- Care-note and delivery/service card component detail for Rose Parlour Atelier UI documentation
Material textures
- botanical linework surface texture
- Cream botanical paper background texture for Rose Parlour Atelier UI surfaces
- Mineral green botanical wash background texture for Rose Parlour Atelier UI surfaces
- Muted rose petal paper background texture for Rose Parlour Atelier UI surfaces
- Faint whiplash-line paper background texture for Rose Parlour Atelier UI surfaces
Cutouts and decorators
- reusable botanical branch ornament
- Nouveau Botanica botanical stem sprig
- Nouveau Botanica floral frame
- Nouveau Botanica organic perfume plaque
- Nouveau Botanica botanical plaque
- Nouveau Botanica floral frame for cards and product-feature panels
- Nouveau Botanica organic product frame for perfume or florist product cards
- Nouveau Botanica perfume cap label plaque for beauty product cards
- Nouveau Botanica whiplash stem divider for section transitions
- Reusable isolated botanical label frame for Rose Parlour Atelier pages, previews, and UI compositions
- Reusable isolated botanical label-frame ornament for Rose Parlour Atelier pages, previews, and UI compositions
- Reusable isolated rose corner ornament for Rose Parlour Atelier pages, previews, and UI compositions
- Reusable isolated vine divider ornament for Rose Parlour Atelier pages, previews, and UI compositions
- Rose-led bridal consultation frame for hero insets, package previews, and soft commerce cards
- Perfume consultation stem divider for ingredient rows, appointment panels, and section transitions
- Organic consultation plaque for bridal packages, floral service cards, and perfume appointment modules
- Rose consultation cartouche for bridal packages, perfume cards, and soft commerce panels
- Scent-note divider for ingredient rows, consultation notes, and appointment sections
- Bridal package seal for appointment CTAs, service packages, and floral commerce cards
- Appointment label for bridal consultation cards, package rows, and soft commerce panels
- Floral corner for package cards, consultation panels, and bridal service frames
- Perfume sample tag for scent notes, consultation cards, and service detail modules
- Bouquet divider for floral service rows, package separators, and bridal content sections
- Organic price label for florist, pastry, perfume, and consultation product cards
- Studio service frame for bridal, florist, perfume, and pastry consultation panels
- Botanical note tab for appointment notes, scent notes, and product-card annotations
- Floral appointment badge for booking CTAs, consultation highlights, and service cards
Campaign plates
- Vertical florist consultation launch campaign visual for Rose Parlour Atelier
- Square perfume consultation social campaign visual for Rose Parlour Atelier
- Horizontal bridal consultation campaign banner for Rose Parlour Atelier
Responsive previews
- Mobile responsive florist consultation preview for Rose Parlour Atelier
- Tablet responsive perfume consultation preview for Rose Parlour Atelier
Moodboard plates
- Curated material, color, ornament, and UI moodboard plate for Rose Parlour Atelier
Other design systems
Return to homepageRoute: /design-systems/nouveau-botanica