Packt Publishing / Enterprise design system

From brand language to working system.

A reusable design system and front-end foundation connecting a new corporate identity to consistent, practical application delivery.

Inspect the system
Foundation tokens Component library Patterns & compositions Documentation & guides Implementation & code
Client
Packt Publishing
Duration
4½ months
Role
Senior Product Designer & Front-end Developer
Delivery
Design system, documentation and production HTML/CSS

System problem

Consistency could not stop at the interface.

Packt needed more than a redesigned screen. Future applications required a common visual language, reusable components and implementation guidance that developers could apply consistently.

The central decision was to treat documentation and code as parts of the product system, not as material attached after a component gallery was complete.

01 Brand language Identity translated into usable foundations
02 Product patterns Behaviour organised into reusable components
03 Delivery code Guidance carried into implementation

System anatomy

Five layers. One delivery chain.

Each layer supports the next. The system remains useful because design decisions can be traced from foundation through implementation.

  1. 01 Foundation tokens Typography, colour, spacing and responsive rules
  2. 02 Component library Reusable controls, navigation and content structures
  3. 03 Patterns & compositions Components assembled around product needs
  4. 04 Documentation & guides Intent, behaviour and usage made explicit
  5. 05 Implementation & code Bootstrap extension, templates and production HTML/CSS
Shared delivery foundation Design decisions remain connected to use.

System foundations

Brand rules became interface rules.

Colour and typography were translated into reusable foundations so product teams could work from the same visual language rather than reproduce the brand screen by screen.

Packt design-system palette showing core, state, link and chart colours. Figma view of the Packt typography system from large display styles to body and interface text.
FIG 01 Colour and typography foundations defined as reusable system rules.

Component system

Reusable behaviour, not just reusable styling.

The library defined controls across variants, states and content conditions so repeated product behaviour could be designed and implemented consistently.

Figma component library showing Packt button variants, sizes and interaction states. Figma component library showing single-select and multi-select controls across themes and interaction states. Figma component library showing responsive Packt table patterns in light and dark themes.
FIG 02 Selected buttons, form controls and table patterns demonstrating component states and system depth.

Responsive application

One system across changing viewport constraints.

The foundations and components were tested as compositions rather than isolated objects, including layouts across desktop, laptop, tablet and mobile widths.

Figma layouts showing the Packt landing page adapted across desktop, laptop, tablet and mobile widths.
FIG 03 Responsive landing-page layouts showing the system applied across multiple viewport widths.

Documentation and implementation

The system ended in usable guidance and code.

The developer guide connected the visual system to implementation guidance, component examples and production HTML so design intent could survive handover.

Packt developer design-guide home screen with routes to documentation, components, a cheatsheet and downloadable assets. Packt developer guide showing form-control examples alongside production HTML.
FIG 04 Developer documentation connecting the system, reusable component guidance and production HTML.

Design decisions

What held the system together.

  1. 01 Build a reusable product foundation

    Treat the work as a system for future applications rather than a one-off interface.

  2. 02 Connect guidance to behaviour

    Link design tokens, component behaviour and developer guidance so decisions survive handover.

  3. 03 Make quality structural

    Use responsive and accessible patterns as system requirements rather than later refinements.

Delivery trace

Designed, documented and implemented.

Evidence boundary

A delivered foundation, without invented performance claims.

The system, components, documentation and implementation were delivered. Measured adoption and productivity gains were not supplied, so no quantified improvement is claimed.

Independent perspective

The system was understood as more than interface design.

The third-party evidence speaks directly to the breadth visible in the work: foundations, reusable components, responsive patterns, documentation and production-ready code.

“What impressed me most about Michael was how far beyond the interface he thought. During his time working with us at Packt, he built the system from the ground up, including foundation tokens, a full component library, responsive patterns, and developer documentation with production-ready code. On top of all that, he's genuinely great to work with.”

Yas Poptani

Next case study

FleetWave / Enterprise Fleet Management Platform

Examine FleetWave

Need a system that survives delivery?

Tell me what needs to become more consistent, reusable or implementation-ready.

Start a conversation

I usually respond within two working days.