Introduction

Welcome to the Codey Design Guidelines. Within this documentation you will find guidelines on how to use certain design concepts, components, colors and much more. This documentation is intended to be used by developers and designers to ensure that the Codey Design System is used consistently across all applications.

To support the use of the design system the following tools are used:

• Figma for designing and prototyping.
• Tailwind to provide utility classes for styling that uphold the design system.
• Component libraries for Vue to provide pre-built & styled components.

Goals

Unified Frontend experience for all applications with Codey

The main purpose of the Codey Design System is to provide an unified frontend experience for all Codey applications. This means that all applications should look and feel the same, regardless of the team that built them. Adding to this is the need for a11y compliance, which we take into account when designing and building components.

Ease of use for developers

We want to make sure that designs are easy to implement and there is no need for any custom styling or "translation" of design tokens (e.g. spacing, color codes, etc). Therefor we use Tailwind CSS to provide utility classes that match the tokens within the design system.