{
  "meta": {
    "name": "Cardplane",
    "description": "Latin-American card-issuing & payments-infrastructure platform — modular API-first BaaS marketing site (dark navy + neon-pink accent, Geist) plus a production product dashboard for fintechs to launch and operate credit/debit/prepaid card programs.",
    "url": "",
    "designSystemName": "Cardplane Tokens",
    "platform": "Next.js + Tailwind CSS v4 (with @theme tokens) + Prismic CMS",
    "type": "fintech / card-issuing infrastructure (BaaS)",
    "extracted": "2026-05-10",
    "portal": "",
    "iosApp": false,
    "scope": "Marketing site + Product dashboard"
  },
  "website": {
    "color": {
      "_description": "Dark-first palette. Near-black navy ground with neon magenta as the dominant accent and selective deep purple for AI/secondary surfaces. White-on-dark + occasional inverted white sections.",
      "brand": {
        "primary": { "value": "#ec4899", "description": "Pink-500 — primary CTA, link hover, glow, brand mark" },
        "primary-hover": { "value": "#f472b6", "description": "Pink-400 — hover/glow lift on pink CTAs" },
        "primary-soft": { "value": "#f9a8d4", "description": "Pink-300 — soft accent text and outlined pill icons" },
        "primary-tint": { "value": "rgba(244, 114, 182, 0.15)", "description": "Pink-400 @ 15% — chip backgrounds, focus halo" },
        "ai-accent": { "value": "#c084fc", "description": "Purple-400 — AI/secondary surface accent (e.g. AI badge)" },
        "ai-deep": { "value": "#7e22ce", "description": "Purple-700 — AI accent shadow side of gradient" }
      },
      "background": {
        "page": { "value": "#080C21", "description": "Near-black navy ground" },
        "elevated": { "value": "#12162B", "description": "Section bg / language switcher / nav row" },
        "inverse": { "value": "#FFFFFF", "description": "Pinned light sections (e.g. comparison panels)" },
        "frost": { "value": "rgba(255, 228, 255, 0.082)", "description": "Subtle pink-white frost over dark — borders, dividers" }
      },
      "text": {
        "primary": { "value": "#FFFFFF", "description": "Headings, primary text on dark" },
        "primary-tinted": { "value": "#FFE4FF", "description": "Pink-tinted white — chips, soft highlights" },
        "muted": { "value": "#9CA3AF", "description": "Gray-400 — body copy, supporting text" },
        "muted-soft": { "value": "#7b6f73", "description": "Gray-300 — captions, microcopy" },
        "on-pink": { "value": "#080C21", "description": "Dark text on pink CTAs" },
        "link-pink": { "value": "#ec4899", "description": "In-flow links and active sidebar items" }
      },
      "border": {
        "subtle": { "value": "rgba(255, 228, 255, 0.082)", "description": "Default divider on dark surfaces" },
        "card": { "value": "rgba(255, 255, 255, 0.06)", "description": "KPI card outline" },
        "pink": { "value": "#ec4899", "description": "Active/selected outline" }
      },
      "gradient": {
        "hero-glow": {
          "value": "radial-gradient(ellipse at top, rgba(236,72,153,0.25) 0%, rgba(8,12,33,0) 60%)",
          "description": "Magenta glow above hero/section breaks"
        },
        "hero-glow-corner": {
          "value": "radial-gradient(ellipse at 80% 40%, rgba(192,132,252,0.18) 0%, rgba(8,12,33,0) 55%)",
          "description": "Purple corner haze around card mockups"
        },
        "ai-chip": {
          "value": "linear-gradient(135deg, rgba(192,132,252,0.18) 0%, rgba(126,34,206,0.12) 100%)",
          "description": "Purple gradient for AI badge/chip"
        },
        "card-mock": {
          "value": "linear-gradient(135deg, #ec4899 0%, #c084fc 100%)",
          "description": "Pink→purple gradient on showcased card art"
        }
      }
    },
    "typography": {
      "fontFamily": {
        "sans": "Geist, 'Geist Fallback', ui-sans-serif, system-ui, sans-serif",
        "mono": "'Geist Mono', 'Geist Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace"
      },
      "scale": {
        "display-1": { "fontSize": "100px", "lineHeight": "100px", "letterSpacing": "-3px", "weight": 600, "use": "Hero h1 (desktop)" },
        "display-2": { "fontSize": "80px", "lineHeight": "80px", "letterSpacing": "-2.5px", "weight": 600, "use": "Major section heading" },
        "h2": { "fontSize": "65px", "lineHeight": "65px", "letterSpacing": "-2px", "weight": 600, "use": "Section heading" },
        "h3": { "fontSize": "40px", "lineHeight": "48px", "letterSpacing": "0", "weight": 600, "use": "Sub-section heading" },
        "h4": { "fontSize": "24px", "lineHeight": "32px", "letterSpacing": "-0.5px", "weight": 600, "use": "Card title" },
        "lead": { "fontSize": "20px", "lineHeight": "28px", "weight": 400, "use": "Hero supporting paragraph" },
        "body": { "fontSize": "16px", "lineHeight": "20.8px", "weight": 400, "use": "Default body" },
        "body-sm": { "fontSize": "14px", "lineHeight": "20px", "weight": 400, "use": "Small body, table cells" },
        "ui": { "fontSize": "13px", "lineHeight": "19.5px", "weight": 400, "use": "Buttons, nav, links, chips" },
        "label": { "fontSize": "12px", "lineHeight": "16px", "weight": 500, "use": "Tag labels, captions" },
        "micro": { "fontSize": "10px", "lineHeight": "14px", "weight": 500, "use": "Footer notes, meta" }
      },
      "weights": { "regular": 400, "medium": 500, "semibold": 600 }
    },
    "spacing": {
      "_unit": "rem (1rem = 10px on this site, Tailwind v4 custom scale)",
      "scale": {
        "0.8": "0.8rem", "1.2": "1.2rem", "1.4": "1.4rem", "2.2": "2.2rem",
        "3.5": "3.5rem", "5.5": "5.5rem", "7.7": "7.7rem", "8": "8rem",
        "12": "12rem", "26": "26rem", "32": "32rem", "35": "35rem"
      },
      "px": {
        "1": "4px", "2": "8px", "3": "12px", "4": "16px", "5": "20px",
        "6": "24px", "8": "32px", "10": "40px", "12": "48px", "16": "64px",
        "20": "80px", "24": "96px", "32": "128px"
      }
    },
    "radius": {
      "xs": "2px",
      "sm": "5px",
      "md": "8px",
      "lg": "10px",
      "xl": "18px",
      "2xl": "32px",
      "pill": "50px",
      "full": "9999px"
    },
    "shadow": {
      "card": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
      "glow-pink": "0 0 40px rgba(236, 72, 153, 0.45), 0 0 80px rgba(236, 72, 153, 0.18)",
      "glow-purple": "0 0 40px rgba(192, 132, 252, 0.35)",
      "soft": "0 2px 12px rgba(0, 0, 0, 0.4)"
    },
    "layout": {
      "wrapper-max": "1440px",
      "container-padding": { "desktop": "32px", "mobile": "20px" },
      "section-gap": { "compact": "5.5rem", "default": "7.7rem", "spacious": "12rem" },
      "grid-gap": "24px"
    },
    "motion": {
      "fade-in-up": "fade-in-up .35s ease-out both",
      "transition-default": "all 200ms ease",
      "transition-color": "color 150ms ease",
      "transition-glow": "box-shadow 300ms ease, transform 200ms ease"
    },
    "components": {
      "buttonPrimary": {
        "background": "#ec4899",
        "color": "#080C21",
        "borderRadius": "50px",
        "padding": "10px 22px",
        "fontSize": "13px",
        "fontWeight": 500,
        "boxShadow": "0 0 0 0 rgba(236,72,153,0)",
        "hover": { "background": "#f472b6", "boxShadow": "0 0 24px rgba(236,72,153,0.55)" },
        "active": { "transform": "translateY(1px)" }
      },
      "buttonGhost": {
        "background": "transparent",
        "color": "#FFFFFF",
        "border": "1px solid rgba(255, 228, 255, 0.18)",
        "borderRadius": "50px",
        "padding": "10px 22px",
        "fontSize": "13px",
        "hover": { "background": "rgba(255,228,255,0.06)", "borderColor": "rgba(255,228,255,0.32)" }
      },
      "navLink": {
        "color": "#FFFFFF",
        "fontSize": "13px",
        "fontWeight": 400,
        "padding": "30px 10px",
        "hover": { "color": "#ec4899" }
      },
      "languageSelect": {
        "background": "#12162B",
        "color": "#FFFFFF",
        "borderRadius": "5px",
        "padding": "6px 8px",
        "fontSize": "13px"
      },
      "tabPill": {
        "background": "transparent",
        "border": "1px solid rgba(255,228,255,0.18)",
        "color": "#FFFFFF",
        "borderRadius": "50px",
        "padding": "6px 14px",
        "fontSize": "13px",
        "active": { "background": "#ec4899", "color": "#080C21", "border": "1px solid #ec4899" }
      },
      "featureCard": {
        "background": "rgba(18, 22, 43, 0.6)",
        "border": "1px solid rgba(255, 228, 255, 0.082)",
        "borderRadius": "18px",
        "padding": "32px",
        "color": "#FFFFFF",
        "hover": { "borderColor": "rgba(236,72,153,0.45)", "boxShadow": "0 0 24px rgba(236,72,153,0.18)" }
      },
      "card3D": {
        "borderRadius": "18px",
        "background": "linear-gradient(135deg, #ec4899 0%, #c084fc 100%)",
        "boxShadow": "0 0 40px rgba(236,72,153,0.45), 0 25px 50px -12px rgba(0,0,0,0.6)",
        "aspectRatio": "1.586 / 1",
        "use": "Marketing card-art mockups (3D rotated)"
      }
    }
  },
  "app": {
    "_description": "Product dashboard for issuer/processor operations — left icon rail, KPI card row, transaction-driven data tables, AI assistant chip in top-right. Inherits the website palette but pushes blacks darker and uses purple charts.",
    "color": {
      "background": {
        "page": { "value": "#0A0F22", "description": "Slightly darker than marketing bg" },
        "rail": { "value": "#070B1B", "description": "Left icon sidebar rail (deeper)" },
        "surface": { "value": "rgba(255, 255, 255, 0.02)", "description": "KPI card background (frost over page)" },
        "surface-elevated": { "value": "#12162B", "description": "Inputs, dropdowns" },
        "row-hover": { "value": "rgba(255, 255, 255, 0.03)", "description": "Table row hover" }
      },
      "text": {
        "primary": { "value": "#FFFFFF" },
        "muted": { "value": "#9CA3AF", "description": "Headers, secondary cells" },
        "subtle": { "value": "#5b6371", "description": "Inactive sidebar icons" },
        "amount-positive": { "value": "#FFFFFF" }
      },
      "accent": {
        "pink": { "value": "#ec4899", "description": "Brand glow, active states" },
        "purple-chart": { "value": "#c084fc", "description": "Area-chart gradient & AI chip" },
        "purple-deep": { "value": "#7e22ce" }
      },
      "status": {
        "approved": { "value": "#22c55e", "description": "Green dot + label tint" },
        "approved-bg": { "value": "rgba(34, 197, 94, 0.10)" },
        "in-progress": { "value": "#9CA3AF" },
        "won": { "value": "#22c55e" },
        "lost": { "value": "#ec4899", "description": "Charges-back lost = pink, not red" }
      },
      "border": {
        "card": "rgba(255, 255, 255, 0.06)",
        "table": "rgba(255, 255, 255, 0.05)",
        "input": "rgba(255, 255, 255, 0.10)"
      }
    },
    "typography": {
      "fontFamily": "Geist, 'Geist Fallback', ui-sans-serif, system-ui, sans-serif",
      "scale": {
        "kpi-value": { "fontSize": "40px", "lineHeight": "48px", "weight": 500, "use": "$80.53 hero metric" },
        "kpi-delta": { "fontSize": "14px", "weight": 500, "color": "#9CA3AF", "use": "+10% delta on metrics" },
        "kpi-label": { "fontSize": "16px", "weight": 500, "use": "Card title (Average spending)" },
        "table-header": { "fontSize": "14px", "weight": 400, "color": "#9CA3AF" },
        "table-cell": { "fontSize": "16px", "weight": 400, "color": "#FFFFFF" },
        "table-time": { "fontSize": "12px", "weight": 400, "color": "#9CA3AF", "use": "Sub-line under date" },
        "pill-tag": { "fontSize": "13px", "weight": 400 }
      }
    },
    "layout": {
      "sidebar-rail-width": "64px",
      "topbar-height": "72px",
      "content-padding": "32px 48px",
      "card-row-gap": "24px",
      "kpi-card-min-height": "168px",
      "table-row-height": "76px",
      "table-row-padding": "20px 0"
    },
    "components": {
      "iconRail": {
        "width": "64px",
        "background": "#070B1B",
        "padding": "16px 0",
        "iconSize": "20px",
        "iconColor-default": "#5b6371",
        "iconColor-active": "#FFFFFF",
        "iconColor-hover": "#ec4899",
        "activeIndicator": { "type": "left-bar", "width": "3px", "background": "#ec4899", "height": "20px" },
        "groupGap": "32px",
        "logoSlot": { "size": "40px", "borderRadius": "10px", "background": "linear-gradient(135deg, #ec4899 0%, #c084fc 100%)" },
        "userAvatar": { "size": "32px", "borderRadius": "9999px", "border": "1px solid rgba(255,255,255,0.10)", "fontSize": "12px", "fontWeight": 500 }
      },
      "kpiCard": {
        "background": "rgba(255, 255, 255, 0.02)",
        "border": "1px solid rgba(255, 255, 255, 0.06)",
        "borderRadius": "18px",
        "padding": "24px 28px",
        "minHeight": "168px",
        "title": { "fontSize": "16px", "color": "#9CA3AF", "marginBottom": "12px" },
        "value": { "fontSize": "40px", "color": "#FFFFFF", "fontWeight": 500 }
      },
      "areaChart": {
        "stroke": "#c084fc",
        "fill": "linear-gradient(180deg, rgba(192,132,252,0.45) 0%, rgba(192,132,252,0) 100%)",
        "strokeWidth": "2px"
      },
      "aiChip": {
        "background": "linear-gradient(135deg, rgba(192,132,252,0.18) 0%, rgba(126,34,206,0.12) 100%)",
        "border": "1px solid rgba(192,132,252,0.35)",
        "borderRadius": "50px",
        "padding": "10px 18px",
        "color": "#c084fc",
        "fontSize": "14px",
        "fontWeight": 500,
        "iconColor": "#c084fc"
      },
      "dataTable": {
        "rowDivider": "1px solid rgba(255, 255, 255, 0.05)",
        "headerColor": "#9CA3AF",
        "headerSize": "14px",
        "headerCase": "Sentence case",
        "cellPadding": "20px 16px",
        "rowHoverBg": "rgba(255, 255, 255, 0.03)",
        "stripedRows": false
      },
      "typePill": {
        "background": "transparent",
        "border": "1px solid rgba(255, 255, 255, 0.10)",
        "borderRadius": "50px",
        "padding": "4px 14px",
        "fontSize": "13px",
        "color": "#9CA3AF",
        "use": "Purchase / Withdrawal / Reversal tags"
      },
      "statusPill": {
        "background": "rgba(34, 197, 94, 0.10)",
        "border": "1px solid rgba(34, 197, 94, 0.30)",
        "borderRadius": "50px",
        "padding": "4px 12px 4px 8px",
        "fontSize": "13px",
        "color": "#22c55e",
        "leadingDot": { "size": "6px", "background": "#22c55e", "borderRadius": "9999px", "marginRight": "6px" },
        "variants": {
          "approved": { "color": "#22c55e", "dot": "#22c55e" },
          "in-progress": { "color": "#9CA3AF", "dot": "#9CA3AF" },
          "won": { "color": "#22c55e", "dot": "#22c55e" },
          "lost": { "color": "#ec4899", "dot": "#ec4899" }
        }
      },
      "topBarSearch": {
        "background": "rgba(255, 255, 255, 0.04)",
        "border": "1px solid rgba(255, 255, 255, 0.08)",
        "borderRadius": "10px",
        "padding": "10px 16px",
        "color": "#9CA3AF",
        "placeholderColor": "#5b6371"
      },
      "tokenizationLogos": {
        "tile": { "size": "64px", "borderRadius": "12px", "background": "rgba(255,255,255,0.04)", "border": "1px solid rgba(255,255,255,0.08)" }
      }
    }
  },
  "tailwind": {
    "_description": "Drop into tailwind.config.ts → theme.extend. Tailwind v4 users can mirror these into @theme directly.",
    "theme": {
      "extend": {
        "colors": {
          "brand": {
            "pink": "#ec4899",
            "pinkHover": "#f472b6",
            "pinkSoft": "#f9a8d4",
            "pinkTint": "rgba(244, 114, 182, 0.15)",
            "purple": "#c084fc",
            "purpleDeep": "#7e22ce"
          },
          "bg": {
            "page": "#080C21",
            "elevated": "#12162B",
            "rail": "#070B1B",
            "frost": "rgba(255, 228, 255, 0.082)"
          },
          "fg": {
            "primary": "#FFFFFF",
            "tinted": "#FFE4FF",
            "muted": "#9CA3AF",
            "subtle": "#7b6f73",
            "onPink": "#080C21"
          },
          "status": {
            "approved": "#22c55e",
            "approvedBg": "rgba(34, 197, 94, 0.10)",
            "lost": "#ec4899"
          },
          "border": {
            "subtle": "rgba(255, 228, 255, 0.082)",
            "card": "rgba(255, 255, 255, 0.06)",
            "table": "rgba(255, 255, 255, 0.05)"
          }
        },
        "fontFamily": {
          "sans": ["Geist", "Geist Fallback", "ui-sans-serif", "system-ui", "sans-serif"],
          "mono": ["Geist Mono", "Geist Mono Fallback", "ui-monospace", "Menlo", "monospace"]
        },
        "fontSize": {
          "display1": ["100px", { "lineHeight": "100px", "letterSpacing": "-3px", "fontWeight": "600" }],
          "display2": ["80px", { "lineHeight": "80px", "letterSpacing": "-2.5px", "fontWeight": "600" }],
          "h2": ["65px", { "lineHeight": "65px", "letterSpacing": "-2px", "fontWeight": "600" }],
          "h3": ["40px", { "lineHeight": "48px", "fontWeight": "600" }],
          "h4": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
          "lead": ["20px", { "lineHeight": "28px" }],
          "ui": ["13px", { "lineHeight": "19.5px" }],
          "kpiValue": ["40px", { "lineHeight": "48px", "fontWeight": "500" }]
        },
        "borderRadius": {
          "xs": "2px",
          "sm": "5px",
          "md": "8px",
          "lg": "10px",
          "xl": "18px",
          "2xl": "32px",
          "pill": "50px"
        },
        "boxShadow": {
          "card": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
          "glowPink": "0 0 40px rgba(236, 72, 153, 0.45), 0 0 80px rgba(236, 72, 153, 0.18)",
          "glowPurple": "0 0 40px rgba(192, 132, 252, 0.35)",
          "soft": "0 2px 12px rgba(0, 0, 0, 0.4)"
        },
        "spacing": {
          "rail": "64px",
          "sidebar": "260px",
          "wrapper": "1440px"
        },
        "screens": {
          "sm": "640px",
          "md": "768px",
          "lg": "1024px",
          "xl": "1280px",
          "2xl": "1440px"
        },
        "backgroundImage": {
          "heroGlow": "radial-gradient(ellipse at top, rgba(236,72,153,0.25) 0%, rgba(8,12,33,0) 60%)",
          "cornerHaze": "radial-gradient(ellipse at 80% 40%, rgba(192,132,252,0.18) 0%, rgba(8,12,33,0) 55%)",
          "cardArt": "linear-gradient(135deg, #ec4899 0%, #c084fc 100%)",
          "aiChip": "linear-gradient(135deg, rgba(192,132,252,0.18) 0%, rgba(126,34,206,0.12) 100%)",
          "chartArea": "linear-gradient(180deg, rgba(192,132,252,0.45) 0%, rgba(192,132,252,0) 100%)"
        },
        "transitionTimingFunction": {
          "bounceOut": "cubic-bezier(0.22, 1, 0.36, 1)"
        }
      }
    },
    "componentRecipes": {
      "buttonPrimary": "inline-flex items-center justify-center rounded-pill bg-brand-pink text-fg-onPink px-5 py-2.5 text-ui font-medium transition-shadow hover:bg-brand-pinkHover hover:shadow-glowPink",
      "buttonGhost": "inline-flex items-center justify-center rounded-pill bg-transparent text-fg-primary border border-border-subtle px-5 py-2.5 text-ui transition-colors hover:bg-bg-frost",
      "tabPill": "inline-flex items-center rounded-pill border border-border-subtle text-fg-primary text-ui px-3.5 py-1.5 transition-colors data-[active=true]:bg-brand-pink data-[active=true]:text-fg-onPink data-[active=true]:border-brand-pink",
      "featureCard": "rounded-xl bg-bg-elevated/60 border border-border-subtle p-8 text-fg-primary transition-shadow hover:border-brand-pink/45 hover:shadow-glowPink/30",
      "kpiCard": "rounded-xl bg-white/[0.02] border border-border-card p-6 min-h-[168px] flex flex-col gap-3 text-fg-primary",
      "kpiValue": "text-kpiValue text-fg-primary tabular-nums",
      "kpiLabel": "text-base text-fg-muted font-medium",
      "aiChip": "inline-flex items-center gap-2 rounded-pill bg-aiChip border border-brand-purple/35 text-brand-purple text-sm font-medium px-4 py-2",
      "statusPillApproved": "inline-flex items-center gap-1.5 rounded-pill bg-status-approvedBg border border-status-approved/30 text-status-approved text-ui px-3 py-1",
      "statusDot": "w-1.5 h-1.5 rounded-full bg-current",
      "typePill": "inline-flex items-center rounded-pill border border-border-card text-fg-muted text-ui px-3.5 py-1",
      "tableHeader": "text-left text-base text-fg-muted font-normal pb-4",
      "tableRow": "border-t border-border-table hover:bg-white/[0.03] transition-colors",
      "tableCell": "py-5 text-base text-fg-primary",
      "iconRail": "fixed left-0 top-0 h-screen w-rail bg-bg-rail flex flex-col items-center py-4 gap-8",
      "iconRailItem": "w-10 h-10 grid place-items-center text-fg-subtle hover:text-brand-pink transition-colors data-[active=true]:text-fg-primary relative",
      "navLink": "text-ui text-fg-primary px-2.5 py-7 transition-colors hover:text-brand-pink",
      "card3D": "aspect-[1.586/1] rounded-xl bg-cardArt shadow-glowPink shadow-card",
      "heroSection": "relative isolate overflow-hidden bg-bg-page bg-heroGlow"
    }
  }
}