@agent-relay/brand 1.1.0

package/README.md

@@ -0,0 +1,36 @@
+# @agent-relay/brand
+
+Shared brand tokens, CSS variables, and color system for Agent Relay and associated properties.
+
+This is a pure CSS package — no build step required.
+
+## Usage
+
+### Import in CSS (with a bundler)
+
+```css
+@import '@agent-relay/brand/brand.css';
+```
+
+### Link directly (HTML)
+
+```html
+<link rel="stylesheet" href="node_modules/@agent-relay/brand/brand.css">
+```
+
+### Static sites without a bundler
+
+Copy `brand.css` into your project, or reference it via a CDN.
+
+## Tokens
+
+The file exposes CSS custom properties on `:root` for light mode and `:root[data-theme='dark']` for dark mode. Key token groups:
+
+- **Logo** — `--logo-primary`, `--logo-secondary`
+- **Brand accents** — `--accent-warm`, `--accent-ink`, `--accent-stone`
+- **Status** — `--status-red`, `--status-yellow`, `--status-green`
+- **Console / terminal** — `--console-bg`, `--console-fg`, etc.
+- **Primary scale** — `--primary-50` through `--primary-950`
+- **Secondary scale** — `--secondary-50` through `--secondary-950`
+- **Neutral scale** — `--neutral-50` through `--neutral-950`
+- **Semantic tokens** — `--bg`, `--fg`, `--primary`, `--card-bg`, `--nav-*`, `--footer-*`, etc.

package/brand.css

