Ci logo

User Experience

Core Elements

Core web elements at CustomInk represent a combination of our brand guidelines and standard web best practices. Be sure to check out the Brand Resource Center for explanations of how we selected our fonts and colors and what they represent in our visual brand identity. The Brand Checklist is also a useful resource when reviewing UX design work. We want to represent that brand accurately while ensuring usability and accomplishing key goals, such as increasing save and completion rates, for the products we work on.

Typography

View Technical Documentation

Fonts, Weights & Styles

CustomInk uses two fonts and two font weights across the site. Museo Sans is our primary font. It’s used for all page copy (paragraphs, lists, button text, etc.), as well as lower level headings (h4-h6). Museo Slab is used for our main headings (h1-h3).

You can find additional details on the selection and use of our typography in the Brand Resource Center.

Our base font size is 1rem = 16px. Our normal font weight is 300 and strong/bold is 500. Strong/bold copy should be used sparingly. Our h1 and h4 headings, as well as form labels, use the 500 font weight.

Headings

CustomInk has heading styles for h1 to h6 HTML tags. Different headings should be used to indicate level of importance of the corresponding content section from most (h1) to least (h6) importance.

Heading tags are currently used inconsistently across CustomInk.com today, but we want to work toward the headings representing hierarchy of the content on the page. Using the headings we have today, you may find that an H1 works well as a page header but you need to use h4 or a brown version of an h2 or h3 for subheadings to make sure the page isn’t too orange, such as on the Your Accounts page. We’ll work toward more consistent heading usage after we get a base version of our responsive style guide out.

Our current headings display as follows. Note that the headings are responsive and scale down at the small (mobile) breakpoint range.

Heading One

sm: font size 1.75rem; line height 2.25rem
md +: font size 2rem; line height 2.5rem

Heading Two

sm: font size 1.5rem; line height 2rem
md +: fonts size 1.75rem; line height 2.25rem

Heading Three

sm: font size 1.125rem; line height 1.5rem
md +: fonts size 1.5rem; line height 1.5rem

Heading Four

sm: font size 1.125rem; line height 1.5rem
md +: fonts size 1.25rem; line height 1.5rem

Heading Five

sm: font size 1.125rem; line height 1.5rem
md +: fonts size 1.25rem; line height 1.5rem

Heading Six

sm: font size 1rem; line height 1.5rem
md +: fonts size 1.125rem; line height 1.5rem

Colors

View Technical Documentation

You can find details regarding our primary and secondary brand color philosophy in the Brand Resource Center. Brand primary colors are orange, red and white. Brand secondary colors are cream, brown and blue and used for utility rather than as a requirement.

In terms of product design, you’ll see brown used for paragraph text and blue used for primary buttons. One of our main challenges for usability is representing a red and orange brand while not making headers, form fields, etc. look like they are in an error or alert state. White space and the use of secondary colors are key for this.

Our default hyperlink style is red with a blue hover state. This is used in the majority of hyperlink cases on the site and works well on a white or light background color.

This is a link.

A less common hyperlink use case is white underlined text on a dark background, such as red, with the same style for the hover state. One example of this is the red “We Believe T-shirts Unite” banner at the top of the full footer.

Add screenshot

View Technical Documentation

Link Lists can be found in the footer, product section of the homepage, product catalog and on SEO landing pages. Generally used for product lists,secondary navigation and/or to add SEO content, they use brown text instead of our hyperlink red, which is overwhelming in a group of links, but the same blue hover.

Unordered and Ordered Lists

View Technical Documentation

CustomInk uses bulleted and numbered lists sparingly in page content. They follow traditional HTML styling and use our paragraph font and color.

Iconography

View Technical Documentation

Iconography should be used sparingly on the site so when used strategically they have a strong impact. Iconography is used in our header and footer to draw attention to customer service contact information.

When using iconography in product design work, consider whether the icon works well at all breakpoints/screen sizes. Some of the current CustomInk icon set will not work well on small devices. Some iconography has already been added to StyleBitz, but our icon set and implementation method will be reviewed after we complete a base version of our responsive style guide.

Buttons

View Technical Documentation

Primary Buttons

Use a blue primary button when there is a single CTA on the page or to indicate the primary CTA when there are other buttons/CTAs on the page.

Alternate Primary Buttons

This button is used:

Discuss with UX/Visual team if we want to keep or remove this. Valid use cases?

Secondary Buttons

Use a cream secondary button paired with a Primary Button or Alternate Primary Button for Secondary CTAs. Multiple Secondary Buttons may be used on the same page.

Add screenshots or links to examples

Tertiary Buttons

The tertiary button style matches our standard red hyperlink with blue hover state and should only be used paired with at least one primary/secondary button. Some scenarios may warrant a primary button and a tertiary button (skipping the secondary button), such as a submit/save button paired with a cancel button. Edit CTAs in form/process summaries prior to submit may also warrant a tertiary button style. Log in pages may use a tertiary button for “forgot password.”

Add screenshots or links to examples