Suite design system

Suite design system

The one set of components FishHouse, Cube Storage, Staffing and Wind Farm share. Pick an app to see what it uses, in its own accent. New shared UI is added here first, registered, and checked by the test suite.

45used by FishHouse
45used by Cube Storage
58used by Staffing
55used by Wind Farm
App
Layer

Chrome · Topbar, search pill, pills, avatar, tabs

SuiteTopbar

64 px white app bar: brand, search, spacer, context pills, icons, avatar.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 1Wind Farm · 2
FishHouse
Suite
Cube Storage
Suite
Staffing
Suite
Wind Farm
Suite

SuiteSpacer

Flexible gap that pushes the following topbar items to the right.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 1Wind Farm · 2
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteBrand

Bare accent mark (no tile) plus the wordmark; link or button.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 1Wind Farm · 2
FishHouse
Brand
Cube Storage
Brand
Staffing
Brand
Wind Farm
Brand

SuitePill

36 px context pill (site, scope, live clock); optional leading chip.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 1Wind Farm · 2
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteChip

28 px ink chip at the start of a pill: a code or an icon.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 1Wind Farm · 1
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteLiveDot

Pulsing accent dot for live state; grey and still when paused.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
FishHouse · 1Cube Storage · 1Wind Farm · 1
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteIconButton

36 px round topbar icon button with an optional unread dot.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
FishHouse · 1Cube Storage · 3Staffing · 13Wind Farm · 4
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteAvatar

Profile trigger: initials only; name and role live in its menu.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 1Wind Farm · 1
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteMenuUser

First row of the profile menu: avatar, name and role.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 1Wind Farm · 1
FishHouse
Kari NordmannOperator
Cube Storage
Kari NordmannOperator
Staffing
Kari NordmannOperator
Wind Farm
Kari NordmannOperator

SuiteTabs

34 px pill tab bar; `fill` shares the row evenly.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
Staffing · 2
Replaced
Segmented
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteTab

One 28 px tab with an optional count; aria-pressed or Radix state.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
Staffing · 2
Built from
SuiteTabCount
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteTabCount

Tab count; accent-deep when active or flagged.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
Not used yet
FishHouse
Robots 12
Cube Storage
Robots 12
Staffing
Robots 12
Wind Farm
Robots 12

SuitePillTabs

Button-group tabs with counts built from options.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
Cube Storage · 1Staffing · 7Wind Farm · 3
Built from
SuiteTabsSuiteTab
Replaced
PillTabs
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteTabsRoot

Tabs with panels (Radix): value, keyboard arrows, tabpanel roles.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
FishHouse · 1Cube Storage · 1Wind Farm · 1
FishHouse

Docks panel

Cube Storage

Docks panel

Staffing

Docks panel

Wind Farm

Docks panel

SuiteTabsList

Pill bar of a SuiteTabsRoot; `fill` shares the row.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
FishHouse · 1Cube Storage · 1Wind Farm · 1
FishHouse

Docks panel

Cube Storage

Docks panel

Staffing

Docks panel

Wind Farm

Docks panel

SuiteTabsTrigger

One tab of a SuiteTabsList with an optional count.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
FishHouse · 1Cube Storage · 1Wind Farm · 1
Built from
SuiteTabCount
FishHouse

Docks panel

Cube Storage

Docks panel

Staffing

Docks panel

Wind Farm

Docks panel

SuiteTabsContent

Panel shown for the active tab.

Layer
Chrome
File
app/suite/chrome.tsx
Used by
FishHouse · 1Cube Storage · 1Wind Farm · 1
FishHouse

Docks panel

Cube Storage

Docks panel

Staffing

Docks panel

Wind Farm

Docks panel

Actions · Buttons

SuiteButton

Pill button: primary (ink), default, accent, danger, ghost, link; sm/md/lg.

Layer
Actions
File
app/suite/actions.tsx
Used by
FishHouse · 1Cube Storage · 3Staffing · 27Wind Farm · 8
Replaced
Button, SeeAll, TextButton
FishHouse
Cube Storage
Staffing
Wind Farm

