# Decanter Custom CSS Classes Index

This index lists all custom CSS classes provided by the Decanter design system (beyond core Tailwind classes), organized by category.

## Component Utilities

-### Form Components (see Components > Form Elements, Components > Buttons, Components > Input)
- `.button` — Default button style.
- `.input` — Custom form input styling.
- `.radio` — Styled radio control (2.4rem, 3px border, uses `digital-blue` border color).
- `.checkbox` — Styled checkbox control (2.4rem, 3px border, uses `digital-blue` border color).
- `.radio:checked`, `.checkbox:checked` — Checked state (fills control with `digital-blue`).
- `.fieldset` — Removes default fieldset border (`border: 0`).
- `.label` — Block label styling (uses Decanter input font size).
- `.legend` — Legend styling (bold, display line-height).
- `.textarea` — Styled textarea (16rem height, border + input font-size and line-height).
- `.select` — Styled select control (border, white background, input font-size and line-height).

### Layout Components
- `.centered-container`, `.cc` — Constrains content to centered max-width container. (see Components > Centered Container)
- `.grid-gap` — Adds responsive gap between grid items. (see Components > Grid Gap)
- `.embed-container` — Maintains responsive aspect ratio for embedded media. _(deprecated — use `aspect-[16/9]` with `size-full` on the embed; will be removed in v8)_ (see Components > Embed Container)
- `.aspect-w-{1–16}`, `.aspect-h-{1–16}`, `.aspect-none` — Aspect-ratio boxes from `@tailwindcss/aspect-ratio`, using the `padding-bottom` hack with absolutely positioned children. _(deprecated — the dependency is dropped in v8; use `aspect-[16/9]` with `size-full` on the child)_
- `.rs-*` — Responsive spacing utilities (`rs-m-`, `rs-p-` variants). (see Components > Responsive Spacing)
  - `.rs-m-{scale}`: responsive margin (all sides)
  - `.rs-p-{scale}`: responsive padding (all sides)
  - `.rs-mt-{scale}`, `.rs-mr-{scale}`, `.rs-mb-{scale}`, `.rs-ml-{scale}`: responsive margin top/right/bottom/left
  - `.rs-mx-{scale}`, `.rs-my-{scale}`: responsive margin x-axis / y-axis
  - `.rs-pt-{scale}`, `.rs-pr-{scale}`, `.rs-pb-{scale}`, `.rs-pl-{scale}`: responsive padding top/right/bottom/left
  - `.rs-px-{scale}`, `.rs-py-{scale}`: responsive padding x-axis / y-axis

### Navigation & Interactive Components
- `.list-unstyled` — Removes default list styling. (see Components > Lists)
- `.list-horizontal` — Creates horizontal inline lists. (see Components > Lists)
- `.skiplink`, `.skiplinks` — Hidden skip navigation links that appear on focus. (see Components > Skiplink)
- `.stretched-link` — Expands a link to cover its parent container. (see Components > Stretched Link)

### Brand Component
- `.logo` — Displays Stanford logo text with custom glyphs. (see Components > Logo)

### Typography Utilities
- `.type-{n}` — Modular typography classes where `n` is a step from `0` to `9` (e.g. `.type-0`, `.type-1`, … `.type-9`). (see Components > Modular Typography)
- `.fluid-type-{n}` — Fluid typography classes where `n` is a step from `0` to `10` (e.g. `.fluid-type-0` … `.fluid-type-10`). (see Fluid Typography)
- `.types` — Base display styles (see Components > Styles)
- `.intro-text` — Introductory paragraph style
- `.splash-text` — Large display/splash typography
- `.quote-text` — Block quote styling (italic)
- `.caption`, `.credits` — Small caption and credit styles. `.credits` _(deprecated — small italic text is not recommended for accessibility; use `text-[max(1.6rem,0.9em)] leading-snug italic text-cool-grey`; will be removed in v8)_
- `.subheading` — Subheading style
- `.big-paragraph` — Slightly larger paragraph style for long-form
- `.card-paragraph` — Compact paragraph style for cards
- `.basefont-19`, `.basefont-20`, `.basefont-21`, `.basefont-22`, `.basefont-23` — Base font-size helpers (responsive)
- `.wysiwyg` — Sets vertical rhythm (spacing) for unstructured rich text content (see Components > WYSIWYG)
- `.text-shadow`, `.text-shadow-md`, `.text-shadow-lg` — Text shadow effects. (see Components > Text Shadow)

### Table utilities
- `.table-borderless` — Table without borders. (see Components > Borderless)

