ima-claude 2.20.0 → 2.25.0

package/plugins/ima-claude/skills/ima-bootstrap/SKILL.md

@@ -5,129 +5,108 @@ description: "Bootstrap 5.3 with IMA brand integration for WordPress/Picostrap5
 
 # IMA Bootstrap
 
-Bootstrap 5.3 with IMA brand integration for WordPress/Picostrap5 child theme sites.
-
-## Core Principle
+Bootstrap 5.3 + IMA brand for WordPress/Picostrap5 child theme sites.
 
 **Utility-first: prefer Bootstrap utility classes over custom CSS.**
 
 ```
-Need spacing/display/flex/text? → Bootstrap utility class
-Need IMA brand color/typography? → IMA SCSS variable or mixin
-Need component? → Bootstrap component + IMA brand overrides
-Need deep Bootstrap API details? → Context7: /websites/getbootstrap
+Spacing/display/flex/text? → Bootstrap utility class
+IMA brand color/typography? → IMA SCSS variable or mixin
+Component? → Bootstrap component + IMA brand overrides
+Bootstrap API details? → Context7: /websites/getbootstrap
 ```
 
 ## Decision Tree
 
 ```
-Writing HTML/template markup?
-├── Layout (viewport-responsive) → .container, .row, .col-{bp}-{n}
-├── Layout (container-responsive) → .ima-row, .ima-col-{bp}-{n} ← USE FOR COMPONENTS
-├── Spacing → .m{side}-{size}, .p{side}-{size} (0-5 scale)
+Writing HTML?
+├── Layout (viewport) → .container, .row, .col-{bp}-{n}
+├── Layout (container) → .ima-row, .ima-col-{bp}-{n} ← USE FOR COMPONENTS
+├── Spacing → .m{side}-{size}, .p{side}-{size}
 ├── Display → .d-{value}, .d-{bp}-{value}
 ├── Flex → .d-flex, .justify-content-{v}, .align-items-{v}
 ├── Text → .text-{align}, .fw-{weight}, .fs-{size}
-├── Colors → .text-{color}, .bg-{color} (primary = IMA indigo)
+├── Colors → .text-{color}, .bg-{color}
 ├── Component → card, modal, accordion, btn, badge, alert, navbar
-└── Custom need? → Check IMA brand mixins first, then write SCSS
+└── Custom? → IMA brand mixins first, then SCSS
 
 Writing SCSS?
-├── Use IMA variable → $ima-brand-{color}, $ima-font-{prop}
-├── Use IMA mixin → @include ima-{component}
-├── Override Bootstrap → Set $variable BEFORE @import "bootstrap5/variables"
-└── Custom utility? → Probably Bootstrap already has it
+├── IMA variable → $ima-brand-{color}, $ima-font-{prop}
+├── IMA mixin → @include ima-{component}
+├── Bootstrap override → Set $variable BEFORE @import "bootstrap5/variables"
+└── Custom utility? → Bootstrap probably has it
 ```
 
-### Bootstrap Grid vs IMA Container Grid
+### Grid: Bootstrap vs IMA Container
 
-```
-Need columns that respond to VIEWPORT width?
-  → Bootstrap: .row + .col-md-6 (page-level layouts)
+| Need | Use | Why |
+|------|-----|-----|
+| Columns at viewport breakpoint | `.row` + `.col-md-6` | Page-level layouts |
+| Columns at container breakpoint | `.ima-row` + `.ima-col-sm-6` | Components, forms, sidebars, modals |
 
-Need columns that respond to CONTAINER width?
-  → IMA: .ima-row + .ima-col-sm-6 (components, forms, widgets, sidebars)
-```
+`.col-md-6` breaks at viewport ≥768px — useless in a narrow sidebar. `.ima-col-sm-6` breaks at container ≥400px regardless of viewport.
 
-**Rule of thumb:** Page structure = Bootstrap grid. Reusable components = IMA container grid.
+## Anti-Patterns
 
