Building a foundation

Design systems create a consistent collection of components and documentation for all those working in design, product, and development to share. They can be combined to build any number of layouts that are responsive, accessible, and – in this case – themed by default.

Like almost all design systems, this one started after the product existed. The core of the design system was based off an audit of existing components in the production application while being updated to provide flexibility in updating them in the future.

Requirements

The overall requirements are simple, but needed to be achieved without disrupting the existing products.

1. Documentation
   A shared understanding of how to use the system would be built into Figma and into Storybook for designers and developers

2. Themes
   At least three themes would be needed for the core platform, with the need for more applications in the future

3. Accessibility
   While we don’t have a WCAG mandate, it was a goal to ensure we met WCAG 2.1 AA standards whenever possible

4. Tokenization
   Every unique element should have a defined token so that it can be easily swapped and updated both in Figma and in Storybook (we build using Svelte), providing for consistent, simple updates

Core definitions

Base definitions were created for foundational parts to unify the components built on top of them.

Color Palette

Colors were defined in partnership with our brand team’s direction, and with a look at what was existing in the product. We defined colors for everything, including text, inputs, buttons, links, tables, backgrounds. Here are examples of the text and object color palettes:

Spacing

Having previously built a design system in an 8pt grid, I was flipped on my head when we built this one in a 5pt grid! There are drawbacks and advantages to either, but overall this decision has been a good direction for our needs.

Typography + Iconography

The existing product contained multiple different typefaces, so we made a choice to reduce that to just Helvetica Now with a few of its variations. No italics, weights pre-defined by use. For icons, we moved away from Font Awesome and onto Material Icons Sharp.

Components

Here are a few of the more popular of the many, many components included in the design system.

Buttons

The system has 7 button styles with multiple variants from icon option to colors to built-in prototyped states.

Inputs

Inputs got … a bit out of hand. We have multiple styles with required labels, normal labels, help text, and character counts. Mix that in with error, focused, disabled, and normal states on top of having 4 supported themes with different borders and radii.

Chips

Chips, pills, badges – I’m sure I’ve missed a few names for these doodads. The rounded style allow our users to ‘Tag’ items for filtering, searching, and reporting while the rectangle style is used for callouts and labelling. Chips can bee used with the whole rainbow of define Object colors.

Navigation

The primary navigation comes in a few different themes, but also in all four breakpoint sizes and with a handful of our products in mind. The larger sizes adapt to include text labels alongside the icons, while all sizes of the Filevine core product allow for access to search timers, and our chat tool.

Etc, etc, etc

The examples above are a small sample of the overall design system. Other popular components include our entire icon library in three sizes, drawers, alerts, dialogs, secondary navigations, tabs, avatars, and tables.

Contribution + updates

Design systems can quickly need to be replaced or rebuilt if they’re not maintained and or don’t have a defined contribution model. For the Filevine Design System, we allow our developers to suggest and contribute updates, interaction suggestions, and feedback. I also encourage our team to challenge the system’s constraints while designing and find any interactions we need to support and why.

This process isn’t incredibly robust, but as a startup-sized company we can quickly use Slack to work through contributions – something I’m very aware isn’t always possible.

In my time working on a design system used by hundreds at JP Morgan Chase, we utilized a design guild with working sessions, feedback channels, and user testing on our usage guidelines.

This is a project I worked on while employed at Filevine.

Up next