Forms · Fields, inputs, selects, search

SuiteField

Label over a control with an optional hint or error line.

Layer
Forms
File
app/suite/forms.tsx
Used by
Staffing · 6Wind Farm · 1
Replaced
Field
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteInput

Text / number / date input; md (40) or sm pill (32).

Layer
Forms
File
app/suite/forms.tsx
Used by
Staffing · 4Wind Farm · 1
Replaced
Input
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteTextarea

Multi-line text input.

Layer
Forms
File
app/suite/forms.tsx
Used by
Staffing · 2Wind Farm · 1
Replaced
Textarea
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteSelect

Native select with the suite caret; md or sm pill.

Layer
Forms
File
app/suite/forms.tsx
Used by
Staffing · 9Wind Farm · 1
Replaced
Select
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteCheckbox

Checkbox with its label, accent when checked.

Layer
Forms
File
app/suite/forms.tsx
Used by
Staffing · 2Wind Farm · 1
Replaced
Checkbox
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteSlider

Range slider (scrubbers, thresholds): accent fill, ink knob.

Layer
Forms
File
app/suite/forms.tsx
Used by
FishHouse · 1Staffing · 2Wind Farm · 1
Replaced
Slider, Range, Scrubber
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteRangeBrush

Pick a span by dragging a window and two handles over a track (chart overviews); keyboard sliders.

Layer
Forms
File
app/suite/brush.tsx
Used by
Staffing · 2
Replaced
RangeBrush, Brush
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteSearchField

Pill filter field for lists and tables, with clear.

Layer
Forms
File
app/suite/forms.tsx
Used by
Staffing · 6
Replaced
SearchField
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteCommandSearch

Topbar search: pill field, / hint, grouped results (cmdk); `collapsible` folds it to an icon button.

Layer
Forms
File
app/suite/forms.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 1Wind Farm · 1
Replaced
SearchBox, CommandSearch
FishHouse
Cube Storage
Staffing
Wind Farm

Surfaces · Panels, cards, headers, empty, toasts

SuitePanel

Floating white r20 surface over the scene (docks, inspectors); `tone="ink"` for dark glass cards in a 3D scene.

Layer
Surfaces
File
app/suite/surfaces.tsx
Used by
FishHouse · 1Cube Storage · 3Staffing · 6Wind Farm · 8
Replaced
Panel
FishHouse

Robot fleet12 / 12

Charging
2
Idle
1
Turbine WT-07

Ink tone: a hologram card over the 3D scene.

Cube Storage

Robot fleet12 / 12

Charging
2
Idle
1
Turbine WT-07

Ink tone: a hologram card over the 3D scene.

Staffing

Robot fleet12 / 12

Charging
2
Idle
1
Turbine WT-07

Ink tone: a hologram card over the 3D scene.

Wind Farm

Robot fleet12 / 12

Charging
2
Idle
1
Turbine WT-07

Ink tone: a hologram card over the 3D scene.

SuiteCard

White r20 card in pages and sheets; `interactive`, `selected`.

Layer
Surfaces
File
app/suite/surfaces.tsx
Used by
Staffing · 14Wind Farm · 2
Replaced
Card
FishHouse
Card
Cube Storage
Card
Staffing
Card
Wind Farm
Card

SuiteTile

Grey inner tile inside a card or panel.

Layer
Surfaces
File
app/suite/surfaces.tsx
Used by
FishHouse · 1Cube Storage · 2Staffing · 18Wind Farm · 4
Replaced
Tile
FishHouse
Free bins1 412
Cube Storage
Free bins1 412
Staffing
Free bins1 412
Wind Farm
Free bins1 412

SuitePageHeader

Page title row: eyebrow, h1, subtitle, actions.

Layer
Surfaces
File
app/suite/surfaces.tsx
Used by
Staffing · 10
Replaced
PageHeader
FishHouse
Skarvik Bygg · staffing

Positions

Every position across the projects

Cube Storage
Skarvik Bygg · staffing

Positions

Every position across the projects

Staffing
Skarvik Bygg · staffing

Positions

Every position across the projects

