Shield Design System — Token Reference

Colour Primitives

11 ramps · 50–900

Blue — Primary

Blue--blue-*

50

100

200

300

400

500

600

700

800

900

Green — Success

Green--green-*

50

100

200

300

400

500

600

700

800

900

Red — Error

Red--red-*

50

100

200

300

400

500

600

700

800

900

Yellow — Warning

Yellow--yellow-*

50

100

200

300

400

500

600

700

800

900

Orange — Info

Orange--orange-*

50

100

200

300

400

500

600

700

800

900

Slate — Neutral

Slate--slate-*

0

50

100

200

300

400

500

600

700

800

900

Purple

Purple--purple-*

50

100

200

300

400

500

600

700

800

900

Sky

Sky--sky-*

50

100

200

300

400

500

600

700

800

900

Pink

Pink--pink-*

50

100

200

300

400

500

600

700

800

900

Lime

Lime--lime-*

50

100

200

300

400

500

600

700

800

900

Semantic Colours

Text · Icon · Background · Border

Text — General

Black

--text-general-black

Neutral

--text-general-neutral

600

--text-general-600

Disabled

--text-general-disabled

White

--text-general-white

Active

--text-general-active

Success

--text-general-success

Error

--text-general-error

Warning

--text-general-warning

Critical

--text-general-critical

Orange

--text-general-orange

Purple

--text-general-purple

Semantic — Intent Scales

Primary--color-primary-*

50

100

200

300

400

500

600

700

800

900

Success--color-success-*

50

100

200

300

400

500

600

700

800

900

Error--color-error-*

50

100

200

300

400

500

600

700

800

900

Warning--color-warning-*

50

100

200

300

400

500

600

700

800

900

Neutral--color-neutral-*

0

50

100

200

300

400

500

600

700

800

900

Info--color-info-*

50

100

200

300

400

500

600

700

800

900

Purple--color-purple-*

50

100

200

300

400

500

600

700

800

900

Sky--color-sky-*

50

100

200

300

400

500

600

700

800

900

Pink--color-pink-*

50

100

200

300

400

500

600

700

800

900

Lime--color-lime-*

50

100

200

300

400

500

600

700

800

900

Special & Overlay

Black

--black · #131313

White

--white · #FFFFFF

Overlay Blanket

--overlay-blanket · rgba(0,0,0,0.30)

Grey 600 ⚠ legacy

--grey-600 · #56707E

Typography

Noto Sans · 4 weights

Font Family

Noto Sans

--font-family: 'Noto Sans', sans-serif

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

Font Weights

Ag

Regular · 400
--font-weight-regular

Ag

Medium · 500
--font-weight-medium

Ag

SemiBold · 600
--font-weight-semibold

Ag

Bold · 700
--font-weight-bold

123 named text styles across 5 categories. Each row shows all weight variants at that size. Letter-spacing is applied per category convention.

Display 32 styles · 8 sizes × 4 weights ls: −2% (−0.02em)

SizeRegular 400Medium 500SemiBold 600Bold 700

XS · 56pxAaAaAaAa

S · 60pxAaAaAaAa

M · 64pxAaAaAaAa

L · 68pxAaAaAaAa

XL · 72pxAaAaAaAa

2XL · 76pxAaAaAaAa

3XL · 80pxAaAaAaAa

4XL · 90pxAaAaAaAa

Headline 28 styles · H1–H7 × 4 weights ls: −1% (−0.01em)

SizeRegular 400Medium 500SemiBold 600Bold 700

H1 · 28pxThe quick brown foxThe quick brown foxThe quick brown foxThe quick brown fox

H2 · 32pxThe quick brownThe quick brownThe quick brownThe quick brown

H3 · 36pxThe quick brownThe quick brownThe quick brownThe quick brown

H4 · 40pxSecurity ScoreSecurity ScoreSecurity ScoreSecurity Score

H5 · 44pxSecurity ScoreSecurity ScoreSecurity ScoreSecurity Score

H6 · 48pxScoreScoreScoreScore

H7 · 52pxScoreScoreScoreScore

Title 19 styles · 5 sizes × 4 weights ls: +0.5% (+0.005em)

SizeRegular 400Medium 500SemiBold 600Bold 700

S · 14pxVulnerability DashboardVulnerability DashboardVulnerability DashboardVulnerability Dashboard

M · 16pxVulnerability DashboardVulnerability DashboardVulnerability DashboardVulnerability Dashboard

L · 18pxVulnerability DashboardVulnerability DashboardVulnerability DashboardVulnerability Dashboard

XL · 20pxSecurity OverviewSecurity OverviewSecurity OverviewSecurity Overview

2XL · 24pxSecurity OverviewSecurity OverviewSecurity OverviewSecurity Overview

Body 10 styles · 5 sizes × Regular / Medium / Bold ls: +0.5% (+0.005em)

SizeRegular 400Medium 500SemiBold —Bold 700

XS · 12pxScan results for 1,482 assets completed. 3 critical vulnerabilities found.Scan results for 1,482 assets completed. 3 critical vulnerabilities found.—Scan results for 1,482 assets completed.

S · 14pxScan results for 1,482 assets. 3 critical found.Scan results for 1,482 assets. 3 critical found.—Scan results for 1,482 assets. 3 critical found.

M · 16pxScan results for 1,482 assets.Scan results for 1,482 assets.—Scan results for 1,482 assets.

L · 18pxSecurity posture summarySecurity posture summary—Security posture summary

XL · 20pxSecurity posture summarySecurity posture summary—Security posture summary

Label 34 styles · 9 sizes × 4 weights ls: +0.5% (+0.005em)

SizeRegular 400Medium 500SemiBold 600Bold 700

XXS · 10pxCRITICAL · HIGH · MEDIUM · LOWCRITICAL · HIGH · MEDIUM · LOWCRITICAL · HIGH · MEDIUM · LOWCRITICAL · HIGH · MEDIUM · LOW

XS · 12pxFilter by severityFilter by severityFilter by severityFilter by severity

S · 14pxFilter by severityFilter by severityFilter by severityFilter by severity

M · 16pxFilter by severityFilter by severityFilter by severityFilter by severity

L · 18pxAsset managementAsset managementAsset managementAsset management

XL · 20pxAsset managementAsset managementAsset managementAsset management

2XL · 24pxAsset managementAsset managementAsset managementAsset management

3XL · 28pxAsset viewAsset viewAsset viewAsset view

4XL · 32pxAsset viewAsset viewAsset viewAsset view

Font Size Tokens

Token	Value
--font-size-10	10px
--font-size-12	12px
--font-size-14	14px
--font-size-16	16px
--font-size-18	18px
--font-size-20	20px
--font-size-24	24px
--font-size-28	28px
--font-size-32	32px
--font-size-36	36px
--font-size-40	40px
--font-size-44	44px
--font-size-48	48px
--font-size-52	52px
--font-size-56	56px
--font-size-60	60px
--font-size-64	64px
--font-size-68	68px
--font-size-72	72px
--font-size-76	76px
--font-size-80	80px
--font-size-90	90px
--font-size-92	92px

Line Height Tokens

Token	Value
--line-height-12	12px
--line-height-14	14px
--line-height-15	15px
--line-height-16	16px
--line-height-18	18px
--line-height-20	20px
--line-height-24	24px
--line-height-28	28px
--line-height-32	32px
--line-height-36	36px
--line-height-40	40px
--line-height-44	44px
--line-height-48	48px
--line-height-52	52px
--line-height-56	56px
--line-height-60	60px
--line-height-64	64px
--line-height-68	68px
--line-height-72	72px
--line-height-76	76px
--line-height-80	80px
--line-height-84	84px
--line-height-90	90px
--line-height-92	92px
--line-height-100	100px

Spacing

Scale primitives + Spacing aliases

Primitive Scale — --scale-* · Formula: Scale/N = N ÷ 25 px

--scale-0

0px

--scale-25

1px

--scale-50

2px

--scale-100

4px

--scale-150

6px

--scale-200

8px

--scale-250

10px

--scale-300

12px

--scale-350

14px

--scale-400

16px

--scale-450

18px

--scale-500

20px

--scale-600

24px

--scale-700

28px

--scale-800

32px

--scale-900

36px

--scale-1000

40px

--scale-1100

44px

--scale-1200

48px

--scale-1300

52px

--scale-1400

56px

--scale-1500

60px

--scale-1600

64px

--scale-1700

68px

--scale-1800

72px

--scale-1900

76px

--scale-2000

80px

--scale-2100

84px

--scale-2200

88px

--scale-2250

90px

--scale-2300

92px

--scale-2500

100px

Spacing Aliases — --spacing-* · Used in components

--spacing-0

0px

--spacing-2

2px

--spacing-4

4px

--spacing-6

6px

--spacing-8

8px

--spacing-10

10px

--spacing-12

12px

--spacing-16

16px

--spacing-20

20px

--spacing-24

24px

--spacing-32

32px

--spacing-36

36px

--spacing-40

40px

--spacing-44

44px

--spacing-48

48px

--spacing-56

56px

--spacing-64

64px

--spacing-72

72px

--spacing-84

84px

Border Radius

Scale/Radius aliases → --scale-* primitive

--radius-0

← --scale-0 · 0px

--radius-2

← --scale-50 · 2px

--radius-4

← --scale-100 · 4px

--radius-6

← --scale-150 · 6px

--radius-8

← --scale-200 · 8px

--radius-12

← --scale-300 · 12px

--radius-16

← --scale-400 · 16px

--radius-20

← --scale-500 · 20px

--radius-24

← --scale-600 · 24px

--radius-32

← --scale-800 · 32px

--radius-full

← --scale-2500 · 100px (pill)

Shadows

shadow-0 → shadow-5 + special

Shadow 0

--shadow-0

Subtle base lift

Shadow 1

--shadow-1

Cards, dropdowns

Shadow 2

--shadow-2

Floating panels

Shadow 3

--shadow-3

Modals, meter

Shadow 4

--shadow-4

Navigation, flyout

Shadow 5

--shadow-5

Top edge only

Facet

--shadow-facet

Facet bottom edge

Visual 1

--shadow-visual-1

Pink glow · visual elements

Navigation Shadows

Nav Module

--shadow-nav-module

= shadow-3

Nav Tertiary

--shadow-nav-tertiary

= shadow-1

Nav Carousel

--shadow-nav-carousel

Up/down scroll shadow

Nav Footer

--shadow-nav-footer

Inverted elevation 1

Focus Rings

Focus

Blue Focus

--focus-blue

Focus

Red Focus

--focus-red

Focus

Green Focus

--focus-green

Gradients

Widget · Status · Component · Visual

Widget Gradients

Widget 1 · 60% opacity

--gradient-widget-1

Widget 2 · 30% opacity

--gradient-widget-2

Widget 3 · 15% opacity

--gradient-widget-3

Status — Linear

Status Success

--gradient-status-success

Status Warning

--gradient-status-warning

Status Error

--gradient-status-error

