noecosystem-design 0.2.1 → 0.2.3

package/apps/storybook/stories/catalog/app-frame.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { AppFrame } from '../../../../packages/ui/src/app-frame';
+import { ChartSquare, ReceiptSearch, WalletMoney } from '../../../../packages/icons/src';
 import { SidebarNavigation } from '../../../../packages/ui/src/sidebar-navigation';
 
 const navigation = (
@@ -36,6 +37,44 @@ function AppFrameDemo() {
   );
 }
 
+function FinanceAppFrameDemo() {
+  return (
+    <div style={{ height: '28rem' }}>
+      <AppFrame
+        header={
+          <div className="flex min-h-14 items-center bg-surface-raised px-4 text-sm font-medium">
+            NOCFO
+          </div>
+        }
+        navigation={
+          <SidebarNavigation
+            label="NOCFO navigation"
+            sections={[
+              {
+                id: 'finance',
+                label: 'Finance',
+                items: [
+                  { href: '#dashboard', icon: <ChartSquare />, label: 'Dashboard', current: true },
+                  { href: '#contracts', icon: <ReceiptSearch />, label: 'Contracts' },
+                  { href: '#cashflow', icon: <WalletMoney />, label: 'Cash flow', badge: '12' },
+                ],
+              },
+            ]}
+          />
+        }
+        variant="finance"
+      >
+        <section className="rounded-lg bg-surface p-5">
+          <h2 className="m-0 text-lg font-semibold">Financial overview</h2>
+          <p className="mb-0 mt-2 text-sm text-muted-foreground">
+            Flat surfaces are separated by semantic color and spacing, not shadows or card strokes.
+          </p>
+        </section>
+      </AppFrame>
+    </div>
+  );
+}
+
 const meta = {
   title: 'Catalog/Patterns/Pages/App Frame',
   component: AppFrameDemo,
@@ -45,3 +84,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+export const Finance: Story = {
+  render: () => <FinanceAppFrameDemo />,
+};

package/apps/storybook/stories/catalog/button.stories.tsx

@@ -22,6 +22,7 @@ export const Default: Story = {
 };
 
 export const Outline: Story = { args: { variant: 'outline', children: 'Outline' } };
+export const Secondary: Story = { args: { variant: 'secondary', children: 'Secondary' } };
 export const Ghost: Story = { args: { variant: 'ghost', children: 'Ghost' } };
 export const Destructive: Story = { args: { variant: 'destructive', children: 'Delete' } };
 export const Loading: Story = { args: { loading: true, children: 'Saving' } };

package/apps/storybook/stories/catalog/sidebar-navigation.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { SidebarNavigation } from '../../../../packages/ui/src/sidebar-navigation';
+import { ChartSquare, ReceiptSearch, WalletMoney } from '../../../../packages/icons/src';
 
 const sections = [
   {
@@ -38,3 +39,24 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+export const PersianRtl: Story = {
+  render: () => (
+    <div dir="rtl" lang="fa" style={{ maxWidth: '17.5rem' }}>
+      <SidebarNavigation
+        label="ناوبری نوکفو"
+        sections={[
+          {
+            id: 'finance',
+            label: 'مدیریت مالی',
+            items: [
+              { href: '#dashboard', icon: <ChartSquare />, label: 'داشبورد', current: true },
+              { href: '#contracts', icon: <ReceiptSearch />, label: 'قراردادها' },
+              { href: '#cashflow', icon: <WalletMoney />, label: 'جریان نقدی', badge: '۱۲' },
+            ],
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/docs/design-system/brand-theme.md

@@ -0,0 +1,32 @@
+# Official NOE brand theme
+
+The NOEcosystem landing is the canonical visual identity for NOE products. Product
+interfaces use the same language rather than a related palette.
+
+## Foundation
+
+- Light canvas: paper `#f3f0ea`, raised paper `#f6f4f2` and bright reading surface.
+- Dark canvas: graphite `#252423`, raised graphite `#302f2e`.
+- Primary action: mint `#98e8cf`; hover mint `#abefd9`; the label is graphite.
+- Supporting interaction and focus: deep teal `#0f6d5b` / `#0b6f6b`.
+- Signal: coral `#ff5b57` / `#c43f3c`; cyan, amber and violet remain status/data
+  signals, not the default product CTA.
+- Latin copy uses the SF system stack; Persian copy uses IRANYekanXFaNum.
+
+## Composition
+
+Use large, confident headings; quiet metadata with tracked uppercase only for
+Latin labels; generous spacing; and low-contrast graphite/paper layers. Interactive
+boundaries use the semantic border token and the shared rounded geometry. Floating
+chat and modal surfaces remain flat, using a quiet mint ambient layer or overlay
+scrim when separation is needed; `shadow.raised` and `shadow.overlay` stay `none`.
+Do not create a separate app palette.
+
+## Product mapping
+
+- Chat composer/send action: mint fill, graphite icon/text, deep-teal focus ring.
+- Assistant/AI surfaces: graphite/paper raised surface with a quiet mint radial
+  ambient layer; do not use blue/cyan as the product identity.
+- Admin, expert and profile shells: the same paper/graphite canvas, thin utility
+  dividers, and one mint primary action per region.
+- Destructive paths continue to use coral and must retain explicit labels.

package/docs/design-system/components.md

@@ -47,6 +47,19 @@ For application pages, compose `app-frame`, `page-header`, `sidebar-navigation`,
 Use the [flat surface and navigation policy](surface-policy.md) to decide surface
 tone, CTA hierarchy, adaptive navigation, icon coloring, and review evidence.
 
+### Finance application shell
+
+For NOCFO-class workspaces use `AppFrame variant="finance"` with
+`HeaderNavigation` and `SidebarNavigation`. It uses a 280px desktop navigation
+column, a compact 56px header, and semantic background/surface/sunken layers for
+separation. It never solves Persian or English layout with `row-reverse`: icons
+render at the logical start and end adornments use `margin-inline-start`.
+
+The shell is deliberately flat. Sections and cards are differentiated by the
+surface tokens and spacing; their outer stroke and every shadow are absent. Use
+the standard `Button variant="secondary"` for transparent, currentColor outline
+actions. It is white on dark/colored surfaces and graphite on paper.
+
 Mapping to the Untitled UI reference taxonomy (honest as of 2026-08-27 — foundation stabilization):
 
 | Untitled UI category      | NOE coverage                                                        |

package/docs/design-system/foundations.md

@@ -37,12 +37,14 @@ Radii are compact and semantic. Controls use shared heights. Cards are not neste
 
 ## Surface hierarchy
 
-NOE uses a flat surface hierarchy: page canvas and raised regions are separated by
-semantic background tone, spacing, and radius—not decorative borders or shadows.
+NOE uses graphite/paper surface hierarchy: page canvas and raised regions are
+separated first by semantic background tone, spacing, and radius. The official
+NOEcosystem visual language adds soft ambient elevation only to floating chat,
+drawers and modal layers; it is never used as chrome around every section.
 `Card` therefore defaults to a raised, borderless appearance. Its outlined
 appearance is only for controls or data boundaries with a meaningful selection
-state. See [Flat surface and navigation policy](surface-policy.md) for the
-product-level contract.
+state. See [Official NOE brand theme](brand-theme.md) and [Flat surface and
+navigation policy](surface-policy.md) for the product-level contract.
 
 ## Responsive behavior
 

package/docs/design-system/surface-policy.md

@@ -14,15 +14,18 @@ passes caused by arbitrary shadows, card borders, or ambiguous mobile navigation
    `appearance="outlined"` is reserved for a selection, data-entry, or comparison
    boundary where a stroke conveys real meaning.
 
-NOE shadow tokens are intentionally `none`. Do not add local `box-shadow` values
-to product styles. A focus state is an outline/ring, not elevation.
+NOE surfaces are fully flat: `shadow.raised` and `shadow.overlay` are `none` in
+every theme, including dialogs, drawers, menus and popovers. Separation comes from
+semantic surface color, radius, spacing and an overlay scrim—not shadow. Sections
+and ordinary cards do not receive ad-hoc elevation. A focus state is an
+outline/ring, not elevation.
 
 ## Actions
 
 - One screen has one contained primary CTA.
-- Secondary actions are outline or ghost actions. On a dark or colored surface,
-  a white outline action remains transparent with a white label and stroke; never
-  give it an opaque white fill that removes its hierarchy.
+- Secondary actions are transparent outline actions. Their label and stroke use
+  `currentColor`; therefore the standard foreground is white in dark/colored
+  contexts and graphite on paper. Never give a secondary action an opaque fill.
 - Destructive actions retain an explicit label and confirmation/recovery path;
   color alone is never the signal.
 - Every focusable action keeps a visible `focus-visible` outline.
@@ -51,8 +54,9 @@ to product styles. A focus state is an outline/ring, not elevation.
 
 - Test every route in Persian/RTL and English/LTR, in light and dark themes.
 - Verify no page-level horizontal overflow at the mobile breakpoint.
-- Verify every section/card/panel has `box-shadow: none` and no visible outer
-  stroke unless it is explicitly an outlined control.
+- Verify sections/cards have no visible outer stroke or shadow unless they are an
+  explicitly outlined control (for example a secondary action, input or table
+  affordance).
 - Verify interactive targets are at least 44 px on touch devices and have
   accessible names.
 - Test desktop sidebar and mobile drawer independently, including keyboard focus

package/llms.txt

@@ -33,6 +33,7 @@
 - Components and catalog terms: `docs/design-system/components.md`
 - Tokens and foundations: `docs/design-system/foundations.md`, `docs/design-system/tokens.md`
 - Flat cards, action hierarchy and adaptive application navigation: `docs/design-system/surface-policy.md`
+- Official NOEcosystem visual-language contract: `docs/design-system/brand-theme.md`
 - Locale, RTL, and bidi: `docs/design-system/i18n.md`, `docs/design-system/rtl.md`
 - Accessibility: `docs/design-system/accessibility.md`
 - Agent and tool-state UI: `docs/design-system/agentic-ui.md`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noecosystem-design",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "private": false,
   "description": "Agent-readable NOE design-system source, registry metadata, and verification contracts.",
   "keywords": [

package/packages/design-tokens/src/tokens.css

@@ -145,9 +145,9 @@
   --noe-color-muted-foreground: var(--noe-primitive-color-ink-500);
   --noe-color-border: rgba(23, 25, 24, 0.16);
   --noe-color-border-strong: var(--noe-primitive-color-ink-300);
-  --noe-color-accent: var(--noe-primitive-color-cyan-500);
-  --noe-color-accent-hover: var(--noe-primitive-color-cyan-500);
-  --noe-color-accent-foreground: var(--noe-primitive-color-paper-0);
+  --noe-color-accent: var(--noe-primitive-color-mint-100);
+  --noe-color-accent-hover: var(--noe-primitive-color-mint-200);
+  --noe-color-accent-foreground: var(--noe-primitive-color-ink-900);
   --noe-color-signal: var(--noe-primitive-color-coral-500);
   --noe-color-success: var(--noe-primitive-color-green-600);
   --noe-color-success-foreground: var(--noe-primitive-color-paper-0);
@@ -175,8 +175,8 @@
   --noe-color-muted-foreground: var(--noe-primitive-color-ink-400);
   --noe-color-border: rgba(246, 244, 242, 0.14);
   --noe-color-border-strong: var(--noe-primitive-color-ink-600);
-  --noe-color-accent: var(--noe-primitive-color-cyan-400);
-  --noe-color-accent-hover: var(--noe-primitive-color-cyan-400);
+  --noe-color-accent: var(--noe-primitive-color-mint-100);
+  --noe-color-accent-hover: var(--noe-primitive-color-mint-200);
   --noe-color-accent-foreground: var(--noe-primitive-color-ink-950);
   --noe-color-signal: var(--noe-primitive-color-coral-400);
   --noe-color-success: var(--noe-primitive-color-green-500);
@@ -206,8 +206,8 @@
     --noe-color-muted-foreground: var(--noe-primitive-color-ink-400);
     --noe-color-border: rgba(246, 244, 242, 0.14);
     --noe-color-border-strong: var(--noe-primitive-color-ink-600);
-    --noe-color-accent: var(--noe-primitive-color-cyan-400);
-    --noe-color-accent-hover: var(--noe-primitive-color-cyan-400);
+    --noe-color-accent: var(--noe-primitive-color-mint-100);
+    --noe-color-accent-hover: var(--noe-primitive-color-mint-200);
     --noe-color-accent-foreground: var(--noe-primitive-color-ink-950);
     --noe-color-signal: var(--noe-primitive-color-coral-400);
     --noe-color-success: var(--noe-primitive-color-green-500);

package/packages/design-tokens/src/tokens.json

@@ -111,9 +111,9 @@
       "mutedForeground": "{primitive.color.ink.500}",
       "border": "rgba(23, 25, 24, 0.16)",
       "borderStrong": "{primitive.color.ink.300}",
-      "accent": "{primitive.color.cyan.500}",
-      "accentHover": "{primitive.color.cyan.500}",
-      "accentForeground": "{primitive.color.paper.0}",
+      "accent": "{primitive.color.mint.100}",
+      "accentHover": "{primitive.color.mint.200}",
+      "accentForeground": "{primitive.color.ink.900}",
       "signal": "{primitive.color.coral.500}",
       "success": "{primitive.color.green.600}",
       "successForeground": "{primitive.color.paper.0}",
@@ -136,8 +136,8 @@
       "mutedForeground": "{primitive.color.ink.400}",
       "border": "rgba(246, 244, 242, 0.14)",
       "borderStrong": "{primitive.color.ink.600}",
-      "accent": "{primitive.color.cyan.400}",
-      "accentHover": "{primitive.color.cyan.400}",
+      "accent": "{primitive.color.mint.100}",
+      "accentHover": "{primitive.color.mint.200}",
       "accentForeground": "{primitive.color.ink.950}",
       "signal": "{primitive.color.coral.400}",
       "success": "{primitive.color.green.500}",

package/packages/design-tokens/src/tokens.mjs

@@ -112,9 +112,9 @@ export const tokens = {
       "mutedForeground": "{primitive.color.ink.500}",
       "border": "rgba(23, 25, 24, 0.16)",
       "borderStrong": "{primitive.color.ink.300}",
-      "accent": "{primitive.color.cyan.500}",
-      "accentHover": "{primitive.color.cyan.500}",
-      "accentForeground": "{primitive.color.paper.0}",
+      "accent": "{primitive.color.mint.100}",
+      "accentHover": "{primitive.color.mint.200}",
+      "accentForeground": "{primitive.color.ink.900}",
       "signal": "{primitive.color.coral.500}",
       "success": "{primitive.color.green.600}",
       "successForeground": "{primitive.color.paper.0}",
@@ -137,8 +137,8 @@ export const tokens = {
       "mutedForeground": "{primitive.color.ink.400}",
       "border": "rgba(246, 244, 242, 0.14)",
       "borderStrong": "{primitive.color.ink.600}",
-      "accent": "{primitive.color.cyan.400}",
-      "accentHover": "{primitive.color.cyan.400}",
+      "accent": "{primitive.color.mint.100}",
+      "accentHover": "{primitive.color.mint.200}",
       "accentForeground": "{primitive.color.ink.950}",
       "signal": "{primitive.color.coral.400}",
       "success": "{primitive.color.green.500}",

package/packages/registry/r/app-frame.json

@@ -3,7 +3,7 @@
   "name": "app-frame",
   "type": "registry:block",
   "title": "App Frame",
-  "description": "App Frame — Patterns / Pages component. app-frame provides patterns / pages behavior with RTL, i18n and accessibility built-in.",
+  "description": "App Frame — Patterns / Pages component. Includes a flat finance variant with a 280px logical sidebar, compact header and color-separated surfaces; RTL, i18n and accessibility are built in.",
   "files": [
     {
       "path": "packages/ui/src/app-frame.tsx",
@@ -37,8 +37,16 @@
     "announcements": [],
     "focusBehavior": ["visible ring 2px"]
   },
-  "tokenContracts": ["color.foreground", "color.border"],
-  "capabilityAliases": ["app frame", "app-frame"],
-  "useWhen": ["using app frame in Patterns / Pages"],
+  "tokenContracts": [
+    "color.background",
+    "color.surface",
+    "color.surfaceRaised",
+    "color.surfaceSunken"
+  ],
+  "capabilityAliases": ["app frame", "app-frame", "finance application shell", "admin shell"],
+  "useWhen": [
+    "using app frame in Patterns / Pages",
+    "building a flat finance or admin application shell"
+  ],
   "doNotUseWhen": ["when app frame semantics do not match"]
 }

package/packages/registry/r/button.json

@@ -3,7 +3,7 @@
   "name": "button",
   "type": "registry:ui",
   "title": "Button",
-  "description": "Primary action primitive with semantic variants, focus visibility, loading state and bidirectional layout. Use for all interactive actions.",
+  "description": "Primary action primitive with semantic variants, focus visibility, loading state and bidirectional layout. Secondary is transparent with a currentColor stroke and label.",
   "files": [
     {
       "path": "packages/ui/src/button.tsx",

package/packages/registry/r/header-navigation.json

@@ -3,7 +3,7 @@
   "name": "header-navigation",
   "type": "registry:block",
   "title": "Header Navigation",
-  "description": "Header Navigation — Patterns / Application component. header-navigation provides patterns / application behavior with RTL, i18n and accessibility built-in.",
+  "description": "Header Navigation — Patterns / Application component. Provides a compact 56px application header with RTL, i18n and accessibility built in.",
   "files": [
     {
       "path": "packages/ui/src/header-navigation.tsx",
@@ -37,8 +37,8 @@
     "announcements": [],
     "focusBehavior": ["visible ring 2px"]
   },
-  "tokenContracts": ["color.foreground", "color.border"],
-  "capabilityAliases": ["header navigation", "header-navigation"],
+  "tokenContracts": ["color.foreground", "color.surfaceRaised", "control.height.md"],
+  "capabilityAliases": ["header navigation", "header-navigation", "compact app header"],
   "useWhen": ["using header navigation in Patterns / Application"],
   "doNotUseWhen": ["when header navigation semantics do not match"]
 }

package/packages/registry/r/sidebar-navigation.json

@@ -3,7 +3,7 @@
   "name": "sidebar-navigation",
   "type": "registry:block",
   "title": "Sidebar Navigation",
-  "description": "Sidebar Navigation — Patterns / Application component. sidebar-navigation provides patterns / application behavior with RTL, i18n and accessibility built-in.",
+  "description": "Sidebar Navigation — Patterns / Application component. Uses logical icon, label and end-adornment order without row reversal; RTL, i18n and accessibility are built in.",
   "files": [
     {
       "path": "packages/ui/src/lib/cn.ts",
@@ -37,8 +37,13 @@
     "announcements": [],
     "focusBehavior": ["visible ring 2px"]
   },
-  "tokenContracts": ["color.foreground", "color.border"],
-  "capabilityAliases": ["sidebar navigation", "sidebar-navigation"],
+  "tokenContracts": [
+    "color.foreground",
+    "color.surface",
+    "color.surfaceRaised",
+    "color.mutedForeground"
+  ],
+  "capabilityAliases": ["sidebar navigation", "sidebar-navigation", "finance sidebar"],
   "useWhen": ["using sidebar navigation in Patterns / Application"],
   "doNotUseWhen": ["when sidebar navigation semantics do not match"]
 }

package/packages/ui/src/app-frame.browser.test.tsx

@@ -0,0 +1,47 @@
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+
+import { DirectionProvider } from './direction';
+import { AppFrame } from './app-frame';
+import { SidebarNavigation } from './sidebar-navigation';
+
+test('finance app frame keeps a flat, logical RTL sidebar structure', async () => {
+  const screen = await render(
+    <DirectionProvider direction="rtl">
+      <AppFrame
+        contentId="finance-main"
+        data-testid="finance-app-frame"
+        navigation={
+          <SidebarNavigation
+            label="ناوبری"
+            sections={[
+              {
+                id: 'finance',
+                items: [
+                  {
+                    href: '#dashboard',
+                    icon: <svg data-testid="dashboard-icon" />,
+                    label: 'داشبورد',
+                    current: true,
+                  },
+                ],
+              },
+            ]}
+          />
+        }
+        variant="finance"
+      >
+        <p>محتوا</p>
+      </AppFrame>
+    </DirectionProvider>,
+  );
+
+  const frame = screen.getByTestId('finance-app-frame');
+  await expect.element(frame).toHaveAttribute('data-variant', 'finance');
+  await expect.element(screen.getByRole('navigation', { name: 'ناوبری' })).toBeVisible();
+  await expect
+    .element(screen.getByRole('link', { name: 'داشبورد' }))
+    .toHaveAttribute('aria-current', 'page');
+  await expect.element(screen.getByTestId('dashboard-icon')).toBeVisible();
+  await expect.element(screen.getByRole('main')).toHaveAttribute('id', 'finance-main');
+});

package/packages/ui/src/app-frame.tsx

@@ -1,36 +1,55 @@
+import { useId } from 'react';
 import type * as React from 'react';
 
 import { cn } from './lib/cn';
 
 export interface AppFrameProps extends React.ComponentProps<'div'> {
+  /** `finance` is the compact, flat shell for dense business applications. */
+  variant?: 'default' | 'finance';
   header?: React.ReactNode;
   navigation?: React.ReactNode;
   mobileNavigation?: React.ReactNode;
   inspector?: React.ReactNode;
+  contentId?: string;
   children: React.ReactNode;
 }
 
 export function AppFrame({
+  variant = 'default',
   header,
   navigation,
   mobileNavigation,
   inspector,
+  contentId,
   children,
   className,
   ...props
 }: AppFrameProps) {
+  const isFinanceShell = variant === 'finance';
+  const generatedContentId = useId();
   return (
     <div
-      className={cn('grid min-h-dvh w-full grid-rows-[auto_1fr]', className)}
+      className={cn(
+        'grid min-h-dvh w-full grid-rows-[auto_1fr] bg-background font-sans text-foreground',
+        className,
+      )}
       data-slot="app-frame"
+      data-variant={variant}
       {...props}
     >
       {header ? <div data-slot="app-frame-header">{header}</div> : null}
-      <div className="grid lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_18rem]">
+      <div
+        className={cn(
+          'grid',
+          isFinanceShell
+            ? 'lg:grid-cols-[17.5rem_minmax(0,1fr)] xl:grid-cols-[17.5rem_minmax(0,1fr)_18rem]'
+            : 'lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_18rem]',
+        )}
+      >
         {mobileNavigation ? (
           <nav
             aria-label="Primary"
-            className="border-b border-border bg-surface-raised p-4 lg:hidden"
+            className="bg-surface p-4 lg:hidden"
             data-slot="app-frame-mobile-navigation"
           >
             {mobileNavigation}
@@ -39,19 +58,27 @@ export function AppFrame({
         {navigation ? (
           <aside
             aria-label="Primary"
-            className="hidden border-e border-border bg-surface-raised p-4 lg:block"
+            className={cn(
+              'hidden p-4 lg:block',
+              isFinanceShell ? 'bg-surface-sunken px-3 py-4' : 'bg-surface-raised',
+            )}
             data-slot="app-frame-navigation"
           >
             {navigation}
           </aside>
         ) : null}
-        <main className="min-w-0 p-4 sm:p-6" data-slot="app-frame-content">
+        <main
+          className={cn('min-w-0 bg-background p-4 sm:p-6', isFinanceShell && 'sm:p-5')}
+          data-slot="app-frame-content"
+          id={contentId ?? generatedContentId}
+          tabIndex={-1}
+        >
           {children}
         </main>
         {inspector ? (
           <aside
             aria-label="Inspector"
-            className="hidden border-s border-border bg-surface-raised p-5 xl:block"
+            className="hidden bg-surface p-5 xl:block"
             data-slot="app-frame-inspector"
           >
             {inspector}

package/packages/ui/src/button.browser.test.tsx

@@ -36,3 +36,11 @@ test('a disabled polymorphic Button cannot navigate or receive focus', async ()
   expect(onClick).not.toHaveBeenCalled();
   expect(window.location.hash).not.toBe('#danger');
 });
+
+test('secondary Button remains a transparent currentColor outline', async () => {
+  const screen = await render(<Button variant="secondary">Reject</Button>);
+  const button = screen.getByRole('button', { name: 'Reject' });
+  await expect.element(button).toHaveClass('border-current');
+  await expect.element(button).toHaveClass('bg-transparent');
+  await expect.element(button).toHaveClass('text-foreground');
+});

package/packages/ui/src/button.tsx

@@ -12,7 +12,7 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         primary: 'border-accent bg-accent text-accent-foreground hover:bg-accent-hover',
-        secondary: 'border-border bg-surface-raised text-foreground hover:bg-muted',
+        secondary: 'border-current bg-transparent text-foreground hover:bg-muted/70',
         outline: 'border-border bg-transparent text-foreground hover:bg-muted',
         ghost: 'border-transparent bg-transparent text-foreground hover:bg-muted',
         quiet: 'border-transparent bg-transparent text-foreground hover:bg-muted',

package/packages/ui/src/color-picker.tsx

@@ -1,9 +1,9 @@
 import type * as React from 'react';
 import { cn } from './lib/cn';
 
-// Default example value uses the semantic accent token (mint-500) — not a raw product color.
-// Input type=color requires a hex for the native picker; the displayed hex is derived from the token.
-const DEFAULT_ACCENT_HEX = '#0b6f6b'; // primitive mint-500 / semantic accent — keep in sync with tokens.json
+// The native picker needs a literal hex. Its swatch demonstrates deep mint while
+// the adjacent value keeps the standard readable text foreground.
+const DEFAULT_ACCENT_HEX = '#0b6f6b'; // primitive mint-500 — keep in sync with tokens.json
 
 export function ColorPicker({ className, ...props }: React.ComponentProps<'div'>) {
   return (
@@ -14,9 +14,7 @@ export function ColorPicker({ className, ...props }: React.ComponentProps<'div'>
         className="size-8 rounded-md border border-border"
         defaultValue={DEFAULT_ACCENT_HEX}
       />
-      <span className="text-sm text-muted-foreground" style={{ color: 'var(--noe-color-accent)' }}>
-        {DEFAULT_ACCENT_HEX}
-      </span>
+      <span className="text-sm text-muted-foreground">{DEFAULT_ACCENT_HEX}</span>
     </div>
   );
 }

package/packages/ui/src/header-navigation.tsx

@@ -29,7 +29,7 @@ export function HeaderNavigation({
   return (
     <header
       className={cn(
-        'flex w-full items-center gap-x-6 gap-y-2 bg-surface-raised px-4 py-3',
+        'flex min-h-14 w-full items-center gap-x-4 gap-y-2 bg-surface-raised px-4 py-2',
         className,
       )}
       data-slot="header-navigation"

package/packages/ui/src/sidebar-navigation.tsx

@@ -6,8 +6,11 @@ export interface SidebarNavigationItem {
   id?: string;
   href: string;
   label: React.ReactNode;
+  /** Rendered at the logical start; follows document direction without row reversal. */
+  icon?: React.ReactNode;
   current?: boolean;
   badge?: React.ReactNode;
+  endAdornment?: React.ReactNode;
 }
 
 export interface SidebarNavigationSection {
@@ -53,16 +56,24 @@ export function SidebarNavigation({
                 <a
                   aria-current={item.current ? 'page' : undefined}
                   className={cn(
-                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm leading-normal no-underline hover:bg-surface-sunken/60',
+                    'flex min-h-11 items-center gap-2 rounded-md px-3 py-2 text-sm leading-normal no-underline hover:bg-surface/80',
                     item.current
-                      ? 'bg-surface-sunken font-medium text-foreground'
+                      ? 'bg-surface-raised font-medium text-foreground'
                       : 'text-muted-foreground',
                   )}
                   data-current={item.current || undefined}
                   data-slot="sidebar-navigation-item"
                   href={item.href}
                 >
+                  {item.icon ? (
+                    <span aria-hidden="true" className="shrink-0 text-current [&_svg]:size-5">
+                      {item.icon}
+                    </span>
+                  ) : null}
                   <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                  {item.endAdornment ? (
+                    <span className="ms-auto shrink-0 text-current">{item.endAdornment}</span>
+                  ) : null}
                   {item.badge ? (
                     <span className="ms-auto shrink-0 text-xs tabular-nums">{item.badge}</span>
                   ) : null}

package/tests/tokens.test.mjs

@@ -23,7 +23,7 @@ test('token CSS includes theme and reduced-motion contracts', async () => {
   assert.match(css, /--noe-primitive-color-mint-100:\s*#[0-9a-f]{6}/i);
 });
 
-test('surface elevation is intentionally shadow-free in both themes', async () => {
+test('surfaces remain flat in every NOE theme', async () => {
   assert.equal(tokens.shadow.light.raised, 'none');
   assert.equal(tokens.shadow.light.overlay, 'none');
   assert.equal(tokens.shadow.dark.raised, 'none');