Demo workspaceSign in

Loading workspace…

Demo workspaceSign in

Ventyx design system · v0.2

Design system

The shared foundation for clear, consistent event operations.

Living component library

Ventyx

Clear structure. Quiet confidence.

Carbon-inspired structure, Ventyx color, and IBM Plex typography. Light and dark themes share the same components and behavior. Every control has a purpose; every status explains what happened.

4 px spacing44 px controls2 px corners

Our visual principles

Structure through spacing
Color with a clear purpose
Readable in every state
Consistent across devices

01 / Color

Warm color. Clear purpose.

Vermilion. Rose. Pink. Gold. Ivory.

Vermilion

#e43d12

bg-accent

Gold

#efb11d

bg-highlight

Action

#d53610

bg-primary

Rose

#d6536d

bg-steel

Pink

#ffa2b6

bg-cornflower

Selected

#f7ddd6

bg-tint

Canvas

#ebe9e1

bg-background

Panel

#faf8f2

bg-panel

Theme configuration

Independent tokens for light and dark appearance.

Appearance

Editing light appearance · Changes apply when you save.

Vermilion accent#e43d12Gold accent#efb11dAction color#d53610Primary text#33231fCanvas#ebe9e1Panel#faf8f2Links#b52e0eSelected surface#f7ddd6Supporting text#5e4b43Muted text#6d5b54Control border#89746bFocus outline#b52e0eRose accent#d6536dPink accent#ffa2b6

Text, status, control and focus contrast checks pass.

This editor changes your browser preview. Shared organization branding is planned in the pilot implementation.

02 / Typography

IBM Plex Sans

IBM Plex Sans · Headings · 400

Every attendee,
expected and welcome.

An open, approachable voice for the moments that matter.

IBM Plex Sans · Interface · 400–500

Your next event starts with a few details.
We’ll help you keep everything in order.

₱124,500.00 1,248 attendees 09:30 AM

Full names always wrap. Counts and money use tabular numerals.

03 / Actions

The next step, made clear.

Primary and secondary

Quiet and destructive

Loading and unavailable

48 px station control

04 / Forms

A little guidance goes a long way.

Full name

As you’d like it to appear on your badge.

Email address

Enter a complete email address, such as name@example.com.

Ticket category

Event description

Keep it welcoming, specific, and easy to read.

I agree to receive updates about this event.

05 / Feedback

Calm, even when plans change.

ConfirmedPendingRevokedPublishedDraft

Payment confirmed.

Your ticket is ready.

We are confirming your payment.

You do not need to pay again.

Print completion is uncertain.

Ask the desk lead to check the physical badge before printing another.

This ticket can’t be admitted.

Please guide the attendee to the exception desk. A supervisor can help.

Status always pairs a color with an icon and a text label.

Arrival visualization

Example values · Counts are available as text.

Checked in: 84
Expected: 164

Progress and status

Example: 3 of 5 setup steps complete.

ConfirmedNeeds reviewNot started

Unknown is a separate state

Keep the original operation reference. Check its outcome before retrying a payment or print.

No color-only results, unexplained disabled actions, or fabricated completion percentages.

Your guest list starts here.

When attendees register, their details will have a home right here.

Loading, with a little context.

Keep the layout steady while content arrives.

Lucide · 24 px grid · 2 px stroke

Live workflow components

The workspace uses this shared form for reviewed changes, preserved drafts and recoverable results. This example validates only in this browser; it changes no live records.

Super adminOrganizerCo-organizerAttendeeRegistrationGate A