design-system-spec · supabase_json
B2BEA.org V1 Design System Spec
design-system-spec artifact · for B2BEA.org Rebuild · status approved
components
| 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 action, no unstyled browser defaults. | States |
| Two-bar restored header remains; B2BEA design-system nav/button/dropdown styling governs future header work, using Lovable as the initial baseline unless intentionally revised. | Navigation |
open questions
- 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?
Agent Handoff
Start Here
design-system-spec artifact · for B2BEA.org Rebuild · status approved
Completion Evidence
- 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.
Components
- item: contract: string, component: string
- item: contract: string, component: string
- item: contract: string, component: string
- item: contract: string, component: string
- item: contract: string, component: string
- item: contract: string, component: string
- item: contract: string, component: string
- item: contract: string, component: string
- item: contract: string, component: string
- item: contract: string, component: string
Open Questions
- 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?
Structured Payload
Machine-readable source fields
scope
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
title
B2BEA.org V1 Design System Spec
tokens
colors
| name | usage | value |
|---|---|---|
| primary | headers, primary buttons, active pills, focus ring | hsl(226 100% 21%) / #00196C |
| primary_dark | primary hover states | #001458 |
| accent | accent buttons, badges, highlights | hsl(6 80% 59%) / #EB5444 |
| accent_dark | accent hover states | #d94333 |
| background | page background | hsl(0 0% 100%) |
| card | cards and panels | hsl(0 0% 100%) |
| secondary_muted | muted sections and outline hover | hsl(0 0% 96%) |
| border_input | borders, inputs, table dividers | hsl(220 13% 88%) |
| muted_foreground | subtitles, metadata, secondary navigation | hsl(226 30% 45%) |
typography
| 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-1.75 depending context |
| ui_text | 0.875rem / 14px, weight 600-700 for controls |
| metadata | 0.75rem / 12px, weight 700 for pills/badges |
radius shadow spacing
| 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 |
version
1
decisions
| 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 control contract; the Lovable 2.5rem field/control height, 0.875rem text, 0.75rem radius, and blue focus ring are baseline values to retain or deliberately revise in the final token/component pass. |
components
| 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 action, no unstyled browser defaults. | States |
| Two-bar restored header remains; B2BEA design-system nav/button/dropdown styling governs future header work, using Lovable as the initial baseline unless intentionally revised. | Navigation |
project id
a820dd0c-6cef-4133-bfbd-d802fd806e44
updated at
2026-05-07T13:29:22.717Z
logo assets
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
source repo
b2bea site repo
/Users/justinking/Vaults/Projects/B2BEA-org-new
design system repo
C:/Users/jstnk/Downloads/cc/projects/b2bea/b2bea-org-design-system
source files
- 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
artifact type
design-system-spec
page patterns
| layout | pattern |
|---|---|
| - blue page hero - optional toolbar with search/filter - constrained content grid/table - consistent empty/error states | Standard index/list page |
| - hero or header card - metadata/badges - main content plus optional sidebar - related items/action panel | Detail page |
| - compact header - tabs or sidebar navigation - dense tables/forms - clear status pills - no marketing-scale type | Admin/portal workspace |
| - single clear title - fields in consistent grid - inline validation - primary action plus secondary cancel/back - success/error state | Form workflow |
revision note
Added separate local B2BEA design-system checkout and GitHub repo reference.
next artifacts
- surface-specs
- sanity-schema-spec
- custom-html-import-spec
- qa-release-readiness-spec
open questions
- 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?
standard sizes
controls
0.875rem text, 2.5rem min-height
subtitle
1.125rem standard / 1.25rem editorial or marketing hero
card padding
1.25rem default, denser variants allowed for admin tables
pills badges
0.75rem text, 2rem min-height
article page title
clamp(2.75rem, 6vw, 5rem)
standard page title
clamp(2.25rem, 4vw, 3.75rem)
full marketing hero title
clamp(3rem, 7vw, 6rem), exception only
drift to remove
- Legacy Hanken Grotesk heading dependency on target pages.
- Negative letter spacing in standard headings and controls.
- Oversized H1s outside approved article/marketing hero contexts.
- Mixed field radii of 4px, 6px, 8px, 10px, 14px on target pages.
- Search/filter controls with dark modal styling outside intentional search overlay.
- Page-specific card/button styles that duplicate B2BEA design-system component contracts.
- Marketing/landing page scale in admin, portal, profile, and operational surfaces.
design system repo
note
Separate checkout created on 2026-05-07. This is the B2BEA design-system source; Lovable remains only the original foundation/reference.
repo url
https://github.com/b2bea-org/b2bea-org-design-system.git
human brief
design.md
current head
d83614a
source files
- b2bea.css
- b2bea.design.json
- design-system.json
- design.md
- examples/standard-page.html
- recipes/standard-public-page.md
- designer-review/design-board.html
- designer-review/component-state-matrix.md
- designer-review/page-family-checklist.md
- checks/audit-b2bea.js
- logos/
canonical css
b2bea.css
repo local path
/Users/justinking/Vaults/Projects/b2bea-org-design-system
pattern reference
/Users/justinking/Vaults/Projects/dreamborn-design-system
machine readable files
- design-system.json
- b2bea.design.json
local repo path windows
C:/Users/jstnk/Downloads/cc/projects/b2bea/b2bea-org-design-system
local repo path mac legacy
/Users/justinking/Vaults/Projects/b2bea-org-design-system
acceptance criteria
- 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.
implementation notes
- Target CSS should collapse compatibility selectors into reusable component classes during rebuild.
- B2BEA design-system tokens should be the design-token source before page-specific CSS is authored; Lovable tokens are only the initial foundation/reference.
- Legacy CSS can remain temporarily but must not define new target behavior.
- Custom HTML imports can be visually custom but still must consume page metadata, analytics, and accessibility rules.