-Bootstrap's `.col-md-6` breaks at viewport ≥768px — useless when a form sits in a narrow
-sidebar on a wide screen. IMA's `.ima-col-sm-6` breaks at container ≥400px regardless of
-viewport, so the same form works in a sidebar, card, modal, or full-width page.
+| BAD | GOOD |
+|-----|------|
+| `margin-top: 16px` | `class="mt-3"` |
+| `display: flex` | `class="d-flex"` |
+| `color: #040C53` | `$ima-brand-primary` / `.text-primary` |
+| `font-family: Lato` | `$ima-font-family-primary` |
+| Custom `.my-card { padding: 24px }` | `class="card"` |
+| `@media (min-width: 768px)` for layout | `class="col-md-6"` |
+| `.col-md-6` in reusable component | `.ima-col-sm-6` |
 
-## Anti-Patterns
+## Bootstrap Utility Reference
 
-| BAD | GOOD | Why |
-|-----|------|-----|
-| `margin-top: 16px` | `class="mt-3"` | Bootstrap spacing scale |
-| `display: flex` | `class="d-flex"` | Bootstrap utility |
-| `color: #040C53` | `$ima-brand-primary` or `.text-primary` | Theme-mapped |
-| `font-family: Lato` | `$ima-font-family-primary` | Centralized |
-| `border-radius: 10px` on every element | Already set via `$border-radius` | Global override |
-| Custom `.my-card { padding: 24px; ... }` | `class="card"` | Cards already IMA-branded |
-| `@media (min-width: 768px)` for layout | `class="col-md-6"` | Grid handles it |
-| `.col-md-6` in a reusable component | `.ima-col-sm-6` | Container-responsive |
-| Inline `style="flex: 1 1 200px"` hacks | `.ima-row` + `.ima-col-sm-6` | Utility classes |
-
-## Bootstrap Utility Quick Reference
-
-### Spacing (rem-based, 0-5 scale)
-- **Pattern**: `{property}{side}-{size}` → `mt-3`, `px-4`, `mb-0`
-- **Properties**: `m` (margin), `p` (padding)
-- **Sides**: `t` top, `b` bottom, `s` start, `e` end, `x` horizontal, `y` vertical, blank = all
-- **Sizes**: `0`=0, `1`=0.25rem, `2`=0.5rem, `3`=1rem, `4`=1.5rem, `5`=3rem, `auto` (margin only)
+### Spacing (rem-based, 0-5)
+- Pattern: `{property}{side}-{size}` → `mt-3`, `px-4`, `mb-0`
+- Properties: `m` margin, `p` padding
+- Sides: `t` `b` `s` `e` `x` `y` (blank = all)
+- Sizes: `0`=0, `1`=0.25rem, `2`=0.5rem, `3`=1rem, `4`=1.5rem, `5`=3rem, `auto`
 
 ### Display & Flex
 - `d-none`, `d-block`, `d-flex`, `d-grid`, `d-inline-block`
-- Responsive: `d-{bp}-{value}` → `d-none d-md-block` (hidden below md)
-- `flex-row`, `flex-column`, `flex-wrap`, `flex-nowrap`
+- Responsive: `d-{bp}-{value}` → `d-none d-md-block`
+- `flex-row`, `flex-column`, `flex-wrap`
 - `justify-content-{start|center|end|between|around|evenly}`
 - `align-items-{start|center|end|stretch|baseline}`
 - `gap-{0-5}`, `row-gap-{n}`, `column-gap-{n}`
 
-### Grid (12-column, viewport-based)
-- `.container` (responsive), `.container-fluid` (full-width)
+### Grid (12-col, viewport-based)
+- `.container`, `.container-fluid`
 - `.col`, `.col-{1-12}`, `.col-{bp}-{1-12}`
 - Breakpoints: `sm`≥576, `md`≥768, `lg`≥992, `xl`≥1200, `xxl`≥1400
 - `.offset-{bp}-{n}`, `.order-{bp}-{n}`
