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

• Repo path: /Users/justinking/Vaults/Projects/b2bea-org-design-system
• Pattern reference: /Users/justinking/Vaults/Projects/dreamborn-design-system
• Human brief: design.md
• Canonical CSS: b2bea.css
• Machine-readable files: design-system.json, b2bea.design.json

Official B2BEA logo files are included in the design-system repo under logos/.

Cloudflare storage:

• Account: Brett Sinclair DNS
• Account ID: 3333630b9c90c49aef56730d9513c19f
• R2 bucket: b2bea-guest-packs
• Namespace: design-system/logos
• Rule: always use Brett's Cloudflare account for B2BEA.org assets.

• 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

| ID | Topic | Decision | |---|---|---| | DS-DEC-001 | Design authority | Lovable-system is the V1 visual authority for all non-excluded pages. | | 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. | | 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. | | 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 Lovable 2.5rem field/control height, 0.875rem text, 0.75rem radius, and blue focus ring. |

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.

Intentional exceptions:

• Home page.
• Blog pages where intentionally editorial.
• Resource pages where intentionally custom.
• Custom HTML imports approved by the publishing model.

Exceptions still must satisfy accessibility, metadata, responsive, and production QA rules.

| Token | Value | Usage | |---|---|---| | primary | hsl(226 100% 21%) / #00196C | Headers, primary buttons, active pills, focus ring. | | primary_dark | #001458 | Primary hover states. | | accent | hsl(6 80% 59%) / #EB5444 | Accent buttons, badges, highlights. | | accent_dark | #d94333 | Accent hover states. | | background | hsl(0 0% 100%) | Page background. | | card | hsl(0 0% 100%) | Cards and panels. | | secondary_muted | hsl(0 0% 96%) | Muted sections and outline hover. | | border_input | hsl(220 13% 88%) | Borders, inputs, table dividers. | | muted_foreground | hsl(226 30% 45%) | Subtitles, metadata, secondary navigation. |

| Token | Value | |---|---| | font_display | Open Sans, system-ui, sans-serif | | font_body | Open Sans, system-ui, sans-serif | | body | 16px base, normal letter spacing, line-height 1.6 to 1.75 depending context. | | ui_text | 0.875rem / 14px, weight 600-700 for controls. | | metadata | 0.75rem / 12px, weight 700 for pills/badges. |

| Token | Value | |---|---| | radius | 0.75rem / 12px | | radius_sm | calc(radius - 4px) / 8px | | pill_radius | 999px | | shadow_sm | 0 1px 3px rgba(0, 25, 108, 0.06) | | shadow_md | 0 8px 30px -8px rgba(0, 25, 108, 0.10) | | container | min(100%, 1400px), 2rem side padding |

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

| Pattern | Layout | |---|---| | Standard index/list page | Blue page hero, optional toolbar with search/filter, constrained content grid/table, consistent empty/error states. | | Detail page | Hero or header card, metadata/badges, main content plus optional sidebar, related items/action panel. | | Admin/portal workspace | Compact header, tabs or sidebar navigation, dense tables/forms, clear status pills, no marketing-scale type. | | Form workflow | Single clear title, fields in consistent grid, inline validation, primary action plus secondary cancel/back, success/error state. |

| Use | Size | |---|---| | Standard page title | clamp(2.25rem, 4vw, 3.75rem) | | Article page title | clamp(2.75rem, 6vw, 5rem) | | Full marketing hero title | clamp(3rem, 7vw, 6rem), exception only | | Subtitle | 1.125rem standard / 1.25rem editorial or marketing hero | | Controls | 0.875rem text, 2.5rem min-height | | Pills/badges | 0.75rem text, 2rem min-height | | Card padding | 1.25rem default, denser variants allowed for admin tables |