search

farmOS / field-kit

A modular, offline-first companion app to farmOS.
https://farmOS.org
GNU General Public License v3.0
60 stars 39 forks source link

Create a basic design system #413

Closed jgaehring closed 3 years ago

jgaehring commented 3 years ago

While writing the stories for our component library in Storybook (#410), I've come to realize just how crucial it will be to nail down a design system earlier rather than later, to provide a consistent experience across the various Field Modules. As I put it in the Storybook's README:

Because each individual Field Module comprises only a single experience in the larger app which is Field Kit, it is important that together they present a cohesive user experience and set common expectations.

Also, when it comes to defining props for colors and sizing, I think it's important to get those values consistent from the start, to avoid breaking design elements later down the road. Or, we should at least present a stable interface, which will not change even if the underlying design does. For instance, instead of passing a prop like color="cyan", like I'm currently doing with FarmChip, it would be better to use something like color="primary" or color="information".

I've taken a first stab at laying down a color scheme in Figma, and the next steps will be to define some design tokens for those colors, as well as for typography and white space, then start incorporating them into our components and documenting them with Storybook.

It'd be great to provide some really strict constraints, but I think for the sake of time as much as avoiding future headaches, it's best to keep things flexible to start; we can always refine our model later. I think what's key is to have some system in place, instead of nothing, and be open to changing that system as needs change.

jgaehring commented 3 years ago

I believe the Figma file I linked above is a good start to this. More and more I think it will be important to treat this as a "living" style guide, so I think with this foundation laid, I'm going to close this and just make sure to keep the design system, both in Figma and Storybook, up to date as the design continues to develop.

I'll follow up with the design tokens in #409.