Introduction
The Common Sense style guide is a design system for Common Sense products.
For designers it is a living, breathing document that describes many of our visual assets (components, iconography, color palettes, grids, etc) and presents guidelines on how best to use them. For developers it provides a library of reusable, extendable, styled components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.
Goals
- Create a central, shared repository for front-end patterns and code.
- Ensure consistency across our sites and maintain our brand's visual identity.
- Cut design and engineering time so we can focus more on product innovation.
Approach
Our approach is modular and is inspired by the Atomic Design methodology.Components in our style guide are categorized based on the following hierarchy:
Utilities: Core styles that be applied and shared across components.
Atoms: Foundational building blocks of our design system - they cannot be broken down further without losing their meaning.
Molecules: Group of atoms pieced together to take on new properties and form more complex and bigger functional patterns.
Layouts: Options for laying out content or components on a page.
Access
If you are a designer: Please download the master design kit (you will need the Sketch application to open and use this).
If you are a developer:
Who works on the Common Sense Style Guide?
The style guide has a core team of designers, product managers, and front-end developers that are dedicated to developing and supporting the system.
How can I contribute and/or propose new components/ideas?
Stay tuned - we are working on guidelines for Developers and Designers. We appreciate your patience and willingness to help out and contribute back.
Which browsers are supported?
Components are supported in the following browsers: IE?? Firefox latest Chrome latest Safari latest
What language are the components written in?
The implementation of the style guide is written in ——, and HTML and ships …
I see a bug, how do I report it?
Please open an issue in the appropriate GitHub Repo. We will address the bug as soon as we can. If you have a fix for the bug please feel free to submit a PR for it.
Where do I go if I've read everything and still have an issue/question?
If you still have questions or can't find the answer you are looking for feel free to reach out in one of the following ways:
Email [email protected]
Slack channels (Common Sense internal only) For design and general questions: #style-guide For developer questions: #styleguide-devs
GitHub repos Open an issue in one of our GitHub Repo. Please choose the appropriate repo for your request.
Utilities: Core styles that be applied and shared across components