Show menu

Dorothy House

Pattern library and component guide. Made for you by fffunction.

During design and development phases, this guide is best viewed in Google chrome, as it is still a working document.


This pattern library has been designed to showcase digital design in it's natural environment, the browser. It sets out to remove the need for endless revisions of flat mock–ups. Think of it as the place where concept designs become realised, adapted and changed over time; as well as a place to reference the consistency of elements and modular parts.

Made just for you by fffunction.

Statuses explained

Status' are set and changes in status.json in the project root.

  • Started:
    Represents items that are still being designed. These may not reflect the final outcome of the item.
  • Review:
    Items that are ready to be reviewed internally or by the client.
  • Finished:
    This represents items that have been approved by the client and are now ready for development and testing.
  • Delivered:
    Items that have been developed as well tested and everything is working as it should be.
  • Rework:
    Items where issues were flagged up during the development and testing phase, which will need more work done.

Sections explained

  1. Templates:
    Contains the templated layouts for the website. You should number and name pages according to the IA document where appropriate. Sub–folders allow for design, development and testing phases.
  2. Guide to:
    Contains documentation for elements that are used often (and require documentation about how use them), or literal guides on how to set-up new elements correctly (such as images). Guide elements are useful for both client and development team alike.

Project contacts

Ben Coleman
Design Director

Pete Coles
Creative Director

Russell Kirkland
Technical Director

Dan Goodwin
UX Lead

Michelle Gale
Project lead

Dan Reeves

Ben Darby