@@ -0,0 +1,226 @@
+/*
+  Agent Relay Brand Color Guide
+
+  Reuse guidance:
+  - Copy the whole file into another project.
+  - Use the :root block for the standard Agent Relay look.
+  - Keep the semantic token names; that is the main design pattern in the current site.
+*/
+
+:root {
+  /* Logo */
+  --logo-primary: #4A90C2;
+  --logo-secondary: rgba(74, 144, 194, 0.5);
+
+  /* Brand accents */
+  --accent-warm: #C1674B;
+  --accent-warm-deep: #B45542;
+  --accent-warm-soft: #CD866A;
+
+  --accent-ink: #111827;
+  --accent-stone: #7A7A72;
+  --accent-stone-light: #F5F4F0;
+  --accent-stone-dark: #5A5A54;
+
+  /* Status */
+  --status-red: #FF5F57;
+  --status-yellow: #FEBC2E;
+  --status-green: #28C840;
+
+  /* Console / terminal */
+  --console-bg: #1A1C22;
+  --console-panel: #15171C;
+  --console-line: #2A2D35;
+  --console-fg: #C9D1D9;
+  --console-muted: #555555;
+  --console-keyword: #7EB8DA;
+  --console-string: #CE9178;
+  --console-type: #4EC9B0;
+  --console-method: #DCDCAA;
+
+  /* Primary (Curious Blue) scale */
+  --primary-50: #F3F7FC;
+  --primary-100: #E7EFF7;
+  --primary-200: #C9DDEE;
+  --primary-300: #99C2E0;
+  --primary-400: #62A1CE;
+  --primary-500: #4A90C2;
+  --primary-600: #2D6A9C;
+  --primary-700: #26557E;
+  --primary-800: #234969;
+  --primary-900: #223E58;
+  --primary-950: #16283B;
+
+  /* Secondary (warm) scale */
+  --secondary-50: #FBF5F1;
+  --secondary-100: #F5E8DF;
+  --secondary-200: #EACEBE;
+  --secondary-300: #DCAD95;
+  --secondary-400: #CD866A;
+  --secondary-500: #C1674B;
+  --secondary-600: #B45542;
+  --secondary-700: #964338;
+  --secondary-800: #793833;
+  --secondary-900: #62302C;
+  --secondary-950: #341716;
+
+  /* Neutral (Pampas) scale */
+  --neutral-50: #f5f2ee;
+  --neutral-100: #efebe5;
+  --neutral-200: #dfd5c9;
+  --neutral-300: #cab9a7;
+  --neutral-400: #b49a83;
+  --neutral-500: #a5836a;
+  --neutral-600: #98735e;
+  --neutral-700: #7f5e4f;
+  --neutral-800: #684e44;
+  --neutral-900: #554139;
+  --neutral-950: #2d211d;
+
+  /* Semantic tokens */
+  --bg: #F9FAFB;
+  --bg-elevated: rgba(255, 255, 255, 0.8);
+  --fg: #111827;
+  --fg-muted: #4B5563;
+  --fg-faint: #9CA3AF;
+  --primary: var(--primary-500);
+  --primary-hover: var(--primary-600);
+  --primary-bg: var(--primary-500);
+  --primary-fg: #ffffff;
+  --secondary-bg: var(--secondary-100);
+  --secondary-fg: var(--secondary-600);
+  --line: rgba(74, 144, 194, 0.10);
+  --surface: #F3F4F6;
+  --surface-strong: #FFFFFF;
+  --section-bg: #ffffff;
+  --code-bg: #F3F4F6;
+  --code-fg: #1F2937;
+  --inline-code-bg: rgba(74, 144, 194, 0.07);
+  --inline-code-fg: var(--primary-800);
+  --card-bg: rgba(255, 255, 255, 0.9);
+  --card-border: rgba(74, 144, 194, 0.10);
+  --card-hover-border: rgba(74, 144, 194, 0.28);
+  --note-bg: rgba(74, 144, 194, 0.05);
+  --link-underline: rgba(74, 144, 194, 0.3);
+  --nav-solid-bg: #ffffff;
+  --nav-bg: rgba(255, 255, 255, 0.76);
+  --nav-fg: #111827;
+  --nav-muted: rgba(17, 24, 39, 0.72);
+  --nav-subtle: rgba(17, 24, 39, 0.52);
+  --nav-surface: rgba(17, 24, 39, 0.04);
+  --nav-surface-hover: rgba(17, 24, 39, 0.08);
+  --nav-border: rgba(74, 144, 194, 0.16);
+  --nav-border-strong: rgba(74, 144, 194, 0.3);
+  --nav-link-hover: var(--primary-700);
+  --nav-shadow: rgba(35, 73, 105, 0.14);
+  --nav-inset: rgba(255, 255, 255, 0.74);
+  --nav-logo-wordmark: var(--accent-ink);
+  --nav-logo-mark: var(--primary-500);
+  --footer-bg: var(--primary-500);
+  --footer-fg: #ffffff;
+  --footer-muted: rgba(255, 255, 255, 0.7);
+  --footer-faint: rgba(255, 255, 255, 0.4);
+  --footer-line: rgba(255, 255, 255, 0.12);
+  --btn-bg: var(--primary-500);
+  --btn-hover: var(--primary-600);
+  --hero-gradient: linear-gradient(180deg, var(--bg) 0%, var(--primary-50) 100%);
+  --landing-hero-bg: linear-gradient(180deg, #f3f8fc 0%, #e8f1f8 18%, #d4e4f1 54%, #b5cee2 100%);
+  --secondary-surface: #EBF3F8;
+  --showcase-bg: #F2EFE9;
+  --overlay: rgba(0, 0, 0, 0.3);
+  --shadow-strong: 0 16px 64px rgba(0, 0, 0, 0.2);
+  --terminal-bg: var(--console-bg);
+  --terminal-panel: var(--console-panel);
+  --terminal-line: var(--console-line);
+  --terminal-fg: var(--console-fg);
+  --terminal-muted: #555555;
+  --terminal-keyword: var(--console-keyword);
+  --terminal-string: var(--console-string);
+  --terminal-type: var(--console-type);
+  --terminal-method: var(--console-method);
+  --agent-card-bg: rgba(255, 255, 255, 0.88);
+  --agent-card-header: rgba(245, 243, 238, 0.95);
+  --agent-card-border: rgba(45, 79, 62, 0.10);
+  --agent-card-border-active: rgba(45, 79, 62, 0.22);
+  --agent-card-title: #2D4F3E;
+  --agent-card-muted: #8A907E;
+  --agent-card-status: #3A8C62;
+  --agent-card-glow: rgba(58, 140, 98, 0.35);
+  --syntax-string: #B45309;
+  --syntax-method: #6B21A8;
+  --syntax-comment: #9CA3AF;
+}
+
+:root[data-theme='dark'] {
+  --bg: #08111A;
+  --bg-elevated: rgba(12, 20, 30, 0.82);
+  --fg: #EDF4FB;
+  --fg-muted: #A8B8C8;
+  --fg-faint: #77879A;
+  --primary: #74B8E2;
+  --primary-hover: #94CBEF;
+  --primary-bg: #62A1CE;
+  --primary-fg: #06111A;
+  --secondary-bg: rgba(193, 103, 75, 0.14);
+  --secondary-fg: #F0B39F;
+  --line: rgba(116, 184, 226, 0.18);
+  --surface: #0F1B29;
+  --surface-strong: #132234;
+  --section-bg: #0B141F;
+  --code-bg: #0D1723;
+  --code-fg: #DBE5F0;
+  --inline-code-bg: rgba(116, 184, 226, 0.14);
+  --inline-code-fg: #C6E6FA;
+  --card-bg: rgba(15, 27, 41, 0.84);
+  --card-border: rgba(116, 184, 226, 0.16);
+  --card-hover-border: rgba(116, 184, 226, 0.32);
+  --note-bg: rgba(116, 184, 226, 0.1);
+  --link-underline: rgba(116, 184, 226, 0.35);
+  --nav-solid-bg: #0c1c2a;
+  --nav-bg: rgba(12, 28, 42, 0.92);
+  --nav-fg: #EDF4FB;
+  --nav-muted: rgba(237, 244, 251, 0.78);
+  --nav-subtle: rgba(237, 244, 251, 0.54);
+  --nav-surface: rgba(255, 255, 255, 0.06);
+  --nav-surface-hover: rgba(255, 255, 255, 0.1);
+  --nav-border: rgba(255, 255, 255, 0.14);
+  --nav-border-strong: rgba(255, 255, 255, 0.24);
+  --nav-link-hover: #9FD4F5;
+  --nav-shadow: rgba(0, 0, 0, 0.36);
+  --nav-inset: rgba(255, 255, 255, 0.05);
+  --nav-logo-wordmark: var(--nav-fg);
+  --nav-logo-mark: var(--primary);
+  --footer-bg: #050B12;
+  --footer-fg: #EDF4FB;
+  --footer-muted: rgba(237, 244, 251, 0.72);
+  --footer-faint: rgba(237, 244, 251, 0.42);
+  --footer-line: rgba(255, 255, 255, 0.1);
+  --btn-bg: #5EA8D7;
+  --btn-hover: #4A90C2;
+  --hero-gradient: linear-gradient(180deg, #08111A 0%, #10263A 56%, #0A1724 100%);
+  --landing-hero-bg: linear-gradient(180deg, #08111A 0%, #10263A 56%, #0A1724 100%);
+  --secondary-surface: rgba(116, 184, 226, 0.12);
+  --showcase-bg: #101821;
+  --overlay: rgba(2, 6, 12, 0.56);
+  --shadow-strong: 0 18px 64px rgba(0, 0, 0, 0.42);
+  --terminal-bg: #0B1017;
+  --terminal-panel: #121A24;
+  --terminal-line: #263445;
+  --terminal-fg: #D7E0EA;
+  --terminal-muted: #7F8B99;
+  --terminal-keyword: #7EB8DA;
+  --terminal-string: #E4A986;
+  --terminal-type: #6BD4BC;
+  --terminal-method: #E6D78D;
+  --agent-card-bg: rgba(9, 17, 27, 0.84);
+  --agent-card-header: rgba(15, 28, 40, 0.94);
+  --agent-card-border: rgba(116, 184, 226, 0.16);
+  --agent-card-border-active: rgba(116, 184, 226, 0.3);
+  --agent-card-title: #DBE9F4;
+  --agent-card-muted: #93A7B9;
+  --agent-card-status: #63D18B;
+  --agent-card-glow: rgba(99, 209, 139, 0.28);
+  --syntax-string: #F2B17A;
+  --syntax-method: #C9A7FF;
+  --syntax-comment: #7C8A9B;
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@agent-relay/brand",
+  "version": "1.1.0",
+  "description": "Shared brand tokens, CSS variables, and color system for Agent Relay and associated properties",
+  "main": "brand.css",
+  "style": "brand.css",
+  "files": [
+    "brand.css",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./brand.css",
+    "./brand.css": "./brand.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AgentWorkforce/relay",
+    "directory": "packages/brand"
+  }
+}