---
title: "WayneUI: Same frame, every app."
description: "WayneUI is the Wayne State design system for C&IT applications: one set of brand tokens, one set of components, four consumer paths, and an accessibility bar that CI enforces rather than a README claims."
url: https://wayneui.apps.wayne.edu/
llms: https://wayneui.apps.wayne.edu/llms.txt
generator: Squire agent-ready
---

The Wayne State app stack, project 0

# Same frame. Every app.

WayneUI is the design system every Wayne State application hangs in: one set of brand tokens, one set of components, and four ways to use them. It replaces the Bootstrap 3 and jQuery package that has been in these applications since 2017.

[Pick your path](https://wayneui.apps.wayne.edu/#paths) [See every component](https://wayneui.apps.wayne.edu/components/)

[Overview](https://wayneui.apps.wayne.edu/overview/) [Documentation](https://wayneui.apps.wayne.edu/docs/) [Repository](https://git.wayne.edu/enterprise-apps/wayne-ui)

Course Registration

Select courses

Credits enrolled 12

Holds 1

Advising hold

Meet an advisor before registering for more than 12 credits.

**Available courses**

| Course | Seats | Status |
| --- | --- | --- |
| CSC 2110 | 12 of 40 | Open |
| MAT 2010 | 0 of 35 | Closed |
| ENG 3050 | 4 of 25 | Waitlist |

Registration

Select courses

Credits enrolled 12

CSC 2110 open

ENG 3050 waitlist

- **consumer paths, one set of markup**: 4
- **components in the gallery**: 50
- **color pairings measured every build**: 74
- **brand green on white, gated in CI**: 8.82:1
- **accessibility tests, none allowed to fail**: 1084

What it is

## One contract. Four ways to hang it.

The static HTML templates are the contract. Vue, Blade and the framework-free PHP helpers are each tested against the markup extracted from them, not against anyone's memory, so all four emit the same classes, the same ARIA and the same `data-wsu-*` hooks. Pick the path you are already on; the page is the same.

### One set of tokens

Brand green and gold, type, space and contrast, declared once and read by every path. A color added without a declared pairing is a color that fails the build.

### One set of components

50 of them, from Alert to Window, each with its accessibility reasoning written next to it.

### One contract

202 classes extracted from the two templates. A component is not finished until all four paths emit the same thing.

**Static HTML**

```
<link rel="stylesheet" href="wayne-ui.css">
<script src="wayne-ui-theme.js" type="module"></script>

<button class="wsu-btn wsu-btn--primary">Add course</button>
```

**Raw PHP**

```
<?php require 'wayne-ui.php'; ?>

<?= wsu_app_shell_open(['title' => 'Course Registration']) ?>
  <?= wsu_button('Add course', ['variant' => 'primary']) ?>
<?= wsu_app_shell_close() ?>
```

**Laravel and Blade**

```
<x-wsu::app-shell title="Course Registration">
    <x-wsu::page-header title="Select courses" />
    <x-wsu::button variant="primary">Add course</x-wsu::button>
</x-wsu::app-shell>
```

**Vue and Inertia**

```
<AppShell>
  <PageHeader title="Select courses" />
  <Button variant="primary">Add course</Button>
</AppShell>
```

What every one of them emits

`<button class="wsu-btn wsu-btn--primary">`

- Static HTML agrees
- Raw PHP agrees
- Blade agrees
- Vue agrees

The Wayne State app stack

## Wayne's World, stack edition

WayneUI is project 0, the interface layer: the page every one of these applications renders. The other members hang around it. Each one is a small frame with its own mark on a gold tab, and a line on how it touches WayneUI.

1. HELMETsets security headers
2. SESAMEsigns the user in
3. WayneUIrenders the page
4. PROCTORchecks the code
5. Preflightruns CI
6. Squiredeploys

- [![WayneUI logo: a rounded frame around a solid shape, with a gold tab on the lower edge](https://wayneui.apps.wayne.edu/brand/mark.svg) WayneUI The frame. Brand tokens, 50 components and the markup contract that every path is tested against.](https://wayneui.apps.wayne.edu/)
- [![WELD logo: a welder's helmet](https://wayneui.apps.wayne.edu/assets/front/marks/weld.png) WELD The Laravel, Inertia and Vue app with all of this already set up. Uses WayneUI's Vue path and its Blade layouts.](https://weld.apps.wayne.edu/)
- [![Sourdough logo](https://wayneui.apps.wayne.edu/assets/front/marks/sourdough.png) Sourdough Starts new apps with the stack already in place, raw PHP today, using WayneUI's standalone files.](https://sourdough.apps.wayne.edu/)
- [![HELMET logo](https://wayneui.apps.wayne.edu/assets/front/marks/helmet.png) HELMET Security headers and the CSP on every response an app sends.](https://helmet.apps.wayne.edu/)
- [![SESAME logo](https://wayneui.apps.wayne.edu/assets/front/marks/sesame.png) SESAME Sign-in through CAS, Entra ID or Drawbridge, in front of the WayneUI page.](https://sesame.apps.wayne.edu/)
- [![PROCTOR logo](https://wayneui.apps.wayne.edu/assets/front/marks/proctor.png) PROCTOR Checks the code before it ships, and warns about an outdated or forked WayneUI.](https://proctor.apps.wayne.edu/)
- [![Preflight logo](https://wayneui.apps.wayne.edu/assets/front/marks/preflight.png) Preflight GitLab CI components. Running WayneUI's accessibility gate on your app's rendered pages is planned.](https://preflight.apps.wayne.edu/)
- [![Booster logo](https://wayneui.apps.wayne.edu/assets/front/marks/booster.png) Booster Upgrades an app in hops, and carries the WayneUI 1.x to 2.x jump as an opt-in hop.](https://booster.apps.wayne.edu/)
- [![ADVISOR logo](https://wayneui.apps.wayne.edu/assets/front/marks/advisor.png) ADVISOR The stack's MCP server: read-only answers from the stack's own docs and policy instead of from memory.](https://advisor.apps.wayne.edu/)
- [![CREED logo](https://wayneui.apps.wayne.edu/assets/front/marks/creed.png) CREED The written standards and policy.json that PROCTOR, Rollcall and ADVISOR read.](https://creed.apps.wayne.edu/)
- [![Rollcall logo](https://wayneui.apps.wayne.edu/assets/front/marks/rollcall.png) Rollcall Every app answers present, with its versions. It only reports.](https://rollcall.apps.wayne.edu/)
- [![Squire logo](https://wayneui.apps.wayne.edu/assets/front/marks/squire.png) Squire The deploy kit for Citadel.](https://squire.apps.wayne.edu/)
- [![Drawbridge logo](https://wayneui.apps.wayne.edu/assets/front/marks/drawbridge.png) Drawbridge One sign-in client for every app on Citadel.](https://drawbridge.apps.wayne.edu/)
- [![Pinstripe logo](https://wayneui.apps.wayne.edu/assets/front/marks/pinstripe.png) Pinstripe The code style presets. It keeps your PHP tidy and leaves the interface to WayneUI.](https://pinstripe.apps.wayne.edu/)

Start here

## Pick the path you are already on

WayneUI does not ask an application to change how it is built. Least infrastructure first.

### Static HTML

No build step, no framework, no package manager.

```
><link rel="stylesheet" href="https://wayneui.apps.wayne.edu/v2/wayne-ui.css">><script type="module" src="https://wayneui.apps.wayne.edu/v2/wayne-ui-theme.js"></script>
```

[Static HTML guide](https://wayneui.apps.wayne.edu/docs/guide/static-html)

### Raw PHP

One require. No Composer, no autoloader, no container.

```
>require the standalone helpers.
```

[Raw PHP guide](https://wayneui.apps.wayne.edu/docs/guide/raw-php)

### Laravel and Blade

A provider, 28 Blade components, request-scoped breadcrumbs.

```
$composer require waynestate/wayne-ui$php artisan wayne-ui:install
```

[Blade guide](https://wayneui.apps.wayne.edu/docs/guide/laravel-blade)

### Laravel, Inertia and Vue

35 Vue 3 components, no CSS emitted, one plugin.

```
$pnpm add @waynestate/wayne-ui-vue @waynestate/wayne-ui-css
```

[Inertia and Vue guide](https://wayneui.apps.wayne.edu/docs/guide/laravel-inertia)

Starting a new app instead? [WELD](https://weld.apps.wayne.edu/) and [Sourdough](https://sourdough.apps.wayne.edu/) start one with WayneUI already wired in. The two page shells, internal and publicly accessible, are on the [templates page](https://wayneui.apps.wayne.edu/templates/).

Accessibility is a gate

## Hang it straight, then prove it.

These are pipeline jobs, not intentions. Nothing in the accessibility stages is allowed to fail, and no job downgrades a violation to a warning. A color added to the tokens without a declared contrast pairing fails the build.

[The numbers in full](https://wayneui.apps.wayne.edu/accessibility/)

- **Contrast**: 74 pairings, 52 held to 7:1
- **axe-core**: Zero violations, in both themes at 320, 768 and 1440 pixels
- **Lighthouse**: 100, and a lower score stops the build
- **Markup contract**: 202 classes, checked on all four paths

Still on 1.x?

## Same frame, new picture

The WayneUI before this one was written in 2017 as a Laravel package. It shipped Bootstrap 3.2.0 and jQuery 1.11.1, had one consumer path, and the last functional change was in 2019. It stopped, and the applications standing on it did not.

WayneUI 2

Select courses

Open Waitlist

Advising hold

Measured contrast, both themes, one contract.

**What changed between the 2017 package and this one**

| What | 2017 to 2019 | Now |
| --- | --- | --- |
| Consumer paths | One, and only if you were on Laravel | Four, from one set of markup |
| Front end dependencies | Bootstrap 3.2.0 and jQuery 1.11.1, copied in and frozen there | Tailwind and daisyUI, declared and updated like anything else |
| The university masthead | A copy, pasted once in 2017 | A dependency, updated when they update it |
| Accessibility | Asserted | Measured every release, in both themes |
| Last functional change | 2019 | This release |

1. Today
   Read [MIGRATING.md](https://git.wayne.edu/enterprise-apps/wayne-ui/-/blob/main/MIGRATING.md). It is the spec: the layout, the navigation helper, the breadcrumb calls and a class-name mapping.
2. This is a rewrite
   There is no compatibility shim and migrating is real work, because carrying the old class names forward would have meant carrying the reasons they were wrong.
3. Shipped
   [Booster](https://booster.apps.wayne.edu/) 1.7.0 has a `wayneui-1-to-2` hop, opt-in with `--wayneui`, that rewrites what can be rewritten and lists the rest.
4. Shipped
   [PROCTOR](https://proctor.apps.wayne.edu/) 0.3.0 warns about an outdated WayneUI (`wayneui-outdated`) and about forked views (`wayneui-forked-views`), and can fail the build on vendored copies when you opt in.

Hand it to your agent

## Job tickets

One prompt for whatever coding agent you use. Copy it, or open it in your agent. It says what WayneUI already provides, what the agent must leave alone, and to ask you before it guesses.

### Get started with WayneUI

Finds which of the four paths the app is on, installs WayneUI the way that path says, and renders one page in the shell. It won't touch your existing styles.

A prompt for your coding agent. Copy it as it stands:

```text
You are a coding agent helping a Wayne State University developer start using WayneUI, the Wayne State design system, in an existing application. The job is to install it and prove it renders, nothing more.

Read first:
- https://wayneui.apps.wayne.edu/llms.txt, the index of WayneUI's pages, each one as Markdown. Fetch the pages you need; do not work from memory.
- ADVISOR, the stack's MCP server, if it is connected: use it for the stack's rules and docs. If it is not connected, say so and work from the pages. How to add it: https://advisor.apps.wayne.edu/llms.txt
- The app's layout and one existing page, to see which of WayneUI's four consumer paths it is on: static HTML, raw PHP, Laravel with Blade, or Laravel with Inertia and Vue.

Task:
1. Say which path the app is on and why. If it could be two, ask me.
2. Install WayneUI the way that path says. For Laravel with Blade that is `composer require waynestate/wayne-ui` and then `php artisan wayne-ui:install`. For Vue it is `pnpm add @waynestate/wayne-ui-vue @waynestate/wayne-ui-css`. For static HTML and raw PHP, follow the guide on the page for that path.
3. Render one new page in WayneUI's page shell, using its components, so I can see it working.
4. Run the app's own checks, and report every line that is not a pass.

Constraints:
- Do not copy WayneUI's views or stylesheet into the app. Use the package or the hosted stylesheet.
- Do not restyle or remove anything that is already there. Add one page.
- Ask me before you guess, and before you add a Composer or npm package other than WayneUI.

Output: the path you chose, what you ran and what it said, the files you changed, then your questions.
```

### Add a WayneUI page to my app

Adds one page to an existing app using WayneUI's components, then runs the app's own checks. It won't restyle anything you did not ask about.

A prompt for your coding agent. Copy it as it stands:

```text
You are a coding agent adding one page to an existing Wayne State University application, using WayneUI, the Wayne State design system.

Read first:
- https://wayneui.apps.wayne.edu/llms.txt, the index of WayneUI's pages, each one as Markdown. Fetch the pages you need; do not work from memory.
- ADVISOR, the stack's MCP server, if it is connected: use it for the stack's rules and docs. If it is not connected, say so and work from the pages.
- The app's existing layout and one existing page, to see which of WayneUI's four consumer paths it is on: static HTML, raw PHP, Laravel with Blade, or Laravel with Inertia and Vue.

Task:
1. If I have not said what the page is for, its URL and who may see it, ask.
2. Build the page on the path the app is already on, using WayneUI's components and its page shell. Do not hand-write styles, and do not use a color or a size that is not a WayneUI token.
3. Use the same markup the other paths emit: WayneUI's static templates are the contract.
4. Run the app's own checks, and report every line that is not a pass.

Constraints:
- Do not copy WayneUI's views or stylesheet into the app. Use the package or the hosted stylesheet.
- Keep the page accessible: every control has a name, nothing relies on color alone, and the page works at 320 pixels wide and in the dark theme.
- Ask me before you guess, and before you add a Composer or npm package.

Output: the files you changed, the result of the checks, then your questions.
```

Also for agents: [this page as Markdown](https://wayneui.apps.wayne.edu/index.md), [llms.txt](https://wayneui.apps.wayne.edu/llms.txt) and [everything in one file](https://wayneui.apps.wayne.edu/llms-full.txt).