{
  "_comment": "AND Capital Design System — machine-readable design tokens. Source: src/design-tokens.ts",
  "version": "1.0",
  "generated": "2026-04-01T14:10:58.616Z",
  "meta": {
    "site": "andcapital.com",
    "framework": "React 18 + Vite + Tailwind CSS 3",
    "iconLibrary": "lucide-react",
    "iconVersion": "0.462.0",
    "googleFontsUrl": "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap"
  },
  "sections": [
    {
      "id": "logos",
      "label": "Logos"
    },
    {
      "id": "social-media",
      "label": "Social Media"
    },
    {
      "id": "colors",
      "label": "Colors"
    },
    {
      "id": "typography",
      "label": "Typography"
    },
    {
      "id": "spacing",
      "label": "Spacing & Layout"
    },
    {
      "id": "surfaces",
      "label": "Surfaces"
    },
    {
      "id": "effects",
      "label": "Effects & Shimmers"
    },
    {
      "id": "buttons",
      "label": "Buttons & CTAs"
    },
    {
      "id": "motion",
      "label": "Motion"
    },
    {
      "id": "components",
      "label": "Components"
    },
    {
      "id": "gradients",
      "label": "Gradients"
    },
    {
      "id": "icons",
      "label": "Icons"
    }
  ],
  "colors": [
    {
      "group": "Core",
      "vars": [
        {
          "name": "--background",
          "tw": "bg-background",
          "hsl": "148 70% 3.5%"
        },
        {
          "name": "--foreground",
          "tw": "text-foreground",
          "hsl": "0 0% 100%"
        }
      ]
    },
    {
      "group": "Brand",
      "vars": [
        {
          "name": "--primary",
          "tw": "text-primary / bg-primary",
          "hsl": "152 58% 35%"
        },
        {
          "name": "--accent",
          "tw": "text-accent / bg-accent",
          "hsl": "152 65% 45%"
        },
        {
          "name": "--dark-green",
          "tw": "—",
          "hsl": "150 90% 14%"
        },
        {
          "name": "--mid-green",
          "tw": "—",
          "hsl": "152 58% 35%"
        },
        {
          "name": "--accent-green",
          "tw": "—",
          "hsl": "155 68% 50%"
        },
        {
          "name": "--warm-glow",
          "tw": "—",
          "hsl": "37 40% 55%"
        }
      ]
    },
    {
      "group": "Semantic",
      "vars": [
        {
          "name": "--card",
          "tw": "bg-card",
          "hsl": "148 35% 6%"
        },
        {
          "name": "--popover",
          "tw": "bg-popover",
          "hsl": "148 35% 6%"
        },
        {
          "name": "--muted",
          "tw": "bg-muted",
          "hsl": "148 18% 12%"
        },
        {
          "name": "--muted-foreground",
          "tw": "text-muted-foreground",
          "hsl": "0 0% 83%"
        },
        {
          "name": "--secondary",
          "tw": "bg-secondary",
          "hsl": "148 28% 10%"
        },
        {
          "name": "--destructive",
          "tw": "bg-destructive",
          "hsl": "0 84.2% 60.2%"
        },
        {
          "name": "--border",
          "tw": "border-border",
          "hsl": "148 14% 15%"
        },
        {
          "name": "--input",
          "tw": "bg-input",
          "hsl": "148 14% 15%"
        },
        {
          "name": "--ring",
          "tw": "ring-ring",
          "hsl": "152 58% 35%"
        }
      ]
    },
    {
      "group": "Glass / Glow",
      "vars": [
        {
          "name": "--glass",
          "tw": "—",
          "hsl": "148 18% 8%"
        },
        {
          "name": "--glass-border",
          "tw": "—",
          "hsl": "148 14% 18%"
        },
        {
          "name": "--green-glow",
          "tw": "—",
          "hsl": "152 65% 45%"
        }
      ]
    }
  ],
  "typography": {
    "scale": [
      {
        "cls": "text-display",
        "def": "text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-medium leading-[0.88] tracking-[-0.06em]"
      },
      {
        "cls": "text-heading-1",
        "def": "text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-medium leading-[0.9] tracking-[-0.04em]"
      },
      {
        "cls": "text-heading-2",
        "def": "text-3xl md:text-4xl lg:text-5xl font-semibold leading-[1.1] tracking-[-0.02em]"
      },
      {
        "cls": "text-heading-3",
        "def": "text-2xl md:text-3xl font-semibold leading-[1.2]"
      },
      {
        "cls": "text-heading-4",
        "def": "text-xl md:text-2xl font-medium leading-[1.3]"
      },
      {
        "cls": "text-body-large",
        "def": "text-xl md:text-2xl leading-[1.4] tracking-[-0.01em]"
      },
      {
        "cls": "text-body",
        "def": "text-lg md:text-xl leading-[1.5]"
      },
      {
        "cls": "text-body-small",
        "def": "text-base md:text-lg leading-[1.5]"
      },
      {
        "cls": "text-caption",
        "def": "text-sm leading-[1.4]"
      },
      {
        "cls": "text-small",
        "def": "text-xs leading-[1.4]"
      },
      {
        "cls": "text-button",
        "def": "text-lg font-medium"
      },
      {
        "cls": "text-button-large",
        "def": "text-xl font-medium"
      }
    ],
    "fontFamilies": {
      "serif": {
        "name": "Playfair Display",
        "weights": [
          400,
          600,
          700
        ],
        "styles": [
          "normal",
          "italic"
        ],
        "usage": "Headings, accent words, display text",
        "tailwind": "font-serif-display"
      },
      "sans": {
        "name": "Inter Tight",
        "weights": [
          400,
          500,
          600,
          700
        ],
        "styles": [
          "normal"
        ],
        "usage": "Body text, UI elements",
        "tailwind": "font-sans (default)"
      },
      "sansAlt": {
        "name": "Inter",
        "weights": [
          400,
          500,
          600
        ],
        "styles": [
          "normal"
        ],
        "usage": "Button labels, navigation",
        "tailwind": "font-inter"
      }
    },
    "patterns": {
      "italicSerifAccent": {
        "description": "Italic serif accent word within headings",
        "className": "font-serif-display font-semibold italic text-primary",
        "usage": "Section hero headings — one word is styled as green italic serif"
      },
      "metallicShimmer": {
        "description": "Animated metallic shimmer text",
        "className": "metallic-shimmer font-serif-display font-semibold italic",
        "usage": "HeroSection accent word — 12s sweep animation"
      }
    }
  },
  "spacing": {
    "containerMaxWidth": {
      "value": "max-w-7xl",
      "pixels": "1280px",
      "rem": "80rem"
    },
    "sectionPadding": [
      {
        "pattern": "px-6 py-32",
        "usage": "Standard full sections (ServiceCards, FocusAreas, QuoteBanner)"
      },
      {
        "pattern": "px-6 py-16",
        "usage": "Compact sections (Footer)"
      },
      {
        "pattern": "px-4 sm:px-8 lg:px-16 py-16",
        "usage": "Team cards section (full-bleed)"
      },
      {
        "pattern": "px-6 py-20",
        "usage": "Directory section"
      }
    ],
    "gridPatterns": [
      {
        "pattern": "grid md:grid-cols-2 gap-8",
        "usage": "ServiceCards"
      },
      {
        "pattern": "grid md:grid-cols-3 gap-8",
        "usage": "FocusAreas, Stats"
      },
      {
        "pattern": "grid grid-cols-4 gap-4",
        "usage": "TeamDirectory"
      }
    ],
    "borderRadius": [
      {
        "label": "--radius (0.5rem)",
        "cls": "rounded-[0.5rem]"
      },
      {
        "label": "rounded-xl",
        "cls": "rounded-xl"
      },
      {
        "label": "rounded-2xl",
        "cls": "rounded-2xl"
      },
      {
        "label": "rounded-[15px] (cards)",
        "cls": "rounded-[15px]"
      },
      {
        "label": "rounded-[71px] (pill nav)",
        "cls": "rounded-[71px]"
      }
    ]
  },
  "surfaces": {
    "glassCard": {
      "className": "glass-card",
      "css": "background: rgba(255,255,255,0.05); backdrop-filter: blur(12px); border: 3px solid transparent;",
      "borderGradient": "135deg primary→white→accent via ::before pseudo-element",
      "usage": "ServiceCards, StatsSection, NewsCards, navbar pill"
    },
    "cardShape": {
      "className": "card-shape",
      "clipPath": "polygon(0 0, calc(100% - 80px) 0, 100% 80px, 100% 100%, 0 100%)",
      "borderRadius": "24px",
      "usage": "Specialty/feature cards — notched top-right corner"
    },
    "backgroundGlow": {
      "description": "Ambient glow behind sections",
      "pattern": "rounded-full bg-primary/5 blur-[150px] (600x600) + bg-primary/10 blur-[120px] (400x400)",
      "usage": "ServiceCards, FocusAreas background"
    }
  },
  "effects": {
    "metallicShimmer": {
      "className": "metallic-shimmer",
      "animation": "shimmer-sweep 12s ease-in-out infinite",
      "gradient": "linear-gradient(90deg, primary 0%..40%, accent-green 50%, primary 60%..100%)",
      "backgroundSize": "300% 100%",
      "usage": "HeroSection italic accent word"
    },
    "metallicHeading": {
      "className": "metallic-heading",
      "gradient": "linear-gradient(to bottom, primary 0%, accent-green 40%, hsl(155 80% 65%) 50%, accent-green 60%, primary 100%)",
      "usage": "Section headings for emphasis — static top-to-bottom green gradient text"
    },
    "shineHover": {
      "className": "shine-hover",
      "animation": "diagonal-shine 0.6s ease-in-out forwards (on hover)",
      "gradient": "linear-gradient(45deg, transparent 30%, primary/0.06 45%, primary/0.12 50%, primary/0.06 55%, transparent 70%)",
      "usage": "Glass cards — diagonal shine sweep on hover"
    },
    "greenGlow": {
      "className": "green-glow",
      "boxShadow": "0 0 80px 20px hsl(var(--green-glow) / 0.15), 0 0 200px 60px hsl(var(--green-glow) / 0.05)",
      "usage": "Emphasis elements, card highlights"
    },
    "buttonRadialOverlays": [
      {
        "name": "Green gradient",
        "css": "radial-gradient(ellipse at center, #4B9C61 0%, #26523B 51%, black 98%)"
      },
      {
        "name": "Gold/warm gradient",
        "css": "radial-gradient(ellipse at center, rgba(190,156,92,0.50) 0%, rgba(165,113,73,0.50) 30%, transparent 100%)"
      }
    ]
  },
  "gradients": [
    {
      "name": "Team card overlay (green→black)",
      "css": "linear-gradient(180deg, rgba(93,226,147,0.5) 0%, rgba(0,0,0,1) 100%)"
    },
    {
      "name": "Image overlay (background→transparent)",
      "css": "linear-gradient(to top, hsl(148 70% 3.5%), hsl(148 70% 3.5% / 0.6), transparent)"
    },
    {
      "name": "Glass border gradient",
      "css": "linear-gradient(135deg, hsl(152 58% 35% / 0.8), rgba(255,255,255,0.3), hsl(152 65% 45% / 0.4))"
    },
    {
      "name": "Navbar backdrop",
      "css": "linear-gradient(to bottom, rgba(0,0,0,0.8), transparent)"
    },
    {
      "name": "Button overlay (green)",
      "css": "radial-gradient(ellipse at center, #4B9C61 0%, #26523B 51%, black 98%)"
    },
    {
      "name": "Button overlay (gold/warm)",
      "css": "radial-gradient(ellipse at center, rgba(190,156,92,0.50) 0%, rgba(165,113,73,0.50) 30%, transparent 100%)"
    }
  ],
  "buttons": [
    {
      "name": "Primary CTA",
      "className": "group relative inline-flex items-center overflow-hidden rounded-xl border border-white/20 bg-black/80 backdrop-blur-sm px-10 py-3 text-button text-white",
      "features": [
        "Radial gradient overlays (green + gold)",
        "Arrow reveals on hover",
        "Spring scale animation"
      ],
      "usage": "HeroSection, StatsSection"
    },
    {
      "name": "LinkedIn button",
      "className": "rounded-[19px] px-4 py-2 text-small font-semibold text-white",
      "style": {
        "backgroundColor": "rgba(75,156,97,1)"
      },
      "features": [
        "Linkedin icon (16px)",
        "Pill shape"
      ],
      "usage": "TeamCards"
    },
    {
      "name": "Text link with arrow",
      "className": "inline-flex items-center gap-2 text-body-small font-medium text-primary",
      "features": [
        "ArrowRight icon (14px)",
        "Gap increases on hover"
      ],
      "usage": "ServiceCards"
    },
    {
      "name": "Mobile hamburger",
      "className": "h-[50px] w-[50px] bg-primary rounded-full flex items-center justify-center",
      "features": [
        "Two 25px x 3px black bars",
        "10px gap between bars"
      ],
      "usage": "Navbar mobile"
    }
  ],
  "motion": {
    "entrance": {
      "initial": {
        "opacity": 0,
        "y": 30
      },
      "animate": {
        "opacity": 1,
        "y": 0
      },
      "transition": {
        "duration": 0.8,
        "ease": "easeOut"
      },
      "usage": "Default section entrance (whileInView, once: true)"
    },
    "stagger": {
      "description": "Items animate in sequence with incremental delay",
      "delayPerItem": "0.1–0.3s (typically i * 0.15)",
      "usage": "Card grids, list items"
    },
    "spring": {
      "stiff": {
        "stiffness": 400,
        "damping": 15
      },
      "soft": {
        "stiffness": 100,
        "damping": 30
      },
      "usage": "Hover interactions, button press"
    },
    "hoverScale": {
      "hover": {
        "scale": 1.02
      },
      "tap": {
        "scale": 0.98
      },
      "usage": "Buttons, cards"
    },
    "perspectiveTilt": {
      "initial": {
        "rotateY": -5
      },
      "animate": {
        "rotateY": 0
      },
      "hover": {
        "rotateY": 2
      },
      "style": "transformStyle: preserve-3d",
      "usage": "ServiceCards, FocusAreas"
    },
    "gentleTransition": {
      "duration": 1.28,
      "ease": [
        0.2,
        0,
        0,
        1
      ],
      "usage": "TeamCards — slow, smooth expansion"
    },
    "navIndicator": {
      "layoutId": "activeIndicator",
      "className": "h-0.5 bg-primary rounded-full",
      "transition": {
        "type": "spring",
        "stiffness": 400,
        "damping": 30
      },
      "usage": "Navbar active link underline"
    },
    "cssKeyframes": [
      {
        "name": "shimmer-sweep",
        "duration": "12s infinite",
        "description": "Background-position sweep for metallic-shimmer"
      },
      {
        "name": "diagonal-shine",
        "duration": "0.6s forwards",
        "description": "translateX/Y -100% → 100% for shine-hover"
      },
      {
        "name": "accordion-down / accordion-up",
        "duration": "variable",
        "description": "Height 0 ↔ var(--radix-accordion-content-height)"
      }
    ]
  },
  "icons": {
    "library": "lucide-react",
    "version": "0.462.0",
    "inUse": [
      {
        "name": "ArrowRight",
        "sizes": [
          14,
          16,
          18
        ],
        "usage": "Links (14), buttons (16), CTAs (18)"
      },
      {
        "name": "Linkedin",
        "sizes": [
          14,
          16
        ],
        "usage": "LinkedIn buttons and profile links"
      },
      {
        "name": "X",
        "sizes": [
          20,
          24
        ],
        "usage": "Mobile close button, navigation"
      }
    ],
    "sizeScale": {
      "inline": {
        "size": 14,
        "usage": "ServiceCards link arrows"
      },
      "button": {
        "size": 16,
        "usage": "LinkedIn button"
      },
      "cta": {
        "size": 18,
        "usage": "HeroSection, StatsSection"
      },
      "nav": {
        "sizes": [
          20,
          24
        ],
        "usage": "Mobile close button"
      }
    }
  },
  "logos": {
    "primary": {
      "path": "/logo.svg",
      "alt": "AND Capital",
      "format": "SVG",
      "sizes": {
        "desktop": {
          "width": 170,
          "height": 47
        },
        "mobile": {
          "width": 145,
          "height": 40
        }
      },
      "usage": "Navbar (desktop), mobile menu header. Preferred format for web use."
    },
    "pngVariants": [
      {
        "path": "/logos/white-logo---no-background.png",
        "description": "White logo on transparent background",
        "usage": "Dark backgrounds"
      },
      {
        "path": "/logos/black-logo---no-background.png",
        "description": "Black logo on transparent background",
        "usage": "Light backgrounds, print"
      },
      {
        "path": "/logos/color-logo---no-background.png",
        "description": "Full-color logo on transparent background",
        "usage": "General purpose"
      },
      {
        "path": "/logos/color-logo-with-background.png",
        "description": "Full-color logo with solid background",
        "usage": "Social media, email signatures"
      }
    ],
    "favicons": [
      {
        "path": "/favicon.ico",
        "size": "32x32"
      },
      {
        "path": "/favicon-16x16.png",
        "size": "16x16"
      },
      {
        "path": "/favicon-32x32.png",
        "size": "32x32"
      },
      {
        "path": "/apple-touch-icon.png",
        "size": "180x180"
      },
      {
        "path": "/android-chrome-192x192.png",
        "size": "192x192"
      },
      {
        "path": "/android-chrome-512x512.png",
        "size": "512x512"
      }
    ]
  },
  "socialMedia": {
    "linkedinVariants": [
      {
        "id": "v1-deep-understanding",
        "label": "V1 — Center Bold",
        "phrase": "Deep Understanding Wins",
        "highlights": [
          "Understanding"
        ]
      },
      {
        "id": "v2-important-risks",
        "label": "V2 — Right Safe + Gold Accent",
        "phrase": "The most important risks are the least understood",
        "highlights": [
          "risks"
        ]
      },
      {
        "id": "v3-disciplined-capital",
        "label": "V3 — Split Layout + Gold Divider",
        "phrase": "Disciplined Capital. Durable Value.",
        "highlights": [
          "Durable"
        ]
      },
      {
        "id": "v4-complexity-advantage",
        "label": "V4 — Right Safe",
        "phrase": "Complexity is the source of competitive advantage",
        "highlights": [
          "Complexity",
          "advantage"
        ]
      },
      {
        "id": "v5-complexity-obscures",
        "label": "V5 — Minimal Safe",
        "phrase": "We invest where complexity obscures value",
        "highlights": [
          "complexity",
          "value"
        ]
      },
      {
        "id": "v6-complexity-opportunity",
        "label": "V6 — Center Bold",
        "phrase": "Complexity Creates Opportunity",
        "highlights": [
          "Complexity"
        ]
      },
      {
        "id": "v7-risk-structure",
        "label": "V7 — Split Layout",
        "phrase": "Where Others See Risk, We See Structure",
        "highlights": [
          "Risk",
          "Structure"
        ]
      }
    ],
    "platforms": [
      {
        "platform": "LinkedIn",
        "asset": "Personal Banner",
        "dimensions": "1584 × 396",
        "ratio": "4:1",
        "file": "/social-media/linkedin-banner-personal.jpg"
      },
      {
        "platform": "LinkedIn",
        "asset": "Company Banner",
        "dimensions": "1128 × 191",
        "ratio": "~6:1",
        "file": "/social-media/linkedin-banner-company.png"
      },
      {
        "platform": "Twitter/X",
        "asset": "Header",
        "dimensions": "1500 × 500",
        "ratio": "3:1"
      },
      {
        "platform": "Open Graph",
        "asset": "OG Image",
        "dimensions": "1200 × 630",
        "ratio": "~1.91:1",
        "file": "/hero-background.png"
      },
      {
        "platform": "Instagram",
        "asset": "Post (Square)",
        "dimensions": "1080 × 1080",
        "ratio": "1:1"
      }
    ],
    "bannerDesignRules": {
      "accentColor": "#258d5c",
      "accentFont": "Playfair Display Bold Italic",
      "safeZone": "center 1000x250px",
      "logoSizing": {
        "personal": "100-110px (~28% of height)",
        "company": "50-55px (~28% of height)"
      },
      "layouts": [
        "center_bold",
        "right_safe",
        "split",
        "minimal_safe"
      ]
    }
  }
}