As a Designer
# Design Guidelines
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.
# Additional Brand Guidelines
# Design Toolkits
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.
# Installing Figma
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.
# Required Fonts
Typefaces are automatically distributed through Figma for use across projects.
# Shared Token Libraries
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
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.
# Type
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.
# Spacing
All spacing — from the padding inside a button to range of available icon sizes — is derived from a single spacing scale.
# Prominence & Shape
Design decisions like border radii and ranges of available drop shadows are stored in this library.
# Grid & Breakpoints
The grid system enables consistency of layout within supported breakpoints.
# Iconography
Reference the Icon library for a complete list of icons available in Cedar.
# Shared Component Libraries
# Web Components
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.
# Toolkit Updates
# Major Releases
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.
- The current toolkits will be tagged vCurrent
- The previous toolkit will be named vLegacy
# Minor Releases and Patches
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.
# Consuming Updates in Figma
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.
# Project Support
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.
# FAQ
# Can I break the library?
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.
# How can I fix a bug or make an improvement to the toolkit?
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.
# Should I always consume updates to Figma Components?
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.