Color Palette

Brand & Surface

Olive

#2d6a4f

Primary actions, brand

Lime

#52b788

Accent, success states

Cream

#f5f2e9

App background

White

#ffffff

Cards, surfaces

Gray 900

#111827

Primary text

Gray 600

#4b5563

Body text

Gray 400

#9ca3af

Muted text, icons

Gray 100

#f3f4f6

Borders, dividers

Status Colors

Success

Warning

Error

Info

Typography

Headings — Lexend

Heading 1 / 48px

Heading 2 / 30px

Heading 3 / 24px

Heading 4 / 20px

Body — Inter

Large body — 18px. Used for intro paragraphs and emphasis.

Default body — 16px. Standard reading text across the app.

Small — 14px. Secondary information and table content.

Eyebrow / Caption — 12px

Buttons

Primary

Secondary & Ghost

Sizes

Form Elements

Text Input

With Icon

Select

Textarea

Checkbox & Radio

Checkbox option Radio option

Toggle

On

Off

Cards & Surfaces

Standard Card

Soft Shadow

rounded-2xl · shadow-soft · border-gray-100

Subtle Card

No Shadow

bg-gray-50 · used inside cards

Highlight Card

Brand Tinted

For featured or selected states

Badges & Tags

Default Success Pending Error Info Neutral

Tables

Name	Status	Action
Row item one	Active	View
Row item two	Pending	View
Row item three	Inactive	View

Modal — pmd-modal

All modals use pmd_modal_*() PHP helpers from inc/pmd-modal/. The CSS + JS load automatically via the loader. Never hand-roll modal HTML for new features.

1 — Form modal (pmd_modal_open / pmd_modal_field / pmd_modal_actions)

Opens a full form rendered by the PHP helpers. On submit, the JS posts to admin-ajax and handles the response automatically.

2 — Confirm dialog (PmdModal.confirm)

Returns a Promise. Use for destructive actions before firing an AJAX call.

3 — Toast notifications (PmdModal.toast)

Four variants. Pass { duration: 0 } for sticky.

Spacing & Radius

Border Radius

sm

lg

xl

2xl

full

Shadows

soft

shadow-soft

md

shadow-md

xl

shadow-xl

CSS Custom Properties

Defined in style.css and available globally. The pmd-modal module inherits these for consistent theming.

--bg   Background base
--t    Primary text
--ac   Accent / brand color
--gn   Green
--bl   Blue
--am   Amber
--pu   Purple
--r    Border radius base
--rm   Border radius medium

Style Guide