WLH Design System
Style Guide
A working reference for the WLH visual system, block patterns, editorial modules, and third-party block integration.
Foundations
Primary wide layout boundary for header, archives, page sections, and block patterns.
Calluna Sans, regular weight, tuned for long-form life sciences content.
Small radius, quiet border, and soft shadow for repeated editorial or tool items.
Subtle interaction timing for hover, focus, search, and menu transitions.
Typography Cascade
Headlines, interface labels, and buttons use Franklin Gothic URW. Body copy uses Calluna Sans.
Change leadership that turns strategy into sustained behavior.
Consulting, Learning, Insights, About, Contact Us.
Programs are designed for complex organizations where leaders need practical tools, shared language, and measurable capability growth.
Change leadership for life sciences teams
Build capability at enterprise scale
Commercial excellence programs
Designed for complex change
Capability planning
Program focus
Paragraph Styles
WLH helps organizations align strategy, capability, behavior, and execution so change can move through the business with less friction.
Standard paragraph text should stay calm and readable across articles, resource summaries, service pages, team biographies, and long-form editorial content.
Muted copy supports metadata, captions, sidebars, summaries, and secondary explanatory notes without competing with the main message.
Small text supports tags, captions, timestamps, category labels, and compact notes.
List Styles
- Assess the change environment
- Clarify the behavior shifts
- Sequence the capability work
- Leadership alignment
- Manager enablement
- Adoption measurement
- Diagnose readiness
- Design the experience
- Embed new routines
- Commercial excellence
- Medical excellence
- Human capital leadership
- Frame the business problem.
- Map the leader and learner journeys.
- Build reinforcement into the operating rhythm.
Color
Spacing and Layout
Blog and Resource Cards
These samples mirror the article, news, and resource archive direction: compact media, clear metadata, strong headings, and restrained actions.
Changing the critical gap in leadership development
How leaders translate strategy into behavior when market conditions are shifting quickly.
Read the article
Diagnostic questions for change readiness
A practical framing tool for teams preparing enterprise learning and adoption work.
View resource
Building commercial capability in complex teams
Signals and patterns for designing training that sticks beyond launch week.
Explore updateCore Components
Buttons
Forms
Stackable Block Lab
A full static UI pass for the user-facing Stackable block catalog. These examples are organized by Stackable's Essential, Special, and Section block families.
Essential Blocks
Core content and layout primitives
Readiness and context.
Capability and adoption.
- Leadership alignment
- Manager enablement
- Measurement rhythm
Capability built for change
Short supporting copy should inherit the same paragraph rhythm as native WordPress blocks.
Special Blocks
Interactive and specialized content modules
How should accordions feel?
Readable, calm, and clearly connected to the answer content.
Where are they useful?
FAQs, resource sections, and dense program detail.
Keep callouts restrained and specific.
72% adoption readiness
Executive alignment
Use expansion to reveal secondary context after the core message.
Show moreEmbed new routines.
Strategic change
Compare offers without losing page rhythm.
Capability
Separate audience, format, and outcomes.
Resources
Support category-led archive sections.
Diagnostic sprint
A compact card for service summaries and related capabilities.
Strategic Change
- Foundations
- Typography
- Block QA
Play overview
Section Blocks
Composed editorial and landing-page modules
Change becomes practical when leaders can see the work and repeat the behavior.
WLH helped our team turn a complex change into a practical leader routine.
Ready to discuss the next change?
Contact UsStrategic Change
Align leaders around what needs to change and how it will be adopted.
- Discover
- Design
- Embed
Diagnostics
Clarify constraints, stakeholders, and adoption risks before launch.
Program Track
WLH Leader
Practice lead
Qi Block Lab
A broad static UI pass for the Qi and Qi Premium block catalog, excluding the WooCommerce block family because commerce is intentionally out of scope for this theme.
Typography
Editorial text, actions, and disclosure patterns
Change moves faster when leaders can name the behavior and practice it in context.
Commercial Excellence
Make the section title feel native to WLH
Use for structured section intros.
Change leadership
Animated text should remain calm and readable.
Capability in motion
Focus the critical gap
Change becomes practical when the next behavior is visible.
Ready to align your team?
Start planningUse for concise editorial guidance.
Compare content without breaking flow.
Useful for process-heavy content.
What needs QA?
Spacing, focus, icons, and mobile wrapping.
Where should it appear?
FAQs and dense service content.
Change readiness
Compact feature pairing.
Enterprise capability, made practical.
Business
Commercial content, team, proof, and archive modules
Program Track
Use as scope packaging, not ecommerce pricing.
WLH helped translate strategy into daily leadership practice.
Clear, practical, and built for adoption.
WLH Leader
Practice lead
Diagnostics
Clarify constraints before program design.
Hover-ready module
ExploreAligning market access and commercial teams
| Stage | Status |
|---|---|
| Assess | Ready |
| Embed | Planned |
Infographics and SEO
Metrics, processes, structured content, and findability helpers
Professionals reached
Readiness score
- Diagnose
- Design
- Embed
Can this support resource pages?
Yes, when the content is concise and scannable.
- Frame the issue
- Align leaders
- Measure adoption
- Overview
- Approach
- Resources
Creative and Showcase
Media, navigation, gallery, and interactive presentation blocks
Strategic Change
Medical Excellence
Highlight a single capability.
- Discovery
- Program
- Adoption
Pair imagery with a short story.
Forms and Content Blocks
Plugin forms, templates, metadata, archive utilities, and search
Changing the critical gap
Block QA Matrix
Core WordPress
Paragraphs, headings, columns, buttons, lists, quotes, tables, images, groups, and query loops should inherit WLH theme tokens.
- Uses theme.json presets
- Editor styles match frontend
- Button styles registered
Theme Integrated
Use for accordions, tabs, cards, icon lists, notifications, posts, and reusable layout modules.
- WLH brand typography
- Theme color schemes
- Consistent spacing
Selective Use
Use for specialized editorial and showcase modules when the native or Stackable block is not enough.
- Confirm typography
- Confirm responsive behavior
- Avoid WooCommerce blocks
Migration QA
Existing Genesis and legacy content should continue to render, but new layouts should prefer native, Stackable, or Qi blocks.
- Check old containers
- Check post grids
- Retire stale patterns