@teamblind-chorus/ui 1.2.0 → 2.0.0

package/agents/components/divider/divider.spec.json

@@ -2,7 +2,7 @@
   "$schema": "../../spec.schema.json",
   "name": "Divider",
   "family": "divider",
-  "description": "Section-break band — a single full-bleed block painted with `sys.color.scrimSubtle` (~8% inverse-tone overlay — black scrim in light mode, white scrim in dark) at a fixed block thickness of `sys.layout.stack.xs` (8). The translucent fill stays visible on every host surface tier, so the band reads as a region boundary whether it sits on plain page surface, an elevated container, a hero band, or a coloured card — without retoning per-host. No appearance axis, no thickness prop, no orientation prop: Divider ships one canonical band. The host paints no margin / padding / gap around it — the 8 of scrimSubtle IS the breathing.",
+  "description": "Section-break band — a single full-bleed block painted with `sys.color.border.default` (~8% inverse-tone overlay — black scrim in light mode, white scrim in dark) at a fixed block thickness of `sys.layout.stack.xs` (8). The translucent fill stays visible on every host surface tier, so the band reads as a region boundary whether it sits on plain page surface, an elevated container, a hero band, or a coloured card — without retoning per-host. No appearance axis, no thickness prop, no orientation prop: Divider ships one canonical band. The host paints no margin / padding / gap around it — the 8 of border.default IS the breathing.",
   "element": "hr",
   "props": {
     "aria-hidden": {
@@ -19,12 +19,12 @@
   "slots": {
     "container": {
       "required": true,
-      "description": "The tonal band itself. `sys.color.scrimSubtle` fill, `sys.layout.stack.xs` (8) block thickness, full inline width, no inline padding, no corner radius, no border. The native `<hr>` element with all browser defaults reset (no margin, no border, no background-image).",
+      "description": "The tonal band itself. `sys.color.border.default` fill, `sys.layout.stack.xs` (8) block thickness, full inline width, no inline padding, no corner radius, no border. The native `<hr>` element with all browser defaults reset (no margin, no border, no background-image).",
       "intrinsic": true
     }
   },
   "sizing": {
-    "background": "sys.color.scrimSubtle",
+    "background": "sys.color.border.default",
     "thickness": "sys.layout.stack.xs",
     "inlineWidth": "100%",
     "border": "none",
@@ -32,17 +32,17 @@
     "margin": "0"
   },
   "appearance": {
-    "background": "sys.color.scrimSubtle",
-    "note": "The only fill tone — Divider has no emphasis axis. Painted as a translucent ~8% inverse-tone overlay (black in light, white in dark) so the band stays visible on every host surface tier without colliding with a fixed neutral step. Mirrors the `scrimSubtle` contract used by Banner default, Chip / Tag default, Progress track, StatusTag neutral, and Skeleton."
+    "background": "sys.color.border.default",
+    "note": "The only fill tone — Divider has no emphasis axis. Painted as a translucent ~8% inverse-tone overlay (black in light, white in dark) so the band stays visible on every host surface tier without colliding with a fixed neutral step. Mirrors the `border.default` contract used by Banner default, Chip / Tag default, Progress track, StatusTag neutral, and Skeleton."
   },
   "behavior": {
     "ariaHidden": "Defaults to `aria-hidden=\"true\"` because the band is decorative chrome — screen-reader users navigate by headings and landmarks, not visual breaks.",
     "fullBleed": "Inline width is 100% of the host's content box. Divider claims the page rail in full and must not be wrapped in a padding-inline container — the band reading edge-to-edge IS what makes it a region boundary.",
-    "thicknessFixed": "Block thickness is fixed at `sys.layout.stack.xs` (8) and is not a prop. Heavier bands would compete with content; thinner bands collapse to a hairline (use the host's own `outlineVariant` border for row-level breaks, not Divider)."
+    "thicknessFixed": "Block thickness is fixed at `sys.layout.stack.xs` (8) and is not a prop. Heavier bands would compete with content; thinner bands collapse to a hairline (use the host's own `border.default` border for row-level breaks, not Divider)."
   },
   "forbidden": [
-    "divider used as a row separator inside a List — the list's own `divider={true}` paints those as a hairline `outlineVariant` rule",
-    "divider painted with `outlineVariant` / a fixed neutral step instead of `sys.color.scrimSubtle` — fixed steps collide with the surface ladder and the divider stops reading on raised surfaces",
+    "divider used as a row separator inside a List — the list's own `divider={true}` paints those as a hairline `border.default` rule",
+    "divider painted with `border.default` / a fixed neutral step instead of `sys.color.border.default` — fixed steps collide with the surface ladder and the divider stops reading on raised surfaces",
     "divider wrapped in a padding-inline div or `style={{ marginInline }}` — Divider is full-bleed and must touch the page edge to read as a region boundary",
     "divider given outer `margin-block` / surrounding `padding-block` to fake more breathing — the 8 thickness is the breathing, and the parent column never pays a gap around Divider",
     "divider painted with a corner radius or stroke — the band is a paint, not a card",

package/agents/components/empty-state/empty-state.md

@@ -1,5 +1,7 @@
 # EmptyState
 
+> 🇰🇷 한국어: [`i18n/ko/schema/components/empty-state/empty-state.md`](../../../i18n/ko/schema/components/empty-state/empty-state.md)
+
 The centered composition a surface paints when it holds no data yet — an optional monochrome illustration, a required headline, optional body copy, and an optional primary CTA that performs the one action that fills the surface.
 
 **Reach for this when** a feed, list, inbox, or search result would otherwise paint blank — a fresh account's empty feed, a search returning nothing, a notifications surface with nothing unread. **Skip when** the data is still loading (use [Skeleton](../skeleton/skeleton.md) — an in-flight tonal placeholder) or when the message is a transient confirmation (use [Toast](../toast/toast.md)).
@@ -24,9 +26,7 @@ import { ChatIcon } from '@teamblind-chorus/ui/icons';
 />
 ```
 
-## Use cases
-
-### Without illustration
+## No illustration
 
 The illustration is optional — omit it for a tighter, text-led zero state where a glyph would add nothing. The headline still leads; the body and CTA follow the same stack rhythm.
 
@@ -45,9 +45,9 @@ import { EmptyState } from '@teamblind-chorus/ui';
 ## Slots
 
 - **container** — centered flex column holding the whole composition. `align-items: center`, `text-align: center`. No surface fill of its own. `role="status"` so the empty state is announced without yanking focus.
-- **illustration** *(optional)* — centered glyph / illustration above the headline. `ref.space.600` (48) box, painted monochrome in `sys.color.onSurfaceVariant`.
-- **headline** — required lead line. `sys.typo.heading.sm` / `sys.color.onSurface`.
-- **body** *(optional)* — supporting line below the headline. `sys.typo.body.sm` / `sys.color.onSurfaceVariant`.
+- **illustration** *(optional)* — centered glyph / illustration above the headline. `ref.space.600` (48) box, painted monochrome in `sys.color.text.subtle`.
+- **headline** — required lead line. `sys.typo.heading.sm` / `sys.color.text.default`.
+- **body** *(optional)* — supporting line below the headline. `sys.typo.body.sm` / `sys.color.text.subtle`.
 - **action** *(optional)* — the primary CTA, composed from the `action` object as a default-size primary [Button](../button/button.md). There is no free `cta` slot.
 
 ## Anatomy
@@ -55,9 +55,9 @@ import { EmptyState } from '@teamblind-chorus/ui';
 | Slot         | Token bindings |
 |--------------|----------------|
 | container    | Centered flex column, `align-items: center`, `text-align: center`, no fill; `role="status"` |
-| illustration | `ref.space.600` (48 × 48) box, `sys.color.onSurfaceVariant` (`currentColor`), `sys.layout.stack.sm` (12) below it to the headline |
-| headline     | `sys.typo.heading.sm`, `sys.color.onSurface` |
-| body         | `sys.typo.body.sm`, `sys.color.onSurfaceVariant`, `sys.layout.stack.2xs` (4) above it from the headline |
+| illustration | `ref.space.600` (48 × 48) box, `sys.color.text.subtle` (`currentColor`), `sys.layout.stack.sm` (12) below it to the headline |
+| headline     | `sys.typo.heading.sm`, `sys.color.text.default` |
+| body         | `sys.typo.body.sm`, `sys.color.text.subtle`, `sys.layout.stack.2xs` (4) above it from the headline |
 | action       | Default-size primary [Button](../button/button.md), `sys.layout.stack.md` (16) above it from the body |
 
 ## Behavior

package/agents/components/empty-state/empty-state.spec.json

@@ -8,17 +8,17 @@
     "illustration": {
       "type": "node",
       "optional": true,
-      "description": "Optional leading glyph or illustration, centered above the headline. Sized to a `ref.space.600` (48) box — larger than `sys.icon.lg` (24), realizing DESIGN.md's `icon.xl` or larger intent (no `icon.xl` icon-size rung exists; the icon scale stops at `lg`). Painted in `sys.color.onSurfaceVariant` via `currentColor` so it reads as quiet, monochrome chrome — illustrations stay monochrome unless they carry deliberate brand-moment intent. Separated from the headline by `sys.layout.stack.sm` (12)."
+      "description": "Optional leading glyph or illustration, centered above the headline. Sized to a `ref.space.600` (48) box — larger than `sys.icon.lg` (24), realizing DESIGN.md's `icon.xl` or larger intent (no `icon.xl` icon-size rung exists; the icon scale stops at `lg`). Painted in `sys.color.text.subtle` via `currentColor` so it reads as quiet, monochrome chrome — illustrations stay monochrome unless they carry deliberate brand-moment intent. Separated from the headline by `sys.layout.stack.sm` (12)."
     },
     "headline": {
       "type": "node",
       "required": true,
-      "description": "The required lead line. `sys.typo.heading.sm` in `sys.color.onSurface`. Names what the surface is for / why it is empty in one short line (e.g. 'No posts yet')."
+      "description": "The required lead line. `sys.typo.heading.sm` in `sys.color.text.default`. Names what the surface is for / why it is empty in one short line (e.g. 'No posts yet')."
     },
     "body": {
       "type": "node",
       "optional": true,
-      "description": "Optional supporting line below the headline. `sys.typo.body.sm` in `sys.color.onSurfaceVariant`, separated from the headline by `sys.layout.stack.2xs` (4). One sentence — the second of the three lines (e.g. 'Conversations you start or join will appear here')."
+      "description": "Optional supporting line below the headline. `sys.typo.body.sm` in `sys.color.text.subtle`, separated from the headline by `sys.layout.stack.2xs` (4). One sentence — the second of the three lines (e.g. 'Conversations you start or join will appear here')."
     },
     "action": {
       "type": "object",
@@ -34,17 +34,17 @@
     },
     "illustration": {
       "required": false,
-      "description": "Optional centered glyph / illustration above the headline. `ref.space.600` (48) box, painted in `sys.color.onSurfaceVariant` (monochrome). `sys.layout.stack.sm` (12) below it to the headline.",
+      "description": "Optional centered glyph / illustration above the headline. `ref.space.600` (48) box, painted in `sys.color.text.subtle` (monochrome). `sys.layout.stack.sm` (12) below it to the headline.",
       "accepts": ["icon"]
     },
     "headline": {
       "required": true,
-      "description": "Required headline line. `sys.typo.heading.sm` / `sys.color.onSurface`.",
+      "description": "Required headline line. `sys.typo.heading.sm` / `sys.color.text.default`.",
       "accepts": ["text"]
     },
     "body": {
       "required": false,
-      "description": "Optional supporting line. `sys.typo.body.sm` / `sys.color.onSurfaceVariant`. `sys.layout.stack.2xs` (4) above it from the headline.",
+      "description": "Optional supporting line. `sys.typo.body.sm` / `sys.color.text.subtle`. `sys.layout.stack.2xs` (4) above it from the headline.",
       "accepts": ["text"]
     },
     "action": {
@@ -56,20 +56,20 @@
   "sizing": {
     "containerAlign": "center",
     "illustrationSize": "ref.space.600",
-    "illustrationColor": "sys.color.onSurfaceVariant",
+    "illustrationColor": "sys.color.text.subtle",
     "illustrationGap": "sys.layout.stack.sm",
     "headlineTypo": "sys.typo.heading.sm",
-    "headlineColor": "sys.color.onSurface",
+    "headlineColor": "sys.color.text.default",
     "bodyTypo": "sys.typo.body.sm",
-    "bodyColor": "sys.color.onSurfaceVariant",
+    "bodyColor": "sys.color.text.subtle",
     "bodyGap": "sys.layout.stack.2xs",
     "actionGap": "sys.layout.stack.md"
   },
   "appearance": {
-    "illustration": "sys.color.onSurfaceVariant",
-    "headline": "sys.color.onSurface",
-    "body": "sys.color.onSurfaceVariant",
-    "note": "No emphasis axis — EmptyState has one quiet appearance. The illustration and body sit in the muted `onSurfaceVariant` tone; the headline steps up to `onSurface`. The only chromatic emphasis is the CTA, which is a primary `Button` (its own `sys.color.primary` fill) so the single fill-the-surface action reads as primary both in intent and visually."
+    "illustration": "sys.color.text.subtle",
+    "headline": "sys.color.text.default",
+    "body": "sys.color.text.subtle",
+    "note": "No emphasis axis — EmptyState has one quiet appearance. The illustration and body sit in the muted `onSurfaceVariant` tone; the headline steps up to `onSurface`. The only chromatic emphasis is the CTA, which is a primary `Button` (its own `sys.color.background.primary` fill) so the single fill-the-surface action reads as primary both in intent and visually."
   },
   "behavior": {
     "centered": "The whole composition is centered (block + inline) inside the host surface that would otherwise hold the data. EmptyState owns no surface fill — the host supplies the surface tier and the bounding box; EmptyState only centers its column inside it.",
@@ -82,6 +82,6 @@
     "more than three lines of copy — headline + body must read as at most three lines total (what the surface is for · why it is empty · the one action that fills it); longer prose belongs in a Banner or a help surface",
     "the CTA rendered as anything but a default-size primary Button — the fill action is the surface's primary action and must read as primary; do not down-rank it to a text or outlined button, and do not render two competing CTAs",
     "EmptyState used as a loading placeholder for data that is still arriving — that is `skeleton` (an in-flight tonal block). EmptyState is the durable no-data surface, not a transient one",
-    "the illustration painted in a chromatic tone for non-brand empty states — it stays monochrome `sys.color.onSurfaceVariant` unless it deliberately carries a brand moment"
+    "the illustration painted in a chromatic tone for non-brand empty states — it stays monochrome `sys.color.text.subtle` unless it deliberately carries a brand moment"
   ]
 }

package/agents/components/feed/ad.md

@@ -34,9 +34,7 @@ import { FeedAd } from '@teamblind-chorus/ui';
 />
 ```
 
-## Use cases
-
-### With dismiss
+## Dismiss
 
 Wire `onDismiss` to render the trailing close icon for placements that give the reader a dismiss path.
 
@@ -80,7 +78,7 @@ import { FeedAd } from '@teamblind-chorus/ui';
 | title → body     | 8px vertical gap (`sys.layout.stack.xs`) |
 | title            | `heading.sm` (16 / Semibold), `onSurface`, single-line truncate |
 | body             | 14 / Regular, `onSurfaceVariant`, two-line clamp |
-| bottom divider   | `sys.borderWidth.hairline` × `sys.color.outlineVariant` — `border-bottom` on the card so a sponsored placement drops into a Post stream without breaking the inter-card seam rhythm. |
+| bottom divider   | `sys.borderWidth.hairline` × `sys.color.border.default` — `border-bottom` on the card so a sponsored placement drops into a Post stream without breaking the inter-card seam rhythm. |
 | cta-group        | `radius.md` (8px) clip wrapping media + CTA, `overflow: hidden`, no internal gap |
 | media            | Full inline width, 16:10 aspect ratio, no own radius (the group clips). Runtime fallback when `src` is missing or fails to load: `background-image: url('/placeholder.png')` over a `surfaceContainerHigh` base. |
 | cta              | [Standard Button](../button/standard.md) — `fullWidth`, `medium`, `primary` by default, **`border-radius: 0`** so the squared bottom edge meets the group's clip. `cta.color` overrides the surface fill with a free-form Hex. |

package/agents/components/feed/ad.spec.json

@@ -126,7 +126,7 @@
     }
   },
   "sizing": {
-    "containerFill": "sys.color.surface",
+    "containerFill": "sys.color.surface.default",
     "containerPaddingBlock": "sys.layout.container.lg",
     "containerPaddingInline": "sys.layout.container.md",
     "containerRadius": "sys.radius.md",
@@ -134,24 +134,24 @@
     "brandRowGap": "sys.layout.inline.md",
     "brandAvatarSize": 32,
     "brandNameTypo": "sys.typo.label.md",
-    "brandNameColor": "sys.color.onSurface",
+    "brandNameColor": "sys.color.text.default",
     "brandSubtitleTypo": "sys.typo.label.sm",
-    "brandSubtitleColor": "sys.color.onSurfaceVariant",
+    "brandSubtitleColor": "sys.color.text.subtle",
     "brandSubtitleDefault": "Sponsored",
     "dismissIconSize": "sys.icon.md",
-    "dismissColor": "sys.color.onSurfaceVariant",
+    "dismissColor": "sys.color.text.subtle",
     "dismissHitArea": 24,
     "titleTypo": "sys.typo.heading.sm",
-    "titleColor": "sys.color.onSurface",
+    "titleColor": "sys.color.text.default",
     "containerBottomDividerWidth": "sys.borderWidth.hairline",
-    "containerBottomDividerColor": "sys.color.outlineVariant",
+    "containerBottomDividerColor": "sys.color.border.default",
     "bodyTypo": "sys.typo.body.sm",
-    "bodyColor": "sys.color.onSurfaceVariant",
+    "bodyColor": "sys.color.text.subtle",
     "bodyLineClamp": 2,
     "titleBodyGap": "sys.layout.stack.xs",
     "ctaGroupRadius": "sys.radius.md",
     "mediaAspectRatio": "16 / 10",
-    "mediaFallbackFill": "sys.color.surfaceContainerHigh",
+    "mediaFallbackFill": "sys.color.surface.sunken",
     "mediaFallbackImage": "/placeholder.png",
     "mediaFallbackImageRendering": "background-image, cover, center — sits under the runtime <img>; visible only when the inline image is missing or fails to load, so the hero block still resolves to an image rather than an empty surface tone.",
     "ctaAppearance": "primary",
@@ -168,13 +168,13 @@
     "composition": "inward"
   },
   "behavior": {
-    "brandNameRequired": "Every FeedAd MUST carry an explicit `brand.name`. Lovable / mock generators must never drop it — the row is the ad's legal attribution surface, and a placement without a brand name is not a valid FeedAd.",
+    "brandNameRequired": "Every FeedAd MUST carry an explicit `brand.name`. consumers and mock generators must never drop it — the row is the ad's legal attribution surface, and a placement without a brand name is not a valid FeedAd.",
     "mediaRequired": "Every FeedAd MUST carry a hero `media` block with a non-empty `src`. The `surfaceContainerHigh` fallback is a runtime safety net for load failures, not a design-time omission — at scaffold time, use the bundled `/placeholder.png` rather than omitting `media`.",
     "brandSubtitleAlwaysPresent": "The brand subtitle defaults to `Sponsored` so every placement reads as sponsored content. Consumers may override the copy but cannot omit the row.",
     "ctaGroupBondsMediaAndCta": "Hero media and the CTA share a `radius.md` clip with no internal gap; the CTA's own `border-radius` is zeroed so its squared bottom edge meets the group's outer round.",
     "ctaColorIsFreeFormHex": "`cta.color` accepts any Hex string supplied by the ad client. Only the button surface fill and border swap — typography, size, and full-width geometry stay on the Standard Button tokens.",
     "slotOmissionCollapses": "`title`, `body`, and `dismiss` are opt-in — when any is absent the layout reflows without reserved whitespace. `brand.name` and `media` are required and may NOT be omitted.",
-    "containerBottomDivider": "Each Ad card carries the same hairline bottom divider as a Post (`sys.borderWidth.hairline` × `sys.color.outlineVariant`) so a sponsored placement drops into a Post stream without breaking the inter-card seam rhythm.",
+    "containerBottomDivider": "Each Ad card carries the same hairline bottom divider as a Post (`sys.borderWidth.hairline` × `sys.color.border.default`) so a sponsored placement drops into a Post stream without breaking the inter-card seam rhythm.",
     "truncationNotWrap": "`title` truncates; `body` clamps to two lines.",
     "dismissOptIn": "Default placements omit the trailing X; it only renders when `onDismiss` is wired.",
     "ctaCommitsAlone": "FeedAd has no engagement row. The cta-group, when present, carries a single full-width Standard Button — never two CTAs."

package/agents/components/feed/post.md

@@ -31,9 +31,7 @@ import { Feed } from '@teamblind-chorus/ui';
 />
 ```
 
-## Use cases
-
-### With flag
+## Flag
 
 Optional single-word editorial label (`HOT`, `NEW`, `PINNED`). Use sparingly.
 
@@ -57,9 +55,9 @@ import { Feed } from '@teamblind-chorus/ui';
 />
 ```
 
-### With poll
+## Poll
 
-Inline poll module between body and mention/footer. Leading `PollFillIcon` + label paint in `sys.color.brand`; label constrained to the literal `Poll`.
+Inline poll module between body and mention/footer. Leading `PollFillIcon` + label paint in `sys.color.text.brand`; label constrained to the literal `Poll`.
 
 ```preview
 feed/post-with-poll
@@ -81,9 +79,9 @@ import { Feed } from '@teamblind-chorus/ui';
 />
 ```
 
-### With offer evaluation
+## Offer evaluation
 
-Same chrome as `poll`; leading glyph swaps to `CompensationFillIcon` and both glyph and label paint in `sys.color.success`. Label constrained to the literal `Offer`.
+Same chrome as `poll`; leading glyph swaps to `CompensationFillIcon` and both glyph and label paint in `sys.color.text.success`. Label constrained to the literal `Offer`.
 
 ```preview
 feed/post-with-offer
@@ -105,7 +103,7 @@ import { Feed } from '@teamblind-chorus/ui';
 />
 ```
 
-### With citation
+## Citation
 
 Citation module naming an external source. Hero image flush-left at 120px wide; title clamps to two lines.
 
@@ -128,9 +126,37 @@ import { Feed } from '@teamblind-chorus/ui';
 />
 ```
 
-### Group
+## Full composition
+
+Every optional slot present.
+
+```preview
+feed/post-full
+---
+import { Feed } from '@teamblind-chorus/ui';
+
+<Feed
+  flag="HOT"
+  channel="Channel"
+  timestamp="Now"
+  followAction
+  meta={['Company', 'Job Function', 'Username']}
+  title="Title"
+  body="Body textBody textBody textBody textBody textBody textBody…"
+  thumbnail={{ alt: 'Cover', stacked: true }}
+  poll={{ label: 'Poll', participants: 'Number' }}
+  citation={{
+    title: 'Keep subject area text on two lines or less.',
+    source: 'Source',
+  }}
+  mention="@Mention"
+  engagement={{ likes: 999, comments: 999, views: 999 }}
+/>
+```
+
+## Group
 
-Three (or more) Post cards bundled inside `<FeedGroup>` for thread-grouped or topic-bundled feeds. The wrapper adds no chrome — inner Posts keep their padding and divider; the wrapper carries intent (`role="region"` + optional `aria-label`).
+Three (or more) Post cards bundled inside `<FeedGroup>` for thread-grouped or topic-bundled feeds — the realistic composition the single-variant sections below each isolate one facet of. The wrapper adds no chrome — inner Posts keep their padding and divider; the wrapper carries intent (`role="region"` + optional `aria-label`). The last Post's bottom divider closes the bundle the same way a standalone Post would.
 
 ```preview
 feed/post-group
@@ -162,34 +188,6 @@ import { Feed, FeedGroup } from '@teamblind-chorus/ui';
 </FeedGroup>
 ```
 
-### Full composition
-
-Every optional slot present.
-
-```preview
-feed/post-full
----
-import { Feed } from '@teamblind-chorus/ui';
-
-<Feed
-  flag="HOT"
-  channel="Channel"
-  timestamp="Now"
-  followAction
-  meta={['Company', 'Job Function', 'Username']}
-  title="Title"
-  body="Body textBody textBody textBody textBody textBody textBody…"
-  thumbnail={{ alt: 'Cover', stacked: true }}
-  poll={{ label: 'Poll', participants: 'Number' }}
-  citation={{
-    title: 'Keep subject area text on two lines or less.',
-    source: 'Source',
-  }}
-  mention="@Mention"
-  engagement={{ likes: 999, comments: 999, views: 999 }}
-/>
-```
-
 ## Slots
 
 - **flag** *(optional)* — single-word editorial label.
@@ -202,7 +200,7 @@ import { Feed } from '@teamblind-chorus/ui';
 - **citation** *(optional)* — inline link-share card with leading hero and source mark.
 - **mention** *(optional)* — tap-anywhere `@Mention` line under the body.
 - **engagement** — footer row of `xsmall` [Text Buttons](../button/text.md) — Likes / Comments commit, Views non-interactive.
-- **bottom divider** *(intrinsic)* — hairline `outlineVariant` seam at the card's bottom edge.
+- **bottom divider** *(intrinsic)* — hairline `border.default` seam at the card's bottom edge.
 
 ## Anatomy
 
@@ -211,7 +209,7 @@ import { Feed } from '@teamblind-chorus/ui';
 | container    | `surface` fill, `sys.layout.container.lg` (24/32) block × `sys.layout.container.md` (16) inline padding, `sys.layout.stack.md` between blocks |
 | flag         | `label.sm` / Semibold, `brand` foreground |
 | avatar       | [Thumbnail](../thumbnail/thumbnail.md) `size={32}` — delegated verbatim |
-| channel      | 12 / Semibold, `onSurface`. `<a>`; hover underline; focus = hairline `sys.color.focus` at `sys.radius.xs` |
+| channel      | 12 / Semibold, `onSurface`. `<a>`; hover underline; focus = hairline `sys.color.border.focused` at `sys.radius.xs` |
 | timestamp    | 12 / Semibold, `outline` |
 | followAction | 12 / Semibold, `primary` (inactive) → `onSurfaceVariant` (active) |
 | meta         | 12 / Semibold, `onSurfaceVariant`. Each `<a>`; middot at `sys.layout.inline.sm` (4px), decorative |
@@ -221,8 +219,8 @@ import { Feed } from '@teamblind-chorus/ui';
 | poll / offer | `surfaceVariant` fill, `radius.md`, 12 × 16 padding, 48px min-height, 14px body. Leading icon + label at 4px gap, 12px to divider, 12px to count. `poll` paints `brand`; `offer` paints `success` (`ref.palette.green.500`) |
 | citation     | Text-column `surfaceVariant`, `radius.md`, 120px-wide hero. 12px padding, 8px gap title↔source. All text 12px. Source mark 16 × 16 at 4px radius, 4px to source name |
 | mention      | `body.sm`, `primary`, italic |
-| engagement   | `xsmall` [Text Buttons](../button/text.md) + static `<span>` (Views). 16px glyph + 12 / Semibold label, 4 × 8 padding, 4px gap. Row gap 12px. Active Like retones label to `sys.color.brand` with `HeartFillIcon` |
-| bottom divider | `sys.borderWidth.hairline` × `sys.color.outlineVariant` — `border-bottom` on the card |
+| engagement   | `xsmall` [Text Buttons](../button/text.md) + static `<span>` (Views). 16px glyph + 12 / Semibold label, 4 × 8 padding, 4px gap. Row gap 12px. Active Like retones label to `sys.color.text.brand` with `HeartFillIcon` |
+| bottom divider | `sys.borderWidth.hairline` × `sys.color.border.default` — `border-bottom` on the card |
 
 ## States
 
@@ -236,7 +234,7 @@ Feed itself is not a focus target; each focusable control paints its own ring pe
 
 - **Slot omission collapses without a gap.** Optional blocks drop out entirely.
 - **Truncation, not wrap.** `meta` / `title` truncate; `body` clamps to two lines; thumbnail is a flex sibling so the clamp computes against reduced inline width.
-- **Like is a toggle.** Tapping swaps `HeartIcon` → `HeartFillIcon` in `sys.color.brand` via `--button-text-label` and increments the count. Controlled (`liked` + `onLikeChange`) or uncontrolled. Aligns via Text Button's [optical alignment](../button/text.md#optical-alignment).
+- **Like is a toggle.** Tapping swaps `HeartIcon` → `HeartFillIcon` in `sys.color.text.brand` via `--button-text-label` and increments the count. Controlled (`liked` + `onLikeChange`) or uncontrolled. Aligns via Text Button's [optical alignment](../button/text.md#optical-alignment).
 - **Comments commits; Views does not.** Views is a non-interactive `<span>`.
 - **Channel and meta are independent links.** Middot separators decorative (`aria-hidden`), outside link hit areas.
 - **`<FeedGroup>` bundles consecutive Posts.** Semantic wrapper only — inner Posts keep their own padding and bottom divider.