Example institution with a deliberately long name

Presentation only

Synthetic preview · No account, membership, or permissions

Visual preview only. All examples are synthetic. Changing the layout affects presentation, never identity, permissions, or product access.

Shared UI · Synthetic catalog

Familiar design. Clear purpose.

A bounded preview of the shared shell, components, and accessible interaction states. No student data, Analytics charts, or live product actions are shown.

Presentation layout only

These are layout examples, not a role switcher. The same public preview remains visible in both.

Reusable components

App-owned · No new UI dependency

Actions and status

Only the local example reset below changes state. Disabled examples do not represent product actions.

Success exampleAttention exampleError exampleNeutral example

Color and surface

Current dashboard tokens, not the older design-kit values.

Primary#6d3eeb
Primary hover#5730c8
Stage#3c1b63
Canvas#f4f6fb
Brand tint#f0ebff
Stage accent#d8ff64

State examples

Labels and icons communicate state without color alone. These panels make no network requests.

Empty example · No items

Explain why a list is empty before suggesting an appropriate next step.

Loading example · Please wait

A decorative skeleton accompanies a readable loading label.

Access unavailable · Example only

Future protected resources must enforce authorization on the server. A hidden control is not a security boundary.