Guidelines for creating patterns


  • A pattern needs to be designed and put in a library in Figma(Cosmos) before developing it, using cosmos/bs/tailwind variables. It can either be a one-off first-time pattern that’s being created or something being created by a designer that’s part of a website design.
  • whenever new need for Pattern: share in Patterns channel all along the process (before, during, after)

A few guidelines when creating new patterns:

  • only create patterns when we really need them
  • Use a personal account and not the general “admin” account so it’s transparent who created each pattern
  • Use incremental numbers for the Post Title of the added patterns, so they are easy to reference. Also try to make it as descriptive as possible.
  • If possible avoid using a domain name in the title – Patterns are built to be shared across products
    • If the pattern was developed for a specific domain, add that domain as a Tag on the pattern
  • Remember to use Category, Dependency, and Tags if necessary
  • Ideally use a Featured Image
  • use modal option, if you need to give some advice

  • lock elements as much as we can (specially layout stuff)
  • remove all static (manual) blocks, as much as we can. Only use dynamic unless justified
  • if we need some new block api related  ->  request plugins squad
  • test edge cases (example layout payment methods)
  • try to make editor/front end look similar  ->  columns vs container
  • if we need some new utility, share need with Platform services
  • If pattern is Operator Header    ->   use global (post) settings (instead of putting in a loop)
  • Never add css/scripts on the pattern  ->   find other ways to do that if really needed
  • avoid duplicating Patterns (example 25 & 62)