Update to Advan Research REI

{
  "name": "advan-rei-design-system",
  "description": "The authoritative design token reference for all Advan REI visual output — color palette, typography, spacing, border radius, widget structure, and component patterns. Read this skill before writing any HTML, CSS, or chart code for Reina. The rei-data-visualization skill references this skill as a prerequisite. Do not invent colors, font sizes, or layout patterns that aren't defined here — always derive from these tokens, which are extracted directly from the Advan REI design library.\n",
  "included_files": [],
  "skill_md_contents": "---\nname: advan-rei-design-system\ndescription: >\n  The authoritative design token reference for all Advan REI visual output —\n  color palette, typography, spacing, border radius, widget structure, and\n  component patterns. Read this skill before writing any HTML, CSS, or chart\n  code for Reina. The rei-data-visualization skill references this skill as a\n  prerequisite. Do not invent colors, font sizes, or layout patterns that\n  aren't defined here — always derive from these tokens, which are extracted\n  directly from the Advan REI design library.\n---\n\n# Advan REI Design System\n\nThis document defines every design token and structural pattern used in the\nREI platform. All visual output Reina produces — charts, tables, widgets,\nHTML artifacts — must conform to these specifications. All tokens are\nextracted from the official Advan REI design library HTML.\n\n---\n\n## Foundation: Dark Theme\n\nThe REI interface is a dark navy application. Every visual artifact must use\nthis palette as its base — never white or light backgrounds.\n\n| Token | Hex | Use |\n|-------|-----|-----|\n| `--bg-deepest` | `#0E1847` | Page / app background (outermost) |\n| `--bg-deep` | `#101B4D` | Deep layer behind widgets, export drawers |\n| `--bg-widget` | `#162465` | Widget body, data table cells |\n| `--bg-section-hd` | `#1B2B7A` | Section heading rows within widgets |\n| `--bg-table-hd` | `#26326E` | Table header rows |\n| `--bg-subtle` | `#28325F` | Row dividers, subtle borders |\n\n---\n\n## Color Tokens\n\n### Brand Blues (UI Structure)\n\n| Token | Hex | Use |\n|-------|-----|-----|\n| `--blue-primary` | `#0061F3` | Interactive elements, modal nav, CTA buttons |\n| `--blue-dark` | `#0F53C7` | Hover state for blue-primary |\n| `--blue-light` | `#3F8CFD` | Highlighted button states |\n| `--blue-lighter` | `#428AF5` | Secondary highlights |\n| `--blue-ghost` | `#DBECFF` | Very subtle tint backgrounds |\n\n### Extended Blues (Demographics / Panels)\n\n| Token | Hex | Use |\n|-------|-----|-----|\n| `--bg-panel` | `#0B41AB` | Panel backgrounds |\n| `--bg-panel-hd` | `#0E3894` | Panel header areas |\n| `--bg-panel-deep` | `#112369` | Deep panel layers |\n| `--bg-demo-cat` | `#1A2B7B` | Demographics category header rows |\n| `--bg-demo-row` | `#131E58` | Demographics odd rows |\n| `--bg-demo-alt` | `#132C61` | Demographics even rows (alternating) |\n\n### Modal / Settings Shell\n\n| Token | Hex | Use |\n|-------|-----|-----|\n| `--modal-nav` | `#0061F3` | Left nav column + right action column |\n| `--modal-body` | `#0256D4` | Center content area |\n| `--modal-btn` | `#3180F6` | Apply / Save / Reset buttons |\n\n---\n\n## Property Colors\n\nEach property in a multi-property comparison is assigned one color track.\nAlways assign in order: P1 → cyan, P2 → violet, P3 → green, P4 → pink.\nNever swap these assignments — cyan always means the first/primary property.\n\n### Property 1 — Cyan\n\n| Shade | Token | Hex |\n|-------|-------|-----|\n| Primary | `--cyan-primary` | `#17AAB3` |\n| Dark | `--cyan-dark` | `#12888F` |\n| Bright | `--cyan-bright` | `#00EEFA` |\n| Muted | `--cyan-muted` | `#509EAA` |\n| Bar / accent | `--cyan-bar` | `#46E2EF` |\n| S1 (lightest) | `--cyan-s1` | `#A5F7FC` |\n| S2 | `--cyan-s2` | `#39DBE3` |\n| S3 | `--cyan-s3` | `#07A5AD` |\n| S4 (darkest) | `--cyan-s4` | `#0B4D6D` |\n\nWidget header background: `--cyan-primary` (`#17AAB3`), white text.\nValue box background: `#17AAB3`.\n\n### Property 2 — Violet\n\n| Shade | Token | Hex |\n|-------|-------|-----|\n| Primary | `--violet-primary` | `#713DC5` |\n| Dark | `--violet-dark` | `#4E2A89` |\n| Bright | `--violet-bright` | `#AB7DF6` |\n| Muted | `--violet-muted` | `#8240EA` |\n| Bar / accent | `--violet-bar` | `#CAA8FF` |\n| S1 | `--violet-s1` | `#D7C0FD` |\n| S2 | `--violet-s2` | `#AB8AE1` |\n| S3 | `--violet-s3` | `#8055C4` |\n| S4 | `--violet-s4` | `#541FA8` |\n\n### Property 3 — Green\n\n| Shade | Token | Hex |\n|-------|-------|-----|\n| Primary | `--green-primary` | `#17B36A` |\n| Dark | `--green-dark` | `#107D4A` |\n| Bright | `--green-bright` | `#44E298` |\n| Muted | `--green-muted` | `#15A15F` |\n| S1 | `--green-s1` | `#B6F0D8` |\n| S2 | `--green-s2` | `#7DC5A5` |\n| S3 | `--green-s3` | `#459A73` |\n| S4 | `--green-s4` | `#0C6F40` |\n\n### Property 4 — Pink\n\n| Shade | Token | Hex |\n|-------|-------|-----|\n| Primary | `--pink-primary` | `#DB2988` |\n| Dark | `--pink-dark` | `#991D5F` |\n| Bright | `--pink-bright` | `#E669AC` |\n| Muted | `--pink-muted` | `#C5257A` |\n| S1 | `--pink-s1` | `#FDC5E3` |\n| S2 | `--pink-s2` | `#DC88B5` |\n| S3 | `--pink-s3` | `#BB4B86` |\n| S4 | `--pink-s4` | `#9A0E58` |\n\n---\n\n## Status Colors\n\nUse for performance indicators, YoY change arrows, and rank badges only.\nNever use these for property identity.\n\n| Token | Hex | Use |\n|-------|-----|-----|\n| `--status-positive` | `#76B723` | Positive YoY, strong rank, green rank bar |\n| `--status-negative` | `#FF151F` | Negative YoY, weak rank, red rank bar |\n| `--status-neutral` | `#999999` | Flat / no change, neutral indicators |\n| `--status-disabled` | `#707070` | Disabled or unavailable state |\n| `--red-badge` | `#FE141E` | Alert badges |\n\n---\n\n## Neutrals\n\n| Token | Hex | Use |\n|-------|-----|-----|\n| `--white` | `#FFFFFF` | Primary text on dark backgrounds |\n| `--gray-light` | `#E4E4E4` | Secondary text, metric labels, address lines |\n\n---\n\n## Typography\n\n**Font family:** `'Rubik', 'Google Sans Text', 'Roboto', sans-serif`\nImport from Google Fonts: `Rubik:wght@300;400;500;600`\n\n### Type Scale\n\n| Token | Size | Common use |\n|-------|------|------------|\n| `--text-xs` | `8.75px` | Tertiary labels, badges, footnotes |\n| `--text-sm` | `10.5px` | Addresses, supporting detail, pill buttons |\n| `--text-base` | `12.25px` | Standard body, table cells, form fields |\n| `--text-md` | `14px` | Default UI text, modal content, nav items |\n| `--text-lg` | `15.75px` | Widget titles, section headings |\n| `--text-xl` | `19.6px` | Section titles |\n| `--text-2xl` | `22px` | Page-level headings |\n\n### Font Weights\n\n| Token | Value | Use |\n|-------|-------|-----|\n| `--fw-light` | `300` | Inactive nav items, secondary labels |\n| `--fw-regular` | `400` | Body text, table cell values |\n| `--fw-medium` | `500` | Active nav items, widget titles, button labels, property names |\n\n---\n\n## Spacing\n\n| Token | Size |\n|-------|------|\n| `--gap-xs` | `4px` |\n| `--gap-sm` | `8px` |\n| `--gap-md` | `12px` |\n| `--gap-lg` | `16px` |\n| `--gap-xl` | `24px` |\n| `--gap-2xl` | `32px` |\n\n---\n\n## Border Radius\n\n| Token | Size | Use |\n|-------|------|-----|\n| `--r-none` | `0px` | Flush edges |\n| `--r-xs` | `2px` | Micro elements, value boxes |\n| `--r-sm` | `3.5px` | Buttons, pill segments, small chips |\n| `--r-md` | `7px` | Cards, widgets, modals, table header corners |\n| `--r-lg` | `17.5px` | Larger rounded panels |\n| `--r-pill` | `26.25px` | Full pill shapes |\n| `--r-full` | `50%` | Circles (logo marks, avatars) |\n\n---\n\n## Widget Structure\n\nEvery data widget follows this shell pattern:\n\n```\n┌─────────────────────────────────────────┐\n│ WIDGET HEADER (property color bg)        │  ← colored per property P1–P4\n│ Property name · metric · date range      │    font-size: 12–14px, fw-medium\n├─────────────────────────────────────────┤\n│                                         │\n│  WIDGET BODY  (bg: #162465)             │  ← --bg-widget\n│  Chart, table, or metric content        │\n│                                         │\n├─────────────────────────────────────────┤\n│ LEGEND BAR (optional, multi-property)   │  ← --bg-widget, muted property colors\n│ ● P1 Name   ● P2 Name                  │\n└─────────────────────────────────────────┘\n```\n\n- **Outer border-radius:** `--r-md` (7px) on all corners\n- **Header padding:** `12px 16px`\n- **Body padding:** `12–16px`\n- **Header background:** primary property color (`--cyan-primary` for P1). For multi-property or no-owner widgets, use `--bg-table-hd` (`#26326E`).\n\n---\n\n## Component Patterns\n\n### Value Boxes\n\nSmall inline colored rectangles in data tables that tie a metric value to\nits property color.\n\n```css\nbackground: var(--cyan-primary);   /* or violet / green / pink per property */\ncolor: #FFFFFF;\nborder-radius: var(--r-xs);        /* 2px */\npadding: 2px 6px;\nfont-size: var(--text-sm);         /* 10.5px */\nfont-weight: var(--fw-medium);     /* 500 */\ndisplay: inline-block;\n```\n\nUse value boxes when a table column belongs to a specific property. Omit them\nfor single-property tables — use plain white text instead.\n\n### Rank Badges\n\nLeft vertical bar (3px wide, full cell height) + rank text \"X of Y\".\n\n```css\n/* Positive / strong performer */\nborder-left: 3px solid var(--status-positive);   /* #76B723 */\n\n/* Negative / weak performer */\nborder-left: 3px solid var(--status-negative);   /* #FF151F */\n```\n\nAlways format rank as `\"X of Y\"` — include the total count, never just the rank number.\n\n### Change Indicators (YoY)\n\nShown alongside metric values in ranking tables.\n\n- Positive: `▲ +8.3%` in `--status-positive` (`#76B723`)\n- Negative: `▼ −4.1%` in `--status-negative` (`#FF151F`)\n- Flat: `— ` in `--status-neutral` (`#999999`)\n\n### Rank Cards\n\nStandalone rank callouts (e.g., in a summary section):\n\n```css\nbackground: rgba(255, 255, 255, 0.05);   /* glass effect */\nborder-radius: var(--r-md);              /* 7px */\npadding: var(--gap-md);                  /* 12px */\n```\n\nValue displayed large (14–16px, fw-medium), \"X of Y\" in smaller text below,\ncolored rank bar at bottom using the status color conventions.\n\n### Pill / Segmented Buttons\n\n```css\nfont-size: var(--text-sm);              /* 10.5px */\nheight: 26px;\npadding: 0 8.75px;\nborder: 0.833px solid rgba(255, 255, 255, 0.15);\nborder-radius: 0;\nbackground: transparent;\ncolor: white;\nfont-family: var(--font-primary);\n\n/* Active state */\nbackground: rgba(255, 255, 255, 0.15);\nborder-color: rgba(255, 255, 255, 0.15);\n```\n\nFirst item in group: `border-radius: 3.5px 0 0 3.5px`\nLast item in group: `border-radius: 0 3.5px 3.5px 0`\n\n### Property Cell (Ranking Table Row)\n\nEach row in a ranking table identifies the property with:\n- Circular logo icon (50% border-radius)\n- Property name: 12px, fw-medium (500), white\n- Address: 10.5px, fw-light (300), `--gray-light`\n- Square footage: 8.75px, neutral gray\n\n---\n\n## CSS Starter Block for HTML Artifacts\n\nInclude this in every `<head>` before any other styles:\n\n```html\n<link href=\"https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap\" rel=\"stylesheet\" />\n```\n\nDeclare these tokens on `:root`:\n\n```css\n:root {\n  --font-primary:   'Rubik', 'Google Sans Text', 'Roboto', sans-serif;\n\n  /* Backgrounds */\n  --bg-deepest:    #0E1847;\n  --bg-deep:       #101B4D;\n  --bg-widget:     #162465;\n  --bg-section-hd: #1B2B7A;\n  --bg-table-hd:   #26326E;\n  --bg-subtle:     #28325F;\n  --bg-demo-cat:   #1A2B7B;\n  --bg-demo-row:   #131E58;\n  --bg-demo-alt:   #132C61;\n\n  /* Blues */\n  --blue-primary:  #0061F3;\n  --blue-dark:     #0F53C7;\n  --modal-nav:     #0061F3;\n  --modal-body:    #0256D4;\n  --modal-btn:     #3180F6;\n\n  /* Property colors */\n  --cyan-primary:   #17AAB3;\n  --cyan-bar:       #46E2EF;\n  --cyan-muted:     #509EAA;\n  --violet-primary: #713DC5;\n  --violet-bar:     #CAA8FF;\n  --green-primary:  #17B36A;\n  --pink-primary:   #DB2988;\n\n  /* Status */\n  --status-positive: #76B723;\n  --status-negative: #FF151F;\n  --status-neutral:  #999999;\n  --status-disabled: #707070;\n\n  /* Neutrals */\n  --white:         #FFFFFF;\n  --gray-light:    #E4E4E4;\n\n  /* Typography */\n  --text-xs:    8.75px;\n  --text-sm:    10.5px;\n  --text-base:  12.25px;\n  --text-md:    14px;\n  --text-lg:    15.75px;\n  --text-xl:    19.6px;\n  --fw-light:   300;\n  --fw-regular: 400;\n  --fw-medium:  500;\n\n  /* Spacing */\n  --gap-xs:  4px;\n  --gap-sm:  8px;\n  --gap-md:  12px;\n  --gap-lg:  16px;\n  --gap-xl:  24px;\n  --gap-2xl: 32px;\n\n  /* Radius */\n  --r-xs:   2px;\n  --r-sm:   3.5px;\n  --r-md:   7px;\n  --r-lg:   17.5px;\n  --r-pill: 26.25px;\n  --r-full: 50%;\n}\n\nbody {\n  font-family: var(--font-primary);\n  background: var(--bg-deepest);\n  color: var(--white);\n  font-size: var(--text-md);\n  line-height: 1.5;\n}\n```\n\nChart libraries (Chart.js, etc.) may be loaded from `https://cdnjs.cloudflare.com`.\nChart canvas backgrounds must match `--bg-widget` or `--bg-deepest` — never white.\n"
}