Cedar manages the design language for the Co-op’s digital products. On this site, you will find supporting documentation for everything Cedar offers. After you’re set up with our Toolkits, check out our foundation pages and pay special attention to Color and Typography for more nuanced guidance.
The design system toolkit is distributed as shared libraries through Figma. These libraries are directly managed by the Cedar team and automatically integrated into any new project.
Figma is available for use directly in the browser, but we recommend installing the desktop app. The app is available to all designers through the Self Service client.
Typefaces are automatically distributed through Figma for use across projects.
Design tokens are available for use in any project using any platform and are easy for developers to work with. Token libraries are automatically shared through Figma when you start a new project.
Color choices are all derived from a close working relationship with the Brand team, and have been carefully tested to ensure accessibility on digital mediums.
Two primary brand typefaces are available as a range of pre-defined, ready-to-use type styles. Review the typography guidelines for detailed usage information.
All spacing — from the padding inside a button to range of available icon sizes — is derived from a single spacing scale.
Design decisions like border radii and ranges of available drop shadows are stored in this library.
The grid system enables consistency of layout within supported breakpoints.
Reference the Icon library for a complete list of icons available in Cedar.
Cedar’s web components are available for direct plug-and-play into all platforms using the Microsite Framework. Check with your developer to ensure your project can consume Cedar’s web components.
Major releases typically ship every quarter and with plenty of advance notice. Only two major releases are supported at a time: the current release and the prior release.
Smaller toolkit updates could come at any time. This could include (but is not limited to) accessibility fixes, bug fixes, layout improvements, or component behavior updates.
When we push changes to either our token or component libraries, users will be notified and prompted to update to the newer version directly in Figma.
The Cedar team is available to help with adopting, consuming, or contributing to the design system. Feel free to swing by our weekly office hours or reach out to us on Slack for immediate support.
You won’t be able to make changes to the library that would impact other projects. By keeping Cedar libraries enabled and using components as-is, you minimize your risk of falling out of sync. Note that if you detach a component, you will no longer receive future updates from our team for that component. Never detach a component for production work.
You can create a branch of the Cedar library to make the changes yourself, or reach out to the Cedar team using the #cedar-user-support (opens new window) Slack channel to report a bug.
We keep the design and code aligned so if there’s an update available in Figma it means your developer has access to an update as well. It’s always smart to check in with your developer though.