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:
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:
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.
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.
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.
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.
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.
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.
Used as a replacement for Magenta in Night Mode. Fighter of the Dayman.
Displays that an action (user or system) completed successfully.
Primarily used to show informational messages. Ignoring will not break anything in the application.
Shows a warning. Ignoring this color *could* break something in the application.
Shows that something has broken. Gears aren't turning. Requires immediate attention from user to get things going again.
Used sparingly. A background color on elements that are active.
Orange is a weak warning, perhaps a strong suggestion. Generally represents Drip's opinion of how things should be done.
Primarily a color on the marketing site, used as a background color when you're tired of white.
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.
Blends are for closers.
Headings use Styrene A, which is much wider and useful for emphasis and supplemental components. Only the Medium weight (font-weight: 500) is used.
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.
For code snippets and other such nerd shit, use Courier.
To maintain accessibility and to support different themes, utilize the CSS variables below to color text.
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.
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.
The
Hover over text elements to view sizes.
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 the
To learn how to add icons to the library, click here.
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.
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.
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.
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.
Additionally, the mr-auto and ml-auto classes can be used to apply a value of
pa- and ma- will apply the given value to all sides of an element (not just top, right, bottom, etc).
Classes ending in -0 will unset the padding or margin on an element. Keep this in mind when adding margin or padding.
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.
Templates are built with the following elements:
The outermost layer, this sits at the top level of the
This outer container structures and controls its subdivisions, communicating to them its size and layout information.
A
It can have its own individual layout, width, and number of columns.
An
An
A
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.
View Menu
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.
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 menus are neat!
stack it up
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.)
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.
When finished, click "Generate Font" from the bottom menu. This won't immediately generate anything, but will allow you to take the next step.
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.
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.
When you're all ready and good to go, click the "Download" button from the bottom menu. This will download a zipped file,
Unzip that trash and locate the two files below:
/fonts/drip-iconography.woff/fonts/drip-iconography.woff2/selection.jsonCopy 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.woff2Follow the typical PR creation process and detail out when and how your new icon(s) should be used.
To add a night mode responsive illustration to the collection, follow these steps.
You're done! Celebrate with a luke warm glass of tap water and a slice of white bread!