-- **Use for page-level layouts only** — see IMA Container Grid for components
-
-### IMA Container Grid (12-column, container-based)
-- `.ima-row` (establishes container query context + CSS grid)
-- `.ima-col-{1-12}` (always that width), `.ima-col-{bp}-{1-12}` (responsive)
-- Breakpoints: `sm`≥400px, `md`≥600px, `lg`≥800px (container width, NOT viewport)
-- Default: all columns stack full-width (mobile-first)
-- Gap: `1rem` default
-- **Use for reusable components** — forms, widgets, cards, anything in sidebars/modals
+
+### IMA Container Grid (12-col, container-based)
+- `.ima-row` — container query context + CSS grid
+- `.ima-col-{1-12}`, `.ima-col-{bp}-{1-12}`
+- Breakpoints: `sm`≥400px, `md`≥600px, `lg`≥800px (container width)
 - Source: `ima-brand/sass/_container-grid.scss`
 
 ### Text & Typography
 - `text-start`, `text-center`, `text-end`
 - `fw-bold`, `fw-semibold`, `fw-normal`, `fw-light`
-- `fs-1` (largest) through `fs-6` (smallest)
-- `text-uppercase`, `text-lowercase`, `text-capitalize`
-- `text-nowrap`, `text-break`, `text-truncate`
+- `fs-1` (largest) through `fs-6`
+- `text-uppercase`, `text-truncate`, `text-nowrap`
 
-### Colors (IMA-mapped via theme)
-- Text: `text-primary` (indigo), `text-secondary` (teal), `text-danger`, `text-warning`, `text-success`, `text-info`, `text-muted`, `text-white`
-- Background: `bg-primary`, `bg-secondary`, `bg-light`, `bg-dark`, `bg-white`, `bg-body-tertiary`
+### Colors (IMA-mapped)
+- Text: `text-primary` (indigo), `text-secondary` (teal), `text-danger`, `text-warning`, `text-muted`
+- Background: `bg-primary`, `bg-secondary`, `bg-light`, `bg-dark`, `bg-body-tertiary`
 - Subtle: `text-{color}-emphasis`, `bg-{color}-subtle`
 
 ### Sizing & Position
-- `w-25`, `w-50`, `w-75`, `w-100`, `w-auto`, `mw-100`
-- `h-25`, `h-50`, `h-75`, `h-100`, `h-auto`
+- `w-25/50/75/100/auto`, `mw-100`, `h-25/50/75/100/auto`
 - `position-relative`, `position-absolute`, `position-fixed`, `position-sticky`
 - `top-0`, `start-0`, `end-0`, `bottom-0`, `translate-middle`
 
 ### Borders & Shadows
-- `border`, `border-top`, `border-0`, `border-top-0`
+- `border`, `border-top`, `border-0`
 - `rounded`, `rounded-{0-5}`, `rounded-circle`, `rounded-pill`
 - `shadow-none`, `shadow-sm`, `shadow`, `shadow-lg`
 
-### Visibility
-- `visible`, `invisible` (layout preserved)
-- `visually-hidden` (screen reader only)
-
 ## Key Components
 
 ### Cards (IMA: no shadow, 10px radius, 24px padding)
@@ -180,7 +159,6 @@ viewport, so the same form works in a sidebar, card, modal, or full-width page.
 ```html
 <button class="btn btn-primary">Primary (teal)</button>
 <button class="btn btn-outline-primary">Outline</button>
-<button class="btn btn-secondary">Secondary</button>
 <button class="btn btn-lg btn-primary">Large (20px radius)</button>
 ```
 
