---
# System prepended metadata

title: Design System

---

# Design System 

Out of [this list](https://github.com/alexpate/awesome-design-systems), Carbon seems like one of the strongest candidates.

## Unique Strengths 
- System-oriented (not a more general site UI, e.g Bulma)
- React Component Library
- Navigable, updated documentation (in English!)
- Opinionated UI/UX patterns around using the design system's own components to enable managing data

## Questions Being Investigated / WIP Questions
- Do we dive 100% into their philosophy immediately and risk over-investing in something that may not scale, or do we slowly migrate over?
- What are JS/TS eng requirements for the next framework we adopt?
    - How does it play with Typescript?
    - How does it play with Webpack?
    - How does it play with Worksheets?
        - In terms of UX patterns, there is essentially no compatibility, but 
    - (For SCSS, details below)
- How can we minimize friction for devs and enable them to be productive without forcing them to slog through the Carbon(/etc) docs for 3 days before touching the front-end?
    - All Hands Intro
    - Adding SCSS alias mixins, like `mq` 
    - Comment more liberally
- To what extent do we use their code vs ours when overlap occurs? (Ours/Theirs/Keep both)
    - For utilities SCSS
        - Delete our cruft but keep both, consider adding aliases from ours to theirs in `_aliases.scss` to keep a backdoor open
    - For layout SCSS
        - Theirs for global config and vars
        - Ours for `<section>`s and stuff
    - For global component SCSS
        - Theirs for global components (sidebar/navbar)
    - For component SCSS
        - Theirs
    - For component JS
        - Theirs for new, ours for old

## Answered Questions
- Can we just pull it in as a regular NPM dependency, or is it a more opinionated `create-carbon-app` type deal?
    - Regular dependency

## Migration Plan
- How to schedule before/after Webpack migration
    - Preferably after, but not sure
    - Temporarily can use CDN-based CSS to forego need to implement SCSS-loaders based on old Webpack config
- How to schedule in regards to Mayven stories?
    - If the majority of their focus will be on boosting responsiveness, let's just import @carbon/grid and whatever specific utilities they'll need for implementing the responsiveness in Carbon. Since this aspect will just be SCSS stuff that is relatively unopinionated and relatively loosely coupled

## Migration Plan
- Let Ops know there will be visual inconsistency during the migration that we cannot list everytime, but UX updates will always be announced
- For a while, _support_, but don't use, all 3 frameworks (Bootstrap, Foundation, Carbon)
- When to use Carbon:
    - For brand new components
    - When refactoring smaller components
    - Refactoring larger components should be done as its own actual task (if at all)
    


## 