B2BEA.org V1 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: 4
• Status: draft
• Updated: 2026-05-07T13:29:22.717+00:00

``json { "rule": "Exceptions still must satisfy accessibility, metadata, responsive, and production QA rules.", "in_scope": [ "public non-home pages", "admin dashboard/pages", "member profile/dashboard", "vendor portal", "company workspace", "auth/account pages", "academy/course pages", "jobs/events/survey/forms surfaces" ], "exceptions": [ "home page", "blog pages where intentionally editorial", "resource pages where intentionally custom", "custom HTML imports approved by publishing model" ] } ``

Added separate local B2BEA design-system checkout and GitHub repo reference.

• Every in-scope page has one recognizable B2BEA design-system page/header pattern.
• All in-scope fields/search/selects/textareas use the B2BEA design-system field contract.
• All in-scope pills/badges use B2BEA design-system active/inactive states.
• No standard page title exceeds the standard page title scale unless marked as article/marketing exception.
• Admin/portal pages use compact operational typography and do not use large marketing heroes.
• Cards do not nest inside decorative cards; panels use consistent borders/radius/shadows.
• Mobile text fits without overlap and controls keep stable dimensions.
• A visual QA pass covers desktop and mobile for each page family before launch.

• surface-specs
• sanity-schema-spec
• custom-html-import-spec
• qa-release-readiness-spec

• Which blog/resource page families are intentional exceptions versus should be normalized?
• Should admin and portal surfaces share the same component package or use denser variants?
• Do we keep Material Symbols or move to a React icon library during rebuild?
• What screenshot baseline set represents every page family?

```json { "colors": [ { "name": "primary", "usage": "headers, primary buttons, active pills, focus ring", "value": "hsl(226 100% 21%) / #00196C" }, { "name": "primary_dark", "usage": "primary hover states", "value": "#001458" }, { "name": "accent", "usage": "accent buttons, badges, highlights", "value": "hsl(6 80% 59%) / #EB5444" }, { "name": "accent_dark", "usage": "accent hover states", "value": "#d94333" }, { "name": "background", "usage": "page background", "value": "hsl(0 0% 100%)" }, { "name": "card", "usage": "cards and panels", "value": "hsl(0 0% 100%)" }, { "name": "secondary_muted", "usage": "muted sections and outline hover", "value": "hsl(0 0% 96%)" }, { "name": "border_input", "usage": "borders, inputs, table dividers", "value": "hsl(220 13% 88%)" }, { "name": "muted_foreground", "usage": "subtitles, metadata, secondary navigation", "value": "hsl(226 30% 45%)" } ], "typography": [ { "token": "font_display", "value": "

| id | topic | decision | | --- | --- | --- | | DS-DEC-001 | Design authority | Lovable is the foundation/reference seed for the V1 design system; the final authority is the hardened B2BEA design system defined by this artifact and follow-on component/page specs. | | DS-DEC-002 | Intentional exceptions | Home page, blog, and resource pages may remain custom where explicitly approved; all other surfaces must converge on the hardened B2BEA design-system rules derived from, but not limited to, the Lovable foundation. | | DS-DEC-003 | Typography | Use the B2BEA design-system typography contract defined here for display and body. Lovable/Open Sans is a starting reference, not an irreversible final font decision; remove legacy Hanken Grotesk dependency from target page families unless explicitly retained for an exception. | | 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. | | DS-DEC-005 | Forms/search/filters | All fields, selects, search inputs, filters, and pills use the B2BEA design-system c

| contract | component | | --- | --- | | Blue header block for standard pages; centered content; title clamp(2.25rem,4vw,3.75rem); subtitle 1.125rem; max inner width 64rem. | Page hero | | White/background hero; breadcrumb 0.875rem; title clamp(2.75rem,6vw,5rem); excerpt 1.25rem; media aspect 1200/630. | Article/editorial hero | | 1px border, 12px radius, white background, small blue-tinted shadow; hover may lift -2px only for clickable cards. | Cards | | 2.5rem min height, 1px input border, 12px radius, white background, 0.5rem 0.75rem padding, 14px text, blue 3px focus ring. | Fields | | Same field contract; icon left at 0.875rem; input left padding 2.25rem; page toolbar search max width 42rem. | Search bars | | 2.5rem min height, 12px radius, 14px Open Sans, 700 weight; primary blue, accent coral, outline white with border. | Buttons | | 2rem min height, 999px radius, 12px text, 700 weight; active pills use primary blue; badges use accent tint. | Pills and badges | | Use card/panel container, 1px borders/dividers, 14px cells, muted metadata, sticky or clear table headers where long. | Tables | | Empty/loading/error/success states use card/panel treatment, concise heading, useful

``json { "count": 10, "cloudflare": { "rule": "Always use Brett's Cloudflare account for B2BEA.org assets.", "namespace": "design-system/logos", "r2_bucket": "b2bea-guest-packs", "account_id": "3333630b9c90c49aef56730d9513c19f", "account_name": "Brett Sinclair DNS" }, "source_zips": [ "/Users/justinking/Downloads/Default-20260506T201500Z-3-001.zip", "/Users/justinking/Downloads/Horizontal-20260506T201458Z-3-001.zip" ], "local_repo_path": "/Users/justinking/Vaults/Projects/b2bea-org-design-system/logos" } ``

``json { "b2bea_site_repo": "/Users/justinking/Vaults/Projects/B2BEA-org-new", "design_system_repo": "C:/Users/jstnk/Downloads/cc/projects/b2bea/b2bea-org-design-system" } ``

• src/assets/css/lovable-system.css
• src/assets/css/style.css
• src/assets/css/portal.css
• src/assets/css/admin.css
• src/assets/css/search.css
• src/_includes/layouts/base.njk
• src/_includes/partials/nav.njk