Wind Farm
Skarvik Bygg · staffing

Positions

Every position across the projects

SuiteSectionHeader

Section title with meta and actions; md, lg or caps.

Layer
Surfaces
File
app/suite/surfaces.tsx
Used by
FishHouse · 1Cube Storage · 2Staffing · 8Wind Farm · 2
Replaced
SectionHeader, SectionHeading
FishHouse

Open positions12

Departments

Seafood inventory

Cube Storage

Open positions12

Departments

Seafood inventory

Staffing

Open positions12

Departments

Seafood inventory

Wind Farm

Open positions12

Departments

Seafood inventory

SuiteEmpty

Large empty state with icon, title and text.

Layer
Surfaces
File
app/suite/surfaces.tsx
Used by
Staffing · 14Wind Farm · 1
Replaced
Empty, EmptyState
FishHouse
No projects matchTry another filter
Cube Storage
No projects matchTry another filter
Staffing
No projects matchTry another filter
Wind Farm
No projects matchTry another filter

SuiteToasts

Live region of ink toast pills (info / alert).

Layer
Surfaces
File
app/suite/surfaces.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 1Wind Farm · 1
Replaced
Toasts, ToastRegion
FishHouse
Position approved
Leave overlaps a booking
Cube Storage
Position approved
Leave overlaps a booking
Staffing
Position approved
Leave overlaps a booking
Wind Farm
Position approved
Leave overlaps a booking

Data · Tables, stats, KPI cards, dots, rings

SuiteTable

Bordered scrolling table; row states via data attributes.

Layer
Data
File
app/suite/data.tsx
Used by
Staffing · 11Wind Farm · 1
Replaced
Table, DataTable
FishHouse
BayStatusPallets
Bay 01Loading12
Bay 02Free0
Cube Storage
BayStatusPallets
Bay 01Loading12
Bay 02Free0
Staffing
BayStatusPallets
Bay 01Loading12
Bay 02Free0
Wind Farm
BayStatusPallets
Bay 01Loading12
Bay 02Free0

SuiteStat

Label over a reading with unit and note; lg / xl / 2xl.

Layer
Data
File
app/suite/data.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 3Wind Farm · 1
Replaced
Stat
FishHouse
Bins / capacity10 645/ 12 515
Utilisation68%Oct 2026
Cube Storage
Bins / capacity10 645/ 12 515
Utilisation68%Oct 2026
Staffing
Bins / capacity10 645/ 12 515
Utilisation68%Oct 2026
Wind Farm
Bins / capacity10 645/ 12 515
Utilisation68%Oct 2026

SuiteKpi

KPI card: icon, label, reading, chip, note, spark; toggle when clickable.

Layer
Data
File
app/suite/data.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 8
Replaced
Kpi, Metric, MetricCard
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteKpiRow

Row of KPI cards: grid, or a single line over the scene.

Layer
Data
File
app/suite/data.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 8
Replaced
KpiRow, Metrics
FishHouse
Robots active12/ 120 ready
Picks per hour1 124+4%
Cube Storage
Robots active12/ 120 ready
Picks per hour1 124+4%
Staffing
Robots active12/ 120 ready
Picks per hour1 124+4%
Wind Farm
Robots active12/ 120 ready
Picks per hour1 124+4%

SuiteDot

8 px status dot in a tone.

Layer
Data
File
app/suite/data.tsx
Used by
Cube Storage · 1Staffing · 9Wind Farm · 7
Replaced
Dot, StatusDot
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteInitials

Initials disc for a person, stable tint per name.

Layer
Data
File
app/suite/data.tsx
Used by
Staffing · 10
Replaced
Avatar, Initials
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteRing

Progress ring with the value in the middle.

Layer
Data
File
app/suite/data.tsx
Used by
Wind Farm · 1
Replaced
ProgressRing, Ring
FishHouse
68%92%
Cube Storage
68%92%
Staffing
68%92%
Wind Farm
68%92%

Primitives · Status, meters, sparks, scroll

SuiteBadge

Status pill: done, active, alert, idle, critical, warning, success, info.

