> For the complete documentation index, see [llms.txt](https://sprocket-rocket.gitbook.io/project/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sprocket-rocket.gitbook.io/project/new-module/design.md).

# Design

5 points small. 8 points medium. Break down big.

### 1. Check Module List for Existing Modules

Before starting a design, [**reference the module list**](https://docs.google.com/spreadsheets/d/1dKjymiH7XJIenjjvS-IdyQBkrEjcVrMmdQsFKJb1Mbs/edit?usp=sharing) for any [**existing module designs**](https://invis.io/NCG0VECMF68#/281795799_Modules) that may cause your new design to be deemed redundant or derivative. If your new modules adds more value to the modules list, move to next step.

### 2. Design First Look

* Wireframe the module using the [**existing module designs**](https://invis.io/NCG0VECMF68#/281795799_Modules) as a reference point for styling. Document what the module can do<br>
* Create a new branch from **master** branch in Abstract. \
  Rules:
  * DO NOT combine design batches into one branch. \
    One design batch should have its own branch.
  * DO NOT create a sub-branch from an active branch (unless if there is new update(s) needed from the parent branch). <br>
* Create the first look. This is an example design of the modules as it would be used in real life. ***No LOREM IPSUM, No repeated content.*** Content should explain the use case of the module. *e.g. ("This is a header for the main point", "This is a CTA", etc.)* <br>
* Create planned variations (all on one InVision Page) that show planned use cases (how/where its flexible). Use judgement on what you need to display here. *e.g. (Hover states, Activate states, Dynamic Section)* <br>
* Present this module/batch during our weekly LaunchPad Huddle or on a Design Review call with a developer. Record the group review on loom. Link to the loom video at the top of the InVision page for the module. *The idea here is that the team will discuss, iterate, add comments live and finally vote on if we want to pull the new modules back into the pattern library.* If the module is approved for development add the name to [**the module list**](https://docs.google.com/spreadsheets/d/1dKjymiH7XJIenjjvS-IdyQBkrEjcVrMmdQsFKJb1Mbs/edit?usp=sharing)

### 3. Handoff

* Document with dev notes the expected functionality
  * For Meeting: Be SUCCINCT in comments. Focus on the task at hand. Should this module be built? Does it need any improvements prior to being built?<br>
* Mobile specific styles... they need to be included in this step as well<br>
* Include a spec that includes the default module options and the classes for color so its can easily be picked up by the dev and driven by base.css