## Utility Classes

### Visual Effects
- `.backface-hidden` — Hides the back face of elements during 3D transforms. (see Utilities > Backface Visibility)

### Color Utilities
- **Text & Background Colors**
  - **Cardinal Red**: `.text-cardinal-red`, `.bg-cardinal-red`, `.border-cardinal-red`
    - `.text-cardinal-red-light`, `.bg-cardinal-red-light`, `.border-cardinal-red-light`
    - `.text-cardinal-red-dark`, `.bg-cardinal-red-dark`, `.border-cardinal-red-dark`
    - `.text-cardinal-red-xdark`, `.bg-cardinal-red-xdark`, `.border-cardinal-red-xdark`
    - `.text-cardinal-red-xxdark`, `.bg-cardinal-red-xxdark`, `.border-cardinal-red-xxdark`
  - **Black**: `.text-black`, `.bg-black`, `.border-black`
    - `.text-black-90`, `.bg-black-90`, `.border-black-90`
    - `.text-black-80`, `.bg-black-80`, `.border-black-80`
    - `.text-black-70`, `.bg-black-70`, `.border-black-70`
    - `.text-black-60`, `.bg-black-60`, `.border-black-60`
    - `.text-black-50`, `.bg-black-50`, `.border-black-50`
    - `.text-black-40`, `.bg-black-40`, `.border-black-40`
    - `.text-black-30`, `.bg-black-30`, `.border-black-30`
    - `.text-black-20`, `.bg-black-20`, `.border-black-20`
    - `.text-black-10`, `.bg-black-10`, `.border-black-10`
    - `.text-black-true`, `.bg-black-true`, `.border-black-true`
  - **Cool Grey**: `.text-cool-grey`, `.bg-cool-grey`, `.border-cool-grey`
  - **Digital Red**: `.text-digital-red`, `.bg-digital-red`, `.border-digital-red`
    - `.text-digital-red-light`, `.bg-digital-red-light`, `.border-digital-red-light`
    - `.text-digital-red-xlight`, `.bg-digital-red-xlight`, `.border-digital-red-xlight`
    - `.text-digital-red-dark`, `.bg-digital-red-dark`, `.border-digital-red-dark`
  - **Digital Blue**: `.text-digital-blue`, `.bg-digital-blue`, `.border-digital-blue`
    - `.text-digital-blue-light`, `.bg-digital-blue-light`, `.border-digital-blue-light`
    - `.text-digital-blue-dark`, `.bg-digital-blue-dark`, `.border-digital-blue-dark`
    - `.text-digital-blue-vivid`, `.bg-digital-blue-vivid`, `.border-digital-blue-vivid`
  - **Digital Green**: `.text-digital-green`, `.bg-digital-green`, `.border-digital-green`
    - `.text-digital-green-light`, `.bg-digital-green-light`, `.border-digital-green-light`
    - `.text-digital-green-dark`, `.bg-digital-green-dark`, `.border-digital-green-dark`
    - `.text-digital-green-bright`, `.bg-digital-green-bright`, `.border-digital-green-bright`
  - **Palo Alto**: `.text-palo-alto`, `.bg-palo-alto`, `.border-palo-alto`
    - `.text-palo-alto-light`, `.bg-palo-alto-light`, `.border-palo-alto-light`
    - `.text-palo-alto-dark`, `.bg-palo-alto-dark`, `.border-palo-alto-dark`
  - **Palo Verde**: `.text-palo-verde`, `.bg-palo-verde`, `.border-palo-verde`
    - `.text-palo-verde-light`, `.bg-palo-verde-light`, `.border-palo-verde-light`
    - `.text-palo-verde-dark`, `.bg-palo-verde-dark`, `.border-palo-verde-dark`
  - **Olive**: `.text-olive`, `.bg-olive`, `.border-olive`
    - `.text-olive-light`, `.bg-olive-light`, `.border-olive-light`
    - `.text-olive-dark`, `.bg-olive-dark`, `.border-olive-dark`
  - **Bay**: `.text-bay`, `.bg-bay`, `.border-bay`
    - `.text-bay-light`, `.bg-bay-light`, `.border-bay-light`
    - `.text-bay-dark`, `.bg-bay-dark`, `.border-bay-dark`
  - **Sky**: `.text-sky`, `.bg-sky`, `.border-sky`
    - `.text-sky-light`, `.bg-sky-light`, `.border-sky-light`
    - `.text-sky-dark`, `.bg-sky-dark`, `.border-sky-dark`
  - **Lagunita**: `.text-lagunita`, `.bg-lagunita`, `.border-lagunita`
    - `.text-lagunita-light`, `.bg-lagunita-light`, `.border-lagunita-light`
    - `.text-lagunita-dark`, `.bg-lagunita-dark`, `.border-lagunita-dark`
    - `.text-lagunita-20`, `.bg-lagunita-20`, `.border-lagunita-20`
    - `.text-lagunita-40`, `.bg-lagunita-40`, `.border-lagunita-40`
  - **Poppy**: `.text-poppy`, `.bg-poppy`, `.border-poppy`
    - `.text-poppy-light`, `.bg-poppy-light`, `.border-poppy-light`
    - `.text-poppy-dark`, `.bg-poppy-dark`, `.border-poppy-dark`
  - **Spirited**: `.text-spirited`, `.bg-spirited`, `.border-spirited`
    - `.text-spirited-light`, `.bg-spirited-light`, `.border-spirited-light`
    - `.text-spirited-dark`, `.bg-spirited-dark`, `.border-spirited-dark`
  - **Illuminating**: `.text-illuminating`, `.bg-illuminating`, `.border-illuminating`
    - `.text-illuminating-light`, `.bg-illuminating-light`, `.border-illuminating-light`
    - `.text-illuminating-dark`, `.bg-illuminating-dark`, `.border-illuminating-dark`
  - **Plum**: `.text-plum`, `.bg-plum`, `.border-plum`
    - `.text-plum-light`, `.bg-plum-light`, `.border-plum-light`
    - `.text-plum-dark`, `.bg-plum-dark`, `.border-plum-dark`
  - **Brick**: `.text-brick`, `.bg-brick`, `.border-brick`
    - `.text-brick-light`, `.bg-brick-light`, `.border-brick-light`
    - `.text-brick-dark`, `.bg-brick-dark`, `.border-brick-dark`
  - **Archway**: `.text-archway`, `.bg-archway`, `.border-archway`
    - `.text-archway-light`, `.bg-archway-light`, `.border-archway-light`
    - `.text-archway-dark`, `.bg-archway-dark`, `.border-archway-dark`
  - **Stone**: `.text-stone`, `.bg-stone`, `.border-stone`
    - `.text-stone-light`, `.bg-stone-light`, `.border-stone-light`
    - `.text-stone-dark`, `.bg-stone-dark`, `.border-stone-dark`
  - **Foggy** _(deprecated — use Fog; will be removed in v8)_: `.text-foggy`, `.bg-foggy`, `.border-foggy`
    - `.text-foggy-light`, `.bg-foggy-light`, `.border-foggy-light`
    - `.text-foggy-dark`, `.bg-foggy-dark`, `.border-foggy-dark`
  - **Fog**: `.text-fog`, `.bg-fog`, `.border-fog`
    - `.text-fog-light`, `.bg-fog-light`, `.border-fog-light`
    - `.text-fog-dark`, `.bg-fog-dark`, `.border-fog-dark`
  - **Social Media Colors** _(deprecated — define these in your own project config; will be removed in v8)_: `.text-facebook`, `.bg-facebook`, `.border-facebook`
    - `.text-twitter`, `.bg-twitter`, `.border-twitter`
    - `.text-instagram`, `.bg-instagram`, `.border-instagram`
    - `.text-linkedin`, `.bg-linkedin`, `.border-linkedin`
    - `.text-youtube`, `.bg-youtube`, `.border-youtube`

