BB CTA 01
Hero Primary Pair / Bright Page Surface
Homepage-approved bright pair. Secondary hover stays material/bright; it must not flip to black.
CTA Lab / Approved Homepage Catalog
One button language.
Canonical CTA treatments copied from the approved homepage, Navbar Lab, Mobile Menu Lab, and Footer Lab source paths. Use the BB CTA number, catalog name, viewport badge, and source badge when referencing a button in future threads.
DM Sans
Pill radius
Arrow lift
CSS sheen
All Viewports / Page Content
Hero and page buttons.
Use these for hero actions, service intros, contact bridges, and compact conversion rows across desktop, tablet, and mobile.
BB CTA 02
Hero Primary Pair / Dark Page Surface
Dark-surface catalog translation with the same sizing, sheen, arrow lift, and no black hover state.
BB CTA 03
Hero Primary Single / Bright Page Surface
42px minimum height, 18px side padding, soft material fill, specular sheen, 3px arrow travel.
BB CTA 04
Hero Primary Single / Dark Page Surface
Same button contract on dark surfaces, with the glow justified by the surface contrast.
All Viewports / Editorial Links
Text and transition CTAs.
Use these where the homepage relies on type, rhythm, and arrow motion instead of another filled button. The sample bay makes subtle text-only CTAs visible on purpose.
BB CTA 05
Inline Text Arrow / Bright Content Surface
13px bold inline link with generated northeast arrow and 2px hover travel.
BB CTA 06
Inline Text Arrow / Dark Content Surface
13px bold inline link with generated northeast arrow and 2px hover travel.
BB CTA 07
Editorial Work Link / Bright Content Surface
Italic editorial link used for page transitions and work-led CTAs. Preserve the reveal and arrow behavior.
BB CTA 08
Editorial Work Link / Dark Content Surface
Original homepage dark-surface editorial treatment with reveal and 3px arrow travel.
Desktop / Mobile / Footer Systems
Global component CTAs.
These are organized by viewport and source ownership. Desktop header CTAs belong to Navbar Lab, mobile panel CTAs belong to Mobile Menu Lab, and footer CTAs belong to Footer Lab.
BB CTA 09
Header Portal + Start Project / Desktop Bright
Bright-surface interpretation of the header portal and primary CTA for future light nav contexts.
BB CTA 10
Header Portal + Glow Pill / Desktop Dark
Desktop/tablet header source treatment with white back-glow shadow; this glow justifies the larger primary pill.
BB CTA 11
Mobile Menu Start Project / Bright Panel
54px mobile primary action translated for bright mobile surfaces.
BB CTA 12
Mobile Menu Start Project / Dark Panel
54px mobile primary action. Source remains /mobile-menu-lab/ and the approved mobile panel contract.
BB CTA 13
Footer Action Pair / Bright Page Surface
Bright catalog translation of the Footer Lab action pair. Footer source remains Footer Lab.
BB CTA 14
Footer Action Pair / Dark Footer
Footer CTA pair with shared sheen and mobile full-width behavior. Source remains Footer Lab.
BB CTA 15
Footer Client Login Status Pill / Bright Footer Surface
Bright catalog translation of the metallic footer login button with status dot, sheen sweep, and 3px arrow travel.
BB CTA 16
Footer Client Login Status Pill / Dark Footer
Dark footer source treatment of the metallic footer login button with status dot, sheen sweep, and 3px arrow travel.
