- Submit requests for new designs to the Design System Jira board.
- Slack the team in #odyssey so your request can be prioritized and added to a sprint.
- Come to Odyssey Office Hours or schedule a jam with the team.
- Design your new component in its own Figma file.
- Slack the team in #odyssey and we'll help you move the file into Odyssey Labs.
- The Design System team will collaborate with you to generalize your feature-specific component so it suits multiple features and ensure it meets the standards of an Odyssey component.
- Once the component becomes an official part of the Odyssey 1.0+ UI Kit, we'll let you know!
- In Figma, create a branch of the document you’re updating, then make changes within that branch.
- Slack the team in #odyssey when your changes are ready for review.
- The team will review the changes in the upcoming sprint.
- Once reviewed and ready for the system, the branch will be merged into the main Odyssey file.
The design system team will help your component meet Odyssey standards. Components in Odyssey must:
- Include all necessary variants (primary button, secondary button, danger button, etc).
- Include every state for each variant (hover, focus, active, disabled, read-only, etc).
- Include responsive variants to account for different container sizes and platforms, as needed.
- Use Auto Layout as appropriate.
- Use property names that follow React prop naming conventions to ensure design and engineering are speaking the same language.
- Include slots for customization as relevant (for things like buttons with icons, modals with custom body content, etc).
- Use tokens instead of magic values.
- Meet accessibility criteria.
- Use accessible colors and contrast.
- Use accessible font sizes.
- Follows visual design best practices.
Use backgrounds and borders appropriately to meet WCAG 2.1 AA.
(If the component follows visual design best practices, it should meet these by default.)
Oktanauts can use the following resources when building with Odyssey: