Drip Design System

Welcome

You're here because you're going to build something new for Drip's customers. And that's pretty awesome. As you build, ask yourself if the design adheres to our Design Principles:

Is it Opinionated?

We present features and data consistent with Drip's opinion of how to best grow a brand's loyal customer base. We are the experts, and our interface should reflect our expertise. Opinionated interfaces keep things neat and simple, which helps users stay focused on the task at hand.

Is it Approachable?

Drip's customers are small businesses with too much on their plate, understaffed marketing departments, or both. For Drip to achieve our mission, we need to help customers quickly understand, enable, and tweak sophisticated marketing strategies. This means Drip makes the advanced feel approachable.

Is it Consistent?

Consistency means a few things. At a micro level, it means you should build with reusable components, and shouldn't design a new element without a good reason. At a macro level, consistency means similar tasks should be accomplished via similar flows.

Is it Accessible?

We want to make sure our application is visible, functional, and approachable for all types of people. We're striving to pass at least WCAG AA standards.

Styleguide Learn the look, feel, and smell of the application.

Colors

Basic Palette

The primary brand palette is connected to the six characteristics of the Drip brand, as well as the eight value marks that represent each characteristic. I don't know exactly how they do that, but that's what the branding booklet said.

Magenta

Used to designate the primary action on the page, or help the user remember where they are in the product (navigation highlighting). If your design utilizes lots of magenta, rethink the design goals.

Green

Used as a replacement for Magenta in Night Mode. Fighter of the Dayman.

Lime

Displays that an action (user or system) completed successfully.

Sky

Primarily used to show informational messages. Ignoring will not break anything in the application.

Lemon

Shows a warning. Ignoring this color *could* break something in the application.

Cherry

Shows that something has broken. Gears aren't turning. Requires immediate attention from user to get things going again.

Purple

Used sparingly. A background color on elements that are active.

Orange

Orange is a weak warning, perhaps a strong suggestion. Generally represents Drip's opinion of how things should be done.

Navy

Primarily a color on the marketing site, used as a background color when you're tired of white.

Greys

Greys, also referred to as Zeta Reticulans, Roswell Greys, or Grays, are purported extraterrestrial beings whose existence is discussed in ufological, paranormal, and New Age communities and who are named for their unique skin color. Forty-three percent of all reported alien encounters in the United States describe Grey aliens.

They are also used as colors. Graded on a scale of 0-10 for accessibility, greys that are 5 shades apart will always pass contrast standards when used togther.

Blend Palette

Blends are for closers.

Typography

Fonts

Headings

Headings use Styrene A, which is much wider and useful for emphasis and supplemental components. Only the Medium weight (font-weight: 500) is used.

var(--headline-font)

Body Text

Drip uses GT Walshiem (aka Gee Tee Worcestershire) as its primary typeface. GT Walsheim Regular (font-weight: normal|400) is the default weight, with Medium (font-weight: 600) used for buttons and other emphases.

var(--body-font)

Monospace Text

For code snippets and other such nerd shit, use Courier.

var(--monospace-font)

Type styles

Colors

To maintain accessibility and to support different themes, utilize the CSS variables below to color text.

var(--heading-color)for main headings.

var(--text-color)for subheads and strong tags.

var(--text-color-dim)for body copy.

Sizing

Font sizes should never drop below 14px for readability, except in cases of small lables, which often use 10px or 12px. Type baseline increases in increments of 6px, typically retaining between a 1.2 or 1.5 line-height.

For size guidelines, view Type Formatting below.

Voice

Headlines should be short and concise. When possible, make them fun. Main headings Capitalize Every Word, and all subheadings are in Sentence case. Keep paragraph text short and limber, but take the space you need to be explicit. Write in a seventh grade level.

Type Formatting

Thearticleelement and its correspondingsizeattribute will automatically size and space your content. This includes headings, paragraphs, form content, , and more. Use the options below to preview the formatting on the right.

Hover over text elements to view sizes.

Small Small articles are perfect for ...Medium Medium articles are perfect for ...Large Large articles are perfect for ...

Iconography

Drip uses a custom icon library, because we're hot shit. Using a combination of web components, font ligatures, and voodoo, you can simply drop in thedrip-iconelement, passing in the ligature of your desired icon as plain text. You can also style any plain text ligature using thevar(--icon-font)variable.

To learn how to add icons to the library, click here.

CSS Variables

We use CSS Variables to keep our styles and themes flexible. Find an index of our many variables to the right.

Variables should be designed with both a light mode (styled under the :root node by default) and a night mode (styled under html.theme--dark). Be sure to check your work in night mode.

Grid

The Drip application is laid out on a 12-column horizontal grid structure. Type and vertical positioning use a 12px baseline.

12px in this app, rememember that just in case we ever face to face and make contact the title held by me: pixel chief means what you think you saw you did not see.

Spacing

In order to keep layout and components separate, margins and paddings are often applied in a case-by-case basis, rather than on an web component. To maintain Will Smith's precious, precious 12px grid, margin and padding may be applied by adding abbreviated classes to any element in conjuction with units of 6px.

Example

For example, to add padding-top: 12px, margin-left: 48px, and margin-top: 12px to an element, use the classes pt-2, ml-8, and mt-2.

This works because of maths and abbreviations. pt means padding-top, ml means margin-left, and mt means margin-top. 2 * 6 = 12, and 8 * 6 = 48.

Inspect the element to the right to see these classes in action.

Horizontal spacing

Additionally, the mr-auto and ml-auto classes can be used to apply a value ofautoto the right and left of an element.

Mass spacing

pa- and ma- will apply the given value to all sides of an element (not just top, right, bottom, etc).

No spacing

Classes ending in -0 will unset the padding or margin on an element. Keep this in mind when adding margin or padding.

Page Templates

Any new pages built for Drip should use an established template. This keeps the app consistent and predictable (and in the future, responsive). New templates can be used as long as they are approved by the design team as a whole, and documented here.

Note: This is an evolving work in progress. Not all parts of the application are currently using this system. Throughout the application, you will encounter remnants of a past era hiding about and causing mischief. To learn more about the BEM-Frankenstein legacy design system that was Project Kentucky Goblins, click here.

Building Templates

Templates are built with the following elements:

Drip Bones

The outermost layer, this sits at the top level of thebodytag, below thedrip-headeranddrip-subnav.

This outer container structures and controls its subdivisions, communicating to them its size and layout information.

Build Bones

Section

Asectiontag is used immediately inside adrip-bonescomponent, and acts as one horizontal subdivision of a page.

It can have its own individual layout, width, and number of columns.

Sculpt a Section

Article

Anarticletag is used as the main internal piece of asectiontag, and can serve as the leftmost column in our layouts.

Erect an Article

Aside

Anasidetag is used as the rightmost column of asectiontag, and serves to fit larger areas of interactive content.

Assemble an Aside

Sidenav

Aside-navcomponent is a lefthand list of links for a particulardrip-bonescomponent. Typically, these will link you to asection.

Assemble a Sidenav
Components Individual building blocks of the UI.

Atomic Design

The Drip UI is made up of individual building blocks that fit together molecularly to form a cohesive organism (a radioactive one that rampages through New York). It follows the Atomic Design philosophy, keeping each piece small and modular, fitting into a larger whole. We use vanilla JavaScript Web Components to encapsulate and modularize each atomic element of our application.

To learn more about how to build and maintain Web Components for Drip, click here.

Text & Layout

Buttons

Modals & Flyouts

View Menudown_arrow

help_circleHelp

Initiate Paneltron 5000

Forms

Loading & Progress

Charts

Tables & Lists

Structural

Structural components are the web components that make up Page Templates. Here you'll find detailed explanations of each component that goes into building out individual templates.

