@mindlogic-ai/logician-ui 5.0.0-alpha.3 → 5.0.0-alpha.30

package/src/foundations/BrandColour.mdx

@@ -36,10 +36,17 @@ token for which surface: **Setup/Theme/Using Semantic Tokens**.
   type. Coral never fills a wide surface.
 - **Status colours mean status.** `danger`, `warning`, `success` and `info`
   are never decoration or a way to tell groups apart.
+- **State is not status.** A control that is on is `control.on`; something the
+  user marked to keep (a star, a bookmark) is `mark.starred`. Never
+  `primary`, black, white or a status colour for state.
 - **The twelve system hues are for categories only.** `category.{hue}.*`
   carries no status meaning.
 - **Blue means data and links.** `fg.link` for links; a blue monochrome ramp
-  for single-measure charts (see Using Semantic Tokens).
+  (`data.1–4`) for single-measure charts (see Using Semantic Tokens).
+- **Above and below a baseline is blue and orange.** Charts against a real
+  baseline (vs plan, vs average) use `diverging.*`: blue above, orange below,
+  `diverging.mid` at the baseline. Orange fills only, never red/green for
+  direction.
 - **No gradients.** A brand band is one solid colour.
 
 ## Neutrals
@@ -61,7 +68,8 @@ sand tint (`secondary.surface`) is not a component background; a soft fill is
 - The **focus ring** is `focus.ring`: black in light mode, light beige in dark
   mode. It is never coral, because a coral ring reads as an error border.
 - **Disabled** is a fixed grey (`disabled.bg` / `disabled.fg`) with no opacity
-  and no hover change. Beige is already the hover and pressed colour, so a
+  and no hover change. Fill-less ghost buttons have no `disabled.bg` to carry
+  the state, so their label/icon uses the lighter `disabled.fgGhost`. Beige is already the hover and pressed colour, so a
   beige disabled button would look like one being pressed.
 - Sign-up, payment and upgrade buttons are `Button variant="primary"` (black),
   not coral.
@@ -85,6 +93,7 @@ borrowing a hue.
 | The coral icon on the black run button (`action.iconOnSolid`) | Wide surfaces, light backgrounds, card fills |
 | The AI-working mark, the logo mark, large type (`action.mark`) | Promotion badges |
 | The unread count badge (`count.*`, a deeper coral red) | Warning and error text or borders; switches and checkboxes when on; links |
+| The prize amount on an event screen, as display type (`action.mark`) | Event card headers, modal footer bands, small eyebrow text |
 
 - **Points, not surfaces.** Nothing coral is larger than a button, badge or
   icon. Coral and the error red are only a few degrees apart in hue; at light
@@ -94,6 +103,49 @@ borrowing a hue.
   Super Agent diamond are status and identity marks, so they may appear next to
   a run signal.
 
