Skip to content
design
Foundations

Elevation

Flat surfaces separated by hairlines. A raised surface marks what is active, and only overlays cast a shadow.

On this page
Dashboard
Conning
Chart
Anchor
Page surface · --bg
OverlayCenter on vesselNorth upCourse up
Three levels on one screen: the page surface, the raised active row, and an overlay menu that casts the only shadow.
01Flat by defaultContent sits on one continuous surface. Regions are separated by hairlines and spacing, not by card backgrounds or shadows.
02Emphasis has a purposeSurface contrast distinguishes selected items and contained controls. Persistent selection also needs its own label or indicator.
03Only overlays cast shadowsA menu, popover or dialog really is above the page, so it casts a shadow. Nothing that sits on the page does.

Levels

LevelTokenUsed for
Recessed--surfaceWells and inputs, and the hover state of a row
Page--bgThe one continuous surface everything sits on
Raised--bk-selected-background (the elevated surface)The active item: the current page, with the accent on its icon (--bk-action-text), or the chosen segment, ringed in --bk-selected-indicator
Overlay--surface-elevated with a --border-bright hairline and --shadow-floatingMenus, popovers, dialogs, tooltips and toasts
TokenNightDuskDayBright
--bg
Page
#000000
#0B0C0F
#F2F3F5
#FFFFFF
--surface
Recessed, hover
#14100A
#15161A
#FFFFFF
#ECEEF1
--surface-elevated
Raised, overlay
#221A10
#202127
#FFFFFF
#FFFFFF
--border
Hairline between regions
#3A2C16
#26272E
#D5D8DD
#C9CDD4
--border-bright
Hairline around overlays
#523D1E
#33353D
#B9BEC6
#AAB0B9

Interaction states

A row moves through the levels as it is used. Hover lightens it to the recessed surface; the active row is raised; keyboard focus adds a 2px accent ring, which is never removed.

Crew
Rest
Crew
Hover
Crew
Active
Crew
Focus
Rest · hover · active · focus

Surface and stacking are separate

A lighter surface does not place an element above its neighbors. Surface roles describe appearance; the --bk-layer-* roles in layers.css determine stacking order. A report panel can have a tinted background without becoming an overlay or receiving a shadow.

RegionLayer role
Ordinary page content--bk-layer-content
Sticky in-page controls--bk-layer-sticky
Menus, lists and popovers--bk-layer-dropdown; one step above the modal when opened from a dialog (data-over-dialog), above the toast when opened from one (data-over-toast)
Overlay backdrop and modal--bk-layer-overlay, --bk-layer-modal
Tooltip and toast--bk-layer-tooltip, --bk-layer-toast
Display dimming and alert presentation--bk-layer-dimmer, --bk-layer-alert
The shell's header, with the alert zone--bk-layer-alert, whether or not it sticks
The brightness menu--layer-alert-popover, one step above the alert layer

Use the shared overlay component so its portal receives the trigger's theme, language and size scope. Increasing a local z-index cannot escape an ancestor stacking context or overflow clipping. Keep the alert zone and brightness recovery reachable in the application shell.

Documents and diagram canvases

Use spacing and a quiet rule to separate report sections. Editorial panels can use categorical tints with labels, while diagrams use --bk-diagram-canvas and --bk-diagram-group. A group in a drawing represents a system boundary, not a menu floating over the page. Avoid copying a diagram's paper color into surrounding UI.

Check overlays in all four themes, above nested cards and near screen edges. The token --shadow-floating supplies the shared floating shadow; confirm the border is visible where a dark-theme shadow is subtle. In Night --shadow-floating is a 1px line in place of a shadow, so an overlay's edge is its border and that line; check it there first.

Using elevation

Do
Depth8.4 m
SOG0.4 kn
Separate regions with hairlines on one surface. The structure is clear and nothing competes with the data.
Don't
Depth8.4 m
SOG0.4 kn
Don't put every group on a shadowed card. Each card pulls forward, so nothing is in front any more and the screen gets busy.
Do
Dashboard
Conning
Settings
Raise only the active row. It is the one thing in the list that steps forward.
Don't
Dashboard
Conning
Settings
Don't raise every row. When all rows are raised, the active one has nothing to stand out from.
  • Border: hairlines and semantic borders
  • Themes: the surface values in each theme
  • Motion: how an overlay enters