keystone-design-bootstrap 1.0.58 → 1.0.60

package/dist/utils/markdown-toc.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Utility functions for extracting table of contents from markdown
+ */
+interface TableOfContentsItem {
+    id: string;
+    title: string;
+    level: number;
+}
+/**
+ * Extract headings from markdown content and generate table of contents
+ */
+declare function extractTableOfContents(markdown: string): TableOfContentsItem[];
+
+export { type TableOfContentsItem, extractTableOfContents };

package/dist/utils/phone-helpers.d.ts

@@ -0,0 +1,24 @@
+/**
+ * List of countries with their respective country code, flag, phone code, and phone mask.
+ */
+declare const countries: ({
+    name: string;
+    code: string;
+    flag: string;
+    phoneCode: string;
+    phoneMask: string;
+} | {
+    name: string;
+    code: string;
+    flag: string;
+    phoneCode: string;
+    phoneMask?: undefined;
+})[];
+
+type Country = (typeof countries)[0];
+/** Get national-format mask from country by stripping the country code prefix (e.g. "+1 (###) ###-####" → "(###) ###-####"). */
+declare function getNationalMask(country: Country | undefined): string;
+/** Format a raw digit string into a mask pattern where '#' represents one digit. No trailing literals so backspace works naturally. */
+declare function formatDigitsToMask(digits: string, mask: string): string;
+
+export { formatDigitsToMask, getNationalMask };

package/dist/utils/photo-helpers.d.ts

@@ -0,0 +1,38 @@
+import { P as PhotoAttachment } from '../photos-CmBdWiuZ.js';
+import { W as WebsitePhotos } from '../website-photos-Cl1YqAno.js';
+
+/**
+ * Helper functions for extracting photo URLs from photo associations
+ */
+
+/**
+ * True if the URL looks like a video by path extension. Used to avoid using video URLs in img src.
+ */
+declare function isVideoUrl(url: string | null | undefined): boolean;
+/**
+ * Get the best available photo URL from a photos array
+ * Priority: featured photo > first photo > fallback
+ */
+declare function getPhotoUrl(photos?: PhotoAttachment[]): string | null;
+/**
+ * Get avatar URL for team members or authors.
+ * Returns a URL only when there is a real photo in attachments; otherwise null.
+ * Callers should use PhotoWithFallback (gradient fallback) or Avatar with initials when null.
+ */
+/** Optional fallbackId/name reserved for future use (e.g. deterministic fallback). */
+declare function getAvatarUrl(photos?: PhotoAttachment[], _fallbackId?: number | string, _name?: string): string | null;
+/**
+ * Get featured image URL for blog posts
+ */
+declare function getFeaturedImageUrl(photos?: PhotoAttachment[]): string | null;
+/**
+ * Get logo URL from website_photos API (which aggregates from account_photos)
+ *
+ * The website_photos API endpoint returns logos from account_photos with photo_type: 'logo',
+ * with industry fallback. This is the primary and only source for logos.
+ *
+ * Returns undefined if no logo is available (for PhotoWithFallback gradient fallback)
+ */
+declare function getLogoUrl(websitePhotos?: WebsitePhotos | null): string | undefined;
+
+export { PhotoAttachment, getAvatarUrl, getFeaturedImageUrl, getLogoUrl, getPhotoUrl, isVideoUrl };

package/dist/website-photos-Cl1YqAno.d.ts

@@ -0,0 +1,21 @@
+interface WebsitePhoto {
+    id: number;
+    url: string;
+    thumbnail_url?: string;
+    medium_url?: string;
+    alt: string;
+    source: 'account' | 'industry';
+}
+interface WebsitePhotos {
+    logo?: WebsitePhoto | null;
+    favicon?: WebsitePhoto | null;
+    hero?: WebsitePhoto | null;
+    contact?: WebsitePhoto | null;
+    about?: WebsitePhoto | null;
+    careers?: WebsitePhoto | null;
+    preview_image?: WebsitePhoto | null;
+    stock_photos?: WebsitePhoto[];
+}
+type WebsitePhotosResponse = WebsitePhotos;
+
+export type { WebsitePhotos as W, WebsitePhoto as a, WebsitePhotosResponse as b };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.58",
+  "version": "1.0.60",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/design_system/portal/LoginForm.tsx

@@ -13,7 +13,7 @@ interface LoginFormProps {
 }
 
 const inputClass =
