fix(segmented): the chosen face is bg.raised — lighter than the track in dark (D-054, Android 0.8.1)

.changeset/segmented-raised-face.md

@@ -0,0 +1,6 @@
+---
+"@devslab/dds-tokens": minor
+"@devslab/dds-css": minor
+---
+
+New semantic token `color.bg.raised` (`--dds-color-bg-raised`): white in light, `zinc.800` in dark — a face raised above `bg.subtle`. The chosen SegmentedControl segment uses it, so in the dark theme it is one step lighter than its track instead of darker (it read as a hole). The light theme looks the same; the level-1 shadow stays (D-054).

README.ko.md

@@ -120,7 +120,7 @@ Source-Available License 1.0을 따른다. compatibility canary는 비공개·
 때만 만든다 (명세 §8):
 `@devslab/dds-tokens` (✅ 2026-08-13) → `dds-css` v1 인벤토리 (Core 6종 ✅ 2026-08-13, +13종 ✅ 2026-08-15) →
 AskLinq 적용 → `dds-icons` (✅ 2026-08-15) → `dds-solid` + `site-kit` → 안드로이드 네이티브 값·테마·모션
-(0.6.0, 2026-11-12, Maven Central — 테마·모션·부품·아이콘). 0.7.0(2026-11-13, Maven Central)에서 화면 틀과 `dds-compose-testing` 꾸러미가 생겼다(D-052). 0.8.0(2026-11-13)에서 `DdsSegmentedControl`이 생겼다. RN·Ionic 패키지는 그 제품이 생길 때.
+(0.6.0, 2026-11-12, Maven Central — 테마·모션·부품·아이콘). 0.7.0(2026-11-13, Maven Central)에서 화면 틀과 `dds-compose-testing` 꾸러미가 생겼다(D-052). 0.8.0(2026-11-13)에서 `DdsSegmentedControl`이 생겼고, 0.8.1에서 어두운 화면의 고른 칸이 밝아졌다(`bg.raised`, D-054). RN·Ionic 패키지는 그 제품이 생길 때.
 
 ## 입력·선택·공유 달력 확장
 

README.md

@@ -124,7 +124,7 @@ Priorities live in [`docs/backlog.md`](docs/backlog.md). Packages are created
 only when a consumer exists (spec §8):
 `@devslab/dds-tokens` (✅ 2026-08-13) → `dds-css` v1 inventory (Core 6 ✅ 2026-08-13, +13 ✅ 2026-08-15) →
 AskLinq adoption → `dds-icons` (✅ 2026-08-15) → `dds-solid` + `site-kit` → native Android values, theme and motion
-(0.6.0, 2026-11-12, on Maven Central — theme, motion, components, icons). 0.7.0 (2026-11-13, on Maven Central) adds the screen frame and the `dds-compose-testing` artifact (D-052). 0.8.0 (2026-11-13) adds `DdsSegmentedControl`. RN and Ionic packages only when such a product exists.
+(0.6.0, 2026-11-12, on Maven Central — theme, motion, components, icons). 0.7.0 (2026-11-13, on Maven Central) adds the screen frame and the `dds-compose-testing` artifact (D-052). 0.8.0 (2026-11-13) adds `DdsSegmentedControl`, and 0.8.1 its lighter chosen face in dark (`bg.raised`, D-054). RN and Ionic packages only when such a product exists.
 
 ## Input, choice and shared calendar additions
 

android/CHANGELOG.ko.md

@@ -5,6 +5,20 @@
 `kr.devslab:dds-android-tokens`, `kr.devslab:dds-compose`, 그리고 0.7.0부터 `kr.devslab:dds-compose-testing`은 한 버전을 쓰고, 웹 패키지와는
 버전이 따로다(D-048). 릴리스는 `android-v<버전>` 태그로 낸다.
 