+## Campaign and event surfaces
+
+First decide whether the screen is product or marketing. A page that needs a
+login, or has controls that change the account, is product. In-app event pages,
+their intro modals and promo banners are product. Marketing is everything
+outside the product that people see logged out: baze.co, SNS posts, print.
+
+- **In the product, events follow the coral rule above.** No coral fills and
+  no text on coral. Emphasis comes from the illustration; a band behind a card
+  header or modal footer is `bg.muted` or `layer.*`, never `secondary.surface`
+  or coral.
+- **The prize may be coral.** The reward amount as display type in
+  `action.mark` (24px and up, or 19px bold) is the screen's one coral moment.
+  Everything around it stays neutral.
+- **Small text is never coral.** Eyebrows and labels use `fg.subtle`. Darkening
+  coral until small text passes contrast lands right next to the error text red
+  (`danger.fg`).
+- **A thin decorative line counts as a point.** A coral line up to 4px with no
+  text or information on it is allowed, like the band under the FactChat promo
+  banner.
+- **Event CTAs stay `primary`.** An event screen is a product screen, so
+  `Button variant="accent"` stays on marketing heroes (see Button usage), and a
+  reward claim is never coral.
+- **A marketing page may have one full-bleed coral band.** Only ink or cream
+  content sits on it; elsewhere on that page coral is large type or art only.
+  The reference is baze.co/social: the offer section is the band, and
+  "80개 이상", "월 5,900원" and "9,000" are the large coral type.
+
+## State: on and starred
+
+<Canvas of={BrandColour.State} sourceState="none" />
+
+- **Binary on/off state uses `control.on`.** The Switch track when on, a
+  selected toggle chip, any on/off control; the thumb or label on it is
+  `control.onFg`. It is green, but it is not `success`: "on" does not mean
+  "succeeded".
+- **User-marked items use `mark.starred`.** Favourites, saved templates,
+  starred items, bookmarks: the filled icon is `mark.starred`, the unmarked
+  outline stays `fg.icon`. A `primary.main` star is the same ink as the
+  outline, so marked and unmarked differ only in shape.
+- **Never `primary`, black, white or a status colour for state.** Coral stays
+  with send, run, AI-working and counts; blue with data and links.
+
 ## Status
 
 <Canvas of={BrandColour.Status} sourceState="none" />
@@ -183,10 +235,16 @@ BAZE의 화면은 따뜻한 무채색입니다. 크림·아이보리 바탕에
   넓은 면은 코랄로 칠하지 않습니다.
 - **상태색은 상태를 뜻할 때만 씁니다.** `danger`, `warning`, `success`, `info`를
   장식이나 그룹 구분에 빌려 쓰지 않습니다.
+- **켜짐·표시 상태는 상태색이 아닙니다.** 켜진 컨트롤은 `control.on`, 사용자가 남겨
+  두려고 표시한 항목(별표, 북마크)은 `mark.starred`입니다. 이 상태에 `primary`,
+  검정, 흰색, 상태색을 쓰지 않습니다.
 - **열두 가지 시스템 색은 카테고리 구분에만 씁니다.** `category.{hue}.*`에는 상태의
   뜻이 없습니다.
 - **파란색은 데이터와 링크를 뜻합니다.** 링크는 `fg.link`, 하나의 값을 보여 주는
-  차트는 파란색 단색 단계를 씁니다(Using Semantic Tokens 참고).
+  차트는 파란색 단색 단계(`data.1–4`)를 씁니다(Using Semantic Tokens 참고).
+- **기준선 위아래는 파랑과 주황으로 나눕니다.** 계획 대비, 평균 대비처럼 실제 기준선이
+  있는 차트는 `diverging.*`를 씁니다. 기준선 위는 파랑, 아래는 주황, 기준선 자리는
+  `diverging.mid`입니다. 주황은 면에만 쓰고, 방향을 빨강·초록으로 나타내지 않습니다.
 - **그라데이션은 쓰지 않습니다.** 브랜드 띠는 단색 하나로 칠합니다.
 
 ## 무채색
@@ -208,7 +266,8 @@ BAZE의 화면은 따뜻한 무채색입니다. 크림·아이보리 바탕에
 - **포커스 링**은 `focus.ring`으로, 라이트에서는 블랙, 다크에서는 밝은 베이지입니다.
   코랄 링은 오류 테두리처럼 보이므로 쓰지 않습니다.
 - **비활성**은 고정된 회색(`disabled.bg` / `disabled.fg`)이며 투명도를 쓰지 않고
-  호버해도 바뀌지 않습니다. 베이지는 이미 호버와 누름의 색이라, 비활성까지 베이지면
+  호버해도 바뀌지 않습니다. 바탕이 없는 고스트 버튼은 `disabled.bg`가 없으므로 글자·아이콘에
+  더 옅은 `disabled.fgGhost`를 씁니다. 베이지는 이미 호버와 누름의 색이라, 비활성까지 베이지면
   누르는 중인 버튼과 구분되지 않습니다.
 - 가입·결제·업그레이드 버튼은 코랄이 아니라 `Button variant="primary"`(블랙)입니다.
 
