diff --git a/__docs__/design-foundations/assets/surfaces-and-elevations/combinations.png b/__docs__/design-foundations/assets/surfaces-and-elevations/combinations.png index 8f90e42..bf3ea87 100644 Binary files a/__docs__/design-foundations/assets/surfaces-and-elevations/combinations.png and b/__docs__/design-foundations/assets/surfaces-and-elevations/combinations.png differ diff --git a/__docs__/design-foundations/assets/surfaces-and-elevations/elevation-mid.png b/__docs__/design-foundations/assets/surfaces-and-elevations/elevation-mid.png index c2fc683..bbb57cb 100644 Binary files a/__docs__/design-foundations/assets/surfaces-and-elevations/elevation-mid.png and b/__docs__/design-foundations/assets/surfaces-and-elevations/elevation-mid.png differ diff --git a/__docs__/design-foundations/assets/surfaces-and-elevations/surfaces-overview.png b/__docs__/design-foundations/assets/surfaces-and-elevations/surfaces-overview.png index db92f88..c3cf49e 100644 Binary files a/__docs__/design-foundations/assets/surfaces-and-elevations/surfaces-overview.png and b/__docs__/design-foundations/assets/surfaces-and-elevations/surfaces-overview.png differ diff --git a/__docs__/design-foundations/assets/surfaces-and-elevations/usage-surface-base.png b/__docs__/design-foundations/assets/surfaces-and-elevations/usage-surface-base.png index 4628603..f08b654 100644 Binary files a/__docs__/design-foundations/assets/surfaces-and-elevations/usage-surface-base.png and b/__docs__/design-foundations/assets/surfaces-and-elevations/usage-surface-base.png differ diff --git a/__docs__/design-foundations/surfaces-and-elevations.mdx b/__docs__/design-foundations/surfaces-and-elevations.mdx index 3db350b..1da14c7 100644 --- a/__docs__/design-foundations/surfaces-and-elevations.mdx +++ b/__docs__/design-foundations/surfaces-and-elevations.mdx @@ -5,7 +5,6 @@ import surfacesAndElevationsImg from "./assets/surfaces-and-elevations/surfaces- import surfacesOverviewImg from "./assets/surfaces-and-elevations/surfaces-overview.png"; import surface1Img from "./assets/surfaces-and-elevations/surface-1.png"; import surface2Img from "./assets/surfaces-and-elevations/surface-2.png"; -import surface3Img from "./assets/surfaces-and-elevations/surface-3.png"; import surfaceScrimImg from "./assets/surfaces-and-elevations/surface-scrim.png"; import elevationOverviewImg from "./assets/surfaces-and-elevations/elevation-overview.png"; import elevationBaseImg from "./assets/surfaces-and-elevations/elevation-base.png"; @@ -43,16 +42,15 @@ Surfaces are background colors. Elevations are shadows. Both are separate decisi ## Surfaces -The system has three surface colors. They are always used to create color-based differentiation between regions. +The system has two surface colors. They are always used to create color-based differentiation between regions. | Surface | Token | | --- | --- | | Surface 1 – Subtle | `semanticColor.core.background.base.subtle` | | Surface 2 – Default | `semanticColor.core.background.base.default` | -| Surface 3 | `semanticColor.core.background.base.strong` | | Surface scrim | `semanticColor.core.background.overlay.default` | -Swatches for Surface 1 - Subtle, Surface 2 - Default, Surface 3, and Surface scrim +Swatches for Surface 1 - Subtle, Surface 2 - Default, and Surface scrim ### Surface 1 @@ -78,18 +76,6 @@ Use for: primary content cards, content panels, drawers, and components that nee caption="Containers that are the main focus of the page have a Surface 2 background color." /> -### Surface 3 - -A tint on an existing layer — not a new layer, just a marked zone within one. The contrast is intentionally subtle: enough to signal structure, not enough to imply depth. - -Use for: table header rows, page header backgrounds, page banners, and other contexts where a region needs to feel structurally distinct from adjacent content — without implying it's closer to the user than the surface it sits on. - -
- ### Surface scrim A semi-transparent overlay applied over the page when a modal or drawer is open. The scrim signals that the content beneath is behind and unavailable while the overlay requires attention. @@ -172,22 +158,21 @@ Surfaces and elevations are independent — either can be applied without the ot | Component | Surface | Elevation | | --- | --- | --- | | Background | Surface 1 | Base | -| Page banner | Surface 3 | Base | | Container card | Surface 1 or 2 | Base | | Interactive card | Surface 2 | Low | | Popovers, tooltips | Surface 2 | Mid | | Alerts, modals | Surface 2 | High | | Scrim (always paired with Alerts, modals above) | Surface scrim | – | -Two stacked-layer diagrams showing how surfaces and elevations combine, from the background at Surface 1 or Surface 3 with base elevation up to alerts and modals at Surface 2 with high elevation +Two stacked-layer diagrams showing how surfaces and elevations combine, from the background at Surface 1 with base elevation up to alerts and modals at Surface 2 with high elevation ## Usage guidelines -### Surface 1 and Surface 3 always sit at base elevation +### Surface 1 always sits at base elevation -Surface 1 is the ground itself, and Surface 3 is simply a color shift within an existing surface to mark internal structure. Applying elevation to either would imply they're separate objects floating above the page, which contradicts their role. Only Surface 2 components — cards, panels, and drawers — earn elevation because they're meant to read as distinct objects sitting on top of the background. +Surface 1 is the ground itself. Applying elevation to it would imply it's a separate object floating above the page, which contradicts its role. Only Surface 2 components — cards, panels, and drawers — earn elevation because they're meant to read as distinct objects sitting on top of the background. -Surface 1 and Surface 3 regions shown flat at base elevation with no shadow +Surface 1 regions shown flat at base elevation with no shadow ### Elevation is a page-level decision @@ -216,7 +201,7 @@ Modal dialogs using High elevation should always be paired with a scrim over the ### Shadow alone is not enough -Users with low vision, in high-contrast mode, or on poorly calibrated displays may not perceive shadow. Surface color must communicate boundaries without relying on shadow, and text on Surface 2 or Surface 3 must meet WCAG contrast requirements against those specific backgrounds — not just against Surface 1. +Users with low vision, in high-contrast mode, or on poorly calibrated displays may not perceive shadow. Surface color must communicate boundaries without relying on shadow, and text on Surface 2 must meet WCAG contrast requirements against that background — not just against Surface 1. ### Elevation does not replace focus rings