noecosystem-design 0.2.1 → 0.2.2

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

@@ -0,0 +1,31 @@
+# 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 use `shadow.raised` or `shadow.overlay` plus the quiet mint
+ambient gradient from the official reference. 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/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,8 +14,9 @@ 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.
+Use the shared shadow tokens only for floating chat, drawer, popover and modal
+layers. Sections and ordinary cards do not receive ad-hoc elevation. A focus state
+is an outline/ring, not elevation.
 
 ## Actions
 
@@ -51,8 +52,8 @@ 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 ad-hoc shadow unless they
+  are an explicitly outlined control or a floating overlay using `shadow.overlay`.
 - 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.2",
   "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);
@@ -159,8 +159,8 @@
   --noe-color-info-foreground: var(--noe-primitive-color-paper-0);
   --noe-color-focus-ring: var(--noe-primitive-color-alpha-focus-light);
   --noe-color-overlay: var(--noe-primitive-color-alpha-overlay-light);
-  --noe-shadow-raised: none;
-  --noe-shadow-overlay: none;
+  --noe-shadow-raised: 0 8px 20px rgba(23, 25, 24, 0.055);
+  --noe-shadow-overlay: 0 36px 100px rgba(23, 25, 24, 0.28);
 }
 
 /* Semantic tokens: explicit dark theme. */
@@ -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);
@@ -189,8 +189,8 @@
   --noe-color-info-foreground: var(--noe-primitive-color-ink-950);
   --noe-color-focus-ring: var(--noe-primitive-color-alpha-focus-dark);
   --noe-color-overlay: var(--noe-primitive-color-alpha-overlay-dark);
-  --noe-shadow-raised: none;
-  --noe-shadow-overlay: none;
+  --noe-shadow-raised: 0 8px 20px rgba(0, 0, 0, 0.14);
+  --noe-shadow-overlay: 0 36px 100px rgba(0, 0, 0, 0.42);
 }
 
 /* Semantic tokens: follow the OS only when no explicit theme is set. */
@@ -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);
@@ -220,8 +220,8 @@
     --noe-color-info-foreground: var(--noe-primitive-color-ink-950);
     --noe-color-focus-ring: var(--noe-primitive-color-alpha-focus-dark);
     --noe-color-overlay: var(--noe-primitive-color-alpha-overlay-dark);
-    --noe-shadow-raised: none;
-    --noe-shadow-overlay: none;
+    --noe-shadow-raised: 0 8px 20px rgba(0, 0, 0, 0.14);
+    --noe-shadow-overlay: 0 36px 100px rgba(0, 0, 0, 0.42);
   }
 }
 

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}",
@@ -154,12 +154,12 @@
   },
   "shadow": {
     "light": {
-      "raised": "none",
-      "overlay": "none"
+      "raised": "0 8px 20px rgba(23, 25, 24, 0.055)",
+      "overlay": "0 36px 100px rgba(23, 25, 24, 0.28)"
     },
     "dark": {
-      "raised": "none",
-      "overlay": "none"
+      "raised": "0 8px 20px rgba(0, 0, 0, 0.14)",
+      "overlay": "0 36px 100px rgba(0, 0, 0, 0.42)"
     }
   },
   "font": {

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}",
@@ -155,12 +155,12 @@ export const tokens = {
   },
   "shadow": {
     "light": {
-      "raised": "none",
-      "overlay": "none"
+      "raised": "0 8px 20px rgba(23, 25, 24, 0.055)",
+      "overlay": "0 36px 100px rgba(23, 25, 24, 0.28)"
     },
     "dark": {
-      "raised": "none",
-      "overlay": "none"
+      "raised": "0 8px 20px rgba(0, 0, 0, 0.14)",
+      "overlay": "0 36px 100px rgba(0, 0, 0, 0.42)"
     }
   },
   "font": {

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/tests/tokens.test.mjs

@@ -23,16 +23,22 @@ 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 () => {
-  assert.equal(tokens.shadow.light.raised, 'none');
-  assert.equal(tokens.shadow.light.overlay, 'none');
-  assert.equal(tokens.shadow.dark.raised, 'none');
-  assert.equal(tokens.shadow.dark.overlay, 'none');
+test('surface elevation follows the official NOE soft-depth contract', async () => {
+  assert.match(tokens.shadow.light.raised, /rgba\(23, 25, 24, 0\.055\)/);
+  assert.match(tokens.shadow.light.overlay, /rgba\(23, 25, 24, 0\.28\)/);
+  assert.match(tokens.shadow.dark.raised, /rgba\(0, 0, 0, 0\.14\)/);
+  assert.match(tokens.shadow.dark.overlay, /rgba\(0, 0, 0, 0\.42\)/);
 
   const css = await readFile(
     new URL('../packages/design-tokens/src/tokens.css', import.meta.url),
     'utf8',
   );
-  assert.match(css, /\[data-theme="light"\][\s\S]*?--noe-shadow-raised:\s*none/);
-  assert.match(css, /\[data-theme="dark"\][\s\S]*?--noe-shadow-overlay:\s*none/);
+  assert.match(
+    css,
+    /\[data-theme="light"\][\s\S]*?--noe-shadow-raised:\s*0 8px 20px rgba\(23, 25, 24, 0\.055\)/,
+  );
+  assert.match(
+    css,
+    /\[data-theme="dark"\][\s\S]*?--noe-shadow-overlay:\s*0 36px 100px rgba\(0, 0, 0, 0\.42\)/,
+  );
 });