Please prepare and share a critique of REI’s design system, Cedar. We’re specifically interested in your assessment of the design system itself, and only secondarily how it’s been applied. 

My observation is that the Cedar Design is a mature design system. Helper classes like component variables is complete. On the REI.com website, the name spaced prefix of "cdr" is found throughout the entire composition of the webpage, indicating at least successful implementation on at least one product.

Not knowing what the current challenges are, I would focus on something straightforward and impactful. I would add a top-level navigation for selecting the type of audience (developer, designer, content writers, marketing etc.) and start looking at opportunities to communicate more granular details for each audience to maximize the documentation's usefulness.

• Expand on designer documentation to cover more interface guidelines

• • Ex: In a Button, pairings of Primary/Secondary can be swapped with Primary/Tertiary and in certain contexts the latter is better if the primary action is preferred over the alternative action

• Improve spacing scale

• • The best scale is split into two (one for spacing between elements and one for layouts)

• • Use a more ergonomic naming scheme (phase out fractional names for levels or actual spacing values)

• Investigate native iOS/Android UI kit implementation

• • Possibly document and centralize already built iOS and Android components if they are already using the tokens for styling

• Add knobs

• • Not a dealbreaker, but component variations can be more easily discovered by developers by adding interactive knobs and a code snippet area with the generate component with its props

• Introduce a ramped Typography scale with multiple weight categories (Display, Heading, Label, Paragraph)

  • Structure is for implementation of dynamic text for accessibility

• Organize an illustration assets library if there are resources in-house to design them

• Icon system should support ligatures for implicit labeling (screen readers would read icon as plain text)

• StyledComponent’s ThemeProvider can be leveraged to solve issues across accessibility problems including low vision colour modes and enlarged typography ramps

• If every product (icon, Vue.js library, docs, etc.) had its own versioning, the design system could move faster since each piece could be updated individually