Contributing

What kind of design contribution are you making?

Design flow

Requesting a new component, feature, bugfix, or improvement

1. Submit requests for new designs to the Design System Jira board.
2. Slack the team in #odyssey so your request can be prioritized and added to a sprint.
3. Come to Odyssey Office Hours or schedule a jam with the team.

Building my own component or pattern

1. Design your new component in its own Figma file.
2. Slack the team in #odyssey and we'll help you move the file into Odyssey Labs.
3. 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.
4. Once the component becomes an official part of the Odyssey 1.0+ UI Kit, we'll let you know!

Making a design change or improvement myself

Creating a branch in Figma

1. In Figma, create a branch of the document you’re updating, then make changes within that branch.
2. Slack the team in #odyssey when your changes are ready for review.
3. The team will review the changes in the upcoming sprint.
4. Once reviewed and ready for the system, the branch will be merged into the main Odyssey file.

Odyssey component standards

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.)

Have questions or need support?

Oktanauts can use the following resources when building with Odyssey:

• Check the Odyssey 1.0 FAQs.
• Join #odyssey in Slack to ask questions and stay up to date about the design system.
• Attend Odyssey Office Hours on Mondays and Wednesdays from 1-1:30 p.m. PT / 4-4:30 p.m. ET.
• Submit bug reports and feature requests to the Odyssey Jira board.
• Request a new component using the Odyssey component proposal.