+## 0.8.1 — 2026-11-13
+
+**바뀐 것**
+
+- **어두운 화면에서 고른 세그먼트가 트랙보다 밝다(D-054).** 0.8.0의 고른 칸은 `bg.default`(`#09090B`)라 트랙
+  `bg.subtle`(`#18181B`)보다 어두웠고, 그림자는 어두운 화면에서 보이지 않아 구멍처럼 보였다(Qooroo 전체 화면 점검).
+  이제 새 토큰 `bg.raised`(`#27272A`, `zinc.800`)로 칠한다. 밝은 화면은 그대로 흰 면이다. 그림자는 1단계 그대로(소유자
+  결정, 가이드 §10의 20번 확정). 웹 SegmentedControl도 같이 바뀌었다.
+
+**새로 생긴 것**
+
+- **`DdsColors.bgRaised`, 토큰 `DdsLightColors.bgRaised` / `DdsDarkColors.bgRaised`, 리소스 `dds_color_bg_raised`** —
+  옅은 바탕 위로 올라온 면. 밝은 `#FFFFFF`, 어두운 `#27272A`. 제품이 정하는 바탕(D-053)이 아니라 시스템 값이다.
+
 ## 0.8.0 — 2026-11-13
 
 **새로 생긴 것**

android/CHANGELOG.md

@@ -5,6 +5,22 @@
 `kr.devslab:dds-android-tokens`, `kr.devslab:dds-compose` and (from 0.7.0) `kr.devslab:dds-compose-testing` share one version,
 separate from the web packages (D-048). Releases are cut by an `android-v<version>` tag.
 