Depreciated

There's are old and on their way out. These may be used in-app and need to be replaced. Once they are fully gone everywhere, they can be removed from this repo entirely.

Tooltip Menu

Tooltip menus are neat!

Stack Lists

stack it up

Number Card

Contributing to the icon library

1. Sign into Icomoon

To add an icon to the library, sign into Icomoon (using the credentials shared via LastPass) and open the Drip Iconography V2 project. This project contains our entire icon custom icon set. (Be careful! It's disconcertingly easy to f*&k up your life using Icomoon. Use the undo button when necessary.)

2. Import your icon

To import a custom icon to the Drip Custom Icons library, open the right-hand menu dropdown and select "Import to Set". Upload an SVG, specify any tags, and choose a class name that will be used in-app to identify this icon. For more information about how to use Icomoon, read the Icomoon Docs.

Be sure your icon is using the 32px grid.

3. Click "Generate Font"

When finished, click "Generate Font" from the bottom menu. This won't immediately generate anything, but will allow you to take the next step.

4. Add a ligature

Here, you can set the ligature you'd like to represent your new/updated icons. Ligatures should be short, simple, descriptive, and use only letters and underscores.

5. Increment the version number

Every time this font library is updated, open the Preferences menu and increment the Version number. Usually you'll only need to update the minor number. But if you've made a life-changing update, increment the major number as well.

6. Download the Iconography zip

When you're all ready and good to go, click the "Download" button from the bottom menu. This will download a zipped file,drip-iconography.zip.

7. Copy the font files and index

Unzip that trash and locate the two files below:

  • /fonts/drip-iconography.woff
  • /fonts/drip-iconography.woff2
  • /selection.json

Copy those files into your local UI-Components repo at the following path, overwriting the existing files.

  • /fonts/iconography/selection.json
  • /fonts/iconography/drip-iconography.woff2
  • /fonts/iconography/drip-iconography.woff2

8. Create a pull request

Follow the typical PR creation process and detail out when and how your new icon(s) should be used.

Adding Illustrations

To add a night mode responsive illustration to the collection, follow these steps.

  1. Create your illustration in this Sketch file on the<drip-illos>page.
  2. Simplify your layers and flatten strokes, combining as much as possible usingLayer > Combine > Flatten shapesand the basic pathfinder.
  3. Stick to theicon-dribbblelayer guidelines for sizing/spacing.
  4. Colors and lines will need to play well on light and dark backgrounds. Use CSS variables in the SVG code in order to accomplish this.
  5. Avoid large white fills in favor of subtracting out backgrounds in order to display properly on light and dark backgrounds.
  6. Export your artboard out as an.svgfile.
  7. Open the raw SVG file and paste the code into this tool to simplify it.
  8. Use the following options to give yourself the easiest time:
    • Whitespace: pretty
    • Style type: CSS
    • UncheckRemove default styles
  9. Remove the following elements from the code:
    • widthandheightattributes from thesvgtag
    • <title>tag
    • <desc>tag
  10. Clean up the CSS in the file and replace colors with appropriate (and minimal) CSS variables for night mode, such as:
    • var(--color-high-contrast)andvar(--color-no-contrast)for black or white lines.
    • var(--[specific-color-name]-high-contrast)andvar(--[specific-color-name]-low-contrast)for various colors.
  11. Determine a name for your SVG. Create a new.svgfile (or duplicate and replace an existing one) inui-components > src > illos. Name the file after your SVG's name, using camel_case and paste the raw SVG code in that file (see the other files in that directory for examples).
  12. Add the two necessary references to your new illustration inui-components > src > illustration-collection.js, following the existing references for an example.
  13. Lastly, add your new illustration toui-components > webcomponents > drip-illo > schema.jsin theprops.name.valuesarray, following the existing references for an example.

You're done! Celebrate with a luke warm glass of tap water and a slice of white bread!