TOP

Dink

A design System for Deep Ink

Contents

Grid Layout

12 column grids for desktop and mobile with specifications

Typography

Typography style guide

Color

Brand colors and color usage specifications

Common UI Elements

And how to use them

Header

Header background specs

Navigation

Navigation tab design specsNavigation bar design specs

Buttons

All rectangular buttons have rounded corners: radius 4px

Button specifications including large display, FAB, primary, and secondary buttons

Filters & Search

Design specifications for filters and search components

Cards & Tiles

Cards and tiles specifications and examplesDesign specifications for social media cards and color swatch tiles

Iconography

Iconography and style guide

Language

Ink Tank is personal and intimate. Our users are making body altering decisions and connecting with their cultural identities. Our language and tone seeks to help users from diverse backgrounds feel safe, respected, supported, and represented. Use everyday language.
Avoid industry specific jargon, but feel free to introduce an industry specific term after it has been defined in an accessible way.

Avoid labels, generalizations, and assumptions about user skin color or cultural knowledge.
Avoid using a ‘default’ skin color or culture.

Tone of Voice

Our tone is an opportunity to build trust in our users.  We are confident in the our product and always striving to make it better and more inclusive and accurate. So, there is room for humility. We don’t assume to know more about our users’ skin or culture than they do. We exist to offer them additional resources for their use.

Accessibility & Inclusion

We welcome users of all backgrounds, cultures, races, and abilities.
Avoid using ‘default’ skin colors and cultures.
Contrast levels should strive for AAA ratings, but may fall short when icons are paired with text.

Robust

Our app should maintain functionality across all typical devices. Our app should stay light-weight and consider that our users have widely different connection speeds and locations around the world.

Imagery & Illustration

In app imagery is rarely used as decoration. Imagery is primarily reserved for user uploaded images and the cultural icon library.

Illustrations are to be used primarily when they serve a function for the user, such as a design sample. Avoid decorative illustrations. Use only the provided color palette, excluding the Burgundy which is reserved for interactive elements (unless the illustration is interactive).