@@ -231,6 +290,7 @@ BAZE의 화면은 따뜻한 무채색입니다. 크림·아이보리 바탕에
 | 블랙 실행 버튼 위의 코랄 아이콘 (`action.iconOnSolid`) | 넓은 면, 옅은 배경, 카드 바탕 |
 | AI 작업 중 표시, 로고 마크, 큰 글씨 (`action.mark`) | 프로모션 배지 |
 | 읽지 않은 숫자 배지 (`count.*`, 조금 더 진한 코랄 레드) | 경고·오류 문구와 테두리, 켜진 스위치·체크박스, 링크 |
+| 이벤트 화면의 보상 금액 큰 글씨 (`action.mark`) | 이벤트 카드 머리와 모달 하단 띠, 작은 머리말 글자 |
 
 - **면이 아니라 점으로 씁니다.** 버튼·배지·아이콘보다 큰 면을 코랄로 칠하지 않습니다.
   코랄과 오류 빨강은 색상 차이가 몇 도밖에 나지 않아 옅게 쓰면 같은 색이 됩니다.
@@ -239,6 +299,45 @@ BAZE의 화면은 따뜻한 무채색입니다. 크림·아이보리 바탕에
   버튼이 사라지고 그 자리에 로딩 표시가 나타납니다. 숫자 배지와 Super Agent 마름모는
   상태와 정체성을 나타내는 표시라 실행 신호와 함께 보여도 됩니다.
 
+## 캠페인·이벤트 화면
+
+먼저 그 화면이 제품인지 마케팅인지 가립니다. 로그인해야 들어갈 수 있거나 계정을
+바꾸는 조작이 있으면 제품입니다. 앱 안의 이벤트 페이지와 그 안내 모달, 프로모션
+배너도 제품입니다. 마케팅은 제품 밖에서 로그인 없이 보는 화면으로, baze.co, SNS
+게시물, 인쇄물이 여기에 해당합니다.
+
+- **제품 안의 이벤트도 위의 코랄 규칙을 따릅니다.** 코랄로 면을 칠하지 않고 코랄
+  위에 글자를 올리지 않습니다. 강조는 일러스트로 하고, 카드 머리나 모달 하단의 띠는
+  `bg.muted`나 `layer.*`로 칠합니다. `secondary.surface`나 코랄은 쓰지 않습니다.
+- **보상 금액은 코랄로 쓸 수 있습니다.** 보상 금액을 `action.mark` 큰 글씨(24px
+  이상, 또는 19px 굵게)로 쓰는 것이 그 화면의 하나뿐인 코랄입니다. 주변은 모두
+  무채색으로 둡니다.
+- **작은 글자는 코랄로 쓰지 않습니다.** 작은 머리말이나 라벨은 `fg.subtle`을 씁니다.
+  작은 글자가 대비 기준을 넘을 때까지 코랄을 어둡게 하면 오류 문구의 빨강
+  (`danger.fg`)과 거의 같아집니다.
+- **얇은 장식선은 점으로 봅니다.** 글자나 정보 없이 장식만 하는 4px 이하의 코랄 선은
+  써도 됩니다. FactChat 프로모션 배너 아래의 띠가 그 예입니다.
+- **이벤트의 행동 유도 버튼은 `primary`입니다.** 이벤트 화면도 제품 화면이므로
+  `Button variant="accent"`는 마케팅 히어로에만 씁니다(Button 사용법 참고). 보상 받기
+  버튼도 코랄로 칠하지 않습니다.
+- **마케팅 페이지에는 화면 폭을 가득 채우는 코랄 띠를 하나 둘 수 있습니다.** 그 위에는
+  블랙이나 크림색 내용만 올리고, 페이지의 나머지 부분에서 코랄은 큰 글씨나 그림에만
+  씁니다. 기준은 baze.co/social입니다. 혜택 섹션이 그 띠이고, "80개 이상",
+  "월 5,900원", "9,000"이 코랄 큰 글씨입니다.
+
+## 켜짐과 별표
+
+<Canvas of={BrandColour.State} sourceState="none" />
+
+- **켜고 끄는 상태는 `control.on`입니다.** 켜진 Switch 트랙, 선택된 토글 칩 같은
+  켜짐/꺼짐 컨트롤에 쓰고, 그 위의 손잡이나 글자는 `control.onFg`입니다. 초록색이지만
+  `success`가 아닙니다. 켜졌다는 것은 성공했다는 뜻이 아닙니다.
+- **사용자가 표시한 항목은 `mark.starred`입니다.** 즐겨찾기, 저장한 템플릿, 별표,
+  북마크의 채운 아이콘에 쓰고, 표시하지 않은 외곽선은 `fg.icon`으로 둡니다.
+  `primary.main` 별은 옆의 외곽선과 같은 잉크라 모양으로만 구분됩니다.
+- **상태에 `primary`, 검정, 흰색, 상태색을 쓰지 않습니다.** 코랄은 보내기·실행·AI
+  작업 중·숫자 배지에, 파랑은 데이터와 링크에 남깁니다.
+
 ## 상태
 
 <Canvas of={BrandColour.Status} sourceState="none" />

