Getting started

Welcome to Graphite! Graphite is PAQT's white-label design system for digital products and experiences.

Get started by following the guide for designers or developers.

Overview

A design system is a collection of pre-built, reusable assets—components, patterns, guidance, and code—that allows its users to build consistent digital experiences faster. By using the pre-built and universal assets of Graphite, the time teams spend designing and building is minimized. Instead of building and re-building basic elements, they can spend that time customizing their products to address specific client use cases.

Basically, it's a big box of UI Lego pieces, both in design assets & coded components, accompanied by standards and documentation. With a guide on why and how to use them.

Graphite is open source

Graphite is funded and built by PAQT, which means we build for the company’s business needs, but we’ve made it open source for anyone to use and contribute back to.

It's available under the terms of the MIT license.

Target platform

Graphite is mainly targeted at browser/desktop applications.

We make sure our components are usable on mobile browsers with touch input. Still, we don't recommend using them for mobile apps because they don't adhere to the iOS Human Interface Guidelines & Android Material Design guidelines.

Accessibility

The Graphite team is committed to providing a website and components that are accessible by all people, regardless of ability or situation.

We're continuosly working towards improving the accessibility of this website and our components to ensure we provide equal access to everyone.

This work is ongoing and we continue to strive towards our goal of promoting accessibility and meeting WCAG 2.1 level AA guidelines.

We welcome your feedback on how we might improve. For any specific questions or concerns, please contact us.

The Graphite team

• Tom Stemerding - Frontend Developer

Attribution

• Components are built with Stencil
• The documentation site is built with Eleventy using this starter project
• The documentation site is hosted on Netlify
• The layout of the documentation site is based on or inspired by Nuxt Content.
• CDN services are provided by jsDelivr
• Icons are courtesy of Ionicons
• We used the asterisk icon from Elusive Icons by Team Redux
• Positioning of menus, tooltips, et al is handled by Popper.js
• The Graphite logo was designed by Elwin van Eede
• Some component code is based on or inspired by the Ionic Framework and Shoelace components
• Our date picker is a wrapper around the open-source Duet Date Picker.
• Some documentation is based on or inspired by the Ionic Framework, Shoelace, the Spectrum Design System, the Carbon Design System, and the Polaris Design System

Contact us

Have questions? Found a bug? Learn where to go and what to do by visiting the Contact us page.