@@ -194,19 +172,9 @@ viewport, so the same form works in a sidebar, card, modal, or full-width page.
 </div>
 ```
 
-## IMA Brand Integration
-
-For detailed IMA brand variables, colors, mixins, and component patterns:
-- See [references/ima-brand.md](references/ima-brand.md)
-
-For theme SCSS architecture and Bootstrap variable override chain:
-- See [references/theme-integration.md](references/theme-integration.md)
-
-For extended Bootstrap utility patterns and Sass customization:
-- See [references/bootstrap-patterns.md](references/bootstrap-patterns.md)
-
-### Quick IMA Color Reference
+## IMA Brand
 
+### Colors
 | Name | Hex | SCSS Variable | Bootstrap Class |
 |------|-----|---------------|-----------------|
 | Trustworthy Indigo | `#040C53` | `$ima-brand-primary` | `.text-primary`, `.bg-primary` |
@@ -217,7 +185,7 @@ For extended Bootstrap utility patterns and Sass customization:
 | Red Ribbon | `#DD153B` | `$ima-brand-red` | `.text-danger`, `.bg-danger` |
 | Clarity Wash | `#F2F3F5` | `$ima-brand-gray-light` | `.bg-light` |
 
-### IMA Typography Mixins
+### Typography Mixins
 ```scss
 @include ima-page-header;        // Lato Bold 40px, uppercase, primary
 @include ima-section-header;     // Lato Bold 20px, primary
@@ -227,7 +195,7 @@ For extended Bootstrap utility patterns and Sass customization:
 @include ima-form-label;         // Open Sans 14px, gray
 ```
 
-### IMA Component Mixins
+### Component Mixins
 ```scss
 @include ima-button-primary;      // Teal bg, white text, 20px/40px padding
 @include ima-button-primary-wide; // Same, 80px horizontal padding
@@ -238,7 +206,7 @@ For extended Bootstrap utility patterns and Sass customization:
 @include ima-gradient-bg;         // 150deg gradient, #00066F → #00B8B8
 ```
 
-## SCSS File Locations
+## SCSS Architecture
 
 ```
 picostrap5-child-base/sass/
@@ -246,33 +214,32 @@ picostrap5-child-base/sass/
 ├── _bootstrap-loader.scss       ← Bootstrap import chain
 ├── _theme_variables.scss        ← Variable overrides (loads IMA brand)
 ├── _custom.scss                 ← Modular custom styles
-├── base/                        ← Global base styles
-├── components/                  ← Reusable components
-├── pages/                       ← Page-specific styles
 └── bootstrap5/                  ← Bootstrap 5.3 source (DO NOT EDIT)
 
 plugins/ima-brand/sass/
-├── brand.scss                   ← Main import
 ├── _variables.scss              ← Colors, typography, spacing
 ├── _typography.scss             ← Font mixins
 ├── _spacing.scss                ← Component mixins, layout
-└── _container-grid.scss         ← Container query grid (.ima-row/.ima-col-*)
+└── _container-grid.scss         ← .ima-row/.ima-col-*
 ```
 
 **Import order**: Bootstrap functions → IMA brand → theme variables → Bootstrap variables → Bootstrap components → custom styles
 
-## Context7 Integration
+## Reference Files
+
+| File | Contains |
+|------|----------|
+| [`references/ima-brand.md`](references/ima-brand.md) | Full brand variables, colors, mixins |
+| [`references/theme-integration.md`](references/theme-integration.md) | SCSS architecture, Bootstrap override chain |
+| [`references/bootstrap-patterns.md`](references/bootstrap-patterns.md) | Extended utilities, Sass customization |
+
+## Context7
 
-For deep Bootstrap docs (specific component APIs, all Sass variables):
 ```
 mcp__context7__query-docs({ libraryId: "/websites/getbootstrap", query: "..." })
 ```
 
-Example queries: `"navbar responsive collapse"`, `"form validation custom styles"`, `"utility API extend"`, `"offcanvas placement responsive"`
-
 ## Success Metrics