package/src/foundations/BrandColour.stories.tsx

@@ -1,13 +1,19 @@
-import { Flex, Stack } from '@chakra-ui/react';
+import { Box, Flex, Stack } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Badge } from '../components/Badge';
 import { Button } from '../components/Button';
 import { Card } from '../components/Card';
 import { CountBadge } from '../components/CountBadge';
-import { SendIcon, Sparkles } from '../components/Icon';
+import {
+  SendIcon,
+  Sparkles,
+  StarFilledIcon,
+  StarIcon,
+} from '../components/Icon';
 import { IconButton } from '../components/IconButton';
 import { Tag } from '../components/Tag';
+import { Switch } from '../components/Switch';
 import { Link, Text } from '../components/Typography';
 import { T } from '../guidelines/_components/Lang';
 import { TokenTable } from '../guidelines/_components/TokenTable';
@@ -144,6 +150,15 @@ export const ButtonStates: Story = {
             token: 'disabled.fg',
             use: <T en="Disabled text" ko="비활성 글자" />,
           },
+          {
+            token: 'disabled.fgGhost',
+            use: (
+              <T
+                en="Disabled text/icon of a fill-less ghost button"
+                ko="바탕 없는 고스트 버튼의 비활성 글자·아이콘"
+              />
+            ),
+          },
         ]}
       />
     </Stack>
@@ -258,6 +273,124 @@ const STATUS = [
   { s: 'info', en: 'This group only', ko: '이 그룹만' },
 ] as const;
 
