themx
← Back to themes

Art Nouveau / Botanical

elegant Visual style

Curved botanical ornaments with serif headings and warm paper

Reference year: 2026

Compare this theme

Best for

Brand & events, Portfolio, Editorial, Ecommerce

Less suitable for

  • Dense productivity tools where ornamental frames reduce usable space.

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Art Nouveau / Botanical preview

Color Palette

Primary #315D4C
Secondary #786041
Accent #B99149
Background #F7F0DF
Text #273C32

Typography

Heading: Cormorant Garamond
Body: Lato

Key Characteristics

  • Curved plant stems, leaves, and symmetrical botanical frames
  • Arch-shaped details and fine ornamental borders
  • Muted green, warm paper, and gold accents
  • Serif display headings with plain readable body text

Tags

art-nouveau botanical organic ornament serif

Art Nouveau / Botanical uses flowing plant forms, fine curved borders, and serif headings. It suits cultural projects, botanical brands, editorial pages, and selected product collections. Ornament should remain subordinate to the content.

Key Visual Elements

Use a small number of leaf and stem drawings with curved frames. Place gold accents on borders and decoration while keeping text dark green. Do not cover labels, buttons, or photographs with ornamental lines.

Layout and Interaction

Reserve decorative framing for the hero and important content. Keep forms simple and readable. On small screens, reduce ornament and retain a clear document order. Use stable borders and color changes for interactive states.

Typography

Cormorant Garamond provides expressive display headings. Lato keeps paragraphs and controls readable. Avoid using decorative serif lettering for small labels or long body text.

Export style

Choose a library mapping or use the CSS variables in your own components. JSON includes the same mapping. Load the listed fonts separately.

:root {
  --tx-surface-bg: #F7F0DF;
  --tx-font-heading: "Cormorant Garamond", sans-serif;
  --tx-font-body: "Lato", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #FFFBF1;
  --tx-card-border: #A68D63;
  --tx-card-border-width: 1px;
  --tx-card-radius: 2rem 2rem 0.25rem 0.25rem;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #315D4C;
  --tx-card-shadow-hover: 0 4px 12px rgba(49,93,76,0.12);
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: #56634F;
  --tx-text-subtle: #6A6B54;
  --tx-link-color: #315D4C;
  --tx-button-radius: 1.5rem;
  --tx-input-bg: #FFFEF9;
  --tx-input-border: #8C795B;
  --tx-text: #273C32;
  --tx-primary: #315D4C;
  --tx-secondary: #786041;
  --tx-accent: #B99149;
  --tx-media-filter: none;
}

Prompt Builder

Choose your project, UI library, and output. Prompts, documents, and exports use the same resolved theme values.

Example projects:

Use your own components with the exported CSS variables.

Components

Changing the page purpose selects suggested components. You can adjust them below.

Optional design layers

Apply a layout, then a surface effect, then a color mode. Fonts stay with the base theme. The output contains one final token set.

Art Nouveau / Botanical

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Optional skills

Include skill references and installation instructions for your coding agent. Selecting a skill here does not install it.

Choose daisyUI or shadcn/ui to include its official skill.

Copy this prompt into your coding assistant. The task mode applies to the UI prompt.

Generated prompt

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Brand & events
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Art Nouveau / Botanical (visual-style)
- Curved plant stems, leaves, and symmetrical botanical frames
- Arch-shaped details and fine ornamental borders
- Muted green, warm paper, and gold accents
- Serif display headings with plain readable body text

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #315D4C, secondary #786041, accent #B99149, background #F7F0DF, text #273C32
Typography: Cormorant Garamond for headings, Lato for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #F7F0DF;
  --tx-font-heading: "Cormorant Garamond", sans-serif;
  --tx-font-body: "Lato", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #FFFBF1;
  --tx-card-border: #A68D63;
  --tx-card-border-width: 1px;
  --tx-card-radius: 2rem 2rem 0.25rem 0.25rem;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #315D4C;
  --tx-card-shadow-hover: 0 4px 12px rgba(49,93,76,0.12);
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: #56634F;
  --tx-text-subtle: #6A6B54;
  --tx-link-color: #315D4C;
  --tx-button-radius: 1.5rem;
  --tx-input-bg: #FFFEF9;
  --tx-input-border: #8C795B;
  --tx-text: #273C32;
  --tx-primary: #315D4C;
  --tx-secondary: #786041;
  --tx-accent: #B99149;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Use curved botanical lines and arch-shaped frames around a few important sections.
- Keep ornament outside text and controls. Simplify frames and stack sections on mobile.

## Interaction
- Use restrained color and border changes. Keep ornamental lines stationary and preserve visible keyboard focus.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Art Nouveau / Botanical: Dense productivity tools where ornamental frames reduce usable space.

## Components
Generate the following components in this style:
- Hero
- Navbar
- Cards
- Footer

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.