Input →Outputs

From the technical perspective, the design system was meant to reduce the amount of design decisions developers make on their own, and to foster collaboration between engineers and UX designers. For that purpose, this design system takes input from the designers as a single source of truth and produces several outputs, both intermediary and final. The input from the designers is encoded in a JSON file (more on that below), and the final output (for this prototype iteration) is a minified CSS file which represents those decisions in a way which can by reused by developers.

Intermediary Outputs

Beginning with the input JSON files, there are a few steps along the workflow, where valuable outputs can be produced such as:

• Variable sheets which represent the designs tokens (token files)
• Source files for styles and components which implement the variables in the desired framework / tool / language.
• Design system Documentation and demo site, which implements the components and styles in order to document and demo them

Token files

Token files are files that contain a variable representation of the design decisions in any desired format. For the purpose of this prototype, we have decided to export the design tokens in the following formats:

• CSS Variables: for use through a CDN or by css @import.
• Less / SCSS Variables: To be used within files which utilize the less or sass css pre-processors.
• JS constants: Constants exported from an es6 Javascript file, to enable usage within Javascript components.

All of the token files can be found in the tokens folder of the published package: https://unpkg.com/browse/@itamar.wmde/wikit-css/build/tokens/

<aside> 💡 Chief Learning: The usage of a tool such as Style Dictionary offers us a highly customizable set of outputs from the initial JSON input. For the future, and with modern Javascript frameworks in mind, we can even export these variables as objects, grouping sets of token variables by component.

</aside>

Style & Component source files

These files are within the full domain of the developers who are required to implement the token files mentioned above. A full design system which includes components, will consume the one of the token files mentioned above in order to implement the exported variables in the code. In the case of our prototype, as we wanted to keep the system agnostic as possible to Javascript frameworks we have decided to implement an HTML - CSS pattern library in the style of CSS frameworks such as bootstrap. For that we decided to utilize Less for the following reasons:

1. It enables us to structure files in our source according to component being developed
2. It allows us to share source files, which can be used individually, regardless of the final output
3. It allows us to compose one CSS file to be shared across CDNs

All of the source files can be found in the src folder of the published package: https://unpkg.com/browse/@itamar.wmde/wikit-css/src/