Fusion UI

Interfaces are built by putting elements into each other: tiles on a page, sections in a tile, buttons in a section. A few rules keep nested elements calm and readable.

Surfaces

Each level of nesting should be visibly different from its parent, but not compete with it. A tile (elevation 1) on the backdrop is enough separation; inside the tile, group content with the flat alternate surface or a border instead of another shadow. Shadows within shadows look cluttered and suggest that the inner surface floats above everything.

Containers with a shadow — tiles, lists and data tables — are never nested inside a tile. Place them directly on the page next to the tiles instead.

Overlays are the exception: a menu or dialog opened from a tile is elevated above it, as it is temporary and clearly subordinate.

Tile, elevation 1

Section on the alternate surface, elevation 0

Tile, elevation 1

Section with a border, elevation 0

Use elevation 0 with the alternate surface or a border inside tiles.

Don't

Don’t put tiles, lists or data tables into tiles, they bring shadows of their own.
Don’t nest more than two levels of surfaces.

Border radius

Corners of nested surfaces should be concentric: the inner radius is the outer radius minus the padding between them. Otherwise the gap between the corners looks thicker than at the sides.

Inner radius = outer − padding

Concentric corners

Same radius inside and outside

The corners drift apart

.outer {
  border-radius: var(--border-radius--75);
  padding: var(--size--25);
}

.inner {
  border-radius: calc(var(--border-radius--75) - var(--size--25));
}

Spacing

Spacing inside an element is smaller than the spacing around it. That way, things that belong together are grouped by proximity alone: the gap between two buttons in a tile is smaller than the padding of the tile, which is smaller than the gap between tiles.

Tile 1

Tile 2

Views

The fixed views nest as well: a MainNavView contains a SideMenuView, which contains a PageHeaderView, which contains the page. Each view only knows its own size and publishes it; the views inside add up the offsets of all views around them. See Views & Offsets.

<MainNavView menuItems={areas}>
  <SideMenuView menuItems={pages}>
    <PageHeaderView pageHeaderTitle="Revenue">
      <Container direction="both">…</Container>
    </PageHeaderView>
  </SideMenuView>
</MainNavView>

Menus & overlays

Navigation nests at most two levels deep: the main nav for areas, a side menu for the pages of an area. The side menu is never used on its own, only in addition to the main nav. On phones it becomes part of the main nav menu, with a button back to the upper level.

Sheets can be stacked, e.g. to open a related record from a sheet, and a modal may confirm the discard of a sheet. Each overlay brings its own blanket, so the stacking stays visible. The Blanket page shows it.

The content of a sheet is treated like a page: it sits on the page background and is nested in tiles, just like the content of a page.

Nesting

Surfaces

Border radius

Spacing

Views

Menus & overlays