Status — Angular (conic)

Angular Success

--gradient-angular-success

Angular Warning

--gradient-angular-warning

Angular Error

--gradient-angular-error

Component Gradients

Onboarding BG

--gradient-onboarding-bg

Card Selection

--gradient-card-selection

Progress Bar

--gradient-progress-bar

Recommended Tag

--gradient-recommended-tag

Visual Indicator

--gradient-visual-indicator

Card Component Gradients

Cards Style 1 · Info

--gradients-components-cards-style-1

Cards Style 2 · Error

--gradients-components-cards-style-2

Cards Style 3 · Success

--gradients-components-cards-style-3

Cards Style 4 · Warning

--gradients-components-cards-style-4

Tabs

--gradients-components-tabs

Tabs Fade

--gradient-tabs-fade

Visual Gradients

Visual 1

--gradient-visual-1

Visual 2

--gradient-visual-2

Visual 3

--gradient-visual-3

Focus States

Blue · Red · Green

Text field active

Blue · Default

--focus-blue

Error state

Red · Error

--focus-red

Success state

Green · Success

--focus-green

Icon Sizes

Scale/Icon size aliases → --scale-* primitive

•

--icon-size-12
← --scale-300

•

--icon-size-16
← --scale-400

•

--icon-size-20
← --scale-500

•

--icon-size-24
← --scale-600

•

--icon-size-28
← --scale-700

•

--icon-size-32
← --scale-800

•

--icon-size-40
← --scale-1000

•

--icon-size-56
← --scale-1400

•

--icon-size-64
← --scale-1600

•

--icon-size-72
← --scale-1800

•

--icon-size-84
← --scale-2100

Icon Colours

--icon-general-* · 15 semantic tokens

Active

--icon-general-active

var(--color-primary-700) · #0647D9

Black

--icon-general-black

var(--color-neutral-1000) · #131313

Neutral

--icon-general-neutral

var(--color-neutral-700) · #505964

White

--icon-general-white

var(--color-neutral-0) · #FFFFFF

Success

--icon-general-success

var(--color-success-500) · #008A27

Dark Green

--icon-general-dark-green

var(--color-success-600) · #007A22

Error

--icon-general-error

var(--color-error-500) · #D81900

Dark Red

--icon-general-dark-red

var(--color-error-600) · #AD1400

Warning

--icon-general-warning

var(--color-warning-700) · #B45309

Dark Brown

--icon-general-dark-brown

var(--color-warning-800) · #92400E

Sky

--icon-general-sky

var(--color-sky-500) · #0EA5E9

Violet

--icon-general-violet

var(--color-purple-500) · #8237F1

Dark Purple

--icon-general-dark-purple

var(--color-purple-600) · #6926CF

Disabled 1

--icon-general-disabled-1

var(--color-neutral-400) · #9EAAB9

Disabled 2

--icon-general-disabled-2

var(--color-neutral-50) · #F7F8F9

Icon Font

qx · 710 in font · 183 pending export

In font — click to copy class name Figma only — not yet exported to font

Accordion / Card + Label + Value

2 components · 4 Label+Value types

White card container (radius-12, padding-20) with collapsible sections and a 3-column grid of Label+Value pairs. Label+Value is also a standalone component with 4 types.

Label + Value — 4 Types

Hostname

server-prod-01 View

Type: Default + hyperlink

Status

Vulnerable

Type: Status

Sources

Q

A

+4

Type: Sources

TruRisk Score

742

Type: Numbers

Card / Accordion — Live Demo

Asset Details

Primary section with Label+Value grid

View all

Hostname server-prod-01.corp

IP Address 10.42.16.201

Status

Critical

TruRisk Score 742

Sources

Q

+3

Last Scanned 2 hours ago

Vulnerability Summary

Critical3

High12

Medium47

Card Boolean Properties

Property	Default	Description
showAccordian	true	Expand/collapse chevron in heading
showCheckbox	true	Checkbox in heading row
showEdit	true	Pencil edit icon in actions
showHeader	true	Entire H1 heading section
showHyperlink	true	Hyperlink + action icons top-right
showIcon	true	Section icon next to heading title
showKebabMenu	true	Kebab (⋮) menu icon
showSecondSection	true	H2 section below H1

Label + Value Type Details

Type	Value element	Text colour
Default	Text + optional hyperlink	`--text-general-black`
Status	Text + 20px icon	`--text-general-error`
Sources	32px logo chips + count	—
Numbers	Score badge pill (32px h)	`--text-general-dark-red`

Key Tokens

--color-neutral-0 --color-neutral-100 --radius-12 --radius-20 --spacing-8 --spacing-20 --spacing-24 --spacing-36 --spacing-40 --text-general-black --text-general-neutral --text-general-error --text-general-dark-red --icon-general-active --bg-badge-red --border-chips-email-default

Badges

3 types · 6 severities · 2 states

Three badge types sharing the same severity colour system. Height 32px · radius 20px · font 14px/500.
Default = outline border, transparent bg. Selected = filled bg, no border.

Type 1 — Vulnerability Badge (Without Score) · Default state (outline)

Critical High Medium Low Patch Available Disabled

Type 1 — Vulnerability Badge (Without Score) · Selected state (filled)

Critical High Medium Low Patch Available Disabled

Type 2 — Vulnerability Badge (With Score) · Default / Selected · Width 114px

Default

Critical • 9.5 High • 8.5 Medium • 6.2 Low • 4.1

Selected

Critical • 9.5 High • 8.5 Medium • 6.2 Low • 4.1

Type 3 — Score Badge (always filled · no outline state) · px:12px

9 85 620 41 12 —

Severity Colour System

Severity	Default border	Selected bg	Text token
Critical	`--color-error-700`	`--color-error-200`	`--text-general-critical`
High	`--border-badge-red`	`--bg-badge-red`	`--text-general-dark-red`
Medium	`--color-info-300`	`--bg-badge-orange`	`--text-general-orange`
Low	`--color-warning-400`	`--bg-badge-yellow`	`--text-general-dark-brown`
Patch	`--color-success-500`	`--color-success-100`	`--text-general-dark-green`
Disabled	`--border-chips-default-disabled`	`--bg-chips-default-disabled`	`--text-general-disabled`

Geometry

Property	Value
Height	32px
Border-radius	20px (full pill)
Width (label only)	90px fixed
Width (Patch Available)	auto · px: 14px
Width (With Score)	114px fixed
Font	14px · 500 · lh:16px · ls:0.07px

Button

9 types · 5 states · 4 sizes · 2 shapes = 360 variants

Standard Button, Icon Button, and Split Button. Font weight is Regular (400) across all sizes. Ghost type is for dark backgrounds only.

All 9 Types — Medium (32px) · Default state

dark bg only

Primary — All 5 States

4 Sizes — Primary Rectangle

24px · 12px · r:6px

32px · 12px · r:8px

44px · 16px · r:8px

56px · 20px · r:8px

Shape: Rounded

Icon Button & Split Button

Icon Button — S/M/L · Square & Circle

Split Button — Medium · 1px white divider

Per-Size Geometry

Size	Height	Pad H/V	Font	Radius
Small	24px	12 / 4px	12px · 400	6px
Medium	32px	16 / 8px	12px · 400	`--radius-8`
Large	44px	20 / 12px	16px · 400	`--radius-8`
XL	56px	24 / 16px	20px · 400	`--radius-8`

State Rules

Rule	Detail
Hover = Focused bg	Focused adds `--focus-blue` ring on top
Pressed removes border	Blue types — border removed, bg → /900, text → white
Red/Green Tertiary exception	Pressed keeps border (deepens), text stays coloured
All types → same Disabled	`--bg-btn-disabled` + `--text-btn-disabled`
Focus rings	Blue → `--focus-blue` · Red → `--focus-red` · Green → `--focus-green`

Checkbox

4 states · Selected · Indeterminate · Label · Subtext · Error

16×16px box with 24×24px focus overlay (behind, centred). Font: Noto Sans 16px/400. Indeterminate and Selected are mutually exclusive.

All States — Unselected / Selected / Indeterminate

Default · Unselected

Label text

Default · Selected

Label text

Indeterminate

Label text

Hover (focus ring on box)

Label text

Focused (overlay + ring)

Label text

Error · Unselected (Show Error=true)

This field is required

Label text

Disabled · Unselected

Label text

Disabled · Selected

Label text

With Subtext (showSubtext=true)

Enable notifications

Receive alerts for critical vulnerabilities

No label (showLabel=false)

Box only — used in table rows

CSS Variable Map

State	Background	Border
Default Unselected	`--bg-checkbox-unselected`	`--border-checkbox-unselected`
Selected / Indeterminate	`--bg-checkbox-selected`	none (fill covers)
Error Unselected	`--bg-checkbox-unselected`	`--border-checkbox-error`
Disabled Unselected	`--bg-checkbox-disabled-unsel`	`--border-checkbox-disabled`
Disabled Selected	`--bg-checkbox-disabled-selected`	none
Hover ring	`--focus-blue` on box wrapper
Focus overlay	`--bg-checkbox-focus-overlay` 24×24px behind

Typography

Element	Size	Weight	Token
Label	16px · lh:20	400	`--text-general-black`
Subtext	12px · lh:16	400	`--grey-600` = #56707E
Error msg	13px · lh:16	400	`--text-general-error`

Anatomy

[checkbox] ├── [error-message] optional (above) └── [box-and-text] flex row, gap:8px ├── [box] 16×16px relative │ ├── [focus-overlay] 24×24px abs │ └── [inner] 16×16px z-index:1 └── [label] optional [subtext] 12px, indent 24px

Chips

6 types · Default/Email/BE/Colored/ES Content/Sources

All chips use radius-full (20px). Font weight is Regular (400) for Default/Email/BE, Medium (500) for Colored/ES Content/Sources.

Type 1 — Default Chip · 4 Sizes · XS / S / M / L

Label

XS · 18px

Label S · 24px

Label M · 28px (with left icon)

Label L · 36px

Hover Focused Disabled

States

Type 2 — Email Chip · Avatar dark blue · S / M / L

J jane@corp.com Small · 28px

J jane@corp.com Medium · 32px

J jane@corp.com Disabled

Type 3 — BE Chip · Avatar light blue (Primary/100) · Medium only

