{
  "id": "2026-05-06-b2bea-org-design-system-spec-4b1527b220",
  "scope": "redkey",
  "source_of_truth": "repo",
  "source_path": "docs/specs/2026-05-06-b2bea-org-design-system-spec.md",
  "source_kind": "markdown",
  "visibility": "internal",
  "renderer_id": "design_doc.dreamborn-forge.generated.v1",
  "design_system": "dreamborn-design-system:forge",
  "generated_at": "2026-05-09T13:00:55.710Z",
  "artifact_type": "design_doc",
  "schema_version": "design_doc.generated.v1",
  "title": "B2BEA.org V1 Lovable Design System Spec",
  "summary": "B2BEA.org V1 Lovable Design System Spec Source of record: RedKey Supabase Studio artifact. Project: B2BEA.org Rebuild Project ID: a820dd0c 6cef 4133 bfbd d802fd806e44 Artifact: design system spec Artifact ID: 4c3651ac 9a69 4117 a355 750b61f540c9 Version: 2 Status: draft Updated: 2026 05 06T20:23:15.537+00:00 Design System Repo Repo path: /Users/justinking/Va...",
  "format_source": "markdown",
  "sections": [
    {
      "title": "B2BEA.org V1 Lovable Design System Spec",
      "level": 1,
      "body": "Source of record: RedKey Supabase Studio artifact.\n\n- Project: `B2BEA.org Rebuild`\n- Project ID: `a820dd0c-6cef-4133-bfbd-d802fd806e44`\n- Artifact: `design-system-spec`\n- Artifact ID: `4c3651ac-9a69-4117-a355-750b61f540c9`\n- Version: `2`\n- Status: `draft`\n- Updated: `2026-05-06T20:23:15.537+00:00`"
    },
    {
      "title": "Design System Repo",
      "level": 2,
      "body": "- Repo path: `/Users/justinking/Vaults/Projects/b2bea-org-design-system`\n- Pattern reference: `/Users/justinking/Vaults/Projects/dreamborn-design-system`\n- Human brief: `design.md`\n- Canonical CSS: `b2bea.css`\n- Machine-readable files: `design-system.json`, `b2bea.design.json`"
    },
    {
      "title": "Logo Assets",
      "level": 2,
      "body": "Official B2BEA logo files are included in the design-system repo under `logos/`.\n\nCloudflare storage:\n\n- Account: `Brett Sinclair DNS`\n- Account ID: `3333630b9c90c49aef56730d9513c19f`\n- R2 bucket: `b2bea-guest-packs`\n- Namespace: `design-system/logos`\n- Rule: always use Brett's Cloudflare account for B2BEA.org assets."
    },
    {
      "title": "Source Files Reviewed",
      "level": 2,
      "body": "- `src/assets/css/lovable-system.css`\n- `src/assets/css/style.css`\n- `src/assets/css/portal.css`\n- `src/assets/css/admin.css`\n- `src/assets/css/search.css`\n- `src/_includes/layouts/base.njk`\n- `src/_includes/partials/nav.njk`"
    },
    {
      "title": "Decisions",
      "level": 2,
      "body": "| ID | Topic | Decision |\n|---|---|---|\n| `DS-DEC-001` | Design authority | Lovable-system is the V1 visual authority for all non-excluded pages. |\n| `DS-DEC-002` | Intentional exceptions | Home page, blog, and resource pages may remain custom where explicitly approved; all other surfaces must converge on Lovable design-system rules. |\n| `DS-DEC-003` | Typography | Use Open Sans for display and body in the Lovable system. Remove legacy Hanken Grotesk dependency from target page families unless explicitly retained for an exception. |\n| `DS-DEC-004` | Page title scale | Standard page hero titles use `clamp(2.25rem, 4vw, 3.75rem)`. Article/editorial hero titles may use `clamp(2.75rem, 6vw, 5rem)`. Full marketing hero titles may use `clamp(3rem, 7vw, 6rem)` only on approved hero pages. |\n| `DS-DEC-005` | Forms/search/filters | All fields, selects, search inputs, filters, and pills use Lovable `2.5rem` field/control height, `0.875rem` text, `0.75rem` radius, and blue focus ring. |"
    },
    {
      "title": "Scope",
      "level": 2,
      "body": "In scope:\n\n- Public non-home pages.\n- Admin dashboard/pages.\n- Member profile/dashboard.\n- Vendor portal.\n- Company workspace.\n- Auth/account pages.\n- Academy/course pages.\n- Jobs/events/survey/forms surfaces.\n\nIntentional exceptions:\n\n- Home page.\n- Blog pages where intentionally editorial.\n- Resource pages where intentionally custom.\n- Custom HTML imports approved by the publishing model.\n\nExceptions still must satisfy accessibility, metadata, responsive, and production QA rules."
    },
    {
      "title": "Color",
      "level": 3,
      "body": "| Token | Value | Usage |\n|---|---|---|\n| `primary` | `hsl(226 100% 21%)` / `#00196C` | Headers, primary buttons, active pills, focus ring. |\n| `primary_dark` | `#001458` | Primary hover states. |\n| `accent` | `hsl(6 80% 59%)` / `#EB5444` | Accent buttons, badges, highlights. |\n| `accent_dark` | `#d94333` | Accent hover states. |\n| `background` | `hsl(0 0% 100%)` | Page background. |\n| `card` | `hsl(0 0% 100%)` | Cards and panels. |\n| `secondary_muted` | `hsl(0 0% 96%)` | Muted sections and outline hover. |\n| `border_input` | `hsl(220 13% 88%)` | Borders, inputs, table dividers. |\n| `muted_foreground` | `hsl(226 30% 45%)` | Subtitles, metadata, secondary navigation. |"
    },
    {
      "title": "Typography",
      "level": 3,
      "body": "| Token | Value |\n|---|---|\n| `font_display` | `Open Sans, system-ui, sans-serif` |\n| `font_body` | `Open Sans, system-ui, sans-serif` |\n| `body` | `16px` base, normal letter spacing, line-height `1.6` to `1.75` depending context. |\n| `ui_text` | `0.875rem` / `14px`, weight `600-700` for controls. |\n| `metadata` | `0.75rem` / `12px`, weight `700` for pills/badges. |"
    },
    {
      "title": "Radius, Shadow, Layout",
      "level": 3,
      "body": "| Token | Value |\n|---|---|\n| `radius` | `0.75rem` / `12px` |\n| `radius_sm` | `calc(radius - 4px)` / `8px` |\n| `pill_radius` | `999px` |\n| `shadow_sm` | `0 1px 3px rgba(0, 25, 108, 0.06)` |\n| `shadow_md` | `0 8px 30px -8px rgba(0, 25, 108, 0.10)` |\n| `container` | `min(100%, 1400px)`, `2rem` side padding |"
    },
    {
      "title": "Component Contracts",
      "level": 2,
      "body": "| Component | Contract |\n|---|---|\n| Page hero | Blue header block for standard pages; centered content; title `clamp(2.25rem, 4vw, 3.75rem)`; subtitle `1.125rem`; max inner width `64rem`. |\n| Article/editorial hero | White/background hero; breadcrumb `0.875rem`; title `clamp(2.75rem, 6vw, 5rem)`; excerpt `1.25rem`; media aspect `1200 / 630`. |\n| Cards | `1px` border, `12px` radius, white background, small blue-tinted shadow; hover may lift `-2px` only for clickable cards. |\n| Fields | `2.5rem` min height, `1px` input border, `12px` radius, white background, `0.5rem 0.75rem` padding, `14px` text, blue `3px` focus ring. |\n| Search bars | Same field contract; icon left at `0.875rem`; input left padding `2.25rem`; page toolbar search max width `42rem`. |\n| Buttons | `2.5rem` min height, `12px` radius, `14px` Open Sans, `700` weight; primary blue, accent coral, outline white with border. |\n| Pills and badges | `2rem` min height, `999px` radius, `12px` text, `700` weight; active pills use primary blue; badges use accent tint. |\n| Tables | Use card/panel container, `1px` borders/dividers, `14px` cells, muted metadata, sticky or clear table headers where long. |\n| States | Empty/loading/error/success states use card/panel treatment, concise heading, useful action, no unstyled browser defaults. |\n| Navigation | Two-bar restored header remains; Lovable nav/button/dropdown styling governs future header work unless intentionally revised. |"
    },
    {
      "title": "Page Patterns",
      "level": 2,
      "body": "| Pattern | Layout |\n|---|---|\n| Standard index/list page | Blue page hero, optional toolbar with search/filter, constrained content grid/table, consistent empty/error states. |\n| Detail page | Hero or header card, metadata/badges, main content plus optional sidebar, related items/action panel. |\n| Admin/portal workspace | Compact header, tabs or sidebar navigation, dense tables/forms, clear status pills, no marketing-scale type. |\n| Form workflow | Single clear title, fields in consistent grid, inline validation, primary action plus secondary cancel/back, success/error state. |"
    },
    {
      "title": "Standard Sizes",
      "level": 2,
      "body": "| Use | Size |\n|---|---|\n| Standard page title | `clamp(2.25rem, 4vw, 3.75rem)` |\n| Article page title | `clamp(2.75rem, 6vw, 5rem)` |\n| Full marketing hero title | `clamp(3rem, 7vw, 6rem)`, exception only |\n| Subtitle | `1.125rem` standard / `1.25rem` editorial or marketing hero |\n| Controls | `0.875rem` text, `2.5rem` min-height |\n| Pills/badges | `0.75rem` text, `2rem` min-height |\n| Card padding | `1.25rem` default, denser variants allowed for admin tables |"
    },
    {
      "title": "Drift To Remove",
      "level": 2,
      "body": "- Legacy Hanken Grotesk heading dependency on target pages.\n- Negative letter spacing in standard headings and controls.\n- Oversized H1s outside approved article/marketing hero contexts.\n- Mixed field radii of `4px`, `6px`, `8px`, `10px`, and `14px` on target pages.\n- Search/filter controls with dark modal styling outside intentional search overlay.\n- Page-specific card/button styles that duplicate Lovable component contracts.\n- Marketing/landing page scale in admin, portal, profile, and operational surfaces."
    },
    {
      "title": "Acceptance Criteria",
      "level": 2,
      "body": "- Every in-scope page has one recognizable Lovable page/header pattern.\n- All in-scope fields/search/selects/textareas use the Lovable field contract.\n- All in-scope pills/badges use active/inactive Lovable pill states.\n- No standard page title exceeds the standard page title scale unless marked as article/marketing exception.\n- Admin/portal pages use compact operational typography and do not use large marketing heroes.\n- Cards do not nest inside decorative cards; panels use consistent borders/radius/shadows.\n- Mobile text fits without overlap and controls keep stable dimensions.\n- A visual QA pass covers desktop and mobile for each page family before launch."
    },
    {
      "title": "Implementation Notes",
      "level": 2,
      "body": "- Target CSS should collapse compatibility selectors into reusable component classes during rebuild.\n- Lovable tokens should be the design-token source before page-specific CSS is authored.\n- Legacy CSS can remain temporarily but must not define new target behavior.\n- Custom HTML imports can be visually custom but still must consume page metadata, analytics, and accessibility rules."
    },
    {
      "title": "Open Questions",
      "level": 2,
      "body": "- Which blog/resource page families are intentional exceptions versus should be normalized?\n- Should admin and portal surfaces share the same component package or use denser variants?\n- Do we keep Material Symbols or move to a React icon library during rebuild?\n- What screenshot baseline set represents every page family?"
    },
    {
      "title": "Next Artifacts",
      "level": 2,
      "body": "- `surface-specs`\n- `sanity-schema-spec`\n- `custom-html-import-spec`\n- `qa-release-readiness-spec`"
    }
  ],
  "html_path": "artifacts/2026-05-06-b2bea-org-design-system-spec-4b1527b220.html",
  "json_path": "artifacts/2026-05-06-b2bea-org-design-system-spec-4b1527b220.json"
}