### Link Styling
- `.link-underline`, `.link-no-underline` — Controls link text decoration. (see Utilities > Link Underline)
- `.link-regular`, `.link-semibold`, `.link-bold` — Sets link font weight. (see Utilities > Link Font Weight)

### Typography Helpers
- `.break-words` — Enhanced `word-break: break-word` utility. (see Utilities > Break Words)
- `.text-vertical-lr` — Sets vertical left-to-right text orientation. _(deprecated — use `[writing-mode:vertical-lr]`; will be removed in v8)_ (see Utilities > Writing Mode)

## Theme Extensions

- **Spacing Scale** — Extended margin, padding, gap, and width utilities (see Theme > Spacing).
  - `px`, `0`
  - `01em` – `09em` (0.1em increments)
  - `1` – `50` (0.1rem increments)
  - Additional: `55`, `58`, `60`, `61`, `65`, `70`, `72`, `75`, `76`, `80`, `85`, `90`, `95`, `100`, `108`, `110`, `120`, `114`, `126`, `130`, `133`, `140`, `150`, `160`, `162`, `170`, `171`, `180`, `190`, `200`, `216`, `220`, `228`, `230`, `240`, `250`, `260`, `270`, `280`, `290`, `300`, `350`, `400`, `450`, `500`, `550`, `600`, `650`, `700`, `750`, `800`, `850`, `900`, `950`, `1000`, `1100`, `1200`, `1300`, `1400`, `1500`
