GROWTHLY UI / 01

Clarity is a beautiful thing.

One visual language for NexusCloud, ZYVO and the products ahead. Accessible foundations, considered details, familiar interactions.

Component preview

All records, charts and activity below are illustrative sample data. This page does not access your workspace or change business records.

01 / FOUNDATIONS

Quiet colors. Clear hierarchy.

Neutral surfaces with indigo for action and meaningful status colors.

Canvas#f7f8fb

Surface#ffffff

Indigo#4f46d9

Text#20283f

Success#147453

Attention#8b5b0c

TYPOGRAPHY / SYSTEM SANS

A little clarity goes a long way.

Readable labels. Comfortable line lengths. Thoughtful space.

4px spacing unit ? 6 / 10 / 14 / 20px radii ? 640 / 900 / 1600px layout breakpoints

02 / EVERYDAY ESSENTIALS

Familiar by design.

Buttons & states

ActiveOwnerInvitedRevokedPlanned

Accessible forms

Workspace name

A short name your team will recognize.

Workspace role

Email address

Enter a valid email address.

Keep this workspace privateOnly approved members can access it.

03 / WORKSPACE PATTERNS

Data with context.

Illustrative samples, with readable alternatives to visual charts.

Sample workspaces

Illustrative sample

Sample members

Illustrative sample

Sample organizations

Illustrative sample

Protection

Enabled

Illustrative sample

Sample organization mix

Illustrative chart data.

8on this page

Companies3
Business units2
Branches3

Sample team distribution

Illustrative chart data.

Members by example team

Operations5

Service4

Support3

Sample team table

Illustrative records, not workspace data.

Example

Illustrative sample team
Person	Role	Status
Alex Morgan	Administrator	Active
Jordan Lee	Can edit	Active

04 / FEEDBACK & FLOWS

The next step is always clear.

Changes saved

Your sample workspace is up to date.

A quick check is needed

Confirm your identity before changing a sensitive setting.

We couldn't save this change

Review the highlighted field, then try again.

Getting started

Complete: Choose a workspace
Find your own space.
2
To do: Invite your people
Bring your team together.
3
To do: Protect your account
Add an authenticator.

Sample activity

Sample organization added
Alex Morgan ? Illustrative event
Sample timestamp
Sample invitation sent
Jordan Lee ? Illustrative event
Sample timestamp

Make room for your next teammate

A helpful empty state explains what comes next.

Clarity is a beautiful thing.

Quiet colors. Clear hierarchy.

A little clarity goes a long way.

Familiar by design.

Buttons & states

Accessible forms

Data with context.

Sample organization mix

Sample team distribution

Sample team table

The next step is always clear.

Getting started

Sample activity

Make room for your next teammate

Loading skeleton

A focused space for your next step

Confirm this sample action?