Use adobe design system

[MelroyNoronha]

Adobe spectrum is something @Sandeep-Tech is familiar with and we need a design system to make design choices easier so... https://spectrum.adobe.com/page/design-tokens/

[sndp-s]

Yes,

notes:

1. 'Spectrum' is Adobe's design system. ref1
2. Adobe 'React Spectrum' is a React components lib implementation of Spectrum design system. (We will be developing our UI with this mostly) ref2
3. Adobe 'React stately' is a hooks lib to manage component state. (We will have to use only a few of these according to my current experience. The 'React Spectrum' components already uses these hooks inside of them) ref3
4. 'Spectrum Design Tokens' (description below from Adobe's site) (@BlueLiver will have a use for this) ref4

   Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a color as a RGB value, an opacity as a number, an animation ease as Bezier coordinates. They’re used in place of hard-coded values in order to ensure flexibility and unity across all product experiences. Design tokens are directly integrated into our component libraries and UI kits. They cover the various options of platform scales, color themes, component states, and more.

5. Design resources: Adobe XD plugin, UI kits, fonts, icons are all available for download from ref1 (@BlueLiver will have a use for this)

references:

1. Spectrum
2. React Spectrum
3. React stately
4. Spectrum Design Tokens

references:

1. Spectrum
2. React Spectrum
3. React stately