-
-- Bootstrap utility usage: ≥80% (vs custom CSS for standard properties)
-- IMA brand variables: 100% (no hardcoded brand colors)
-- Custom CSS only for: truly custom patterns with no Bootstrap equivalent
-- Bootstrap components: used for all standard UI patterns
+- Bootstrap utility usage ≥80% vs custom CSS
+- IMA brand variables 100% (no hardcoded brand colors)
+- Custom CSS only for patterns with no Bootstrap equivalent

package/plugins/ima-claude/skills/ima-bootstrap/references/ima-brand.md

@@ -13,10 +13,10 @@ Based on IMA Brand Book v4.0 (September 2025). Plugin: `ima-brand` v4.0.0.
 
 | Name | Hex | Variable | Usage |
 |------|-----|----------|-------|
-| Trustworthy Indigo | `#040C53` | `$ima-brand-primary` | Headers, titles, emphasis |
-| Aquatic Pulse | `#0296A1` | `$ima-brand-secondary` | Buttons, CTAs, links |
-| Bright Teal | `#00B8B8` | `$ima-brand-accent-teal` | Highlights, hover states |
+| Trustworthy Indigo | `#00066F` | `$ima-brand-primary` | Headers, titles, emphasis |
+| Aquatic Pulse | `#00B8B8` | `$ima-brand-secondary` | Buttons, CTAs, links |
 | Guidance Sky | `#A2CFF0` | `$ima-brand-sky` | Light backgrounds, accents |
+| Soft Mist | `#EDF3F4` | `$ima-brand-mist` | Light blue-gray backgrounds |
 
 ### Secondary Colors
 
@@ -48,7 +48,7 @@ Based on IMA Brand Book v4.0 (September 2025). Plugin: `ima-brand` v4.0.0.
 
 | Tag | Hex | Variable |
 |-----|-----|----------|
-| Telehealth | `#040C53` | `$ima-tag-telehealth` |
+| Telehealth | `#00066F` | `$ima-tag-telehealth` |
 | Prescriber | `#FFCC00` | `$ima-tag-prescriber` |
 | Family | `#A2CFF0` | `$ima-tag-family` |
 
@@ -94,7 +94,7 @@ Based on IMA Brand Book v4.0 (September 2025). Plugin: `ima-brand` v4.0.0.
 @include ima-provider-title;      // Lato Semi Bold 32px, primary color
 @include ima-provider-title-bold; // Lato Bold 1.4em
 @include ima-form-label;          // Open Sans 14px, gray
-@include ima-button-text;         // Lato Bold 18px, uppercase
+@include ima-button-text;         // Lato Bold 1em, uppercase, 0.04em letter-spacing
 @include ima-body-text;           // Proxima Nova Regular 16px
 @include ima-h1;                  // Lato Black 40px
 @include ima-h2;                  // Lato Bold 32px
@@ -106,14 +106,20 @@ Based on IMA Brand Book v4.0 (September 2025). Plugin: `ima-brand` v4.0.0.
 
 ## Component Mixins
 
-### Buttons
+### Buttons (Digital Content Guide 2026)
 ```scss
-@include ima-button-primary;      // Aquatic Pulse bg, white text, 20px/40px padding, 10px radius
-@include ima-button-primary-wide; // Same, 80px horizontal padding
-@include ima-button-outline;      // Transparent bg, primary border
+@include ima-button-teal;         // Teal bg, white text, inverts to outline on hover
+@include ima-button-dark;         // Navy bg, white text, inverts to outline on hover
+@include ima-button-inverse-teal; // Teal outline, fills to teal on hover
+@include ima-button-inverse-dark; // Navy outline, fills to navy on hover
+@include ima-button-lg;           // Large variant (2em font, 1.75em/3.75em padding)
+
+// Legacy aliases (still work):
+@include ima-button-primary;      // → ima-button-teal
+@include ima-button-outline;      // → ima-button-inverse-dark
 ```
