NYC Opportunity
User Interface (UI)
Patterns Framework

A front-end framework for creating design pattern libraries.

The framework is a collection of tools and principles used to make creating pattern libraries fun for developers, transparent for teams, and sustainable beyond the lifecycle of digital products.

Why Patterns?

Pattern libraries unify the experience of user interfaces because they can be integrated into different service delivery channels.

The public does not perceive the parts that make up digital government services as distinct products the way civil servants do. Websites, forms, mobile apps, dashboards, email newsletters, etc. are often perceived as a single entity. The more consistent these are from a user interface (UI) and user experience (UX) perspective the better the service delivery will be for end-users.

They reduce the amount of work that is required by designers and developers to implement new services.

By using patterns we can strive toward “making the right thing to do the easiest thing to do.” We can use tools that help developers become better at writing error free code, ensure the team adheres to accessibility standards, and create UIs that have been proven to work and can adapt to the changing times.

They create a common and accessible language for the organization to approach digital service delivery.

“Language is fundamental to collaboration. If you work in a team, your design language needs to be shared among the people involved in the creation of the product. Without a shared language, a group of people can’t create effectively together – each person will have a different mental model of what they’re trying to achieve.” - Design Systems by Alla Kholmatova.

Principles

Atomic Design and Utility-first - A pattern library starts with simple design tokens such as color, typographic features, and spacing values then scales up from there. Design tokens are used to build out more complex components, scripts, and utilities that retain modularity.

Framework Agnostic - Use React, Svelte, or Vue.js to add reactivity to user interface components. Manage your own copy of Bootstrap, Material UI, Foundation, or any of the many component libraries of choice.

Modular Distribution and Portability - Make it once, use it many times. Instead of copying and pasting CSS and JavaScript into multiple projects, reuse and extend pattern libraries with a modern front-end ecosystem such as NPM and distribute via content-delivery-network.

Getting Started

Scaffold your own library or project by running the following command.

npx @nycopportunity/pttrn scaffold && npm i && npx pttrn build && npm start

This will install the Patterns Command Line Interface described below, scaffold a new static library project, and start the development server.

But I don’t write code!

No worries! Then perhaps try documenting your pattern library specs in a Figma design file first and share this with your development team.

The Patterns Framework Core Modules

These repositores help development teams create and maintain pattern libraries.

Pinned Modules

These modules provide support for the integration of the patterns framework in developer team projects.

Patterns CLI Plugins

These modules extend the functionality of the Patterns CLI via the custom commands API.

UI Pattern Components

These reusable user interface (UI) components can be implemented in different projects.

Pattern Libraries and Projects

These sites and libraries have been built using various modules in the NYCO Patterns Framework.

Link to roadmap Roadmap

2022

Follow design token specification/standards determined by the Design Tokens W3C Community Group. TBD

Create Pug.js Pattern CLI plugin to replace slm-lang. TBD

Explore Mitosis as shared component specification. TBD

Update ACCESS NYC Patterns with v1 of the Patterns Framework (CLI, Scripts, etc.). In-progress

Elements; one repository with all of the elements. Can be customized by CSS Custom Properties / Design Tokens for a particular product. In-progress

2021

Working NYC Patterns light/dark mode proof-of-concept and low-vision color scheme release (notes). Complete

Release Patterns CLI Properties Plugin. Converts Design tokens managed by the Patterns CLI into CSS custom properties. Proof-of-concept for expressing design tokens as CSS custom properties. Complete

Refine Module Accessibility. Work with MOPD to document and address module issues. On-going

Draft architecture for additional shared pattern modules. Complete

Release Navigation Pattern. Complete

Release Modal Pattern. Complete

Release Menu Pattern. Complete

Release Attribution Pattern. Complete

Move to releasing shared pattern modules. Continue to support integrations and contributions. On-going

2020

Release v1 of the Patterns CLI. v1 culminated a long effort to standardize the way our pattern libraries were created. We went from desperate NPM scripts and configurations to a standard set of packages and tools for building and maintaining patterns for different products and audiences. This development period was a heavy focus on developer tooling and support while also beginning to involve designers in the process of contributing. Complete

Link to support Support

Getting Help (how do I do the thing?)

First, check out the documentation for the module you have a question about. They are all GitHub repositories with readme files. If the documentation isn’t sufficient create a new issue or reach out to products@nycopportunity.nyc.gov.

Contributing (how to I add the thing?)

We manage planning and a backlog for all of the modules in the framework using Jira. Reach out to products@nycopportunity.nyc.gov if you are interested in contributing.

New York City UI Repositories

We draw inspiraction from the NYC Civic Tech community. This is a non-exaustive list of other open-source NYC user-interface resources. If you know of an open-source resource that should be featured please let us know at products@nycopportunity.nyc.gov.

Last updated April 8, 2022