Skip to main content

Main Content

Visual Guidelines

The following guidelines are meant to help designers and developers who are contributing new visual work to Decanter. To find out if visual work is already in progress on a similar component, please check our design backlog.

Criteria for acceptance for new work

New design work must meet the following criteria:

  • Must have clear use case and be reusable
  • Must be accessible and usable
  • Must be technically feasible
  • Decanter designers will do a design review

The following resources will help you.

Responsive grids

Our team has built grids for each range of breakpoints described in the kit. When you subscribe to the Stanford Design Library through your own Figma Project, you’ll have access to employ these grids on your own work through the Figma UI.

Review our responsive grids here

Modular spacing

In an attempt to provide designers a method to employ consistent spaces between UI objects (and to complete that concept through to code), our teams have constructed “modular spacers” across all ranges of breakpoints.

Review our modular spacers here

Typography

Typographic styles have been built to include a range of practicality across your components. As with the full Decanter Design System itself, our teams have worked hard to optimize the number of styles we’ve created to the most needed and used styles across digital communications.

These styles are deliberately generic and not tied to any semantic markup.

For example, Display A is not necessarily an H1, and Display B does not need to be the H2, or only style of H2 on any given page.

Another practical example is our choice to include two base paragraph styles: a “big paragraph text” style, and a “small paragraph text” style. We saw use of both across many design projects.

The “big” style provides the body copy option for long lengths of text running down a page, with font size that is readable without leaning in or squinting at your screen, and line height that is opened up to allow for the eye to rest in between jumping from one line of text to the next.

The “small” style is slightly smaller font size than the “big” style and with a tighter line height to be used as summary text in the condensed space of a card for example. This style should be used for 3-5 lines of copy at the most, and for line lengths that are foreshortened, again, like in a card. Unlike with the “big” style, the line height is tighter to help the eye track between short lines, to prevent losing your place.

Additional styles include “button text”, “displays C-E”, “caption”, “credit”, bullets, and number more.

Learn how to use typographic styles in Figma

Color

Included in the Stanford Design System are colors drawn directly from the Stanford Identity system. Like other tools in Decanter, colors from the library can be picked up and used in your projects as soon as you turn on the Stanford Design System library in Figma.

Learn more about Stanford color on identity.stanford.edu

Testing your design for accessibility

Stanford’s goal is to provide online content and applications that conform to WCAG (Web Content Accessibility Guidelines) 2.0 AA. It will be valuable for you to familiarize yourself with the Stanford Online Accessibility Policy and review the Basic Checks.

On the Tips and Tools pages, you’ll find useful articles and information about tools and approaches you can incorporate into your current workflow including color, contrast, css, fonts and typography, forms, headings, links, menus, page structure, tables, and visible focus.

Stanford uses AMP from Level Access for accessibility testing, although the tools listed here can be useful. All work on Decanter will need to pass tests for AMP before getting merged into Decanter. Please review steps listed in How to achieve accessibility before submitting new design work to Decanter.

Decanter Design System backlog

If you are interested in understanding what our priorities are for design development in Figma, you can find our backlog here.

If you are in need of design that you do not see included in this backlog please contact us on Slack for more information.