Suite Header — Cayuse Design System

Examples

Suite header

Cayuse Sponsored Projects

html

<header class="cds-suite-header">
  <div class="cds-suite-header__brand">
    <span>Cayuse</span>
    <span>Sponsored Projects</span>
  </div>
  <button type="button" class="cds-user-menu" aria-expanded="false">
    <span>R. Alvarez</span>
    <span aria-hidden="true" class="fa fa-caret-down"></span>
  </button>
</header>

Figma properties

Property	Values	Notes
`Customer Logo?`	boolean	Whether the institution’s logo is shown.
`Customer Logos → Company`	UofPNW · Placeholder	Per-tenant logo.

Three constraints are annotated on the artboards:

The customer logo is capped at 40 × 40px and must fit a square box. Logos of other proportions are letterboxed, not stretched.
The user menu sits flush with the page edge, but keeps correct spacing on its right — see User Menu for the 24px rule.
The user’s name is dropped first when the viewport narrows, leaving the avatar and caret.

Usage

When to use it

Show it on every page, including login and error pages.
Constrain customer logos to the 40px square, preserving aspect ratio.
Keep the product name beside the Cayuse mark so the user knows which product they are in.
Drop the user’s name before the avatar when space runs out.

When not to use it

Do not put product-section navigation here — that is Product Navigation.
Do not stretch a customer logo to fill the square.
Do not let the header scroll away on long pages if it carries the only route out of the current product.
Do not add per-page actions to the suite header; those belong in the Page Heading.

Accessibility

Use <header> so it is exposed as a banner landmark — once per page.
The customer logo needs alt text naming the institution, or alt="" if the name appears beside it as text.
White on --color-blue-500 measures 11.81:1 — comfortable, and it needs to be, since this bar carries the smallest text on the page.
When the user’s name is hidden at narrow widths, the user-menu button still needs an accessible name that identifies it.

Tokens consumed

Token	Applied to	Resolves to
`--color-blue-500`	Bar background	`#253272`
`--color-white`	Text and glyphs	`#ffffff`
`--radius-3`	Customer logo corner	`3px`