Property	Value
keywords	ui-design, web-design, layout, visual-design, components, animation, micro-interactions, typography

Advanced Light SaaS UI System

Purpose

Generate high-quality light mode SaaS interfaces with strong visual hierarchy, modern product marketing layout, and rich UI components.

The goal is to avoid generic SaaS landing pages and instead produce structured, designer-level interfaces.

The layout must vary depending on the product and prompt.

Do not reuse the same structure every time.

---

Design Principles

The interface must feel:

• modern
• structured
• clean
• high-end
• product focused

Avoid generic startup layouts.

Avoid empty sections with only text.

Every section should include meaningful UI visuals.

---

Layout Generation

The layout must adapt to the product.

Possible patterns include:

• hero with product dashboard preview
• split hero layout (text left, product right)
• centered hero with UI cards below
• grid feature sections
• product workflow sections
• large dashboard preview sections

Each generation should vary the composition.

---

Component Quality

Include rich UI components such as:

• dashboards
• analytics cards
• feature panels
• mini product interfaces
• interactive UI elements

Avoid placeholder rectangles.

Components must resemble real product UI.

---

Visual System

Light neutral backgrounds.

Examples:

#FAFAFB
#F8FAFC
#FFFFFF

Cards:

• rounded
• soft shadows
• subtle borders

Use clean spacing and balanced layout.

---

Micro Interactions

Include subtle motion when relevant:

• hover effects
• chart animations
• progress indicators
• loading states

Animations should feel calm and polished.

---

Typography

Use modern SaaS typography.

Examples:

Inter
Manrope
Plus Jakarta Sans

Use strong hierarchy between:

headline
section titles
body text

---

Output

Generate a full SaaS interface with varied layouts and rich UI components.

The result should look like a professionally designed product marketing page.