Strategies and conventions

• XS: 0 - 575px
• SM: 576 - 767px
• MD: 768 - 991px
• LG: 992 - 1199px
• XL: 1200 - 1499px
• 2XL: 1500px and up

We have customized the Tailwind theme to include all the colors from the Stanford Identity Guide to generate all the color-related utility classes your projects need, e.g., bg-cardinal-red, text-black, border-palo-alto.

Light and dark variants: For colors from the identity guide with light and dark variants, add -light or -dark to the end of the class name, e.g., bg-digital-red-light, text-lagunita-dark.

Variants of color black: We have 10 variants of black color available that correspond to the identity guide - -black, -black-90 (the number after the last - is the percentage, so this is 90% black), -black-80, -black-70, -black-60, -black-50, -black-40, -black-30, -black-20, -black-10. We also have -black-true for #000000.

Color opacity: To apply opacity to a color, add / and a number to the end of the class name, e.g., bg-digital-red/50 (digital red at 50% opacity), text-white/20 (white at 20% opacity). See the Tailwind documentation on changing color opacity.

We have 5 font family classes available that allow one to use Decanter’s font stack.

Note: You will still need to import these fonts on your own.

All fonts except the Stanford ligature font are available on Google Fonts. The Stanford font is available through the University Communications CDN.

• font-sans
  Font stack: Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif
  Example: The quick brown fox jumps over the lazy dog.
• font-serif
  Font stack: Source Serif Pro, Georgia, Times, Times New Roman, serif
  Example: The quick brown fox jumps over the lazy dog.
• font-stanford (use for Stanford logo)
  Font stack: Stanford, Source Serif Pro, Georgia, Times, Times New Roman, serif
  Example: Stanford University
• font-slab
  Font stack: Roboto Slab, Georgia, Times, Times New Roman, serif
  Example: The quick brown fox jumps over the lazy dog.
• font-mono
  Font stack: Roboto Mono, Menlo, Courier New, monospace
  Example: The quick brown fox jumps over the lazy dog.

In Decanter, we use a fluid “centered container” (cc class) to constrain the width of the content area on a website by setting proportional “screen edge” at each breakpoint.

Screen edge is the minimal amount of space between the outside edge of this centered container and the edge of the browser window. Its margins are set at each breakpoint, up to and not including the largest breakpoint (2XL). The total width of the centered container is not fixed, but rather expands (fluid) as the viewport expands up to 1700px. At which point, the centered container reaches its maximum width of 1500px with screen edge of 100px margin on either side of the container.

Screen edge values are curated and do not follow a mathematical pattern:

• XS: 20px
• SM: 30px
• MD: 50px
• LG: 80px
• XL and 2XL up to 1700px: 100px

We have curated grid gaps that are proportional within each breakpoint range. Our current values:

• XS to MD: 20px
• LG: 36px
• XL: 40px
• 2XL: 48px

The Decanter design system comes with a responsive spacing strategy. The provided values will scale up and down with screen sizes to maintain optimal use of whitespace and a positive developer experience.

Prefixes:

rs-m- for margin
rs-mb- for margin bottom
rs-mt- for margin top
rs-mr- for margin right
rs-ml- for margin left
rs-mx- for margin left and right
rs-my- for margin top and bottom
rs-p- for padding
rs-pb- for padding bottom
rs-pt- for padding top
rs-pr- for padding right
rs-pl- for padding left
rs-px- for padding left and right
rs-py- for padding top and bottom

Example

<!-- You can use the responsive spacing classes like so, but you wouldn't use all of them at once. -->
<div class="rs-m-0 rs-mb-1 rs-mt-2 rs-mr-3 rs-ml-4 rs-mx-5 rs-my-6 rs-p-0 rs-pb-1 rs-pt-2 rs-pr-3 rs-pl-4 rs-px-5 rs-py-6">
  <p>Responsive spacing</p>
</div>

The Decanter Design System has a different spacing system than the core Tailwind CSS framework. We have a set of margin and padding classes. For more information about how we customize our spacing please visit:

• https://tailwindcss.com/docs/customizing-spacing
• https://tailwindcss.com/docs/padding
• https://tailwindcss.com/docs/margin
• https://tailwindcss.com/docs/space-between

In Decanter v7, we added five custom classes that give users some flexibility over the base font sizes of their sites. These classes also provide responsive font sizes for smaller breakpoints. Most of the other typography classes and base settings in Decanter use the em units so that they scale appropriately when the base font size changes, e.g., the font size of a default H1 would be larger at all breakpoints if you use the basefont-23 class compared to the basefont-19 class for the document.

Other than using these classes in the root HTML tag, one could also use them within regions or components, e.g., to set the base font size of a card, or a form. Below are the five classes available:

Note: The HTML root font size is set to 10px in Decanter’s base configuration, thus, 1rem = 10px.

• basefont-19
  • XS to SM: 1.6rem
  • MD to XL: 1.8rem
  • 2XL: 1.9rem
• basefont-20
  • XS to SM: 1.8rem
  • MD to XL: 1.9rem
  • 2XL: 2rem
• basefont-21
  • XS to SM: 1.8rem
  • MD to XL: 1.9rem
  • 2XL: 2.1rem
• basefont-22
  • XS to SM: 1.8rem
  • MD to XL: 2rem
  • 2XL: 2.2rem
• basefont-23
  (This is the setting we use for the Alumni homesite and Giving websites)
  • XS to SM: 1.8rem
  • MD to XL: 2.1rem
  • 2XL: 2.3rem

Modular typography provides a convenient way to scale font sizes and keep them proportional for all breakpoints. The “modular” part comes from the modular scale concept, which is a set of numbers that increase by a fixed ratio or multiplier between them. If this multiplier is bigger, the series of numbers increases faster, i.e., each step is further apart.

In Decanter, the modular typography classes use the em unit and we set type-0 (type stands for typography) to equal 1em, meaning if you use the basefont-23 class (see previous section on base font size) in the root, type-0 would be 2.3rem or 23px. From then on, we provide 9 typography steps from type-1 to type-9 with a fixed ratio (modular scale multiplier) between each step.

We also realize that font sizes should go up at a different rate between mobile, tablet and desktop breakpoints. It makes sense to have really large “splash” typography in the hero banner on the desktop version of a site that is e.g., 160px, which would look enormous on a phone screen. For this reason, we have 3 different modular scale multipliers for the different device sizes as below:

• Mobile (XS-SM): 1.15
• Tablet (MD): 1.2
• Desktop (LG to 2XL): 1.25

What does this all mean? Let’s look at an example. Let’s say we using the class type-7 for a hero banner headline, below would be the rendered font sizes at each breakpoint range assuming one uses the basefont-23 class (18px for XS-SM, 21px for MD-XL, 23px for 2XL) in root:

• Mobile: 18px * 1.15⁷ = 48px (base font size for mobile multiply by 1.15 7 times since we’re on step #7)
• Tablet: 21px * 1.2⁷ = 75px
• Desktop between LG to XL = 21px * 1.25⁷ = 100px
• Desktop from 2XL breakpoint and up: 23px * 1.25⁷ = 109px

As you can see, by applying the single modular typography class type-7 to the headline, you get an appropriately sized typography element for all breakpoint ranges.

• display
• card-paragraph
• big-paragraph
• intro-text
• splash
• caption
• credit

We use Heroicons for many of our projects that use Decanter v7. Heroicons is developed by the Tailwind CSS team and we found it to pair well with the Tailwind utilities, e.g., you can use classes like text-cardinal-red or w-30 to style the icons. We also use FontAwesome in some of our projects for a larger variety of icons as well as social media/brand icons.