# Classes Reference (Foundations)

Authoritative class reference derived from Storybook MDX. Prefer using classes for layout and styling; when tokens are needed, prefer Sass variables and mixins; use CSS custom properties only if explicitly requested.

## Flex

`rds-flex`, `rds-flex-align-baseline`, `rds-flex-align-center`, `rds-flex-align-end`, `rds-flex-align-lg-end`, `rds-flex-align-lg-start`, `rds-flex-align-start`, `rds-flex-align-stretch`, `rds-flex-auto`, `rds-flex-basis-1`, `rds-flex-basis-12`, `rds-flex-basis-auto`
`rds-flex-basis-full`, `rds-flex-center-center`, `rds-flex-col`, `rds-flex-col-reverse`, `rds-flex-end-stretch`, `rds-flex-grow`, `rds-flex-grow-md`, `rds-flex-initial`, `rds-flex-justify-around`, `rds-flex-justify-between`, `rds-flex-justify-center`, `rds-flex-justify-end`
`rds-flex-justify-evenly`, `rds-flex-justify-md-center`, `rds-flex-justify-md-end`, `rds-flex-justify-start`, `rds-flex-md-col`, `rds-flex-md-row`, `rds-flex-no-grow`, `rds-flex-no-shrink`, `rds-flex-no-shrink-sm`, `rds-flex-none`, `rds-flex-nowrap`, `rds-flex-row`
`rds-flex-row-reverse`, `rds-flex-shrink`, `rds-flex-sm-row`, `rds-flex-start-start`, `rds-flex-wrap`, `rds-flex-wrap-reverse`, `rds-inline-flex`

## Grid

`rds-body-01`, `rds-body-02`, `rds-col`, `rds-col-1`, `rds-col-2`, `rds-col-3`, `rds-col-ld`, `rds-col-md`, `rds-col-md-4-offset-2`, `rds-col-sd`, `rds-e-layout-max`, `rds-grid`
`rds-title-01`, `rds-title-02`

## Spacing

`rds-headline`, `rds-mb-16`, `rds-mt-48`, `rds-py-12`, `rds-spacin-global-4`, `rds-spacin-global-8`, `rds-spacing-global-112`, `rds-spacing-global-12`, `rds-spacing-global-120`, `rds-spacing-global-128`, `rds-spacing-global-16`, `rds-spacing-global-24`
`rds-spacing-global-32`, `rds-spacing-global-40`, `rds-spacing-global-48`, `rds-spacing-global-56`, `rds-spacing-global-6`, `rds-spacing-global-64`, `rds-spacing-global-72`, `rds-spacing-global-80`, `rds-spacing-global-88`, `rds-spacing-global-96`

## Typography

`rds-body-01`, `rds-body-01-bold`, `rds-body-01-underline`, `rds-body-02`, `rds-body-02-bold`, `rds-body-02-underline`, `rds-button-01`, `rds-button-02`, `rds-caption-01`, `rds-caption-01-bold`, `rds-caption-01-underline`, `rds-caption-02`
`rds-caption-02-bold`, `rds-caption-02-underline`, `rds-caption-tag`, `rds-font-style`, `rds-headline-00`, `rds-headline-00-ld`, `rds-headline-00-md`, `rds-headline-00-sd`, `rds-headline-00-xd`, `rds-headline-01`, `rds-headline-01-ld`, `rds-headline-01-md`
`rds-headline-01-sd`, `rds-headline-01-xd`, `rds-headline-02`, `rds-headline-03`, `rds-headline-04`, `rds-monospaced-body-01`, `rds-monospaced-body-01-bold`, `rds-monospaced-body-02`, `rds-monospaced-body-02-bold`, `rds-monospaced-caption-01`, `rds-monospaced-caption-01-bold`, `rds-monospaced-caption-02`
`rds-monospaced-caption-02-bold`, `rds-numbers-00`, `rds-numbers-01`, `rds-numbers-02`, `rds-numbers-03`, `rds-title-01`, `rds-title-01-ld`, `rds-title-01-md`, `rds-title-01-sd`, `rds-title-01-xd`, `rds-title-02`

## Colors

`rds-background-active`, `rds-background-default`, `rds-background-gradient-blue`, `rds-background-gradient-ivory`, `rds-background-gradient-orange`, `rds-background-grey`, `rds-background-navy`, `rds-background-sand`, `rds-background-white`, `rds-body-01-bold`, `rds-body-02`, `rds-body-02-bold`
`rds-color-background-default`, `rds-color-border-high`, `rds-color-border-high-inverse`, `rds-color-border-highlighted-active`, `rds-color-border-low`, `rds-color-border-low-inverse`, `rds-color-content-high`, `rds-color-content-high-inverse`, `rds-color-content-link`, `rds-color-content-medium`, `rds-color-content-medium-inverse`, `rds-color-content-state-disabled`
`rds-color-content-state-disabled-inverse`, `rds-color-extended-content-promo`, `rds-color-extended-surface-promo`, `rds-color-highlightedSurface-blueGradient`, `rds-color-highlightedSurface-ivoryGradient`, `rds-color-highlightedSurface-orangeGradient`, `rds-color-semantic-background-error`, `rds-color-semantic-background-information`, `rds-color-semantic-background-success`, `rds-color-semantic-background-warning`, `rds-color-semantic-content-error`, `rds-color-semantic-content-information`
`rds-color-semantic-content-success`, `rds-color-semantic-content-warning`, `rds-color-surface-grey`, `rds-color-surface-highlighted-active`, `rds-color-surface-navy`, `rds-color-surface-sand`, `rds-color-surface-white`, `rds-content-gradient-orange`, `rds-content-high`, `rds-content-high-i`, `rds-content-link`, `rds-content-medium`
`rds-content-medium-i`, `rds-content-numbers-highlight`, `rds-title-01`

## Elevation

`rds-body-02`, `rds-caption-02`, `rds-color-style-cover-darker`, `rds-color-style-cover-default`, `rds-mb-m`, `rds-style-effect-glass`, `rds-style-effect-overlay`, `rds-style-shadow-m`, `rds-style-shadow-negative`, `rds-style-shadow-s`, `rds-style-state-disabled`, `rds-title-01`

## Border & Radius

`rds-body-02`, `rds-radius-inputs`, `rds-radius-l`, `rds-radius-m`, `rds-radius-round`, `rds-radius-s`, `rds-title-01`

