Patterns

If you’ve designed a pattern that is not currently in Carbon, contributing it back allows others in the community to refine and use your pattern in their projects.

First steps to contributing

The process for contributing a pattern will depend on the pattern’s complexity, but all contributions start by opening a Github issue. Include a detailed description in which you:

  • Define your pattern and explain the rationale
  • Clarify whether it uses existing components, new components, or both
  • Include mockups and/or prototypes of any fidelity
  • Include competitive and comparative analysis, and any inspirations from other products

This issue will be the staging ground for the pattern contribution, and you should expect the Carbon core team and the community to weigh in with suggestions at each step.

We encourage you to surface work in progress. If you’re not able to complete all of the parts yourself, someone in the community may be able to pick up where you leave off.

Parts of a pattern contribution

Here are all of the steps for a complete contribution.

1. Provide a rationale

Explain how your pattern will address user needs and solve a problem. Carbon serves the widest possible range of products, and contributions that increase the scope of the system are more likely to be accepted. Be sure to include any research and feedback.

2. Explain behaviors, content structure, and functionality

  • Describe pattern behaviors with descriptions, user flows, and/or prototypes.
  • Use wireframes or sketches to explain the visual hierarchy of components.
  • Show the content structure and content elements required, such as title, body, image, labels, video.
  • Include details of how the pattern user experience meets standards for accessibility.
  • Show the pattern in context.

3. Create pattern visuals

4. Create design specs

  • If you are creating new components for use in the pattern, you’ll need to create sizing and styling annotations for these new components. The design specs should provide a developer with everything they need to create the design in code. Check out our production guidelines to get started.
  • If you are using a combination of new and existing components, you should note clearly where each is used.

5. Create Sketch symbols

  • Any new patterns or changes to existing patterns will also live in a Sketch kit and so you will need to create Sketch symbols for components used.
  • Check out Sketch’s guide for creating a symbol.

6. Document the pattern

  • Use the pattern Markdown template to document pattern guidelines and usage.
  • The site documentation should include your contextual images and step-by-step instructions that allow designers to effectively implement your pattern. Be sure to include the context and the rationale for any choices.

7. Prepare for experimental release

If accepted, the pattern will be released as Experimental until community tested and approved for general production.