Design System

Getting started

One system, several kinds of experience

This system connects editorial articles, practical Lab tools and marketing pages without making them identical. Shared foundations create familiarity; page patterns preserve the right emphasis for each task.

Getting started

Principles

Getting started

Governance

The system is versioned. A change should solve a repeated problem, work responsively and pass an accessibility review before becoming a shared pattern.

1. IdentifyShow the repeated problem and affected pages.
2. ProposeUse existing tokens and patterns before creating something new.
3. TestCheck desktop, mobile, keyboard, zoom, contrast and content extremes.
4. ReleaseDocument the change and package it as a reversible plugin version.

Foundations

Colour and semantic roles

Prefer role-based variables such as action, surface and muted text. This allows the palette to evolve without rewriting individual components.

Foundations

Typography

Headings use a confident geometric voice; body text prioritises sustained reading. Responsive sizes use clamp() to avoid abrupt jumps.

Foundations

Section headings and alignment

An eyebrow identifies the purpose of a section; the heading names it. Treat them as one heading group and choose alignment from the reading task, not decoration.

Eyebrow rules

• Keep the label to two to four words and place it immediately above the heading it describes.
• Use small uppercase text, increased letter spacing and one restrained accent colour.
• Use a paragraph or span, not another heading level.
• Remove it when it merely repeats the heading.

Foundations

Layout and spacing

Foundations

Shape and elevation

Use shadows to establish hierarchy, not decoration. Standard cards use one restrained shadow; selected controls use borders or backgrounds rather than heavier shadows.

Foundations

Motion

Motion explains change: cards may fade and rise when filtering, disclosure panels expand smoothly and selected controls glide. It must never be required to understand state.

Content

Voice and tone

Content

Editorial rules

Components

Buttons and links Ready

Button colour communicates hierarchy. Use gold for the main journey, action blue for a functional operation, outline for a supporting choice and text-only styling for minor actions.

Construction and behaviour

1. Use a concise verb-led label in sentence case.
2. Use a 50px preferred height and never less than a 44px target.
3. Use a fully rounded radius, 22–24px horizontal padding and 12–16px between controls.
4. Use navy text on gold and white text on action blue.
5. Show a visible cyan keyboard-focus ring.
6. Keep hover and active transitions between 120–180ms and honour reduced motion.
7. Preserve the control width while loading and return focus to a useful place.
8. Use the native disabled state and explain why an action is unavailable.

Components

Pills and badges Ready

Choose a pill by meaning rather than colour. Taxonomy navigates, filters change results, status describes an exceptional state and metadata provides quiet context.

Consistency rules

• Use a fully rounded radius, 6px 10–12px visual padding and an 8px gap.
• Keep labels short and allow groups to wrap rather than overflow.
• Clickable pills must provide a minimum 44px touch target even when the visual shape is compact.
• Do not make hover look identical to the selected state.
• Do not give taxonomy pills filled gold or blue styling; they are classification, not primary actions.
• Do not expose Live, Draft or In development badges publicly. Keep editorial workflow states inside WordPress.

Components

Cards Ready

Components

Forms Ready

Components

Feedback and system status Ready

Patterns

Page templates

Quality

Accessibility acceptance checklist

• All functions work with a keyboard and show visible focus.
• Text and essential graphics meet appropriate contrast requirements.
• Page structure uses one descriptive H1 and a logical heading hierarchy.
• Controls use native elements, labels and state attributes before ARIA workarounds.
• Layouts remain usable at 200% zoom and through narrow responsive widths.
• Touch targets are comfortably sized and separated.
• Motion respects reduced-motion preferences.
• Errors identify the problem and provide a recovery step.
• Images have purposeful alternatives or are correctly decorative.

Delivery

Implementation

Shared decisions are exposed as CSS custom properties. Components consume semantic variables instead of repeating raw colour, spacing and radius values.

:root {
  --dhz-colour-brand: #fdbb22;
  --dhz-colour-ink: #10213f;
  --dhz-colour-action: #1665d8;
  --dhz-space-section: clamp(48px, 7vw, 96px);
  --dhz-radius-card: 16px;
  --dhz-motion-standard: 180ms;
}