Design System

Platform UI product reference

The product application’s data-analysis UI — filtering, charts, tables and sentiment. Shown here as the shared brand vocabulary; these are not used on marketing pages. The shared foundations (colour, type, spacing, radii) live on the Components page.

Filter button

.wn-filter

Black pill with yellow filter icon. Active state flips to yellow fill with black text — the standard "engaged" signal used across the product.

Inactive
Hover
Active
Usage
<button class="wn-filter wn-filter--inactive"> <svg class="wn-filter__icon" viewBox="0 0 14 14" fill="currentColor"> <path d="M1 2h12l-4.5 5.5V12L5.5 13V7.5L1 2z"/> </svg> Edit Filters </button> States: --inactive · --hover · --active

Tooltip

.wn-tooltip

Circular "?" glyph. Very muted inactive; hover darkens the ring; active renders the bubble above.

Inactive
?
Hover
?
Active
Additional information ?

Export button

.wn-export

Circular icon button. Very muted in inactive state to avoid visual noise. Active fills with brand yellow.

Inactive
Hover
Active

Chart row

.wn-chart-row

Diverging sentiment bar with label and count. Hover washes cool; active inverts to black. The only valid in-product use of the sentiment colour palette.

Row states
Inactive
Contractors
100
Hover
Contractors
100
Active (selected)
Contractors
100
Hover on sentiment segment
Contractors
😄50 responses are buzzing
100
Summary card variant
😄500 are happy
😐200 are neutral
🙁50 aren't happy
😠50 are pissed

Theme / topic lozenge

.wn-lozenge

Pill tags for theme/topic selection. Quiet inactive state; active fills brand yellow. Close glyph on active inverts on hover to signal destructive intent.

Inactive
Attendance / wait times
Hover
AttendanceAttendance / wait times
Active (selected)
Theme×
Active: hover on close
Theme×

Table styles

.wn-cell

Three cell rendering modes. Text for plain values; wheel (donut) for percentage scores defaulting to brand yellow; bar for volume comparisons defaulting to brand blue.

Text
10,000
Wheel (donut)
33
Bar

Verbatim card

.wn-verbatim

Social post card with white body on a cool-grey surround. Supports closed/open text, theme tag pills, and an emoji sentiment picker. Always shown against the grey page background.

Closed post
Default
@robohousing | Twitter
Published 10 months ago

"I went to asda's, the manager was brilliant. He helped me find the blue moon. I only needed…"

Sentiment picker hover
@robohousing | Twitter
Published 10 months ago

"I went to asda's, the manager was brilliant. He helped me find the blue moon. I only needed…"

😄 🙂 😐 🙁 😠
😄
Expanded post with themes
@robohousing | Twitter
Published 10 months ago

"I went to asda's, the manager was brilliant. He helped me find the blue moon. I only needed Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis interdum."

Theme Theme Theme Theme