[Improvement]: Improve landing page UX

Please select the area the issue is related to

AI Workspace

Please select the aspect the issue is related to

Aspect/UI (Frontend layouts, components, styling)

Suggested Improvement

Existing UI:

UI/UX concerns with the existing UI

The biggest issue isn't that anything looks bad. It's that almost every component has the same visual weight, making the page feel dense and flat.

1. Reduce the "boxed" feeling

Right now almost everything sits inside heavy bordered containers.

You have:

• page container
• gateway card
• get started card
• code blocks
• buttons with borders
• pills with borders

The result is lots of rectangles inside rectangles.

Modern interfaces usually remove many of those borders and rely more on whitespace.

2. Make the header more prominent

The top section feels surprisingly small considering it's the primary object.

Use:

• larger title
• more spacing
• status chip separated
• metadata smaller

This immediately creates hierarchy.

---

3. Too much brown

Almost everything shares nearly the same dark brown.

The eye struggles to distinguish sections.

Instead use three elevations.

Example

Background
#111

Card
#181818

Secondary card
#1E1E1E

instead of

everything = #1b120f

Subtle contrast makes the UI feel much more refined.

---

4. Tabs need more personality

Current tabs

Quick Start
Virtual Machine
Docker
Kubernetes

look like simple text links.

Modern products tend to use one of these patterns:

• segmented control
• filled active pill
• animated underline
• icon + label with more spacing

Currently the active state isn't immediately noticeable.

---

5. Code blocks dominate the page

Every command is inside a huge white textbox.

The white background draws attention away from the actual content.

Instead consider dark code blocks with less visual weight.

---

6. Improve visual hierarchy

Currently

Step 1
Step 2
Step 3

all have nearly identical emphasis.

Instead:

① Download Gateway

Description

Command

② Configure

Description

Button

③ Start Gateway

Description

Command

Increase spacing between steps.

Reduce spacing within each step.

---

7. Sidebar icons are a bit small

Modern dashboards often use

• slightly larger icons
• more vertical padding
• softer hover animations

Your sidebar is functional, but it feels dense.

---

8. The page needs one primary focal point

When I first look at the page, I don't immediately know where to look.

Everything has similar contrast.

Modern UIs intentionally create a focal point.

For example:

AI Gateway

Status

Connect Gateway

↓

Quick Start

or

Inactive

Connect your gateway

Give the eye a starting point.

---

9. Buttons don't communicate importance

Everything is outlined.

Edit
View Configurations
Reconfigure

look almost identical.

I'd reserve a filled button for the primary action which would be immediately obvious.

---

10. Remove unnecessary borders

For example

Inactive

inside a grey rounded pill

could instead be

● Inactive

or

○ Inactive

Much lighter.

The same goes for many outlined buttons.

---

11. Add subtle motion

Modern products feel alive because of small animations.

Examples:

• card elevation on hover
• copy icon animation
• tab transition
• smooth color transitions
• subtle page fade

No large animations needed.

---

12. More whitespace

This is probably the biggest improvement.

Everything is packed vertically.

Instead of

Title
metadata
button

---------------------

Tabs

Prerequisites

Step 1

give each section another 12–20 px of breathing room.

Whitespace is one of the easiest ways to make an interface feel more premium.

---

13. Use more semantic colors

Right now the accent color is mostly orange.

Consider adding subtle semantic colors.

• Green → Connected
• Yellow → Pending
• Orange → Updating
• Red → Error

An "Inactive" gateway could use a muted amber or gray instead of looking similar to the rest of the interface.

---

Overall direction

The foundation is good. I wouldn't replace the design system. I'd focus on making it feel lighter, clearer, and more intentional.

The three changes that would have the biggest impact are:

1. Reduce visual noise by removing unnecessary borders and boxes.
2. Strengthen hierarchy with larger headings, better spacing, and clearer primary actions.
3. Increase contrast through elevation (background → cards → interactive elements) instead of relying on a mostly uniform dark brown.

Those changes alone would make the UI feel much closer to modern products like Vercel, Linear, Clerk, or Warp while preserving the enterprise character that WSO2 products typically need.

Proposed UI:

Related Issues

N/A

No files, tests, or entry points are named. Start by locating the AI Workspace landing page UI and comparing it with the screenshots and listed concerns. Done means implementing an agreed, bounded subset of the visual changes and verifying the landing page layout, hierarchy, spacing, contrast, and controls.