ZDS v1 — Design System Demo

Typography

Headings h1–h6

Heading Display (h1)

Heading LG (h2)

Heading MD (h3)

Heading Default (h4)

Heading SM (h5)
Heading XS (h6)

Spacing scale

--zds-space-0

--zds-space-1

--zds-space-2

--zds-space-3

--zds-space-4

--zds-space-5

--zds-space-6

--zds-space-8

--zds-space-10

--zds-space-12

--zds-space-16

--zds-space-20

--zds-space-24

--zds-space-32

--zds-space-40

--zds-space-48

--zds-space-64

Corner radius

--zds-radius-none

--zds-radius-xs

--zds-radius-sm

--zds-radius-6

--zds-radius-md

--zds-radius-lg

--zds-radius-xl

--zds-radius-2xl

--zds-radius-3xl

--zds-radius-4xl

--zds-radius-full

Icons





ZDS v1 — Typography Utility Classes

Body, Label & Overline — Utility Classes

Body / caption — .zds-body-caption — The quick brown fox jumps over the lazy dog.

Body / xs — .zds-body-xs — The quick brown fox jumps over the lazy dog.

Body / small — .zds-body-sm — The quick brown fox jumps over the lazy dog.

Body / small bold — .zds-body-sm.zds-body-bold — The quick brown fox jumps over the lazy dog.

Body / base — .zds-body-base — The quick brown fox jumps over the lazy dog.

Body / base bold — .zds-body-base.zds-body-bold — The quick brown fox jumps over the lazy dog.

Body / large — .zds-body-lg — The quick brown fox jumps over the lazy dog.

Body / large bold — .zds-body-lg.zds-body-bold — The quick brown fox jumps over the lazy dog.

Labels

Label / sm — .zds-label-sm

Label / md — .zds-label-md

Label / lg — .zds-label-lg

Overline / default — .zds-overline

Overline / large — .zds-overline-lg

ZDS v1 — Shadows / Elevation Utility Classes

Shadows / Elevation — Utility Classes

Button hover shadows

--zds-shadow-button-hover-yellow

--zds-shadow-button-hover-green

--zds-shadow-button-hover-white

--zds-shadow-button-hover-black

Card / overlay elevation

.zds-shadow-card-xs

.zds-shadow-card-sm

.zds-shadow-card-md

.zds-shadow-card-lg

.zds-shadow-card-xl

.zds-shadow-popover

.zds-shadow-modal

.zds-shadow-tooltip

Focus rings

.zds-ring-focus-green

.zds-ring-focus-lime

.zds-ring-focus-neutral

.zds-ring-focus-error

Glow — Utility Classes

.zds-glow-green

.zds-glow-lime

.zds-glow-hero

Blur — Utility Classes
.zds-glass-blur
.zds-glass-inner-shadow
.zds-glass
Input — Utility Classes

--zds-input-shadow-default

--zds-input-shadow-focus

--zds-input-shadow-error

ZDS v1 — Media Button Component

Media Button — Component

Rendered via the [zds_media_btn] shortcode, the canonical button+span markup is generated server-side, so it survives WordPress editor saves regardless of Visual/Text mode toggling.

Play

.zds-media-btn-play .zds-media-btn-yellow

.zds-media-btn-play .zds-media-btn-green

Pause

.zds-media-btn-pause .zds-media-btn-yellow

.zds-media-btn-pause .zds-media-btn-green

Hover/active states (brighter ring, icon color shift on Yellow Play, clipped glow) only show interactively — try hovering/clicking the buttons above.

ZDS v1 — Buttons

Buttons

Yellow

Primary

Secondary

Text

White (dark BG)

Primary

Secondary

Text

Green

Primary

Secondary

Text

White (light BG)

Primary

Secondary

Text

ZDS v1 — Color Reference

ZDS v1 — Full Color Reference (by Figma category)

Background

--zds-color-cream

--zds-color-mint

--zds-color-lime

--zds-color-deep-green

--zds-color-dark-green

--zds-color-beige

--zds-color-taupe

--zds-color-warning-bg

--zds-color-success-bg

--zds-color-error-bg

--zds-color-bg-warning

--zds-color-bg-success

--zds-color-bg-error

Button Styles
Default

