Depth

Shape decides the form of a surface. Depth decides how it sits in the space around it, and Flex answers that with three inputs rather than one. Elevation sets how far a surface lifts off the page. Surface color sets where it sits relative to the page canvas. Material sets how much of what is behind it comes through.

Unifying them is the point. A designer reasons about a surface's place in space, not about shadow, background, and blur chosen independently. The three are meant to be combined by intent, not matched tier for tier.

Elevation uses six levels named ordinally, lowest through highest. The naming is deliberately different from a mathematical scale, because what matters is position on the ladder, not the shadow values between steps. The ladder splits in two: the lowest levels rest on the page, and everything above them floats. Shadow is for container surfaces, never for inline elements like buttons or tags.

Elevation lifts a surface with shadow; surface color places it with value. The surface role has its own depth ladder, named by distance from the viewer, from nearer, lifted toward the viewer, through near, the default page canvas, down to far and farther, which recede into the page. This is what makes "inset" or "recessed" a surface-color decision, not a smaller shadow.

That ladder came out of an in-person working session with the MAI team. Fluent offered only a surface token or two at the time, and MAI needed more room to layer surfaces and pair them with materiality. Mitch, Eric, and I worked through it with them and expanded the set into the ladder it is now.

Material controls how much of what sits behind a surface comes through. All three materials are the same frosted-glass treatment; only how much they let through changes. Thin keeps the most context, thick isolates the most, and regular is the default. Start from regular and move only when a surface needs more connection or more isolation.

Elevation, surface color, and material are three inputs to the same surface, combined by intent rather than matched tier for tier. A focused dialog sits highest in elevation with a heavier material; a transient flyout floats lower and lighter. Choosing them together is what keeps depth feeling deliberate rather than decorated.

Depth was a genuinely shared effort. My part was connecting the three inputs into one model, and shaping the surface color ladder we expanded with the MAI team.