-- Hover: Bright Teal (#00B8B8) background
-- Font: Lato Bold 18px, uppercase
+- All buttons: 15px radius, 1.25em/2.5em padding, 0.04em letter-spacing
+- Font: Lato Bold 1em, uppercase
 
 ### Forms
 ```scss
@@ -214,17 +220,20 @@ Source: `ima-brand/sass/_container-grid.scss`
 | Variable | Value | Usage |
 |----------|-------|-------|
 | `$ima-border-radius-sm` | 5px | Tags, small badges |
-| `$ima-border-radius-md` | 10px | Buttons, cards |
+| `$ima-border-radius-md` | 10px | Cards |
 | `$ima-border-radius-lg` | 15px | Form fields |
-| `$ima-border-radius-xl` | 20px | Large/digital buttons |
+| `$ima-border-radius-xl` | 20px | Reserved |
+| `$ima-button-border-radius` | 15px | All buttons (unified) |
 
 ## Component Spacing
 
 | Variable | Value |
 |----------|-------|
-| `$ima-button-padding-x` | 40px |
-| `$ima-button-padding-y` | 20px |
-| `$ima-button-padding-x-alt` | 80px (wide) |
+| `$ima-button-padding-y` | 1.25em |
+| `$ima-button-padding-x` | 2.5em |
+| `$ima-button-lg-padding-y` | 1.75em |
+| `$ima-button-lg-padding-x` | 3.75em |
+| `$ima-button-letter-spacing` | 0.04em |
 | `$ima-form-field-padding` | 16px |
 | `$ima-form-field-margin-bottom` | 24px |
 | `$ima-card-padding` | 24px |
@@ -236,14 +245,14 @@ Source: `ima-brand/sass/_container-grid.scss`
 The IMA brand plugin maps to Bootstrap's theme colors:
 
 ```scss
-$primary:   $ima-brand-primary;        // #040C53
-$secondary: $ima-brand-secondary;      // #0296A1
+$primary:   $ima-brand-primary;        // #00066F
+$secondary: $ima-brand-secondary;      // #00B8B8
 $success:   #28A745;
 $warning:   $ima-brand-gold;           // #FFCC00
 $danger:    $ima-brand-red;            // #DD153B
 $info:      $ima-brand-teal-accessible; // #007BB4
 $light:     $ima-brand-gray-light;     // #F2F3F5
-$dark:      $ima-brand-primary;        // #040C53
+$dark:      $ima-brand-primary;        // #00066F
 ```
 
 This means `.btn-primary`, `.bg-primary`, `.text-primary` etc. all use IMA brand colors automatically.
@@ -266,8 +275,9 @@ High-contrast teal alternative: `$ima-brand-teal-accessible` (#007BB4)
 ## Design Notes
 
 1. **No drop shadows** on cards (per brand feedback)
-2. **Uppercase buttons** standard (text-transform: uppercase)
-3. **Form radius: 15px**, button radius: 10px-20px (20px for digital/lg)
-4. **Form labels**: Open Sans 14px gray (not Lato)
+2. **Uppercase buttons** standard (text-transform: uppercase, 0.04em letter-spacing)
+3. **Button radius: 15px unified** (all sizes, Digital Content Guide 2026)
+4. **Form radius: 15px**, form labels: Open Sans 14px gray (not Lato)
 5. **Page headers**: uppercase
 6. **Font-weight fixes** included for Chrome/Brave consistency
+7. **4 button variants**: teal, dark, inverse-teal, inverse-dark (hover inverts fill/outline)

package/plugins/ima-claude/skills/ima-brand/SKILL.md

@@ -14,12 +14,6 @@ description: >-
 
 Brand Book v4.0 (September 2025) — Independent Medical Alliance.
 
-## Core Principle
-
-**Brand consistency builds trust in healthcare communication.**
-
-Every piece of content, every design decision, every communication should reinforce IMA's position as a trustworthy, patient-centric medical alliance.
-
 ## Decision Tree
 
 ```
@@ -48,7 +42,7 @@ What type of brand question?
     → Use ima-bootstrap skill instead
 ```
 
-## Quick Reference: Color Palette
+## Color Palette
 
 | Name | Hex | Usage |
 |------|-----|-------|
@@ -61,20 +55,21 @@ What type of brand question?
 | Plum Velvet | `#7B024D` | Accent, distinction |
 | Calm Stone | `#919396` | Secondary text, labels |
 | Clarity Wash | `#F2F3F5` | Backgrounds, cards |
-| Accessible Teal | `#007BB4` | High-contrast alternative |
+| Soft Mist | `#EDF3F4` | Light blue-gray backgrounds |
 | Brand Gradient | `150deg, #00066F → #00B8B8` | Hero sections, overlays |
 
-## Quick Reference: Typography
+## Typography
 
-| Element | Font | Weight | Size |
-|---------|------|--------|------|
-| Page headers | Lato | Bold/Black | 40px |
-| Section headers | Lato | Bold | 20px |
-| Body text | Proxima Nova / Open Sans | Regular | 16px |
-| Buttons | Lato | Bold | 18px, uppercase |
-| Form labels | Open Sans | Regular | 14px |
+| Element | Font | Weight | Size | Notes |
+|---------|------|--------|------|-------|
+| Page headers | Lato | Bold/Black | 40px | |
+| Section headers | Lato | Bold | 20px | |
+| Body text | Proxima Nova / Open Sans | Regular | 16px | |
+| Buttons (small) | Lato | Bold | 1em, uppercase | 0.04em letter-spacing, 15px radius |
+| Buttons (large) | Lato | Bold | 2em, uppercase | 0.04em letter-spacing, 15px radius |
+| Form labels | Open Sans | Regular | 14px | |
 
-## Quick Reference: Voice & Tone
+## Voice & Tone
 
 | Context | Tone | Example |
 |---------|------|---------|
@@ -90,19 +85,19 @@ What type of brand question?
 | BAD | GOOD | Why |
 |-----|------|-----|
 | "FLCCC" in new content | "IMA" or "Independent Medical Alliance" | Rebranded; FLCCC is legacy |
-| Stretching or recoloring the logo | Use approved lockup variants | Brand integrity |
+| Stretching or recoloring logo | Use approved lockup variants | Brand integrity |
 | Logo on busy/patterned backgrounds | White, light, dark, or gradient bg only | Readability |
-| Logo below 200px width | Minimum 200px, use IMA lettermark for small sizes | Legibility |
-| Jargon-heavy copy without explanation | Plain language with medical terms defined | Patient accessibility |
+| Logo below 200px width | Min 200px; use IMA lettermark for small sizes | Legibility |
+| Jargon-heavy copy | Plain language with medical terms defined | Patient accessibility |
 | Fear-based messaging | Solution-oriented, empowering language | Brand persona |
-| Missing medical disclaimer on health content | Include standard disclaimer | Legal compliance |
+| Missing medical disclaimer | Include standard disclaimer on health content | Legal compliance |
 | Inconsistent tone across channels | Match tone to context (see Voice table) | Brand consistency |
-| Using non-brand colors for key elements | Brand palette only for primary UI | Visual consistency |
+| Non-brand colors for key elements | Brand palette only for primary UI | Visual consistency |
 
 ## Cross-References
 
 - **CSS/SCSS implementation** (variables, mixins, components): `ima-bootstrap` skill
-- **SCSS source files**: `~/IMA/dev/ima-brand/sass/` (ima-brand plugin repo)
+- **SCSS source files**: `~/IMA/dev/ima-brand/sass/`
 - **Brand identity deep dive**: [references/brand-identity.md](references/brand-identity.md)
 - **Visual system details**: [references/visual-system.md](references/visual-system.md)
 - **Digital & legal standards**: [references/digital-standards.md](references/digital-standards.md)