A Acme Corp Light blue avatar (#ECF2FF) vs Email's dark blue (#0647D9)

Type 4 — Colored Chip · 4 colours · tag icon · Medium only · 500 weight

Violet Green Red Yellow

Type 5 — ES Content Chip · transparent bg · 4 colours · 500 weight · 16px

42 18 7 3

Type 6 — Sources Chip · Logo + Count subtypes · 4 sizes

Q

Logo XS

Q

Logo S

Q

Logo M

+4

Count XS

+8

Count S

Chip Type Summary

Type	Sizes	States	Weight
Default	XS · S · M · L	Default · Hover · Focused · Disabled	400
Email	S · M · L	Default · Hover · Focused · Disabled	400
BE	M only	Default only	400
Colored	M only	Default only	500
ES Content	M (all same)	Default only	500
Sources	XS · S · M · L	Display only	500

Default Chip Geometry

Size	Height	Pad py/px	Font
XS	18px	2 / 10px	10px · 400
S	24px	4 / 12px	12px · 400
M	28px	6 / 12px	14px · 400
L	36px	10 / 16px	16px · 400

Dialogue Box

5 types

An overlay card requiring user interaction — 5 types: Success · Error · Warning · Information · Confirmation. Radius: 24px · Padding: 20px · Shadow-4.

Live Demo — All 5 Types

Success

Your changes have been saved successfully. All data has been updated.

Error

An error occurred while processing your request. Please try again or contact support.

Warning

This action cannot be undone. Are you sure you want to delete this item?

Information

A scheduled maintenance window is planned for Sunday 2:00–4:00 AM UTC. Services may be briefly unavailable.

Confirmation

Please confirm that you want to proceed with this action. This will affect all selected items.

Variant Matrix

Type	Icon	Title colour token	Title hex
Success	qx-tick	--text-general-success	#008A27
Error	qx-hazard	--text-general-error	#D81900
Warning	qx-incident	--icon-general-warning	#B45309
Information	qx-info	--text-general-neutral	#505964
Confirmation	qx-tick (custom)	--text-general-neutral	#505964

Anatomy & Geometry

[dialogue-box] white · radius:24px · padding:20px · shadow-4 ├── [S1 — content] flex-col · gap:16px │ ├── [heading-icon row] flex-row · gap:10px · items-center │ │ ├── [icon] 26×26px · type colour │ │ └── [title] 20px/400 · lh:26px · ls:0.1px │ └── [description] 16px/400 · lh:24px · ls:0.08px │ color: --text-general-black └── [actions] flex-row · gap:16px · justify-end ├── [secondary-btn] outline · Medium └── [primary-btn] filled · Medium Medium btn: py:8px px:16px · r:8px · 12px/400 · min-w:80px

Key Tokens

--color-neutral-0 (#FFF) --radius-24 (24px) --shadow-4 --text-general-success (#008A27) --text-general-error (#D81900) --icon-general-warning (#B45309) --text-general-neutral (#505964) --bg-btn-blue-primary-default --border-btn-blue-secondary-default

Drawer

2 breakpoints × 4 sizes

A slide-in side panel opening from the right edge. Fixed header · scrollable neutral-50 body · optional footer. Left corners rounded (radius:16px 0 0 16px).

Static Preview — description=true & description=false

Vulnerability Details

CVE-2024-1234 · Critical · CVSS 9.8 · Affects 42 assets in your environment

Scrollable body

Asset Profile

Scrollable body

Variant Matrix

Breakpoint	Size	Width
1920px	Small	800px
	Medium (default)	1000px
	Large	1200px
	Extra Large	1400px
1280px	Small	640px
	Medium (default)	800px
	Large	960px
	Extra Large	1080px

Anatomy & Key Tokens

[drawer] fixed · right:0 · top:0 · height:100vh border-radius: 16px 0 0 16px ← left corners only padding: 24px 32px · gap: 24px · shadow-4 ├── [header] flex-col · gap:6px · flex-shrink:0 │ ├── [title-row] flex-row · gap:24px │ │ ├── [title] flex:1 · 20px/600 · lh:26px · --text-general-black │ │ └── [close] 20×20px · qx-close · --icon-general-neutral │ └── [description] optional · 16px/400 · --text-general-neutral │ max 2 lines · hidden when description=false ├── [body] flex:1 · overflow-y:auto · bg:--color-neutral-50 │ border-radius:16px · placeholder: 28px/500 · --color-neutral-300 └── [footer] optional · flex-shrink:0 · border-top:1px --color-neutral-100 ├── [secondary-btn] outline └── [primary-btn] filled

Key Tokens

--color-neutral-0 (#FFF bg) --radius-16 (16px) --shadow-4 --text-general-black (#0E1215) --text-general-neutral (#505964) --icon-general-neutral (#505964) --color-neutral-50 (body bg) --color-neutral-300 (placeholder)

Dropdown Callout

Multi Select · Default · 10 row types

Popover panel for Filter/Group By dropdowns. Width: 360px · bg: white · radius: 8px · shadow-4 · py: 12px. Two panel types — Multi Select (checkboxes + footer) and Default (plain items).

Live Demo — Both Panel Types

Search

Severity

Show Selected

Critical

High (hover)

Medium (selected)

Low CVSS score below 4.0

Informational

Add New

Reset

Cancel Apply

Option 1 — Default

Option 2 — Hover

Option 3 — Default

Option 4 — 2-line title Supporting description text

Option 5 — Default

Item Row Types

Type	Height	Description
1 Line · None · Default	34px	14px/400, --text-general-black
1 Line · None · Hover	34px	bg: --bg-field-primary (#F3F7FF), text: --text-general-active (#0647D9)
2 Line+ · None · Default	52px	Bold 14px/600 title + 12px/400 supporting
Heading row	32px	14px/600 SemiBold + optional Show Selected checkbox
1 Line · Checkbox · Default	34px	SDS checkbox + label
1 Line · Checkbox · Hover	34px	bg: --bg-field-primary, text: --text-general-active
2 Line+ · Checkbox · Default	52px	Checkbox + bold title + supporting text
Add New	41px	qx-plus + blue hyperlink · has divider below
Apply - Reset	33px	Reset (left) · Cancel + Apply (right) · all tertiary blue

Anatomy & Key Tokens

[callout] w:360 · bg:white · r:8 · shadow-4 · py:12 Multi Select: ├── [search] optional · px:16 pb:20 · qx-search-slim 20×20 ├── [heading] px:16 pb:4 · 14px/600 + Show Selected checkbox ├── [items] gap:2px · py:8px │ ├── [item-row] px:8 → state-layer(p:8 r:4) │ │ ├── [checkbox] 14px box │ │ └── [label] 14px/400 --text-general-black │ │ Hover: bg:--bg-field-primary (#F3F7FF) · text:--text-general-active │ ├── [2-line row] checkbox + title 14/600 + supporting 12/400 │ └── [add-new] qx-plus + blue text · border-top · pt:8 └── [bottom-bar] flex·space-between · Reset | Cancel + Apply all tertiary blue text · 14px/400 Default: items only, no checkboxes, no bottom bar

Key Tokens

--bg-field-default (#FFF) --bg-field-primary (#F3F7FF hover bg) --radius-8 (8px) --shadow-4 --text-general-black (#0E1215) --text-general-active (#0647D9 hover) --text-btn-blue-tertiary-default (#0647D9) --border-checkbox-unselected (#9EAAB9) --bg-checkbox-selected (#0647D9)

Facet

6 variants (3 types × 2 states)

Sidebar filter panel — count card metric tile + scrollable filter panel with collapsible sections. Width: 220px. Types: Default (no checkboxes) · Multi-select (checkboxes + CTAs) · Empty state.

Live Demo

Default (Interactive)

Multi-select (Interactive)

Empty State

0

Total Findings

Quick Filters

Not enough
data to display

Variant Matrix

Type	State	Description
Default	Expanded	List items without checkboxes · no CTAs · "Quick" tab selected
Default	Collapsed	Count card collapses to 56px row
Multi-select	Expanded	List items with checkboxes · Clear all + Apply CTAs · "Classic" tab selected
Multi-select	Collapsed	Count card collapsed
Empty state	Expanded	No list items — empty state illustration + "Not enough data to display"
Empty state	Collapsed	Count card collapsed

Anatomy & Key Tokens

[facet] flex-col · gap:20px · w:220px [_Facet Count Card] — Expanded: h:92px · p:24px 36px border:1px --color-primary-300 · r:12 · shadow-facet-count-card bg: linear-gradient (light blue-white) count: 40px/500 · lh:32px · ls:0.2px · #0E1215 K suffix: 32px/500 subtext: 14px/500 · --text-general-neutral collapse-arrow: 20×20 absolute right:-10px · circle+caret [_Facet Count Card] — Collapsed: h:56px · flex-row · p:12px · gap:8px count: 36px/500 · ls:-0.36px (negative!) K suffix: 28px/500 · ls:-0.28px subtext: 14px/400 (Regular, not Medium) caret → points right (›) [Panel] r:12 · shadow-3 · flex-col [Header] border-bottom · p:12 12 16 · gap:12 "Quick Filters" 16px/600 · --text-general-black qx-arrow-rotate-right reset icon 16×16 Segmented Tabs (optional) · full-width override [Body] flex:1 · overflow-y:auto · pb:52px (multi only) [Section] border-bottom · gap:16/12px Section header: 14px/700 · --text-general-black list items: flex-row · gap:20px · h:16px label 14px/400 · --text-general-neutral count: 14px/700 + K:12px/700 (mixed sizes!) [CTAs] absolute · bottom:0 · shadow-5 (multi-select only) Clear all (tertiary) + Apply (primary) · Medium size

Key Tokens

--color-primary-300 (#BFD4FF count card border) --shadow-3 (panel shadow) --shadow-5 (CTA bar shadow) --color-neutral-100 (#E7EAED section dividers) --text-general-black (#0E1215) --text-general-neutral (#505964 items) --text-general-active (#0647D9 "more" link) --bg-tab-primary-selected (#0647D9) --border-checkbox-unselected (#9EAAB9)

Filter Dropdown

2 types × 2 sizes × 6 states

Two types: Group by (single selection, 182px wide) and Filters (multi selection, 113px wide). Two sizes: Small (32px h) and Medium (40px h). Six states: Default · Hover · Focused · Active · Filled · Disabled.

Live Demo — Group By (Small & Medium, all 6 states)

Small (32px)

Group by: Select

Hover

Focused

Group by: Select

Group by: Severity

Group by: Select

Medium (40px)

Group by: Select

Group by: Operating System

Live Demo — Filters type (Small & Medium, with count badge)

Filters — Small

Filters

3

Filters

Filters — Medium

Filters

5

Filters

Variant Matrix

State	Background	Border	Note
Default	#FFFFFF	--border-text-field-default (#D9E4FF)	—
Hover	#FFFFFF	--border-filter-dropdown-hover-selected (#6592FF)	—
Focused	#FFFFFF	--border-filter-dropdown-focused (#6592FF)	+ focus-blue box-shadow
Active	#FFFFFF	--border-text-field-active (#0647D9)	Dropdown open
Filled	#FFFFFF	--border-text-field-default (#D9E4FF)	Value selected, shows close icon
Disabled	--bg-filter-dropdown-disabled (#F7F8F9)	--border-filter-dropdown-disabled (#E7EAED)	No chevron on Filters

Anatomy & Key Tokens

[group-by] flex-row · gap:4px · r:8 · border · bg:white Small: h:32px · padding:8px all Medium: h:40px · padding:8px v / 10px h Width: 182px (Group by) · 113px (Filters) [content] flex:1 Default/Hover/Focused/Active: "Group by: Select" 12px/400 neutral Filled: "Group by:" 12px/400 neutral + value 14px/400 black + qx-close 12×12 [chevron-down] qx-chevron-down 16×16 · right end [filters] flex-row · gap:4px [content] flex-row · gap:6px [icon] qx-filter-o 16×16 Filled: count-badge 10×10 absolute top:-4px left:11px bg:#0647D9 r:6 · text:8px/500 white "Filters" 12px/400 neutral [chevron-down] 16×16 (hidden when Disabled) Typography: Labels: 12px/400 · lh:15px · --text-general-neutral Filled value: 14px/400 · lh:18px · --text-general-black Disabled: --text-general-disabled (#9EAAB9)

Key Tokens

--bg-filter-dropdown-default (#FFF) --border-text-field-default (#D9E4FF default) --border-filter-dropdown-hover-selected (#6592FF) --border-filter-dropdown-focused (#6592FF + shadow) --border-text-field-active (#0647D9) --bg-filter-dropdown-disabled (#F7F8F9) --border-filter-dropdown-disabled (#E7EAED) --icon-general-active (#0647D9 badge bg) --text-general-disabled (#9EAAB9) --radius-8 (8px)

Inline Info Message

2 types × 4 states × 2 formats

Full-width contextual message banner. Two types: Product · Onboarding. Four states: Success · Error · Info · Alert. Two formats: With Header (104px, bold title) · No Header (48px, single row). Background is a gradient fade from state colour to white.

Live Demo — With Header format (104px, all 4 states)

Changes saved successfully

Your configuration has been updated. View details

Scan failed

Unable to connect to the target host. Troubleshoot

Maintenance scheduled

Services will be briefly unavailable Sunday 2–4 AM UTC.

Licence expiring soon

Your subscription expires in 7 days. Renew now

No Header format (48px, all 4 states)

Configuration saved. View

Authentication failed. Please check your credentials.

3 new vulnerabilities detected since your last scan.

Action required before deadline.

Variant Matrix

State	Icon	Border token	Bg gradient fallback	Icon colour
Success	qx-tick	--border-inline-info-message-success (#a4e4b9)	--color-success-100 (#d1f2dc)	--icon-general-success (#008A27)
Error	qx-error	--border-inline-info-message-error (#fec2bc)	--color-error-100 (#ffe5e3)	--icon-general-error (#d81900)
Info	qx-info	--border-inline-info-message-info (#bfd4ff)	--color-primary-200 (#d9e4ff)	--icon-general-active (#0647d9)
Alert	qx-warning	--border-inline-info-message-alert (#fcd34d)	--color-warning-100 (#fef3c7)	--icon-general-warning (#b45309)

Anatomy & Key Tokens

[inline-info-message] border:1px · r:12 · p:12 · shadow-0 With Header (gap:40px · min-h:104px): ├── [S1] flex-row · gap:12 · flex:1 │ ├── [icon] 20×20px qx-* · state colour │ └── [content] flex-col · gap:12 │ ├── [top] flex-col · gap:6 │ │ ├── [title] 16px/700 · --text-general-black │ │ └── [body-row] flex-row · gap:6 │ │ ├── [text] 14px/500 · --text-general-neutral │ │ └── [link] 14px/400 · --text-btn-blue-tertiary-default │ └── [btn] Small Primary (optional) └── [close] 20×20 qx-close · --icon-general-neutral (optional) No Header (gap:20px · min-h:48px/68px · items-center): ├── [row] flex-row · gap:12 · icon + text + link └── [close] 20×20 (optional) Onboarding No Header: min-height 68px (vs 48px for Product)

Key Tokens

--border-inline-info-message-success (#a4e4b9) --border-inline-info-message-error (#fec2bc) --border-inline-info-message-info (#bfd4ff) --border-inline-info-message-alert (#fcd34d) --icon-general-success (#008A27) --icon-general-error (#D81900) --icon-general-active (#0647D9) --icon-general-warning (#B45309) --text-general-black (#0E1215 title) --text-general-neutral (#505964 body) --shadow-0 (with-header shadow)

Inline Message

4 types

Small contextual message: icon (16×16px) + text (14px/400). Used standalone or below a Text Field. Text size is always 14px — never 12px.

Live Demo — All 4 Types

This field is required

Password meets all requirements

Value is outside the recommended range

Hostname or IP address accepted

Variant Matrix

Type	Icon	Colour token	Hex
Error	qx-hazard-o	--icon-general-error	#D81900
Success	qx-tick-o	--icon-general-success	#008A27
Warning	qx-incident	--icon-general-warning	#B45309
General Info	qx-info-white	--text-general-neutral	#505964

Anatomy & Key Tokens

[inline-message] flex-row · gap:8px · align:flex-start ├── [icon] 16×16px · type-specific icon · same colour as text └── [message-text] 14px/400 · lh:18px · ls:0.07px · Noto Sans IMPORTANT: Text is always 14px (Title/Regular/Small(S)). Never use 12px — even when nested inside a Text Field. Inside Text Field: [inline-message-and-char-limit] flex-row ├── [inline-message] flex:1 └── [char-limit] right-aligned

Key Tokens

--icon-general-error (#D81900 error) --icon-general-success (#008A27 success) --icon-general-warning (#B45309 warning) --text-general-neutral (#505964 info)

Icons

qx-hazard-o (Error) qx-tick-o (Success) qx-incident (Warning) qx-info-white (General Info)

Left Panel Tabs

3 types × 3 tab states

280px wide vertical side navigation panel. Three types: Flat List · Categorized List · Wizard Stepper. Tab item: 36px h · p:8px v, 24px l, 8px r · radius:4px · label 16px/400 · black.

Live Demo — Flat List & Categorized List

Flat List

Overview

Vulnerabilities (hover)

Assets (selected)

Remediation

Reports

Settings

Categorized List

⌃ Security

Vulnerabilities (selected)

Threat Intelligence

Patches

⌃ Compliance (collapsed)

⌃ Reporting

Dashboards

Scheduled Reports

Variant Matrix & Tab States

State	Background	Text
Default	transparent	--text-general-black (#0E1215)
Hover	--color-primary-50 (light blue tint)	--text-general-black (#0E1215)
Selected	--color-primary-50 (same tint, persists)	--text-general-black (#0E1215)

Anatomy & Key Tokens

[left-panel] flex-col · w:280px · h:960px · overflow-y:auto Flat List: gap:8px · pl:20px [tab-item] flex-row · gap:10px · p:8px 8px 8px 24px · r:4px · w:100% [label] flex:1 · 16px/400 · lh:20px · --text-general-black · ellipsis Default: bg transparent Hover / Selected: bg --color-primary-50 Categorized List: gap:16px · no outer padding [category-group] flex-col · gap:2px · w:280px [category-header] flex-row · gap:8px · p:6px 12px 6px 20px [icon] 20×20px qx-double-chevron-up (rotated 180° collapsed) [label] 14px/500 · --text-general-neutral [category-tabs] flex-col · gap:8px · pl:24px · pb:6px (each tab same as Flat List tab-item) hidden when category collapsed Wizard Stepper type: uses SDS-Stepper component vertically

Key Tokens

--text-general-black (#0E1215 tab labels) --color-primary-50 (hover/selected bg) --text-general-neutral (#505964 category) --radius-4 (4px tab radius)

Meter (TruRisk)

4 severities × 3 sizes

Semicircular donut gauge showing a TruRisk score (0–1000). Score determines severity: Low 0–499 · Medium 500–699 · High 700–849 · Critical 850–1000. Arc spans 270° total. Note: Use D3.js for production — not suitable for raster widget preview.

Live Demo — SVG Arc (all 4 severities, Large size)

Low

Score 320 · #F59E0B arc

Medium

Score 590 · #F76728 arc

High

Score 780 · #AD1400 arc

Critical

Score 920 · #820F00 arc

Small (48×48px, score only)

Severity Colour System

Severity	Score	Arc colour token	Arc hex	Text token	Text hex
Low	0–499	--color-warning-500	#F59E0B	--text-general-dark-brown	#92400E
Medium	500–699	--color-info-400	#F76728	--text-general-orange	#D13B00
High	700–849	--color-error-600	#AD1400	--text-general-dark-red	#AD1400
Critical	850–1000	--color-error-700	#820F00	--text-general-critical	#820F00

Sizes & Key Tokens

[meter] shadow-3 · relative container Sizes: Large: 186×169px · score 32px/600 · label 16px/700 Medium: 132×120px · score 24px/600 · label 16px/700 Small: 48×48px · score 12px/700 · no legends, no label Arc — SVG semicircle (270° total span): sweep = (score / 1000) × 270° [track-arc] bg: --color-neutral-100 (#E7EAED) [fill-arc] stroke: severity arc colour (see table) [white-eclipse] inner mask: --color-neutral-0 (#FFF) [value-severity] centred [score] Large:32px/600 · Med:24px/600 · Small:12px/700 colour: severity text token [label] 16px/700 · --text-general-neutral (#505964) (Large/Med only) [legends] 4 curved labels (Large/Med only) Active legend: 8px/700 Bold · --text-general-black Inactive: 8px/400 Regular · --text-general-neutral ⚠️ Use D3.js in production for arc geometry + curved legend text

Key Tokens

--color-warning-500 (#F59E0B Low arc) --color-info-400 (#F76728 Medium arc) --color-error-600 (#AD1400 High arc) --color-error-700 (#820F00 Critical arc) --text-general-dark-brown (#92400E Low) --text-general-orange (#D13B00 Medium) --text-general-dark-red (#AD1400 High) --text-general-critical (#820F00 Critical) --color-neutral-100 (#E7EAED track) --shadow-3 (meter shadow)

Navigation

4-level hierarchy

4-level navigation chrome. Primary = left sidebar (dark blue, 60px collapsed / 190px expanded). Secondary = top bar (44px, light blue bg). Tertiary = second bar (42px, white). Tab = fourth level (30–34px, white). Module Picker (_MP) = top of sidebar, bg:#0D2050. Offerings (_Offerings) = Add-ons entry below _MP, 60px.

Live Demo — Navigation Chrome (click to interact)

Click the expand icon (bottom-right of Module Picker) to expand/collapse the sidebar. Click the Add-ons entry to open the flyout. All tabs are interactive.

ETM Enterprise TruRisk Management

Add-ons

Home

Dashboard

Risk Management

Responses

Inventory

Compliance

Report

Configuration

Vulnerability Management

All Findings

My Findings

Remediation

Reports

Dashboard

Vulnerabilities

Assets

Remediation

Patches

All

Critical

High

Medium

Low

Page content area

Module Picker (_MP) — All States

6 variants: Default / Hover / Selected × Collapsed / Expanded. Expand icon: Off = outline only · On = inner white rect visible.

COLLAPSED (60px)

ETM

Default

ETM

Hover

ETM

Selected

EXPANDED (190px)

ETM Enterprise TruRisk Management

Default

ETM Enterprise TruRisk Management

Hover

ETM Enterprise TruRisk Management

Selected

Structure & Token Map

Level	Height/Width	Background token	Hex
Module Picker (_MP)	64px h · 60px / 190px w	--bg-nav-primary-module (hardcoded)	#0D2050
_Offerings (Add-ons entry)	60px h · border-bottom #0647D9	--bg-nav-primary-module	#0D2050
Primary tab — Default	px:20px py:16px (collapsed)	--bg-nav-primary-tabs-default	#032673
Primary tab — Hover	—	--bg-nav-primary-tabs-hover	#0647D9
Primary tab — Selected	—	--bg-nav-primary-tabs-selected	#0436A6
Footer	absolute bottom:0 · py:12px px:8px	--bg-nav-primary-footer · border-top #0436A6	#032673
Secondary panel	44px · tabs h:36px, align-bottom	--bg-nav-secondary-panel	#F3F7FF
Tertiary panel	42px · px:20px · gap:16px	--bg-nav-tertiary-panel	#FFFFFF
4th Level Tab	30px (Small) / 34px (Big) · px:8px · gap:16px	#FFFFFF · border-bottom --color-neutral-100	#E7EAED
AddOns flyout	~263px · absolute · left=sidebar right edge	--bg-nav-primary-module · shadow-4	#0D2050

Anatomy & Key Tokens

[Primary Nav] full-height left sidebar [_MP module picker] h:64px · bg:#0D2050 · shadow-3 abbreviation 14px/500 white · expand icon 16×16 br:2px [_Primary Tabs] flex-col Collapsed: w:60px · p:16px 20px · icon 20×20 white Expanded: w:190px · pl:16px pr:8px py:16px · icon + label Default: bg --bg-nav-primary-tabs-default (#032673) Hover: bg --bg-nav-primary-tabs-hover (#0647D9) Selected:bg --bg-nav-primary-tabs-selected (#0436A6) Label: 14px/400 (default/hover) · 14px/500 (selected) · white [Secondary Nav] h:44px · bg:#F3F7FF · border-bottom --border-nav-secondary-panel (#D9E4FF) Left: module icon + name · 20px/600/black · pl:20px pr:24px Selected tab: h:36px · bg white · border-TOP 1px #D9E4FF · r:12 12 0 0 · label 700/black Default tab: transparent · label 400/black [Tertiary Nav] h:42px · bg:#FFF · shadow-nav-tertiary · px:20px · gap:16px Selected: border-bottom 4px --border-nav-tertiary-tabs-selected (#0647D9) · label 700/black Default: label 400/black [4th Level Tab] h:30px (Small) / 34px (Big) · bg:#FFF · shadow-nav-tertiary Selected: border-bottom 2px --border-nav-fourth-tabs-selected (#0647D9) · label 700/black Default: 14px/400/black

Key Tokens

--bg-nav-primary-panel (#032673) --bg-nav-primary-tabs-default (#032673) --bg-nav-primary-tabs-hover (#0647D9) --bg-nav-primary-tabs-selected (#0436A6) --bg-nav-secondary-panel (#F3F7FF) --border-nav-secondary-panel (#D9E4FF) --bg-nav-tertiary-panel (#FFFFFF) --border-nav-tertiary-tabs-selected (#0647D9) --border-nav-fourth-tabs-selected (#0647D9) --shadow-nav-module (shadow-3) --shadow-nav-tertiary (shadow-1)

Onboarding Stepper

3 step counts × 3 states each

Compact vertical dot-and-line progress indicator. No text labels — purely visual. Width: 24px. Step sizes: Default/Completed = 12×12px dot · Selected = 24×24px filled circle. Connector: 1px × 52px. Not the same as Wizard Stepper (SDS-Stepper.md).

Live Demo — 4-Step Stepper (Completed → Selected → Default → Default)

Step 1 — Completed

Step 2 — Selected (current)

Step 3 — Default (future)

Step 4 — Default (future)

3-step, step 1 selected

2-step, step 2 selected

State Reference

State	Size	Appearance	Token
Default	12×12px	Outline dot (border only)	--color-primary-300 (#BFD4FF)
Selected	24×24px	Filled circle + inner ring (current step)	--color-primary-600 (#0755FF) outer · --icon-general-active (#0647D9) inner
Completed	12×12px	Solid filled dot	--icon-general-active (#0647D9)
Connector line	1px × 52px	Always light blue	--color-primary-300 (#BFD4FF)

Anatomy & Key Tokens

[onboarding-stepper] flex-col · items-center · w:24px [step-default] w:12 h:12 r:50% border:1.5px solid --color-primary-300 (#BFD4FF) inner dot: w:6 h:6 r:50% bg:--color-primary-300 [connector-line] w:1px h:52px bg: --color-primary-300 (#BFD4FF) ← always same colour regardless of step state [step-selected] w:24 h:24 r:50% bg: --color-primary-600 (#0755FF) outer ring inner: w:12 h:12 r:50% bg:--icon-general-active (#0647D9) ← only ONE selected step at a time [step-completed] w:12 h:12 r:50% bg: --icon-general-active (#0647D9) ← solid, no border Total heights: 2 steps: 88px · 3 steps: 152px · 4 steps: 216px

Key Tokens

--color-primary-600 (#0755FF selected outer) --icon-general-active (#0647D9 selected inner) --icon-general-active (#0647D9 completed dot) --color-primary-300 (#BFD4FF default dot + connectors)

Pagination Toolbar

Configurable left + fixed right

32px tall full-width toolbar. Transparent background (parent card provides white). Left section: Split Button · Segmented Tabs · Create Tag · Group By · Filters (all toggleable). Right section: page controls + divider + utility icons (always shown).

Live Demo — Full Bar (all left-section props=true)

Action (0)

Tab 1

Tab 2

Create Tag

Group by: Organis…

3

Filters

/ 249 Total 2485

Props

Prop	Default	Left section element
splitButton	true	Split Button — Tertiary · "Action (0)" + chevron-down
segmentedTabs	true	Segmented Tabs — Secondary · Small · Tab 1 / Tab 2
button	true	Tertiary Button — qx-tag-o icon + "Create Tag"
button2	false	Primary Button — "Button"
groupBy	true	Group By — Filled · w:182px · "Group by: Organis…"
filters	true	Filters — Multi Select · w:113px · count badge "3"

Anatomy & Key Tokens

[pagination-bar] flex-row · h:32px · px:20px · gap:40px bg: transparent (parent provides white card) [left] flex:1 · flex-row · gap:16px · items-center [split-btn] h:32px left: px:16 py:8 r:8 0 0 8 border:#0647D9 border-right:none right: p:8 r:0 8 8 0 border:#0647D9 qx-chevron-down [seg-tabs] Secondary · Small → SDS-SegmentedTabs.md [create-tag-btn] Tertiary · Medium · qx-tag-o + "Create Tag" [group-by] w:182px h:32px Filled → SDS-FilterDropdown.md [filters] w:113px h:32px Filled → SDS-FilterDropdown.md [right] flex-row · gap:16px · items-center [page-controls] flex-row · gap:4px qx-caret-left 20×20 [page-input] w:32 h:24 r:8 border:--color-primary-300 font: 12px/400 · --text-general-neutral "/" · "249" — 12px/400 Noto Sans (NOT Roboto) qx-caret-right 20×20 "Total 2485" — 14px/400 [divider] w:0 h:24 border-left:1px --color-neutral-200 (#CFD5DC) qx-refresh-slim · qx-download · qx-ellipsis-v — 20×20px each

Key Tokens

--bg-btn-blue-tertiary-default (#FFF split btn) --border-btn-blue-primary-default (#0647D9 border) --text-btn-blue-tertiary-default (#0647D9 text) --border-text-field-default (#D9E4FF filters border) --color-primary-300 (#BFD4FF page input border) --icon-general-active (#0647D9 filters badge) --text-general-neutral (#505964 page text) --color-neutral-200 (#CFD5DC divider) --bg-tab-secondary-selected (#D9E4FF seg tabs)

Radio Button

4 states × selected/unselected

16×16px outer circle + 8×8px inner dot (selected). Focus overlay: 32×32px circle behind (--color-primary-100 = #ECF2FF). Label: 16px/400 black. Error message: 12px/400 red.

Live Demo — All States

Default Unselected

Radio label

Default Selected

Radio label

Hover

Radio label

Focused

Radio label

Disabled Unsel.

Radio label

Disabled Sel.

Radio label

Error

Radio label

Please select an option

showLabel=false

State × Selected Matrix

State	Sel	Border	Outer bg	Inner dot
Default	false	--border-radio-default (#6B7786)	--color-neutral-0 (#FFF)	—
Default	true	--border-radio-default (#6B7786)	--color-neutral-0 (#FFF)	--bg-radio-default (#0647D9)
Hover	false	--icon-general-disabled-1 (#9EAAB9)	--color-neutral-0	— (+ focus-blue shadow)
Focused	—	--border-radio-default	--color-neutral-0	— + 32×32 overlay bg --color-primary-100
Disabled	false	--color-neutral-200 (#CFD5DC)	--color-neutral-50 (#F7F8F9)	—
Disabled	true	--border-radio-disabled (#9EAAB9)	--icon-general-disabled-2	--bg-radio-disabled (#9EAAB9)
Error	false	--border-radio-error (#D81900)	--color-neutral-0	—

Anatomy & Key Tokens

[radio-button] flex-col · gap:8px ├── [error-message] optional · 12px/400 · --text-general-error └── [icon-and-text] flex-row · gap:8px · items-center ├── [radio-icon] 16×16px · position:relative │ ├── [focus-overlay] 32×32px absolute centred z-index:0 │ │ r:30px · bg:--color-primary-100 (#ECF2FF) │ └── [outer circle] 16×16px z-index:1 │ r:8px · border:1px │ Default: border --border-radio-default (#6B7786) │ Error: border --border-radio-error (#D81900) │ Disabled: border --color-neutral-200 + bg --color-neutral-50 │ └── [inner dot] 8×8px centred (when selected) │ r:8px · bg:--bg-radio-default (#0647D9) └── [label] optional · 16px/400 · lh:20px · --text-general-black Disabled: --text-general-disabled (#9EAAB9)

Key Tokens

--border-radio-default (#6B7786) --bg-radio-default (#0647D9 inner dot) --border-radio-disabled (#9EAAB9) --bg-radio-disabled (#9EAAB9) --border-radio-error (#D81900) --color-primary-100 (#ECF2FF focus overlay) --text-general-error (#D81900 error msg) --color-neutral-50 (#F7F8F9 disabled bg)

Search Bar

Query Bar (7 states) + Search Bar (6 types)

Two sub-components: Query Bar (bare input, standalone) and Search Bar (composed with dropdowns + menu/graph toggles + optional query preview). Query input text uses Courier monospace — intentional for code-like syntax. Height: 40px · radius: 12px.

Live Demo — Query Bar States

Default

Search

Filled (query text in Courier monospace)

vulnerabilities.severity:CRITICAL AND asset.os:Linux

Active (typing)

asset.os:W

Error (invalid query syntax)

severity:UNKNOWN_VALUE

Disabled

severity:CRITICAL

Live Demo — Search Bar Types (6 types)

Type 1 — No Dropdown

Search

Type 2 — With 1 Dropdown (Category selector)

State	Border	Background	Leading icon
Default	--color-neutral-200 (#CFD5DC)	#FFFFFF	qx-search-slim grey
Filled	--color-neutral-200 (#CFD5DC)	#FFFFFF	none
Active	--color-primary-600 (#0755FF)	#FFFFFF	none
Error	--color-info-500 (#E24C0C)	--color-info-50 (#FFF9F5)	qx-hazard-o orange
Warning	--color-warning-600 (#D97706)	--color-warning-50 (#FFFBEB)	qx-incident amber
Disabled	--color-neutral-300 (#B6BFCA)	--color-neutral-50 (#F7F8F9)	none
Expanded	--color-primary-600 (#0755FF)	#FFFFFF	none (height expands to 150px)

Segmented Tabs

Primary & Secondary · Small & Big · 6 states

Container: white bg · border 1px --border-segmented-tabs-default (#BFD4FF) · radius 8px (Rectangle) or 32px (Rounded) · padding 2px. Tab text is always 500 Medium. Primary selected = white text on blue. Secondary selected = black text on light blue (#D9E4FF).

Live Demo — Primary Type (Small & Big, Rectangle)

Primary Small — interactive

Tab 1

Tab 2

Primary Small — 3 tabs

Overview

Details

History

Primary Big — interactive

Tab 1

Tab 2

Primary Small Rounded — interactive

Assets

Vulns

Live Demo — Secondary Type + States

Secondary Small — interactive

Quick

Classic

Primary — Tab 1 selected (hover others)

Tab 1

Tab 2

Disabled state

Tab 1

Tab 2

State Colour Map

State	Type	Tab bg	Text colour
Default	Primary + Secondary	none	--text-general-active (#0647D9) · 500
Hover	Primary	--bg-tab-primary-hover (#ECF2FF)	--text-general-active · 500
Hover	Secondary	--bg-tab-secondary-hover (#D9E4FF)	--text-general-active · 500
Pressed	Primary + Secondary	--bg-tab-primary-pressed (#0436A6)	--text-general-white (#FFF) · 500
Selected	Primary	--bg-tab-primary-selected (#0647D9)	--text-general-white (#FFF) · 500
Selected	Secondary	--bg-tab-secondary-selected (#D9E4FF)	--text-general-black (#0E1215) · 500
Disabled	Primary + Secondary	none	--text-general-disabled (#9EAAB9) · 500

Anatomy & Key Tokens

[segmented-tabs] container bg: --bg-segmented-tabs-full (#FFF) border: 1px solid --border-segmented-tabs-default (#BFD4FF) border-radius: --radius-8 (Rectangle) / --radius-32 (Rounded) padding: 2px display: inline-flex (default) · use flex + width:100% in Facet [base-tab] flex-row · gap:4px · items-center · justify-center Small: h:28px · px:12px Big: h:36px · px:16px min-width: 40px (label area) font: 14px/500 (Small) · 16px/500 (Big) border-radius: --radius-6 (6px Rectangle) / --radius-32 (Rounded) Selected/Hover/Pressed tab bg uses this radius States (all font-weight 500 Medium): Default: no bg · text --text-general-active (#0647D9) Hover Primary: bg --bg-tab-primary-hover (#ECF2FF) Hover Secondary: bg --bg-tab-secondary-hover (#D9E4FF) Pressed: bg #0436A6 · text white Selected Primary: bg --bg-tab-primary-selected (#0647D9) · text white Selected Secondary: bg --bg-tab-secondary-selected (#D9E4FF) · text BLACK (#0E1215) Disabled: no bg · text --text-general-disabled (#9EAAB9)

Key Tokens

--bg-segmented-tabs-full (#FFF container) --border-segmented-tabs-default (#BFD4FF) --bg-tab-primary-selected (#0647D9) --bg-tab-secondary-selected (#D9E4FF) --bg-tab-primary-hover (#ECF2FF) --bg-tab-secondary-hover (#D9E4FF) --bg-tab-primary-pressed (#0436A6) --text-general-active (#0647D9 default text) --text-general-white (#FFF primary selected) --text-general-black (#0E1215 sec selected) --text-general-disabled (#9EAAB9 disabled) --radius-6 (6px tab bg rectangle)

Stepper

16 variants

Wizard Stepper — Vertical (280px wide) and Horizontal (904px wide). 8 states per step: Default · Selected · Completed · Revisited · Error · Hover · Error-Hover · Completed-Hover.

Live Demo — Vertical Stepper

Step 1/4

Asset Discovery

2

Step 2/4

Scan Configuration

!

Step 3/4

Authentication

Step 4/4

Review & Submit

Live Demo — Horizontal Stepper

Step 1/4

Discovery

2

Step 2/4

Configure

!

Step 3/4

Auth

Step 4/4

Review

Variant Matrix

Property	Values
Orientation	Vertical · Horizontal
State (per step)	Default · Selected · Completed · Revisited · Error · Hover · Error-Hover · Completed-Hover

State Colour Map

State	Circle bg	Label colour
Default	`--bg-stepper-default` #bfd4ff · 12px dot	`--text-general-neutral`
Selected	`--bg-stepper-selected` #0755ff + shadow-3	`--text-general-800` · Bold
Completed	`--icon-general-success` #008a27 + ✓ white	`--text-general-800`
Revisited	`--bg-stepper-selected` #0755ff	`--text-general-800`
Error	`--bg-stepper-error` #d81900 + ! white	`--text-general-800`

Typography

Element	Size/Weight
Step counter "Step X/N"	14px/400, number bold 700 · neutral
Step label (default)	16px/400 · neutral
Step label (selected)	16px/700 Bold · #2a2e32

Anatomy & Key Tokens

[stepper-vertical] flex-col · w:280px └── [step-item] flex-row · gap:16px · w:232px ├── [step-track] flex-col · align:center │ ├── [circle] 24px (12px dot if Default) │ └── [timeline-line] 2px wide └── [step-content] flex-col · py:22px ├── [step-counter] "Step X/N" · 14px/400 · bold number └── [step-label] 16px · 400 (default) / 700 (selected) [stepper-horizontal] flex-row · w:904px · h:104px └── [step-item] flex-col · align:center · gap:8px └── [separator] flex-1 · h:2px · --border-stepper-timeline

Key Tokens

--bg-stepper-selected#0755ff --bg-stepper-default#bfd4ff --bg-stepper-error#d81900 --icon-general-success#008a27 --border-stepper-timeline#bfd4ff --text-general-800#2a2e32

Summary Card

2 variants

Horizontal entity card — icon container (86×86px gradient), title, inline metadata labels. Optional right section with ticket info and Split Button.

Live Demo — rightSection=false

CVE-2024-21413 — Microsoft Outlook RCE

ID: QID-91992

Status: Open

Severity: Critical

Published: 2024-02-13

Live Demo — rightSection=true

web-prod-server-01.acme.corp

IP: 203.0.113.42

OS: Ubuntu 22.04 LTS

TruRisk: 847

Ticket

JIRA-4821

Fix Now

Variant Matrix

Property	Values
rightSection	true · false

CSS Variable Map

Element	Token	Value
Card border	`--color-neutral-100`	#e7eaed
Icon bg	`--gradients-components-tabs`	linear-gradient(135deg, #f3f7ff 0%, #d9e4ff 100%)
Icon border	`--borders-nested-cards-primary`	#ecf2ff
Shadow	`--shadow-1`	0px 3px 6px rgba(14,18,21,0.06)
Title	`--text-general-black`	#0e1215
Label key	`--text-general-neutral`	#505964
ID / link value	`--text-general-active`	#0647d9
Status error	`--text-general-error`	#d81900

Anatomy

[summary-card] pl:4px pr:24px py:4px · gap:24px border-radius:12px · shadow-1 ├── [icon-container] 86×86px │ border:--borders-nested-cards-primary │ bg:--gradients-components-tabs │ └── [icon] 46×46px ├── [content] flex-col · gap:8px │ ├── [title-row] gap:8px │ │ ├── [title] 20px/600 │ │ └── [edit-icon] 16×16px qx-pencil-o │ └── [labels-row] gap:20px │ ├── [label-pair] key:neutral · value:active │ └── [divider] 1px · h:14px └── [right-section] optional · gap:24px ├── [v-divider] ├── [ticket-block] ├── [v-divider] └── [split-button] Green Tertiary

Dimensions

Property	Value
Card height	94px (Figma) · auto in practice
Icon container	86×86px · r:12px
Padding	pl:4px · pr:24px · py:4px
Content gap	24px (icon ↔ content ↔ right)
Labels row gap	20px
Divider height	14px

Table

12 variants

Table Headers (38px) and Table Rows: CVE (74px) · Vuln (96px) · Asset (74px). 4 states each: Default · Hover · Selected · Disabled.

Live Demo — CVE Table (click rows to cycle Default → Hover → Selected)

Title QVSS Risk Factors Elim. Status

CVE-2024-21413 Microsoft Outlook Remote Code Execution Vulnerability

Critical • 9.5

K

R

M

T

C

3

7

CVE-2024-38213 🔥 Actively Exploited

Windows SmartScreen Security Feature Bypass

Critical • 8.8

K

R

M

5

2

CVE-2023-44487 HTTP/2 Rapid Reset Attack

Critical • 9.1

K

M

2

CVE-2022-30190 MSDT Remote Code Execution (Follina)

High • 7.8

3

7

Live Demo — Asset Row

Title Crit. TruRisk Asset Type Tags

db-server-01.acme.corp 192.168.1.50

85

920

Server

Production

+2

Variant Matrix

Axis	Values
Row Type	CVE · Vuln · Asset
State	Default · Hover · Selected · Disabled

Row Heights

Type	Height	Node
Header (all types)	38px	6302:23969
CVE Row	74px	6300:22311
Vuln Row	96px	6300:22360
Asset Row	74px	6300:22481

Key Tokens

Token	Value
`--bg-table-header-default`	#ecf2ff
`--border-table-header-default`	#d9e4ff
`--bg-table-row-default`	#ffffff
`--border-table-row-default`	#e7eaed
`--border-table-row-hover`	#6592ff
`--focus-blue`	0px 0px 4px #9cbaff

Anatomy

[table-header] h:38px · r:8px(all corners) bg:--bg-table-header-default border:--border-table-header-default margin-bottom:20px (gap to first row) ├── [checkbox] 16×16px └── [col-headers] 14px/700 · --text-general-black [table-row-cve] h:74px · r:12px(all corners) Default: bg white · border --border-table-row-default Hover: border --border-table-row-hover · box-shadow --focus-blue Selected: + checkbox checked · shadow-1 + focus-blue Disabled: text → --text-general-disabled ├── [checkbox-area] state-dependent ├── [dropdown-btn] 32×32px dashed · state-dependent ├── [cve-id] 16px/600 · --text-general-active ├── [description] 14px/500 · neutral ├── [vuln-badge] 114×32px · r:20px ├── [risk-factors] 5 icons 24×24px · gap:8px └── [es-chips] green + violet · 16px/500

Table Summary Card

48+ variants

Compact count/metric card — 240×94px, 12px radius, shadow-1. Type=Line (6px coloured bar) or Type=Icon (36×36px). Number: 40px/500 · suffix: 32px/500 · negative letter-spacing.

Live Demo — Type=Line (all 8 colours)

Critical Vulnerabilities

247

High Severity

1.8K

Medium Severity

5.6K

Actively Exploited

43

Low Severity

12K

Informational

2.1K

CISA KEV

89

No Data

—

Live Demo — States (Hover · Selected · showTimeframe)

Hover

Critical Vulnerabilities

247

Selected

High Severity

1.8K

showTimeframe=true

Total Assets

3.2K

30 Days

Variant Matrix

Property	Values
Type	Line · Icon
State	Default · Hover · Selected · Disabled
Line colour	Green · Blue · Orange · Yellow · Red · Grey · Indigo · Disabled
Icon	CISA · RANSOMWARE · PATCH · CRITICAL · EXPLOITS · THREATS · CVE · AE · IMPACTED
showTimeframe	true · false

Dimensions

Property	Value
Card size	240×94px
Border radius	12px (--radius-12)
Padding	16px all sides
Gap	16px
Line bar width	6px · flush left
Icon size (Type=Icon)	36×36px

Typography

Element	Size/Weight/LS
Label	14px/400 · ls:0.07px · --text-general-black
Number	40px/500 · ls:-0.40px · --text-general-active
Suffix (K/M/%)	32px/500 · ls:-0.32px · --text-general-active
Timeframe	11px/400 · --text-general-neutral

Anatomy

[table-summary-card] 240×94px r:12px · shadow-1 · p:16px · gap:16px ├── [line] 6px full-height (Type=Line) │ └── data-color: green/blue/orange/yellow/ │ red/grey/indigo/disabled ├── [icon] 36×36px (Type=Icon) └── [text] flex-col · gap:6px · flex:1 ├── [label] 14px/400 · black └── [count-row] items-end ├── [number] 40px/500 · ls:-0.40px └── [suffix] 32px/500 · ls:-0.32px [timeframe-badge] absolute top-right "30 Days" + cog icon · 11px/400

Tag

90 variants

Static · Dynamic · Out of Scope. 3 sizes (24/28/32px), 2 states (Default/Hover), 15 colour options. Label always 12px/400. _color bar: 6px fixed width, full height, flush left.

Live Demo — Types × Sizes

Static

Production

Staging

Critical

Small · Medium · Large

Dynamic

Dev Server ×

QA Testing ×

Shows × close icon

Hover

Amber Tag

bg: #fffbeb (warm yellow tint)

Out of Scope

No Hover

Default state only · no hover

All 15 _color bar variants

green

yellow

blue

red

orange

purple

amber

lime

emerald

sky

indigo

violet

pink

rose

grey

Variant Matrix

Property	Values
Type	Static · Dynamic · Out of Scope
State	Default · Hover (Static/Dynamic only)
Size	Small (24px) · Medium (28px) · Large (32px)
Colour	15 options (see colour grid above)

Dimensions

Size	Height	Radius
Small	24px	4px
Medium	28px	4px
Large	32px	4px

CSS Variable Map

Element	Token	Value
Body bg (default)	`--bg-tags-tag-fill-static-default`	#ffffff
Body bg (hover)	`--bg-tags-tag-fill-static-hover`	#fffbeb
Border (all)	`--border-tags-default`	#e7eaed
Label text	`--text-general-neutral`	#505964
Close icon	`--icon-general-neutral`	#505964

Anatomy

[tag-wrapper] min-w:80px · max-w:132px └── [tag-body] flex-row · gap:4px · pr:6px ├── [_color] 6px × full-height │ flush left · no padding │ r:4px left-only ├── [label] 12px/400 · truncated │ text-overflow:ellipsis └── [close-icon] 12×12px × (Dynamic) [favourite-icon] optional · outside body

Text Area

32 variants

Multi-line text input (480×136px). Shares token system with Text Field. Types: Default · Error only (no Warning/Success). Resize handle: qx-move-handle-corner (blue).

Live Demo — Interactive Instance

Description *

Start typing your description above

0/1000

Live Demo — All States & Types

Default

Description *

Type here…

Helper info message

0/1000

Active (2px border)

Description *

User is currently typing…

25/1000

Filled

Description *

This is a filled description with some content already entered by the user.

Helper info message

68/1000

Type=Error (Filled)

Description *

Content that failed validation.

This field contains invalid content

31/1000

Disabled

Description *

Read-only content here.

This field is disabled

Variant Matrix

Property	Values
State	Default · Active · Filled · Disabled
Type	Default · Error (no Warning/Success)
Mandatory	true · false
Info Icon	true · false
Inline Message	true · false
showLabel	true · false

Background & Border Map

State/Type	Background	Border
Default/Default	`--bg-field-default` #fff	`--border-field-default` #d9e4ff · 1px
Active/Default	`--bg-field-active` #fff	`--border-field-active` #0647d9 · 2px
Disabled	`--bg-field-disabled` #f7f8f9	`--border-field-disabled` #cfd5dc · 1px
Error	`--bg-field-error` #fffbfb	`--border-field-error` #d81900 · 1px

Anatomy

[text-area] w:480px h:136px ├── [text-box] flex-col · justify-between │ ├── [label-and-text] flex-col · gap:4px │ │ pt:16px · px:16px │ │ ├── [label-row] flex-row │ │ │ ├── [label] 14px/400 · neutral/disabled │ │ │ ├── [*] 12px/400 · error (mandatory) │ │ │ └── [info-icon] 12×12px │ │ └── [input-text] 14px/400 · black │ └── [expand] pr:4px pb:4px │ └── [qx-move-handle-corner] 16×16px │ color: --icon-general-active └── [inline-message-and-char-limit] flex-row ├── [inline-message] flex:1 · 14px └── [char-limit] bold count + /1000

Key Differences from Text Field

Property	Text Area	Text Field
Height	136px	56px
Top padding	16px	0px
Bottom padding	4px (resize)	0px
Types	Default · Error	+ Warning · Success
Resize handle	Yes (bottom-right)	No
Char limit format	0/1000	1000 remaining

Text Field

128+ variants

Single-line text input (480×56px, r:12px). 4 states × 4 types. Optional: label, prefix, right-icon (chevron), chips, inline message, char limit. All text: Noto Sans 14px.

Live Demo — Interactive Instance

https://

Website URL *

Enter your website URL including the domain

1000 characters remaining

Live Demo — 4 States (Default type)

Default

Asset Name *

Enter hostname…

Enter a valid hostname or IP

1000 characters remaining

Active (2px border)

Asset Name *

prod-web-server

984 characters remaining

Filled

Asset Name *

prod-web-server-01

Enter a valid hostname or IP

982 characters remaining

Disabled

Asset Name prod-web-server-01

This field is currently disabled

Live Demo — 4 Types (Filled state) + Optional Elements

Type=Error

Email *

not-an-email

Invalid email format

Type=Warning

API Key ****-****-7843

Key expires in 7 days

Type=Success

Domain example.com

Domain verified

prefix=true · rightIcon=true

https://

URL qualys.com/shield

showLabel=false

prod-web-server-01

Variant Matrix

Property	Values
State	Default · Active · Filled · Disabled
Type	Default · Error · Warning · Success
showLabel	true · false
mandatory	true · false
infoIcon	true · false
prefix	true · false
rightIcon	true · false
showChips	true · false
showInlineMessage	true · false
showCharacterLimit	true · false

Background & Border Map

State/Type	Border token	Border hex
Default	`--border-field-default`	#d9e4ff · 1px
Active	`--border-field-active`	#0647d9 · 2px
Disabled	`--border-field-disabled`	#cfd5dc · 1px
Error	`--border-field-error`	#d81900 · 1px
Success	`--border-field-success`	#008a27 · 1px
Warning	`--border-field-warning`	#b45309 · 1px

Anatomy

[text-field] h:56px · w:480px · r:12px ├── [prefix] optional · left-attached │ bg white · border-right --color-primary-200 │ r:8px left-only │ text: 12px/400 · --text-general-active ├── [label-and-text] flex-col · gap:4px · flex:1 │ px:16px │ ├── [label-row] flex-row │ │ ├── [label] 14px/400 · neutral/disabled │ │ ├── [*] 12px · --text-general-error │ │ └── [info-icon] 12×12px │ ├── [input-text] 14px/400 · --text-general-black │ └── [chips-list] optional └── [right-icon] 20×20px · qx-chevron-down [inline-message-and-char-limit] flex-row · gap:8px ├── [inline-message] flex:1 · 14px └── [char-limit] bold count + " characters remaining"

Typography

Element	Size/Weight
Label	14px/400 · ls:0.07px · Noto Sans
Input/Placeholder	14px/400 · Noto Sans
Inline message	14px/400 · Noto Sans
Char limit	12px/400 (count: 700) · Noto Sans
Prefix text	12px/400 · Noto Sans

Toast Message

15 variants

Toast notification — 438px wide, bg #2A2E32, r:12px, p:16px, gap:12px, shadow-3. 5 types × 3 line counts = 15 variants. All text: 14px/400 white.

Live Demo — All 5 Types (1-line)

Asset scan completed successfully.

Failed to export report. Please try again.

Scan is queued. Check back in a few minutes.

Are you sure you want to delete this asset?

Session will expire in 5 minutes.

Live Demo — Line Count variants (Success)

1 line · 56px height

2 lines · 68px height. Changes have been saved to your vulnerability configuration.

3 lines · 86px height. The asset scan has completed successfully. 247 new vulnerabilities were detected and logged to the dashboard.

Variant Matrix

Property	Values
Type	Success · Error · Information · Confirmation · Warning
Line Count	1 · 2 · 3

Type → Icon Map

Type	Icon	Icon colour
Success	qx-tick-outlined-filled	`--icon-general-success` #008a27
Error	qx-hazard-outlined-filled	`--icon-general-error` #d81900
Information	qx-info-outlined-filled	`--icon-general-white` #ffffff
Confirmation	qx-question-outlined-filled	`--icon-general-neutral` #505964
Warning	qx-incident-outlined-filled	`--icon-general-warning` #b45309

Container Tokens

Property	Token	Value
Width	fixed	438px
Background	`--bg-toaster-default`	#2a2e32
Border radius	`--radius-12`	12px
Padding	`--spacing-16`	16px
Gap	`--spacing-12`	12px
Shadow	`--shadow-3`	0px 4px 12px rgba(42,46,50,0.12)
1-line height	—	56px
2-line height	—	68px
3-line height	—	86px

Anatomy

[toast] 438px · r:12px · p:16px · gap:12px bg: --bg-toaster-default (#2a2e32) shadow: --shadow-3 1–2 lines: flat layout (items-center) ├── [icon] 24×24px · type colour ├── [message] 14px/400 · --text-general-white └── [close] qx-times · 20×20px · white 3 lines: icon+text inner wrapper ├── [inner] items-start · gap:12px │ ├── [icon] │ └── [message] └── [close] direct child · items-center

Toggle

32 variants

Toggle/Switch — 4 sizes (Large 64×32 · Medium 56×28 · Small 40×20 · XSmall 32×16). On: filled #0647d9. Off: transparent + 2px border neutral. Disabled: --icon-general-disabled-1.

Live Demo — All Sizes × States

On

Large On

Off

Large Off

On

Medium On

Small On

XSmall Off

On

Disabled On

Off

Disabled Off

On

For Dark BG

Variant Matrix

Property	Values
ON-OFF	On · Off
Size	Large · Medium · Small · XSmall
Disabled	true · false
For Dark BG	No · Yes

Dimensions

Size	Track W×H	Notch
Large	64×32px	24×24px
Medium	56×28px	20×20px
Small	40×20px	12×12px
XSmall	32×16px	10×10px

CSS Variable Map

State/Layer	Token	Value
On track bg	`--icon-general-active`	#0647d9
On notch	`--icon-general-white`	#ffffff
Off track bg	transparent	—
Off track border	`--icon-general-neutral`	#505964 · 2px
Off notch	`--icon-general-neutral`	#505964
Disabled On track	`--icon-general-disabled-1`	#9eaab9
Disabled On notch	`--icon-general-disabled-2`	#f7f8f9
Disabled Off border	`--icon-general-disabled-1`	#9eaab9
Dark BG On track	`--icon-general-white`	#ffffff
Dark BG On notch	`--icon-general-active`	#0647d9

Anatomy

[toggle] label element └── [input] type=checkbox (hidden) └── [track] inline-flex · align:center border-radius: 16px (all sizes) transition: bg 150ms ease ├── [notch] circle · absolute │ Off: left:4px · On: right:4px └── [label] 15px/500 · Noto Sans On: white · Off: neutral

Tooltip

16 variants

Floating popover card (NOT a simple hover tooltip). W:280px · r:12px · p:20px · gap:8px · shadow-4. Two types: Light (#fff) and Dark (#2A2E32). Title: 14px/700 Bold. Body: 16px/400.

Live Demo — Light type (all booleans shown)

Risk Score Breakdown

This score combines CVSS, exploitability, and asset criticality.

Last refreshed a few seconds ago

Actively Exploited

Confirmed exploitation in the wild. Patch immediately.

Body only (header=false). Shows just the description text with no title above it.

Live Demo — Dark type

CVE Details

First discovered 3 months ago. Affects all versions prior to 2.4.1.

Malware Families

Ransomware

Trojan

Exploit Kit

Variant Matrix

Property	Values
Type	Light · Dark
header	true · false
close	true · false
showSlot	true · false
showTime	true · false

Container Tokens

Property	Token	Value
Width	fixed	280px
Light bg	`--bg-tooltip-light`	#ffffff
Dark bg	`--bg-tooltip-dark`	#2a2e32
Border	`--border-tooltip-default`	#e7eaed
Border radius	`--radius-12`	12px
Padding	`--spacing-20`	20px
Gap (outer)	`--spacing-8`	8px
Gap (text)	`--spacing-12`	12px
Shadow	`--shadow-4`	0px 0px 4px rgba(3,38,115,0.12), 1px 8px 16px rgba(42,46,50,0.16)

Typography

Element	Light	Dark
Title	14px/700 · --text-general-black	14px/700 · --text-general-white
Body	16px/400 · --text-general-neutral	16px/400 · --text-general-white
Time row	12px/400 italic · #56707e	12px/400 italic · #56707e

Anatomy

[tooltip] w:280px · r:12px · p:20px shadow-4 · border --border-tooltip-default content: flex-row · gap:8px ├── [text-area] flex-col · gap:12px · flex:1 │ ├── [header] optional · 14px/700 Bold │ ├── [body] 16px/400 Regular │ ├── [slot] optional · component area │ └── [time] optional │ qx-clock 12×12px + italic text └── [close] optional · qx-close · 20×20px [malware-tooltip] 415px wide Light card · shadow-1 + shadow-4 · r:8px outer Section title: 16px/600 · --color-neutral-800 Tag pills: r:32px · bg neutral-50 · 16px/400 black (NOT SDS-Chips — simpler, no states)

Top Header

32+ variants

Full-width 40px application bar. White bg, shadow-1, py:6px px:20px. Left: Qualys branding (Gotham Book tagline). Right: optional Upgrade Now + help/notification icons (24×24px, 16px inner) + user avatar + optional client logo.

Live Demo — showIcons=true · showNotificationDot=true

Q

Qualys Enterprise TruRisk™ Platform

ST

Live Demo — showUpgradeNow=true

Q

Qualys Enterprise TruRisk™ Platform

14 days left on your trial

ST

Boolean Properties

Property	Default	Description
showIcons	true	Shows entire right panel (icons + avatar)
showUpgradeNow	false	Trial expiry notice + Red-Primary button
clientLogo	false	Client logo + separator after avatar
showNotificationDot	true	8×8px red dot on notification icon

Container Tokens

Property	Token	Value
Height	fixed	40px
Background	`--icon-general-white`	#ffffff
Shadow	`--shadow-1`	0px 3px 6px rgba(14,18,21,0.06)
Padding	—	py:6px px:20px
Icon colour	`--icon-general-active`	#0647d9
Icon hover bg	`--color-primary-100`	#ecf2ff · r:4px
Notification dot	`--icon-general-error`	#d81900 · 8×8px absolute

Anatomy

[top-header] full-width · h:40px · shadow-1 bg: --icon-general-white (#fff) py:6px px:20px ├── [left-branding] flex-row · gap:3px │ ├── [qx-qualys] 28×28px logo mark │ ├── [wordmark] 3-part raster (Fill-4 + text + dot) │ └── [tagline] 12px Gotham Book · #374151 └── [right-panel] flex-row · gap:20px ├── [upgrade-now] optional · w:243px │ "14 days left" 12px/400 · --text-general-neutral │ + Red-Primary Small button (h:24px) ├── [right-top-icons] flex-row · gap:12px │ ├── [help] qx-question-mark 16×16px │ └── [notification] qx-envelope-o 16×16px │ + [dot] 8×8px absolute · error red ├── [avatar] 24×24px · initials · 12px └── [client-logo] optional + 1px separator

Icon States

State	Container bg
Default	transparent
Hover / Selected	`--color-primary-100` #ecf2ff · r:4px

Upload

12 variants

File upload drop zone — dashed neutral-400 border, r:12px, transparent bg. Large: 940×200px (p:60px). Small: 940×128px (no icon, reduced padding). Drag-over fills --color-primary-200.

Live Demo — Size=Large · State=Default

Drag and drop to upload or

(Max file size 20 MB) | Supported file formats: .PEM, .CSV, .JSON, .XML

Live Demo — Size=Small · State=Default

Drag and drop to upload or

Live Demo — State=Post (file uploaded) + showInlineMessage=true

Drop more files here or browse

vulnerability-report.csv

65% · 2.4 MB of 3.7 MB

assets.xml

Upload complete · 1.1 MB

File type not supported. Please upload .PEM, .CSV, or .JSON files only.

Variant Matrix

Property	Values
Size	Large · Small
State	Default · Post
showInlineMessage	true · false

Dimensions

Size	State	Width	Height
Large	Default	940px	200px
Large	Post	940px	526px
Small	Default	940px	128px
Small	Post	940px	446px

CSS Variable Map

Element	Token	Value
Zone border	`--color-neutral-400` dashed	#9eaab9
Zone border radius	`--radius-12`	12px
Zone background	transparent	—
Drag-over bg	`--color-primary-200`	#d9e4ff
All text	`--text-general-neutral`	#505964
Error message	`--text-general-error`	#d81900

Anatomy

[upload-main] flex-col · gap:8px · w:940px ├── [upload-zone] flex-row · gap:20px │ border:1px dashed --color-neutral-400 │ r:12px · transparent bg · p:60px (Large) │ ├── [upload-icon] 84×55px SVG illustration │ │ hidden in Size=Small │ └── [upload-content] flex-col · gap:8px │ ├── [drag-row] flex-row · gap:8px │ │ "Drag and drop" · "or" · [button] │ └── [file-info-row] 12px/400 └── [inline-message] optional [icon] 16×16 + [text] 12px/400 [upload-zone drag-over] background: --color-primary-200 (#d9e4ff)

Widget Card

20 variants

Dashboard card container — fixed 344px height, 24px radius, 20px padding, 20px gap, shadow-2. Title: 16px/500 Medium. 5 widths (XS–XL). Visualization slot fills remaining height (neutral-100 bg placeholder).

Live Demo — 3 size variants (showKebabIcon=true · showSubtext=true)

Total Assets

Last 30 days

Chart / Visualization

Vulnerability Trend (30d)

Updated 5 min ago · Qualys VMDR

Bar chart · Trend line

Risk Score

Gauge · Donut

Variant Matrix

Property	Values
Size	XS · S · M · L · XL
showKebabIcon	true (default) · false
showFullScreenIcon	false (default) · true
showSubtext	false (default) · true

Dimensions by Size

Size	Width	Height	Radius
XS	440px	344px	24px
S	593px	344px	24px
M	900px	344px	24px
L	1206px	344px	24px
XL	1820px	344px	24px

CSS Variable Map

Element	Token	Value
Card bg	`--bg-cards-widget-default`	#ffffff
Border radius	`--radius-24`	24px
Shadow	`--shadow-2`	0px 8px 24px rgba(42,46,50,0.03)
Title	`--text-general-black`	#0e1215
Subtext	`--text-general-neutral`	#505964
Icons	`--icon-general-active`	#0647d9
Viz slot bg	`--color-neutral-100`	#e7eaed
Viz placeholder	`--color-neutral-500`	#8695a7

Anatomy

[widget-card] flex-col · gap:20px h:344px · r:24px · p:20px bg: --bg-cards-widget-default shadow: --shadow-2 ├── [header] flex-row · items-start · flex-shrink:0 │ ├── [text-group] flex-col · gap:4px · flex:1 │ │ ├── [title] 16px/500 · --text-general-black │ │ └── [subtext] 12px/400 · neutral (optional) │ ├── [fullscreen-icon] 16×16px optional │ └── [kebab-icon] 16×16px qx-ellipsis-v └── [viz-slot] flex:1 · min-h:0 bg: --color-neutral-100 Placeholder: 12px · --color-neutral-500