Primo Design System

Primo is an open-source design system that makes it easy to build high quality and accessible web applications. The system includes designs, token, styles and components built using modern JavaScript.

Currently under a lot of work in progress 🚀

The Repository

This repository is where the Primo design system is maintained. This is a working design system aimed to support frontend experiences and a commonplace to find visual styles, components and patterns.

Getting started

If you're just looking to get started with tokens and a base style reset, checkout @primo/styles and @primo/tokens. For a full bundle with React components and fonts, look at @primo/react.

For a full bundle with React components and fonts, look at @primo/react or @primo/styles. These will provide the building blocks in react and css.

Requirements

This project uses Yarn and Node. Ensure you are using version 1.2.55 for yarn, to install please follow the installation guide.

For node make sure you've set you local to version 16.*.*. Use nvm to manage your local development versions.

Installation

To get started we need to setup all our local dependencies, we're using yarn workspaces and lerna to manage our mono repo.

yarn

In the future we will look to support

• Angular
• Vue
• Web Components (Stencil JS)

Full list of all our component packages

Package name	Description
@primo/components	All base component styles
@primo/grid	12 column grid system and utilities
@primo/icons	Iconography SVG assets to support the Design System
@primo/react	React components
@primo/styles	Base styles and CSS reset for the Design System
@primo/tokens	Tokens for color, type, spacing, grids that are available in the Cardano design system

Public Storybook(s)

If you wish to see our styles, components and react components live, and the most recent version and changes please visit the following:

• @primo/styles - Storybook
• @primo/components - Storybook
• @primo/react - Storybook

Contributors

Richard McCartney

Add your contributions

✍️ Feedback

Please ask any questions on this project, you can do so by creating a new issue. Or contributing to any active issues.

If you wish to get in contact, please don't hesitate via twitter @Rich_McCartney.

Licence

Licensed under standard MIT license.