- **Border Width** — `.border-3`, `.border-5`, `.border-6`, `.border-7` (see Theme > Border Width)
- **Border Radius** — `.rounded` default set to `0.3rem` (see Theme > Border Radius)
- **Gap Scale** — `xs` (20px), `lg` (36px), `xl` (40px), `2xl` (48px) (see Theme > Gap)
- **Font Size Scale** — `.text-11` – `.text-30` (see Theme > Font Size), `.text-m0` – `.text-m9`, `.text-09em`, `.-text-m1` _(deprecated — use `.type-0` – `.type-9`, or an arbitrary value such as `text-[.9em]`; will be removed in v8)_
- **Font Weight Scale** — `.font-regular` _(deprecated — use `.font-normal`; will be removed in v8)_ (see Theme > Font Weight)
- **Line Clamp** — `.line-clamp-7` – `.line-clamp-12` (see Theme > Line Clamp)
- **Line Height** — `.leading-tight`, `.leading-display`, `.leading-snug`, `.leading-cozy`, `.leading` (default), `.leading-half`, `.leading-trim` (see Theme > Line Height)
- **Max Width** — `.max-w-10` – `.max-w-1000`, `.max-w-prose-wide` (see Theme > Max Width)
- **Transition Duration** — sets the duration implied by `.transition`, `.transition-colors` and the other `transition-*` utilities to 250ms (Tailwind's default is 150ms). This adds no class of its own; to set a duration explicitly use Tailwind's `.duration-*` scale or an arbitrary value like `.duration-[400ms]`. (see Theme > Transition Duration)
- **Screens (Breakpoints)** — `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl` (see Theme > Screens)
- **Font Family** — `font-mono` _(deprecated — Decanter's Roboto Mono stack is removed in v8; the class remains with Tailwind's default stack)_, `font-sans`, `font-serif` _(both keep Source Sans 3 / Source Serif 4; their deprecated Source Sans Pro / Source Serif Pro fallbacks are removed in v8)_, `font-slab` _(deprecated — removed in v8)_, `font-stanford` (see Theme > Font Family)

## Variants

Custom variants added by Decanter for enhanced styling:
- `hocus:` — Applies on hover and focus.
- `hocus-visible:` — Applies on hover and `focus-visible`.
- `group-hocus:` / `group-hocus-visible:` / `group-hocus-within:` — Applies when parent `.group` is hovered/focused.
- `children:` / `children-hover:` / `children-focus:` / `children-focus-visible:` — Targets direct children in given states. _(deprecated — use Tailwind's `*:` variant: `*:`, `hover:*:`, `focus:*:`, `focus-visible:*:`; will be removed in v8)_ (see Custom Variants)

## Removed Classes

Classes that existed in an earlier v7 release and no longer generate any CSS.

### `.accessibility-hidden`, `.a11y-hidden`

**Removed in v7.5.0.** Use Tailwind's [`aria-hidden:` variant](https://tailwindcss.com/docs/hover-focus-and-other-states#aria-states) instead — it compiles to the same `[aria-hidden="true"] { display: none }` these classes produced, so the swap is exact.

```html
<!-- Before -->
<span class="a11y-hidden" aria-hidden="true">Text</span>

<!-- After -->
<span class="aria-hidden:hidden" aria-hidden="true">Text</span>
```

**Check your markup before upgrading.** This removal does not break the build — any element that relied on these classes simply becomes visible. Search your templates for `a11y-hidden` and `accessibility-hidden`.

These were removed outright rather than deprecated because they were almost never used, and the class alone did nothing.

Note that earlier documentation described these as hiding content visually while keeping it available to screen readers. That was never their behavior — they hid content from everyone. If that screen-reader behavior is what you were after, use Tailwind's `sr-only` (with `focus:not-sr-only` for skip links) rather than a substitute for these classes.

## Breakpoints

Available breakpoints prefixes for Decanter:
- `sm:` — min-width: 576px
- `md:` — min-width: 768px
- `lg:` — min-width: 992px
- `xl:` — min-width: 1200px
- `2xl:` — min-width: 1500px
- `3xl:` — min-width: 1700px
- `4xl:` — min-width: 2000px