+/**
+ * A favourite toggle as it sits on a thumbnail: a bg.surface circle over the
+ * image, the star inside it. `fill` is the colour of the filled (marked) star;
+ * the unmarked outline is always `fg.icon`.
+ */
+const StarPair = ({ fill }: { fill: string }) => (
+  <Flex gap={3}>
+    {[true, false].map((marked) => (
+      <Box
+        key={String(marked)}
+        position="relative"
+        w="96px"
+        h="64px"
+        borderRadius="md"
+        bg="bg.muted"
+        borderWidth="1px"
+        borderColor="border.subtle"
+      >
+        <Flex
+          position="absolute"
+          top={1.5}
+          right={1.5}
+          w="28px"
+          h="28px"
+          borderRadius="full"
+          bg="bg.surface"
+          align="center"
+          justify="center"
+          aria-label={marked ? '즐겨찾기됨' : '즐겨찾기 안 됨'}
+          role="img"
+        >
+          {marked ? (
+            <StarFilledIcon boxSize="sm" color={fill} />
+          ) : (
+            <StarIcon boxSize="sm" color="fg.icon" />
+          )}
+        </Flex>
+      </Box>
+    ))}
+  </Flex>
+);
+
+/**
+ * State is neither status nor brand: `control.on` for a control that is on,
+ * `mark.starred` for something the user marked to keep. The "Don't" row is
+ * the `primary.main` star this replaces: the same ink as the outline beside it.
+ */
+export const State: Story = {
+  render: () => (
+    <Stack gap={5}>
+      <Flex gap={8} wrap="wrap" align="flex-start">
+        <Stack gap={2}>
+          <Text textStyle="subtext" color="fg.muted">
+            <T en="Switch: off · on" ko="Switch: 꺼짐 · 켜짐" />
+          </Text>
+          <Flex gap={4} align="center">
+            <Switch aria-label="꺼진 스위치">
+              <Switch.Control />
+            </Switch>
+            <Switch defaultChecked aria-label="켜진 스위치">
+              <Switch.Control />
+            </Switch>
+          </Flex>
+        </Stack>
+        <Stack gap={2}>
+          <Text textStyle="subtext" color="fg.muted">
+            <T
+              en="Do: mark.starred · fg.icon outline"
+              ko="이렇게: mark.starred · fg.icon 외곽선"
+            />
+          </Text>
+          <StarPair fill="mark.starred" />
+        </Stack>
+        <Stack gap={2}>
+          <Text textStyle="subtext" color="fg.muted">
+            <T
+              en="Don't: primary.main · same ink as the outline"
+              ko="이렇게 하지 않기: primary.main · 외곽선과 같은 잉크"
+            />
+          </Text>
+          <StarPair fill="primary.main" />
+        </Stack>
+      </Flex>
+      <TokenTable
+        rows={[
+          {
+            token: 'control.on',
+            use: (
+              <T
+                en="On state: Switch track, selected toggle chip"
+                ko="켜짐 상태: Switch 트랙, 선택된 토글 칩"
+              />
+            ),
+          },
+          {
+            token: 'control.onFg',
+            use: (
+              <T
+                en="Thumb or label on control.on"
+                ko="control.on 위 손잡이·글자"
+              />
+            ),
+          },
+          {
+            token: 'mark.starred',
+            use: (
+              <T
+                en="Marked to keep: favourite, saved template, bookmark"
+                ko="사용자가 표시한 항목: 즐겨찾기, 저장한 템플릿, 북마크"
+              />
+            ),
+          },
+        ]}
+      />
+    </Stack>
+  ),
+};
+
 export const Status: Story = {
   render: () => (
     <Stack gap={5}>

package/src/hooks/useLanguage.ts

@@ -8,9 +8,14 @@ export interface LanguageContextValue {
   language: SupportedLanguage;
 }
 
-export const LanguageContext = createContext<LanguageContextValue>({
-  language: 'en',
-});
+/**
+ * The value seen outside any `LogicianProvider`. Exported so `useTranslate`
+ * can tell "no provider" (keep Korean) from a provider set to `en`.
+ */
+export const NO_PROVIDER_LANGUAGE: LanguageContextValue = { language: 'en' };
+
+export const LanguageContext =
+  createContext<LanguageContextValue>(NO_PROVIDER_LANGUAGE);
 
 export const useLanguage = () => useContext(LanguageContext);
 

package/src/hooks/useTranslate.test.tsx

@@ -0,0 +1,46 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import { beforeAll, describe, expect, it } from 'vitest';
+
+import { Button } from '@/components/Button';
+import { LogicianProvider } from '@/components/LogicianProvider';
+import { system } from '@/theme';
+
+beforeAll(() => {
+  // LogicianProvider's color-mode machinery calls it on mount; jsdom has none.
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia;
+});
+
+// Read through Button's 처리 중 default, the string an app sees most.
+describe('useTranslate follows LogicianProvider language', () => {
+  it('stays Korean outside a provider', () => {
+    render(
+      <ChakraProvider value={system}>
+        <Button loading>x</Button>
+      </ChakraProvider>
+    );
+    expect(screen.getByRole('button')).toHaveTextContent('처리 중');
+  });
+
+  it.each([
+    ['ko', '처리 중'],
+    ['en', 'Processing'],
+    ['ja', '処理中'],
+  ] as const)('renders %s', (language, text) => {
+    render(
+      <LogicianProvider language={language} loadFonts={false}>
+        <Button loading>x</Button>
+      </LogicianProvider>
+    );
+    expect(screen.getByRole('button')).toHaveTextContent(text);
+  });
+});

package/src/hooks/useTranslate.ts

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 
 import defaultTranslations from '../translations/Defaults.translations.json';
 import { formatForMarkdown } from '../utils/formatTextForMarkdown';
+import { NO_PROVIDER_LANGUAGE, useLanguage } from './useLanguage';
 
 const DEFAULT_LOCALE = 'ko';
 
@@ -38,12 +39,13 @@ const replaceVariables = (text: string, variables?: { [key: string]: any }) => {
     : parts;
 };
 
-const getLanguage = () => {
-  return 'ko';
-};
-
 export const useTranslate = (translations = {}) => {
-  const userLanguage = getLanguage();
+  // Follow `LogicianProvider`'s `language`, the same one the date pickers
+  // read. Outside a provider there is nothing to follow, so the library keeps
+  // its historical Korean.
+  const context = useLanguage();
+  const userLanguage =
+    context === NO_PROVIDER_LANGUAGE ? DEFAULT_LOCALE : context.language;
   return useCallback(
     (key: string, variables?: { [key: string]: any }) => {
       const locale = (userLanguage as string) ?? DEFAULT_LOCALE;

package/src/index.ts

@@ -66,6 +66,7 @@ export * from './components/MonthPicker';
 export * from './components/Popover';
 
 // Navigation Components
+export * from './components/NavList';
 export * from './components/Pagination';
 
 // Input Variants
@@ -162,6 +163,18 @@ export {
   SYSTEM_HUE_NAMES,
   type SystemHue,
 } from './theme/colors';
+export {
+  CONTROL_RADIUS,
+  CONTROL_SIZES,
+  controlHeightToken,
+  controlHeightVar,
+  type ControlSize,
+  controlSizes,
+  type ControlSizeSpec,
+  CORE_CONTROL_SIZES,
+  type CoreControlSize,
+  getControlSize,
+} from './theme/controlSizes';
 export { noZoomOnFocus } from './theme/formControls';
 export {
   animationStyles,
@@ -178,7 +191,12 @@ export {
 } from './theme/motion';
 export { cubicBezier } from './utils/cubicBezier';
 export { disabledControl, disabledText } from './utils/disabledControl';
-export { FOCUS_RING_SHADOW, focusRing } from './utils/focusRing';
+export {
+  FOCUS_RING_INSET_SHADOW,
+  FOCUS_RING_SHADOW,
+  focusRing,
+  focusRingInset,
+} from './utils/focusRing';
 export {
   staggerDelayMs,
   type StaggerProps,

package/src/theme/BazePalette.stories.tsx

@@ -7,7 +7,19 @@ import {
   ROLE_TOKEN_PATHS,
   SYSTEM_HUE_NAMES,
 } from './colors';
-import { CORAL, RAMPS, SCHEMES, SYSTEM_HUES } from './palette.generated';
+import {
+  CORAL,
+  DATAVIZ,
+  RAMPS,
+  SCHEMES,
+  SYSTEM_HUES,
+} from './palette.generated';
+import {
+  DATA_VIZ_LABEL_TOKEN,
+  DATA_VIZ_LABELS,
+  type DataVizKey,
+  resolveColor,
+} from './paletteSwatches';
 
 /**
  * logician-ui 5.0 BAZE palette — the three token layers.
@@ -104,6 +116,12 @@ export const RawScales: Story = {
           <Chip key={k} hex={hex} label={k} />
         ))}
       </Flex>
+      <H4>dataviz</H4>
+      <Flex gap={2} wrap="wrap">
+        {Object.entries(DATAVIZ).map(([k, hex]) => (
+          <Chip key={k} hex={hex} label={k} />
+        ))}
+      </Flex>
       <H4>system hues</H4>
       <Grid templateColumns="120px repeat(8, 1fr)" gap={1} fontSize="11px">
         <span />
@@ -157,6 +175,98 @@ export const RoleTokens: Story = {
   ),
 };
 
+const DATA_STEPS = (Object.keys(DATA_VIZ_LABELS) as DataVizKey[]).filter((k) =>
+  k.startsWith('data-')
+);
+/** Display order: far below → baseline → far above. */
+const DIVERGING_STEPS: DataVizKey[] = [
+  'diverging-neg-3',
+  'diverging-neg-2',
+  'diverging-neg-1',
+  'diverging-mid',
+  'diverging-pos-1',
+  'diverging-pos-2',
+  'diverging-pos-3',
+];
+
+/** A fill with the in-cell label `DATA_VIZ_LABELS` gives it (or none). */
+const DataCell = ({
+  flat,
+  hex,
+  mode,
+}: {
+  flat: DataVizKey;
+  hex: string;
+  mode: 'light' | 'dark';
+}) => {
+  const label = DATA_VIZ_LABELS[flat][mode];
+  const labelHex =
+    label && resolveColor(`{colors.${DATA_VIZ_LABEL_TOKEN[label]}}`, mode);
+  return (
+    <Stack gap={1}>
+      <Flex
+        bg={hex}
+        color={labelHex || undefined}
+        h="56px"
+        align="center"
+        justify="center"
+        fontSize="13px"
+        fontWeight="bold"
+        borderRadius="sm"
+      >
+        {labelHex && '42%'}
+      </Flex>
+      {/* Plain boxes: the panel paints its own mode, so text inherits its colour. */}
+      <Box fontFamily="mono" fontSize="11px">
+        {ROLE_TOKEN_PATHS[flat]}
+      </Box>
+      <Box fontSize="10px">
+        {hex} ·{' '}
+        {labelHex
+          ? `${label} label ${ratio(hex, labelHex).toFixed(2)}`
+          : 'no in-cell label'}
+      </Box>
+    </Stack>
+  );
+};
+
+/**
+ * Data-visualisation fills — `data.1–4` (single measure, 4 = largest) and
+ * `diverging.*` (blue above the baseline, orange below, `diverging.mid` at it)
+ * — in light and dark, each with the in-cell label it can carry.
+ */
+export const DataViz: Story = {
+  render: () => (
+    <Stack gap={6} maxW="1100px">
+      {(['light', 'dark'] as const).map((mode) => {
+        const table = SCHEMES.ink[mode] as Record<string, string>;
+        return (
+          <Stack
+            key={mode}
+            gap={4}
+            p={4}
+            borderRadius="md"
+            bg={table['bg-canvas']}
+            color={table['fg-default']}
+          >
+            <Box fontWeight="bold">{mode}</Box>
+            <Grid templateColumns="repeat(4, 1fr)" gap={2}>
+              {DATA_STEPS.map((k) => (
+                <DataCell key={k} flat={k} hex={table[k]} mode={mode} />
+              ))}
+            </Grid>
+            <Grid templateColumns="repeat(7, 1fr)" gap={2}>
+              {DIVERGING_STEPS.map((k) => (
+                <DataCell key={k} flat={k} hex={table[k]} mode={mode} />
+              ))}
+            </Grid>
+          </Stack>
+        );
+      })}
+    </Stack>
+  ),
+};
+
 /** Live tokens on this page's colour mode — flip the toolbar to check dark. */
 export const Category: Story = {
   render: () => (