Layer
Primitives
File
app/suite/primitives.tsx
Used by
FishHouse · 1Cube Storage · 2Staffing · 23Wind Farm · 5
Replaced
Badge
FishHouse
doneactivealertidlecriticalwarningsuccessinfo
Cube Storage
doneactivealertidlecriticalwarningsuccessinfo
Staffing
doneactivealertidlecriticalwarningsuccessinfo
Wind Farm
doneactivealertidlecriticalwarningsuccessinfo

SuiteDetailRows

Label / value rows with hairlines (inspector details).

Layer
Primitives
File
app/suite/primitives.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 2Wind Farm · 3
Replaced
DetailRows
FishHouse
Site
Bjørvika, Oslo
Capacity
1 412 boxes
Cube Storage
Site
Bjørvika, Oslo
Capacity
1 412 boxes
Staffing
Site
Bjørvika, Oslo
Capacity
1 412 boxes
Wind Farm
Site
Bjørvika, Oslo
Capacity
1 412 boxes

SuiteEmptyRow

Grey info row for empty states; `alert` for accent-soft.

Layer
Primitives
File
app/suite/primitives.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 8Wind Farm · 3
Replaced
EmptyRow
FishHouse

Nothing waiting

Two positions need a person

Cube Storage

Nothing waiting

Two positions need a person

Staffing

Nothing waiting

Two positions need a person

Wind Farm

Nothing waiting

Two positions need a person

SuiteMeter

4 px progress track with tone fill and ink knob.

Layer
Primitives
File
app/suite/primitives.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 13Wind Farm · 1
Replaced
Meter
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteSpark

Spark bars with hover values; `now` in ink, `over` in critical.

Layer
Primitives
File
app/suite/primitives.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 8Wind Farm · 2
Replaced
Spark
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteScrollFade

Scroller that fades clipped edges; optional More chip.

Layer
Primitives
File
app/suite/primitives.tsx
Used by
FishHouse · 1Cube Storage · 2Staffing · 2Wind Farm · 2
Replaced
ScrollFade
FishHouse
Cod
Haddock
Salmon
Saithe
Herring
Mackerel
Halibut
Cube Storage
Cod
Haddock
Salmon
Saithe
Herring
Mackerel
Halibut
Staffing
Cod
Haddock
Salmon
Saithe
Herring
Mackerel
Halibut
Wind Farm
Cod
Haddock
Salmon
Saithe
Herring
Mackerel
Halibut

SuiteKbd

Keyboard key cap for shortcuts.

Layer
Primitives
File
app/suite/primitives.tsx
Used by
FishHouse · 1Cube Storage · 1
Replaced
Kbd
FishHouse
/Esc
Cube Storage
/Esc
Staffing
/Esc
Wind Farm
/Esc

Overlay · Tooltips, menus, dialogs, popovers

SuiteProvider

Per-app root context: system id, portal container and material (`glass` for immersive 3D apps).

Layer
Overlay
File
app/suite/provider.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 1Wind Farm · 2
Replaced
PortalContext
FishHouse
Accent from the provider
Glass material

Blur, rim light and inner highlights; text turns light.

Cube Storage
Accent from the provider
Glass material

Blur, rim light and inner highlights; text turns light.

Staffing
Accent from the provider
Glass material

Blur, rim light and inner highlights; text turns light.

Wind Farm
Accent from the provider
Glass material

Blur, rim light and inner highlights; text turns light.

SuiteTip

Ink pill tooltip, portaled with the system's tokens.

Layer
Overlay
File
app/suite/overlay.tsx
Used by
Cube Storage · 1Staffing · 2Wind Farm · 2
Replaced
Tip
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteMenu

Trigger + menu surface in one (non-modal by default).

Layer
Overlay
File
app/suite/overlay.tsx
Used by
Staffing · 2
Built from
SuiteMenuContent
Replaced
Menu
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteMenuContent

r20 white menu surface, portaled with the system's tokens.

Layer
Overlay
File
app/suite/overlay.tsx
Used by
FishHouse · 1Cube Storage · 2Staffing · 1Wind Farm · 1
Replaced
MenuContent
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteMenuItem

Menu row: icon, text, meta, shortcut; danger / checked / top-aligned.

Layer
Overlay
File
app/suite/overlay.tsx
Used by
FishHouse · 1Cube Storage · 2Staffing · 2Wind Farm · 1
Built from
SuiteKbd
Replaced
MenuItem
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteMenuCheck

Checkbox row that keeps the menu open.

Layer
Overlay
File
app/suite/overlay.tsx
Used by
FishHouse · 1Cube Storage · 1
Built from
SuiteKbd
Replaced
MenuCheck
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteMenuRadioItem

Radio row with an accent tick.

Layer
Overlay
File
app/suite/overlay.tsx
Used by
FishHouse · 1Staffing · 1Wind Farm · 1
Replaced
MenuRadioItem, MenuRadio
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteMenuLabel

Caps section label inside a menu.

Layer
Overlay
File
app/suite/overlay.tsx
Used by
FishHouse · 1Cube Storage · 2Staffing · 2Wind Farm · 1
Replaced
MenuLabel
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteMenuSeparator

Hairline between menu groups.

Layer
Overlay
File
app/suite/overlay.tsx
Used by
FishHouse · 1Cube Storage · 2Staffing · 2Wind Farm · 1
Replaced
MenuSeparator
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteMenuRoot

Menu state root (open, onOpenChange, modal).

Layer
Overlay
File
app/suite/overlay.tsx
Used by
FishHouse · 1Cube Storage · 2Staffing · 1Wind Farm · 1
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteMenuTrigger

Wraps the control that opens a menu (asChild).

Layer
Overlay
File
app/suite/overlay.tsx
Used by
FishHouse · 1Cube Storage · 2Staffing · 1Wind Farm · 1
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteMenuRadioGroup

Group of radio rows sharing one value.

Layer
Overlay
File
app/suite/overlay.tsx
Used by
FishHouse · 1Staffing · 1Wind Farm · 1
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteDialog

Centred modal with scrim, title, close, body and footer.

Layer
Overlay
File
app/suite/overlay.tsx
Used by
Staffing · 10Wind Farm · 2
Replaced
Modal, Dialog
FishHouse
Cube Storage
Staffing
Wind Farm

SuitePopover

Anchored card for small forms, pickers and help.

Layer
Overlay
File
app/suite/overlay.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 4Wind Farm · 2
Replaced
Pop
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteCursorTip

Ink tooltip that follows a point (chart hover readouts).

Layer
Overlay
File
app/suite/overlay.tsx
Used by
Staffing · 1Wind Farm · 1
Replaced
TipLayer, ChartTip
FishHouse
Move over this tile
Cube Storage
Move over this tile
Staffing
Move over this tile
Wind Farm
Move over this tile

SuiteKeys

Keyboard shortcut list for a help popover.

Layer
Overlay
File
app/suite/overlay.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 1Wind Farm · 1
Built from
SuiteKbd
Replaced
Keys, Shortcuts, ShortcutList
FishHouse
/
Search
← →
Previous / next month
?
Shortcuts
Cube Storage
/
Search
← →
Previous / next month
?
Shortcuts
Staffing
/
Search
← →
Previous / next month
?
Shortcuts
Wind Farm
/
Search
← →
Previous / next month
?
Shortcuts

Rail · Floating scene and camera controls

SuiteRail

Floating pill that holds rail buttons; vertical or horizontal.

Layer
Rail
File
app/suite/rail.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 1Wind Farm · 1
Replaced
Rail
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteRailRule

Short divider between rail button groups.

Layer
Rail
File
app/suite/rail.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 1Wind Farm · 1
FishHouse
Cube Storage
Staffing
Wind Farm

SuiteRailButton

30 px round rail button with tooltip; ink when on.

Layer
Rail
File
app/suite/rail.tsx
Used by
FishHouse · 1Cube Storage · 1Staffing · 1Wind Farm · 1
Built from
SuiteTip
Replaced
IconButton, RailButton
FishHouse
Cube Storage
Staffing
Wind Farm