--zds-color-mint

Hover

--zds-color-mint-bright

Pressed

--zds-color-mint-bright

Focus

--zds-color-mint

Disabled

--zds-overlay-mint-10

Default

--zds-color-deep-green

Disabled

--zds-overlay-mint-30

Focus Ring

--zds-color-mint-bright

Default

--zds-color-mint

Hover

--zds-color-mint-bright

Pressed

--zds-color-mint-bright

Focus

--zds-color-mint

Disabled

--zds-overlay-mint-30

Default

--zds-color-mint

Hover

--zds-color-mint-bright

Pressed

--zds-color-mint-bright

Disabled

--zds-overlay-mint-30

Default

--zds-color-mint

Hover

--zds-color-mint-bright

Pressed

--zds-color-mint-bright

Disabled

--zds-overlay-mint-30

Default

--zds-color-surface-light

Default

--zds-overlay-cream-10

Hover

--zds-overlay-cream-20

Text
primary

--zds-color-on-light-text

secondary

--zds-color-on-light-text-secondary

tertiary

--zds-color-on-light-text-tertiary

disabled

--zds-color-on-light-text-disabled

inverse

--zds-color-on-light-text-inverse

brand

--zds-color-on-light-text-brand

accent

--zds-color-on-light-text-accent

link

--zds-color-on-light-link

link-hover

--zds-color-on-light-link-hover

on-brand

--zds-color-on-light-text-on-brand

on-accent

--zds-color-on-light-text-on-accent

error

--zds-color-on-light-danger

success

--zds-color-on-light-success

warning

--zds-color-on-light-warning

primary

--zds-color-text

secondary

--zds-color-text-secondary

tertiary

--zds-color-text-tertiary

disabled

--zds-color-text-disabled

brand

--zds-color-text-brand

accent

--zds-color-text-accent

tertiary-grey

--zds-color-text-tertiary-grey

Border
default

--zds-color-on-light-border

subtle

--zds-color-on-light-border-subtle

strong

--zds-color-on-light-border-strong

focus

--zds-color-border-focus

brand

--zds-color-border-brand

error

--zds-color-border-error

success

--zds-color-border-success

warning

--zds-color-border-warning

default

--zds-color-border

subtle

--zds-color-border-subtle

Icon
default

--zds-color-icon-default

subtle

--zds-color-icon-subtle

disabled

--zds-color-icon-disabled

inverse

--zds-color-icon-inverse

brand

--zds-color-icon-brand

accent

--zds-color-icon-accent

error

--zds-color-icon-error

success

--zds-color-icon-success-solid

warning

--zds-color-icon-warning-solid

Surface
light

--zds-color-surface-light

cream

--zds-color-surface-cream

dark

--zds-color-surface-dark

default

--zds-color-surface-default

error

--zds-color-surface-error

Overlay

--zds-color-overlay-dark

--zds-color-overlay-dark-subtle

--zds-color-overlay-light

Gradient

--zds-gradient-brand-green

--zds-gradient-brand-lime

--zds-gradient-dark-green

--zds-gradient-hero-dark

--zds-gradient-cream-fade

Frame
Panel

--zds-color-panel-default

Default

--zds-color-panel-green-default

Hover

--zds-color-panel-green-hover

Click

--zds-color-panel-green-click

Default

--zds-color-panel-lime-default

Hover

--zds-color-panel-lime-hover

Click

--zds-color-panel-lime-click

Default

--zds-color-panel-white-default

Active

--zds-color-panel-green-gradient-active

Active

--zds-color-panel-lime-gradient-active

ZDS v1 — Frame Cards

ZDS v1 — Frame Cards

Frame/rounded/Yellow
.zds-glass-card-neutral
.zds-glass-card-lime
Frame/rounded/Green
.zds-glass-card-neutral
.zds-glass-card-mint-light
.zds-glass-card-mint
Frame/square/Yellow
.zds-glass-card-neutral
.zds-glass-card-square
.zds-glass-card-lime
.zds-glass-card-square
Frame/square/Green
.zds-glass-card-neutral
.zds-glass-card-square
.zds-glass-card-mint-light
.zds-glass-card-square
.zds-glass-card-mint
.zds-glass-card-square

MENÜ