+## 0.8.1 — 2026-11-13
+
+**Changed**
+
+- **In the dark theme the chosen segment is lighter than the track (D-054).** 0.8.0 painted it `bg.default` (`#09090B`),
+  darker than the `bg.subtle` track (`#18181B`), and the shadow does not show in dark, so it read as a hole (found in
+  Qooroo's full-screen review). It is now the new `bg.raised` token (`#27272A`, `zinc.800`). The light theme is unchanged,
+  a white face. The shadow stays at level 1 (the owner's decision; guide §10 no. 20 is settled). The web
+  SegmentedControl changed with it.
+
+**New**
+
+- **`DdsColors.bgRaised`, tokens `DdsLightColors.bgRaised` / `DdsDarkColors.bgRaised`, resource `dds_color_bg_raised`** —
+  a face raised above the quiet background. `#FFFFFF` in light, `#27272A` in dark. A system value, not one of the
+  backgrounds a product sets (D-053).
+
 ## 0.8.0 — 2026-11-13
 
 **New**

android/README.ko.md

@@ -26,8 +26,8 @@ dependencies {
 
 ```kotlin
 dependencies {
-    implementation("kr.devslab:dds-compose:0.8.0")
-    androidTestImplementation("kr.devslab:dds-compose-testing:0.8.0")
+    implementation("kr.devslab:dds-compose:0.8.1")
+    androidTestImplementation("kr.devslab:dds-compose-testing:0.8.1")
 }
 ```
 

android/README.md

@@ -26,8 +26,8 @@ dependencies {
 
 ```kotlin
 dependencies {
-    implementation("kr.devslab:dds-compose:0.8.0")
-    androidTestImplementation("kr.devslab:dds-compose-testing:0.8.0")
+    implementation("kr.devslab:dds-compose:0.8.1")
+    androidTestImplementation("kr.devslab:dds-compose-testing:0.8.1")
 }
 ```
 

android/dds-compose/src/androidTest/kotlin/kr/devslab/dds/compose/SegmentedOnDeviceTest.kt

@@ -15,6 +15,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Rect
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.PixelMap
+import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.graphics.toPixelMap
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.semantics.Role
@@ -223,7 +224,7 @@ class SegmentedOnDeviceTest {
         // Read over the unchosen segment, clear of the chosen face's shadow.
         assertColor("the track between its line and the faces", colors.bgSubtle, pixels[other.center.x.toInt(), (2 * oneDp).toInt()])
         assertColor("an unchosen segment shows the track", colors.bgSubtle, pixels[(other.right - 6 * oneDp).toInt(), midY])
-        assertColor("the chosen face", colors.bgDefault, pixels[(chosen.left + 6 * oneDp).toInt(), midY])
+        assertColor("the chosen face", colors.bgRaised, pixels[(chosen.left + 6 * oneDp).toInt(), midY])
         assertColor("the chosen face's line", colors.borderStrong, pixels[(chosen.left + half).toInt(), midY])
     }
 
@@ -239,6 +240,18 @@ class SegmentedOnDeviceTest {
         assertDrawnWith(line = colors.borderStrong)
     }
 
+    @Test
+    fun inTheDarkThemeTheChosenFaceIsLighterThanTheTrackNotAHole() {
+        show(dark = true) { DdsSegmentedControl(kinds, "person", {}, Modifier.testTag("control"), contentDescription = "종류", fullWidth = true) }
+        val pixels = control()
+        val chosen = inControl("개인")
+        val other = inControl("비즈니스")
+        val face = pixels[(chosen.left + 6 * oneDp).toInt(), chosen.center.y.toInt()]
+        val track = pixels[(other.right - 6 * oneDp).toInt(), other.center.y.toInt()]
+        assertTrue("face $face is lighter than track $track", face.luminance() > track.luminance())
+        assertTrue("and not the page's darker bgDefault", !close(face, colors.bgDefault))
+    }
+
     @Test
     fun anErrorTurnsTheTrackLineTheDangerColorAndSaysWhy() {
         show {

android/dds-compose/src/main/kotlin/kr/devslab/dds/compose/component/Segmented.kt

@@ -70,7 +70,7 @@ public class DdsSegment<out T>(
  * - **Track:** `bg.subtle`, a 1dp `border.strong` line, `radius.md`, 2dp inside
  *   it and 2dp between segments.
  * - **Segment:** `radius.sm`, the `label` type, `text.secondary`. The chosen
- *   one is a `bg.default` face with a 1dp `border.strong` line, a level-1
+ *   one is a `bg.raised` face with a 1dp `border.strong` line, a level-1
  *   shadow, `text.primary` and weight 600.
  * - **Height:** one size, the web's touch height. The track is 50dp (48dp
  *   inside its line); each segment is 48dp of touch with a 44dp face and is
@@ -231,7 +231,7 @@ private fun Segment(
     val active = enabled && !readOnly && !selected
     val face by colorChange(
         when {
-            selected -> colors.bgDefault
+            selected -> colors.bgRaised
             active && pressed -> colors.overlayPressedTint
             active && hovered -> colors.overlayHoverTint
             else -> colors.overlayPressedTint.clear()

android/dds-compose/src/main/kotlin/kr/devslab/dds/compose/theme/DdsColors.kt

@@ -27,6 +27,12 @@ public class DdsColors internal constructor(
     public val bgSubtle: Color,
     /** Cards, sheets, dialogs, menus. The product's, if its brand names one. */
     public val bgElevated: Color,
+    /**
+     * A face raised above [bgSubtle]: the chosen segment of a segmented control.
+     * White in light; in dark a step lighter than [bgSubtle] (where [bgDefault]
+     * would read as a hole). Always the system's: a brand does not set it.
+     */
+    public val bgRaised: Color,
     /** Filled brand face — the primary button. The same in light and dark. */
     public val bgBrand: Color,
     /** [bgBrand] while pressed. (The web calls it hover; touch has no hover.) */
@@ -80,6 +86,7 @@ internal fun ddsColors(dark: Boolean, brand: DdsBrand): DdsColors =
             bgDefault = pageBackground(brand.dark, night = true),
             bgSubtle = subtleBackground(brand.dark, night = true),
             bgElevated = cardBackground(brand.dark, night = true),
+            bgRaised = Color(DdsDarkColors.bgRaised),
             bgBrand = brand.dark.bgBrand,
             bgBrandHover = brand.dark.bgBrandHover,
             bgBrandSubtle = brand.dark.bgBrandSubtle,
@@ -112,6 +119,7 @@ internal fun ddsColors(dark: Boolean, brand: DdsBrand): DdsColors =
             bgDefault = pageBackground(brand.light, night = false),
             bgSubtle = subtleBackground(brand.light, night = false),
             bgElevated = cardBackground(brand.light, night = false),
+            bgRaised = Color(DdsLightColors.bgRaised),
             bgBrand = brand.light.bgBrand,
             bgBrandHover = brand.light.bgBrandHover,
             bgBrandSubtle = brand.light.bgBrandSubtle,

android/dds-compose/src/test/kotlin/kr/devslab/dds/compose/theme/ColorSchemeTest.kt

@@ -2,6 +2,7 @@ package kr.devslab.dds.compose.theme
 
 import androidx.compose.material3.contentColorFor
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.luminance
 import kr.devslab.dds.tokens.DdsDarkColors
 import kr.devslab.dds.tokens.DdsLightColors
 import org.junit.Assert.assertEquals
@@ -128,6 +129,23 @@ class ColorSchemeTest {
         }
     }
 
+    /**
+     * The chosen segment's face (D-054): lighter than the track it sits on in both themes, so
+     * it reads as raised, never as a hole; and the label on it reads.
+     */
+    @Test
+    fun aRaisedFaceIsLighterThanTheSubtleTrackAndCarriesText() {
+        for ((c, name) in listOf(light to "light", dark to "dark")) {
+            assertTrue("$name bgRaised is lighter than bgSubtle", c.bgRaised.luminance() > c.bgSubtle.luminance())
+            for ((text, label) in listOf(c.textPrimary to "textPrimary", c.textSecondary to "textSecondary")) {
+                val ratio = contrastRatio(text, c.bgRaised)
+                assertTrue("$name $label on bgRaised is %.2f:1".format(ratio), ratio >= DdsMinTextContrast)
+            }
+        }
+        assertEquals("dark: zinc.800", Color(DdsDarkColors.bgRaised), dark.bgRaised)
+        assertEquals("light: the white of bg.default, as before", light.bgDefault, light.bgRaised)
+    }
+
     /** A warm paper page: light enough for every system text color. */
     private val paper = Color(red = 0.98f, green = 0.96f, blue = 0.92f)
 

android/dds-tokens/src/main/kotlin/kr/devslab/dds/tokens/DdsColorTokens.kt

@@ -6,6 +6,7 @@ object DdsLightColors {
     const val bgDefault: Long = 0xFFFFFFFF
     const val bgSubtle: Long = 0xFFFAFAFA
     const val bgElevated: Long = 0xFFFFFFFF
+    const val bgRaised: Long = 0xFFFFFFFF
     const val bgBrand: Long = 0xFF06B6D4
     const val bgBrandHover: Long = 0xFF22D3EE
     const val bgBrandSubtle: Long = 0xFFECFEFF
@@ -39,6 +40,7 @@ object DdsDarkColors {
     const val bgDefault: Long = 0xFF09090B
     const val bgSubtle: Long = 0xFF18181B
     const val bgElevated: Long = 0xFF18181B
+    const val bgRaised: Long = 0xFF27272A
     const val bgBrand: Long = 0xFF06B6D4
     const val bgBrandHover: Long = 0xFF22D3EE
     const val bgBrandSubtle: Long = 0xFF164E63

android/dds-tokens/src/main/kotlin/kr/devslab/dds/tokens/DdsTokensInfo.kt

@@ -6,5 +6,5 @@ object DdsTokensInfo {
     const val sourcePackage: String = "@devslab/dds-tokens"
     const val sourceRepository: String = "https://github.com/devslab-kr/dds"
     /** SHA-256 of the token files (tokens/ in the source repository) these values were generated from. */
-    const val sourceSha256: String = "738637d53e5e35b63b8afe09e0c13e7171e38c70ecf1af528a757f44370a87b6"
+    const val sourceSha256: String = "c50240ca80ddc35fe54009f9203d8dadaff9ad051bd0ff171803222f2a2521b3"
 }

android/dds-tokens/src/main/res/values-night/dds_tokens.xml

@@ -4,6 +4,7 @@
     <color name="dds_color_bg_default">#FF09090B</color>
     <color name="dds_color_bg_subtle">#FF18181B</color>
     <color name="dds_color_bg_elevated">#FF18181B</color>
+    <color name="dds_color_bg_raised">#FF27272A</color>
     <color name="dds_color_bg_brand_subtle">#FF164E63</color>
     <color name="dds_color_bg_inverse">#FFFAFAFA</color>
     <color name="dds_color_text_primary">#FFFAFAFA</color>

android/dds-tokens/src/main/res/values/dds_tokens.xml

@@ -4,6 +4,7 @@
     <color name="dds_color_bg_default">#FFFFFFFF</color>
     <color name="dds_color_bg_subtle">#FFFAFAFA</color>
     <color name="dds_color_bg_elevated">#FFFFFFFF</color>
+    <color name="dds_color_bg_raised">#FFFFFFFF</color>
     <color name="dds_color_bg_brand">#FF06B6D4</color>
     <color name="dds_color_bg_brand_hover">#FF22D3EE</color>
     <color name="dds_color_bg_brand_subtle">#FFECFEFF</color>

android/gradle.properties

@@ -8,4 +8,4 @@ kotlin.code.style=official
 # Android releases are versioned apart from the web packages (docs/decisions.md D-048).
 # The release workflow overrides VERSION_NAME from the android-v* tag.
 GROUP=kr.devslab
-VERSION_NAME=0.8.0
+VERSION_NAME=0.8.1

docs/backlog.md

@@ -336,7 +336,7 @@ D-048. 가이드 [`mobile-native.ko.md`](mobile-native.ko.md), 설계
       (bring-into-view), 최소 줄 수(`minLines`). 그리고 단계 화면의 틀.
 - [x] **세그먼트 컨트롤(0.8.0, #149, 2026-11-13)** — `DdsSegmentedControl`·`DdsSegment`. Qooroo의 명함 종류 토글이
       웹 SegmentedControl 모양을 골라서(소유자) 그 웹 규칙을 터치 크기 그대로 옮겼다. 가이드 §12, 변경 기록 0.8.0.
-      소유자가 정할 것: 고른 면의 그림자(§10의 20번). 다음: Qooroo가 앱의 사본 `DdsStyleSegmented`를 이것으로 바꾼다.
+      고른 면은 0.8.1에서 `bg.raised`(어두운 `zinc.800`), 그림자 1단계로 확정(D-054, §10의 20번). 다음: Qooroo가 앱의 사본 `DdsStyleSegmented`를 이것으로 바꾼다.
 - [x] **화면 틀(0.7.0) — 배포했다(#147, `android-v0.7.0`, 2026-11-13).** 정산나우가 로컬 빌드로 옮겨 배포 전에 확인했다. 앱의 모든 화면을 DDS 부품으로 옮기고, 475×751·704×933·933×704에서 밝은·어두운 화면으로(475×751은 글자 200%도) `DdsFrameCheck`와 `assertSameLines`로 쟀다 — 1dp 넘게 어긋난 시작선이 없었다. 펼친 폰의 전체 연결 테스트에서 DDS 탓의 실패는 없었다. 거기서도 확인하지 못한 것: 폰을 실제로 가로로 돌린 것, TalkBack, 접힌 폰의 전체 테스트.
       `DdsAppFrame`, 새 `DdsScaffold`, `DdsBodyColumn`·`ddsBody`·`ddsBodyLines`, 본문 선에 서는 `DdsTopBar`
       (`onBack`, 두 줄 제목), `DdsCenteredColumn`·`DdsCenteredTitle`, `DdsPaneList`·`DdsPaneItem`, 새 꾸러미

docs/decisions.md

@@ -5,6 +5,47 @@
 
 ---
 
+## D-054 — 고른 세그먼트는 `bg.raised` 면에 그림자 1단계 (2026-11-13)
+
+**문제.** 세그먼트 컨트롤의 고른 칸은 `bg.default` 면이었다. 밝은 화면에서는 흰 면이 `bg.subtle`
+트랙 위로 올라와 보이지만, 어두운 화면에서는 `bg.default`(`zinc.950` `#09090B`)가 트랙
+`bg.subtle`(`zinc.900` `#18181B`)보다 **어둡고** 그림자도 보이지 않아, 고른 칸이 구멍처럼 보였다.
+Qooroo의 전체 화면 점검에서 실제로 지적됐다. 안드로이드 0.8.0과 웹 `SegmentedControl`이 같았다.
+또 안드로이드 가이드 §10의 5번(카드·메뉴 그림자 없음)과 달리 이 면은 웹의 그림자를 그대로 두어
+§10의 20번으로 소유자 확인을 기다리고 있었다.
+
+**소유자 결정(2026-11-13, Qooroo 세션을 거쳐).** "아 그럼 그렇게 가자. 그림자는 너의 추천대로."
+어두운 면의 색은 새 토큰으로 정했다(이 세션에서 고른 안).
+
+**결정.**
+
+1. **새 시맨틱 토큰 `color.bg.raised`.** 밝은 화면 `#ffffff`(전과 같은 흰 면), 어두운 화면
+   `zinc.800`(`#27272A`) — `bg.subtle`보다 한 단계 밝다. 뜻은 "옅은 바탕 위로 올라온 면"이고 첫
+   쓰임은 고른 세그먼트다. 제품이 정하는 바탕 셋(D-053)에는 넣지 않는다 — 시스템 값이다.
+2. **고른 세그먼트 면은 `bg.raised`**, 웹(`dds-css` → react·solid·vue)과 안드로이드
+   (`DdsSegmentedControl`)가 함께 바뀐다.
+3. **그림자는 1단계 그대로.** 2단계는 2dp 트랙 간격 밖으로 번져 떠 있는 카드처럼 보인다. 1dp
+   `border.strong` 선도 그대로다. 안드로이드 §10의 20번은 이것으로 확정이다.
+
+**대비.** `text.primary`(`zinc.50`) 위 `bg.raised` 어두운 값 14.27:1, `text.secondary`
+(`zinc.400`) 5.81:1. 밝은 화면은 전과 같다. `tests/foundation-contracts.test.mjs`와 안드로이드
+`ColorSchemeTest`가 "두 테마 모두 `bg.raised`가 `bg.subtle`보다 밝고, 본문·보조 글자가 4.5:1 이상"을
+고정한다.
+
+**대안.** ① `border.default`(어두운 `zinc.800`)를 면에 칠한다 — 선 토큰을 면에 쓰는 것이고, 밝은
+화면에서는 `zinc.200` 회색 면이 되어 웹 모양이 바뀐다. ② 트랙 위에 `overlay.hover-tint`(흰 8%)를
+얹는다(약 `#2B2B2E`) — 덮개 토큰이라 hover한 다른 칸과 고른 칸이 똑같아진다. ③ `bg.elevated` —
+어두운 값이 트랙과 같은 `zinc.900`이다.
+
+**영향.** 웹 패키지는 토큰이 하나 늘었다(추가만, 이름 변경·삭제 없음). 어두운 화면의 세그먼트
+컨트롤만 달라 보인다. 안드로이드는 0.8.1(`DdsColors.bgRaised` 추가). 이 토큰의 사본을 들고 있는
+소비자(asklinq `apps/api/src/dds/tokens.ts`)는 다음 동기화 때 받는다.
+
+**다시 볼 때.** `bg.raised`를 쓰는 두 번째 부품이 생길 때(토글 손잡이 등) — 뜻이 "고른 세그먼트"보다
+넓어지는지.
+
+---
+
 ## D-053 — 제품은 대비 예외를 적을 수 있고, 바탕 셋을 정한다 (2026-11-12)
 
 **문제.** Qooroo가 앱 모양을 다시 정하면서 DDS 안드로이드 0.5.0으로 할 수 없는 것이 나왔다.

docs/design-system.ko.md

@@ -170,6 +170,7 @@
 | `color.bg.default` | `#ffffff` | `zinc.950` | 기본 화면 배경 |
 | `color.bg.subtle` | `zinc.50` | `zinc.900` | 섹션·카드 구분 배경 |
 | `color.bg.elevated` | `#ffffff` + elevation | `zinc.900` | 모달·팝오버·시트 |
+| `color.bg.raised` | `#ffffff` | `zinc.800` | 옅은 바탕 위로 올라온 면 — 세그먼트의 고른 칸. 다크에서 `bg.subtle`보다 한 단계 밝다 (D-054) |
 | `color.bg.brand` | `cyan.500` | `cyan.500` | 브랜드 강조 면 (주요 버튼 등) |
 | `color.bg.brand-hover` | `cyan.400` | `cyan.400` | 브랜드 면 hover (홈피 관용) |
 | `color.bg.brand-subtle` | `cyan.50` | `cyan.900` | 브랜드 옅은 배경 |

docs/design-system.md

@@ -178,6 +178,7 @@ toggle**; both mappings are first-class from day one.
 | `color.bg.default` | `#ffffff` | `zinc.950` | base screen background |
 | `color.bg.subtle` | `zinc.50` | `zinc.900` | section/card separation |
 | `color.bg.elevated` | `#ffffff` + elevation | `zinc.900` | modals, popovers, sheets |
+| `color.bg.raised` | `#ffffff` | `zinc.800` | a face raised above the quiet background — the chosen segment. In dark one step lighter than `bg.subtle` (D-054) |
 | `color.bg.brand` | `cyan.500` | `cyan.500` | brand surfaces (primary buttons etc.) |
 | `color.bg.brand-hover` | `cyan.400` | `cyan.400` | brand surface hover (homepage idiom) |
 | `color.bg.brand-subtle` | `cyan.50` | `cyan.900` | soft brand backgrounds |