TIDE Design System

TIDE (Trader Interactive Design and Engineering) is a design system created and maintained by the TIDE Design System product group at Trader Interactive. It was initially developed for use in the marketplace repository, but is available for integration into other Trader Interactive projects, subject to the following technical restrictions:

1. CSS utilities can be leveraged by any Node-compiled project.
2. Types can be leveraged by any TypeScript project.
3. Basic components can be leveraged by any Vue 3 project.

Guides

• Figma: Explore TIDE standards, tokens, and components as maintained by the TIDE team.
• Storybook: Explore TIDE utilities and components to generate working code implementations.
• Marketplace Style Guides: Explore TIDE utilities and components in a realm-specific production environment.
• Full Integration (Vue 3): Leverage TIDE utilities and components from a compatible consumer repository.
• Partial Integration (CSS only): Leverage TIDE utilties from any consumer repository.
• Migration: Replace local structures with TIDE utilities and components.
• Workflows: Collaborate with the TIDE team on feature enhancements.
• Development: Contribute to the tide-design-system NPM package.
• Upgrade Guide: Upgrade versions of the tide-design-system npm package
• Figma Token Cheatsheet: Remember how to implement Figma tokens from code
• Configuration: Globally set config values for your project for custom behaviors.
• Layout Grid Utility: Lightweight CSS Grid for consistent page alignment.
• Forms and inputs: Guide to using Tide Forms and Input Components.

Glossary

• TIDE: the design system itself - a series of conceptual, agreed-upon standards and guidelines meant to emphasize a consistent, scalable user experience across the suite of Trader Interactive websites
• TIDE 1.0: an unofficial designation that describes the initial, deprecated set of standards and guidelines integrated into the redesign of the marketplace repository
• TIDE 2.0: an unofficial designation that describes the revised set of standards and guidelines implemented as its own GitHub repository (and NPM package), separate from any specific consumer repository
• TIDE migration: the process, still underway, of replacing TIDE 1.0 implementations with those of TIDE 2.0 within the marketplace repository
• TIDE team: the Trader Interactive product group tasked with managing TIDE and assisting other Trader Interactive product groups with integrating it into the various consumer repositories
• Figma: a third-party design platform that hosts TIDE, featuring the ability to create tokens and components to be leveraged across designs
• Figma token: a reusable structure that enables dynamically referencing a stored value (like a color, font, or spacing standard) within Figma
• Figma component: a reusable structure that enables dynamically referencing a stored interface element (like a button, form field, or carousel) within Figma
• TIDE repository: the GitHub project that stores the code implementing TIDE as a series of utilities and components to be leveraged from within a consumer repository
• TIDE utility: a reusable structure that enables dynamically referencing a CSS declaration (like a color, font, or spacing standard) from within the TIDE repository or a consumer repository
• TIDE component: a reusable structure that enables dynamically referencing a stored interface element (like a button, form field, or carousel) from within the TIDE repository or a consumer repository
• tide-design-system: the TIDE NPM package that can be added as a dependency to a consumer repository
• Consumer repository: any project to which the tide-design-system package has been added as a dependency
• Storybook: a third-party library implemented within the TIDE repository that aids in generating interactive demonstrations of the design and functionality of TIDE utilities and components
• Netlify: a third-party platform that hosts the TIDE Storybook website

Note: the TIDE Figma and TIDE repository are not programmatically bound together, so some structures that exist as designs may not yet have been developed as code, but should be reflected in the TIDE Jira backlog.

Known consumer repositories:

(List may not be comprehensive.)

• marketplace (partial integration)
• marketplace/frontend
• marketplace-ssr
• aim-myt
• aim-paa