-  'block w-full rounded border border-gray-300 bg-primary px-3 py-2.5 text-sm text-primary placeholder-gray-400 focus:border-gray-700 focus:outline-none focus:ring-1 focus:ring-gray-700 transition-colors';
+  'block w-full rounded-input border border-primary bg-primary px-3 py-2.5 text-sm text-primary placeholder-quaternary focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand transition-colors';
 const labelClass = 'block text-sm text-secondary mb-1';
 
 function isValidEmail(value: string): boolean {
@@ -185,7 +185,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
       </div>
 
       {error && (
-        <div className="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+        <div className="mb-4 rounded-input border border-error bg-error-primary px-3 py-2 text-sm text-error-primary">
           {error}
         </div>
       )}
@@ -206,17 +206,17 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             />
           </div>
           <div className="flex items-center gap-3">
-            <hr className="flex-1 border-gray-200" />
-            <span className="text-xs text-gray-400">or</span>
-            <hr className="flex-1 border-gray-200" />
+            <hr className="flex-1 border-secondary" />
+            <span className="text-xs text-quaternary">or</span>
+            <hr className="flex-1 border-secondary" />
           </div>
           <div>
             <label className={labelClass}>Phone number</label>
-            <div className="flex rounded border border-gray-300 overflow-hidden focus-within:border-gray-700 focus-within:ring-1 focus-within:ring-gray-700 transition-colors">
+            <div className="flex rounded-input border border-primary overflow-hidden focus-within:border-brand focus-within:ring-1 focus-within:ring-brand transition-colors">
               <select
                 value={selectedCountry}
                 onChange={(e) => { setSelectedCountry(e.target.value); setPhoneValue(''); }}
-                className="border-r border-gray-200 bg-gray-50 px-2 py-2.5 text-sm text-gray-700 focus:outline-none"
+                className="border-r border-secondary bg-secondary px-2 py-2.5 text-sm text-secondary focus:outline-none"
                 aria-label="Country code"
               >
                 {countryOptions.map((opt) => (
@@ -228,7 +228,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
                 value={phoneValue}
                 onChange={handlePhoneChange}
                 placeholder={nationalPlaceholder}
-                className="flex-1 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 bg-transparent focus:outline-none"
+                className="flex-1 px-3 py-2.5 text-sm text-primary placeholder-quaternary bg-transparent focus:outline-none"
               />
             </div>
           </div>
@@ -236,7 +236,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             <button
               type="submit"
               disabled={loading}
-              className="w-full rounded border border-secondary bg-primary px-4 py-2.5 text-sm font-medium text-primary hover:bg-secondary transition-colors disabled:opacity-50"
+              className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
             >
               {loading ? 'Looking you up…' : 'Continue'}
             </button>
@@ -264,7 +264,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             <button
               type="submit"
               disabled={loading}
-              className="w-full rounded border border-secondary bg-primary px-4 py-2.5 text-sm font-medium text-primary hover:bg-secondary transition-colors disabled:opacity-50"
+              className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
             >
               {loading ? 'Signing in…' : 'Sign in'}
             </button>
@@ -339,7 +339,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             <button
               type="submit"
               disabled={loading}
-              className="w-full rounded border border-secondary bg-primary px-4 py-2.5 text-sm font-medium text-primary hover:bg-secondary transition-colors disabled:opacity-50"
+              className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
             >
               {loading ? 'Creating account…' : 'Create account'}
             </button>

package/src/design_system/portal/MessageComposer.tsx

@@ -67,12 +67,12 @@ export function MessageComposer({ contactId }: { contactId: number }) {
           placeholder="Type a message… (Enter to send)"
           rows={1}
           disabled={isPending}
-          className="flex-1 resize-none rounded-xl border border-gray-300 bg-primary px-3 py-2 text-sm text-primary placeholder-gray-400 focus:border-gray-700 focus:outline-none focus:ring-1 focus:ring-gray-700 transition-colors disabled:opacity-50"
+          className="flex-1 resize-none rounded-input border border-primary bg-primary px-3 py-2 text-sm text-primary placeholder-quaternary focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand transition-colors disabled:opacity-50"
         />
         <button
           type="submit"
           disabled={!body.trim() || isPending}
-          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gray-900 text-white transition-colors hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed"
+          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-interactive bg-brand-solid text-white transition-colors hover:bg-brand-solid_hover disabled:opacity-40 disabled:cursor-not-allowed"
           aria-label="Send message"
         >
           {isPending ? (

package/src/design_system/portal/PortalPage.tsx

@@ -6,6 +6,7 @@ import { LogoutButton } from './LogoutButton';
 import { LoginModalController } from './LoginModalController';
 import { MessageComposer } from './MessageComposer';
 import { RowThumbnail } from './RowThumbnail';
+import { PortalTabTracker } from './PortalTabTracker';
 import {
   CONSUMER_TOKEN_COOKIE,
   fetchConsumerMe,
@@ -164,7 +165,7 @@ function LoginWall({ message, cta = 'Sign in' }: { message: string; cta?: string
       <p className="text-sm font-medium text-primary">{message}</p>
       <button
         data-open-login-modal
-        className="mt-4 cursor-pointer rounded-lg bg-gray-900 px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-gray-700"
+        className="mt-4 cursor-pointer rounded-interactive bg-brand-solid px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand-solid_hover"
       >
         {cta}
       </button>
@@ -174,7 +175,7 @@ function LoginWall({ message, cta = 'Sign in' }: { message: string; cta?: string
 
 function EmptyState({ message }: { message: string }) {
   return (
-    <div className="rounded-xl border border-secondary bg-secondary py-16 text-center">
+    <div className="rounded-component border border-secondary bg-secondary py-16 text-center">
       <p className="text-sm text-tertiary">{message}</p>
     </div>
   );
@@ -213,7 +214,7 @@ function ServiceItemRow({
                   <Link
                     key={offer.id}
                     href={specialsHref}
-                    className="inline-flex items-center rounded-full bg-brand-50 border border-brand-200 px-2 py-0.5 text-xs font-medium text-brand-700 hover:bg-brand-100 transition-colors"
+                    className="inline-flex items-center rounded-badge bg-secondary border border-brand px-2 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors"
                   >
                     Special: {offer.name}
                   </Link>
@@ -222,7 +223,7 @@ function ServiceItemRow({
                     key={offer.id}
                     data-open-login-modal
                     data-login-redirect={specialsHref}
-                    className="inline-flex items-center rounded-full bg-brand-50 border border-brand-200 px-2 py-0.5 text-xs font-medium text-brand-700 hover:bg-brand-100 transition-colors cursor-pointer"
+                    className="inline-flex items-center rounded-badge bg-secondary border border-brand px-2 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors cursor-pointer"
                   >
                     Special: {offer.name}
                   </button>
@@ -264,38 +265,41 @@ function ServicesPanel({
   }
 
   return (
-    <div className="divide-y divide-tertiary rounded-xl border border-secondary bg-primary overflow-hidden">
-      {activeServices.map((service) => (
-        <details key={service.id} className="group">
-          <summary className="flex cursor-pointer list-none items-center justify-between px-5 py-4 hover:bg-secondary transition-colors">
-            <div>
-              <span className="font-medium text-primary">{service.name}</span>
-              {service.summary && (
-                <p className="mt-0.5 text-sm text-tertiary">{service.summary}</p>
-              )}
-            </div>
-            <div className="ml-4 flex items-center gap-2 shrink-0">
-              <span className="text-xs text-quaternary">{service.service_items?.length ?? 0} items</span>
-              <svg className="size-4 text-quaternary transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-              </svg>
-            </div>
-          </summary>
-          {service.service_items && service.service_items.length > 0 && (
-            <div className="border-t border-tertiary bg-secondary divide-y divide-tertiary">
-              {service.service_items.map((item) => (
-                <ServiceItemRow
-                  key={item.id}
-                  item={item}
-                  isLoggedIn={isLoggedIn}
-                  specialsHref={specialsHref}
-                />
-              ))}
-            </div>
-          )}
-        </details>
-      ))}
-    </div>
+    <>
+      <PortalTabTracker event="ViewContent" params={{ contentName: 'Services', contentCategory: 'Services' }} />
+      <div className="divide-y divide-tertiary rounded-component border border-secondary bg-primary overflow-hidden">
+        {activeServices.map((service) => (
+          <details key={service.id} className="group">
+            <summary className="flex cursor-pointer list-none items-center justify-between px-5 py-4 hover:bg-secondary transition-colors">
+              <div>
+                <span className="font-medium text-primary">{service.name}</span>
+                {service.summary && (
+                  <p className="mt-0.5 text-sm text-tertiary">{service.summary}</p>
+                )}
+              </div>
+              <div className="ml-4 flex items-center gap-2 shrink-0">
+                <span className="text-xs text-quaternary">{service.service_items?.length ?? 0} items</span>
+                <svg className="size-4 text-quaternary transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </div>
+            </summary>
+            {service.service_items && service.service_items.length > 0 && (
+              <div className="border-t border-tertiary bg-secondary divide-y divide-tertiary">
+                {service.service_items.map((item) => (
+                  <ServiceItemRow
+                    key={item.id}
+                    item={item}
+                    isLoggedIn={isLoggedIn}
+                    specialsHref={specialsHref}
+                  />
+                ))}
+              </div>
+            )}
+          </details>
+        ))}
+      </div>
+    </>
   );
 }
 
@@ -315,11 +319,13 @@ function PackagesPanel({
   if (packages.length === 0) return <EmptyState message="No packages available yet." />;
 
   return (
-    <div className="grid gap-4 sm:grid-cols-2">
-      {packages.map((pkg) => {
-        const activeOffers = (pkg.offers ?? []).filter((o) => o.active !== false && !o.expired);
-        return (
-          <div key={pkg.id} className="group rounded-xl border border-secondary bg-primary p-4 flex flex-col gap-3">
+    <>
+      <PortalTabTracker event="ViewContent" params={{ contentName: 'Packages', contentCategory: 'Packages' }} />
+      <div className="grid gap-4 sm:grid-cols-2">
+        {packages.map((pkg) => {
+          const activeOffers = (pkg.offers ?? []).filter((o) => o.active !== false && !o.expired);
+          return (
+            <div key={pkg.id} className="group rounded-component border border-secondary bg-primary p-4 flex flex-col gap-3">
             <div className="flex items-start gap-3">
               <RowThumbnail
                 photoAttachments={pkg.photo_attachments}
@@ -365,7 +371,7 @@ function PackagesPanel({
                     <Link
                       key={offer.id}
                       href={specialsHref}
-                      className="inline-flex items-center rounded-full bg-brand-50 border border-brand-200 px-2.5 py-0.5 text-xs font-medium text-brand-700 hover:bg-brand-100 transition-colors"
+                      className="inline-flex items-center rounded-badge bg-secondary border border-brand px-2.5 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors"
                     >
                       Special: {offer.name}
                     </Link>
@@ -374,7 +380,7 @@ function PackagesPanel({
                       key={offer.id}
                       data-open-login-modal
                       data-login-redirect={specialsHref}
-                      className="inline-flex items-center rounded-full bg-brand-50 border border-brand-200 px-2.5 py-0.5 text-xs font-medium text-brand-700 hover:bg-brand-100 transition-colors cursor-pointer"
+                      className="inline-flex items-center rounded-badge bg-secondary border border-brand px-2.5 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors cursor-pointer"
                     >
                       Special: {offer.name}
                     </button>
@@ -382,10 +388,11 @@ function PackagesPanel({
                 )}
               </div>
             )}
-          </div>
-        );
-      })}
-    </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
   );
 }
 
@@ -397,31 +404,34 @@ function SpecialsPanel({ specials }: { specials: SpecialItem[] }) {
   }
 
   return (
-    <div className="space-y-3">
-      {specials.map((special) => (
-        <div key={special.id} className="group flex items-start gap-3 rounded-xl border border-secondary bg-primary px-4 py-4">
-          <RowThumbnail
-            photoAttachments={special.photoAttachments}
-            seed={`special-${special.id}`}
-            alt={special.parentName}
-          />
-          <div className="flex-1 min-w-0">
-            <p className="font-semibold text-primary">{special.name}</p>
-            {special.value_terms && (
-              <p className="mt-0.5 text-sm text-secondary">{special.value_terms}</p>
-            )}
-            <p className="mt-1 text-xs text-quaternary">
-              {special.parentType === 'service' ? 'Service' : 'Package'}: {special.parentName}
-            </p>
-            {special.expires_at && (
-              <p className="mt-0.5 text-xs text-quaternary">
-                Expires {new Date(special.expires_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+    <>
+      <PortalTabTracker event="ViewContent" params={{ contentName: 'Specials', contentCategory: 'Specials' }} />
+      <div className="space-y-3">
+        {specials.map((special) => (
+          <div key={special.id} className="group flex items-start gap-3 rounded-component border border-secondary bg-primary px-4 py-4">
+            <RowThumbnail
+              photoAttachments={special.photoAttachments}
+              seed={`special-${special.id}`}
+              alt={special.parentName}
+            />
+            <div className="flex-1 min-w-0">
+              <p className="font-semibold text-primary">{special.name}</p>
+              {special.value_terms && (
+                <p className="mt-0.5 text-sm text-secondary">{special.value_terms}</p>
+              )}
+              <p className="mt-1 text-xs text-quaternary">
+                {special.parentType === 'service' ? 'Service' : 'Package'}: {special.parentName}
               </p>
-            )}
+              {special.expires_at && (
+                <p className="mt-0.5 text-xs text-quaternary">
+                  Expires {new Date(special.expires_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+                </p>
+              )}
+            </div>
           </div>
-        </div>
-      ))}
-    </div>
+        ))}
+      </div>
+    </>
   );
 }
 
@@ -444,10 +454,10 @@ function MessagesPanel({
     businessName;
 
   return (
-    <div className="flex flex-col rounded-xl border border-secondary bg-primary overflow-hidden">
+    <div className="flex flex-col rounded-component border border-secondary bg-primary overflow-hidden">
       {/* Thread header */}
       <div className="flex items-center gap-2.5 border-b border-secondary px-4 py-3 shrink-0">
-        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-gray-900 text-xs font-semibold text-white shrink-0">
+        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-brand-solid text-xs font-semibold text-white shrink-0">
           {getInitials(threadBusiness)}
         </div>
         <span className="text-sm font-semibold text-primary">{threadBusiness}</span>
@@ -470,8 +480,8 @@ function MessagesPanel({
             const isOutbound = m.direction === 'outbound';
             return (
               <div key={m.id} className={`flex ${isOutbound ? 'justify-start' : 'justify-end'}`}>
-                <div className={`max-w-[80%] rounded-2xl px-4 py-2.5 text-sm ${
-                  isOutbound ? 'bg-secondary text-primary rounded-tl-sm' : 'bg-gray-900 text-white rounded-tr-sm'
+                <div className={`max-w-[80%] rounded-component px-4 py-2.5 text-sm ${
+                  isOutbound ? 'bg-secondary text-primary' : 'bg-brand-solid text-white'
                 }`}>
                   {m.sender_display_name && (
                     <p className="mb-0.5 text-xs font-medium opacity-60">{m.sender_display_name}</p>
@@ -510,38 +520,44 @@ function BookPanel({
 
   if (bookingAllowsIframe) {
     return (
-      <div className="rounded-xl border border-secondary overflow-hidden" style={{ height: '70vh' }}>
-        <iframe
-          src={bookingHref}
-          className="w-full h-full"
-          title="Book appointment"
-          allow="payment"
-        />
-      </div>
+      <>
+        <PortalTabTracker event="InitiateCheckout" />
+        <div className="rounded-component border border-secondary overflow-hidden" style={{ height: '70vh' }}>
+          <iframe
+            src={bookingHref}
+            className="w-full h-full"
+            title="Book appointment"
+            allow="payment"
+          />
+        </div>
+      </>
     );
   }
 
   return (
-    <div className="flex flex-col items-center justify-center py-20 text-center">
-      <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-secondary">
-        <svg className="size-5 text-quaternary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 9v7.5" />
-        </svg>
+    <>
+      <PortalTabTracker event="InitiateCheckout" />
+      <div className="flex flex-col items-center justify-center py-20 text-center">
+        <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-secondary">
+          <svg className="size-5 text-quaternary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 9v7.5" />
+          </svg>
+        </div>
+        <p className="text-sm font-medium text-primary">Ready to book?</p>
+        <p className="mt-1 text-sm text-tertiary">You&apos;ll be taken to our booking system.</p>
+        <a
+          href={bookingHref}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mt-5 inline-flex items-center gap-2 rounded-interactive bg-brand-solid px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand-solid_hover"
+        >
+          {bookingLabel}
+          <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+          </svg>
+        </a>
       </div>
-      <p className="text-sm font-medium text-primary">Ready to book?</p>
-      <p className="mt-1 text-sm text-tertiary">You&apos;ll be taken to our booking system.</p>
-      <a
-        href={bookingHref}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="mt-5 inline-flex items-center gap-2 rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-gray-700"
-      >
-        {bookingLabel}
-        <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-        </svg>
-      </a>
-    </div>
+    </>
   );
 }
 
@@ -643,7 +659,7 @@ export async function PortalPage({
                 <div className="flex items-center gap-3">
                   {consumerDisplayName && (
                     <div className="hidden sm:flex items-center gap-2 rounded-full border border-secondary bg-secondary px-3 py-1.5">
-                      <div className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-900 text-[9px] font-bold text-white shrink-0">
+                      <div className="flex h-5 w-5 items-center justify-center rounded-full bg-brand-solid text-[9px] font-bold text-white shrink-0">
                         {getInitials(consumerDisplayName)}
                       </div>
                       <span className="text-xs font-medium text-secondary max-w-[120px] truncate">
@@ -656,7 +672,7 @@ export async function PortalPage({
               ) : (
                 <button
                   data-open-login-modal
-                  className="cursor-pointer rounded-lg border border-secondary px-3 py-1.5 text-xs font-medium text-secondary hover:bg-secondary transition-colors"
+                  className="cursor-pointer rounded-interactive border border-secondary px-3 py-1.5 text-xs font-medium text-secondary hover:bg-secondary transition-colors"
                 >
                   Sign in
                 </button>
@@ -675,8 +691,8 @@ export async function PortalPage({
               const isActive = tab === t.id;
               const isGated = !isLoggedIn && (t.id === 'specials' || t.id === 'messages' || t.id === 'book');
               const href = `${portalHref}?tab=${t.id}`;
-              const className = `shrink-0 rounded-lg px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap ${
-                isActive ? 'bg-gray-900 text-white' : 'text-secondary hover:bg-secondary hover:text-primary'
+              const className = `shrink-0 rounded-interactive px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap ${
+                isActive ? 'bg-brand-solid text-white' : 'text-secondary hover:bg-secondary hover:text-primary'
               }`;
               if (isGated) {
                 return (

package/src/design_system/portal/PortalTabTracker.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useEffect } from 'react';
+import { firePixelEvent } from '../../tracking/firePixelEvent';
+import type { PixelEvent, PixelEventParams } from '../../tracking/firePixelEvent';
+
+interface Props {
+  event: PixelEvent;
+  params?: PixelEventParams;
+}
+
+/**
+ * Fires a pixel event once when a portal tab mounts.
+ * Placed at the root of each tab panel so it fires on both direct navigation
+ * and post-login redirect to that tab.
+ */
+export function PortalTabTracker({ event, params }: Props) {
+  useEffect(() => {
+    firePixelEvent(event, params);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return null;
+}

package/src/design_system/portal/RowThumbnail.tsx

@@ -26,7 +26,7 @@ export function RowThumbnail({
 
   if (list.length === 0) {
     return (
-      <div className={`${sizeClassName} shrink-0 rounded-lg bg-secondary border border-tertiary flex items-center justify-center`}>
+      <div className={`${sizeClassName} shrink-0 rounded-component bg-secondary border border-tertiary flex items-center justify-center`}>
         <svg className="size-5 text-quaternary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
         </svg>
@@ -36,7 +36,7 @@ export function RowThumbnail({
 
   if (list.length === 1) {
     return (
-      <div className={`${sizeClassName} shrink-0 rounded-lg overflow-hidden`}>
+      <div className={`${sizeClassName} shrink-0 rounded-component overflow-hidden`}>
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={list[0]!.url}
@@ -48,7 +48,7 @@ export function RowThumbnail({
   }
 
   return (
-    <div className={`${sizeClassName} shrink-0 rounded-lg overflow-hidden relative`}>
+      <div className={`${sizeClassName} shrink-0 rounded-component overflow-hidden relative`}>
       <div
         className={`absolute inset-0 ${transitioning ? 'transition-opacity ease-in-out' : 'transition-none'}`}
         style={{ opacity: transitioning ? 0 : 1, ...(transitioning ? CROSSFADE_STYLE : {}) }}

package/src/design_system/sections/contact-section-form.aman.tsx

@@ -3,7 +3,7 @@
 import React, { useRef, useState } from 'react';
 import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
-import { trackMetaLead } from '../../tracking/trackMetaLead';
+import { firePixelEvent } from '../../tracking/firePixelEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -61,7 +61,7 @@ export const ContactSectionForm = ({
                 setStatusMessage(result.message || successMessage);
                 formRef.current?.reset();
                 onSuccess?.();
-                trackMetaLead(result.eventId);
+                firePixelEvent('Lead');
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {
                 setSubmitStatus('error');