{
  "$schema": "https://lantern.finance/brand/tokens.json",
  "name": "Lantern Finance design tokens",
  "url": "https://lantern.finance/brand",
  "lastUpdated": "August 10, 2026",
  "rootFontSize": "10px",
  "color": {
    "core": {
      "primary": {
        "value": "#0F0F0F",
        "usage": "Default text color and near-black backgrounds."
      },
      "secondary": {
        "value": "#1461E0",
        "usage": "The Lantern blue. Primary CTAs, links, active states, the logo."
      },
      "background": {
        "value": "#FFFFFF",
        "usage": "Page background."
      },
      "content": {
        "value": "#FDFDFD",
        "usage": "Dashboard content area behind cards."
      },
      "white": {
        "value": "#F8F9FC",
        "usage": "Slightly off-white surfaces — cards, chips."
      },
      "black": {
        "value": "#0F0F0F",
        "usage": "Same value as primary; use when you mean explicit black text."
      }
    },
    "blue": {
      "blue-500": {
        "value": "#248FFE",
        "usage": "Hover state for primary buttons; lighter interactive accents."
      },
      "blue-600": {
        "value": "#1B78F4",
        "usage": "Mid-hover; gradient stops."
      },
      "blue-700": {
        "value": "#1461E0",
        "usage": "Same as secondary; use when you mean explicit blue text."
      }
    },
    "gray": {
      "gray-100": {
        "value": "#F7F9FB",
        "usage": "Lightest surface; alternate row backgrounds."
      },
      "gray-200": {
        "value": "#EFF3F7",
        "usage": "Input wrappers and chip backgrounds."
      },
      "gray-300": {
        "value": "#6E7187",
        "usage": "Secondary body text, muted labels."
      },
      "gray-400": {
        "value": "#9A9EB8",
        "usage": "Placeholder text, disabled text, eyebrow text."
      },
      "gray-500": {
        "value": "#D0D3E6",
        "usage": "Border color for inputs and cards."
      },
      "gray-600": {
        "value": "#6E7187",
        "usage": "Same value as gray-300; interchangeable."
      },
      "gray-700": {
        "value": "#434552",
        "usage": "Darker muted text; input label text."
      }
    },
    "status": {
      "healthy": {
        "value": "#14BA50",
        "usage": "Positive financial status; healthy LTV; success states."
      },
      "limeGreen": {
        "value": "#60FFAA",
        "usage": "Success buttons and positive value displays."
      },
      "moderate": {
        "value": "#5D260A",
        "usage": "Warning state text — approaching margin call."
      },
      "critical": {
        "value": "#A60C2E",
        "usage": "Danger / critical status text — margin call, liquidation risk."
      },
      "destructive": {
        "value": "#EF4444",
        "usage": "Error states and the destructive button variant. Declared as rgb(239, 68, 68)."
      }
    },
    "tints": {
      "paleBlue": {
        "value": "#E4ECFF",
        "usage": "Info badge backgrounds; dashboard sidebar accent."
      },
      "paleOrange": {
        "value": "#FFF5E4",
        "usage": "Warning badge backgrounds — pair with moderate."
      },
      "paleRed": {
        "value": "#FFEDF1",
        "usage": "Error badge backgrounds — pair with critical."
      }
    },
    "accent": {
      "aqua": {
        "value": "#00FFFF",
        "usage": "Decorative crypto-related accents only."
      }
    }
  },
  "gradient": {
    "dashboard-gradient": {
      "value": "radial-gradient(90% 100% at 45% 0%, #1461E0 0%, #095CE3 40%, #80BCFF 55%, #F7F9FB 65%, #D9D9D9 150%)",
      "usage": "Root dashboard layout wrapper. Falls back to a 180° linear gradient below 768px."
    },
    "summary-gradient": {
      "value": "linear-gradient(165deg, #1461E0 0%, #1652F0 60%, #248FFE 100%)",
      "usage": "High-emphasis CTA cards and banners on marketing pages."
    },
    "aurora-left": {
      "value": "radial-gradient(circle at center, rgba(20, 97, 224, 0.2) 0%, transparent 60%)",
      "usage": "Decorative blue glow behind marketing sections. Absolutely positioned, never interactive."
    },
    "aurora-right": {
      "value": "radial-gradient(circle at center, rgba(36, 143, 254, 0.12) 0%, transparent 60%)",
      "usage": "Lighter companion glow to aurora-left."
    },
    "borrow-hero-bg": {
      "value": "linear-gradient(180deg, #F3F7FF 0%, rgba(243, 247, 255, 0) 100%)",
      "usage": "Soft top-of-page wash behind hero sections."
    }
  },
  "font": {
    "font-sans": {
      "family": "Satoshi",
      "surface": "Both",
      "weights": "300, 400, 500, 700",
      "source": "Self-hosted woff2 — /public/fonts/Satoshi-*.woff2",
      "usage": "The default face. Body copy, UI text, buttons, forms. This is the fallback for anything unspecified."
    },
    "font-black": {
      "family": "Satoshi Black",
      "surface": "Marketing",
      "weights": "700",
      "source": "Self-hosted woff2 — /public/fonts/Satoshi-Black.woff2",
      "usage": "Hero headings and very large display text. Never below 26px."
    },
    "font-grotesk": {
      "family": "Space Grotesk",
      "surface": "Marketing",
      "weights": "300–700",
      "source": "next/font/google in app/layout.tsx — var(--font-space-grotesk)",
      "usage": "Display headings and large numerals on marketing and landing pages."
    },
    "font-manrope": {
      "family": "Manrope",
      "surface": "Dashboard",
      "weights": "400, 500, 600, 700",
      "source": "next/font/google in app/(main)/layout.tsx — var(--font-manrope)",
      "usage": "Body and UI text inside the authenticated dashboard. Applied at the layout root, so dashboard screens inherit it."
    }
  },
  "fontSize": {
    "2xs": {
      "value": "1.2rem",
      "px": "12px",
      "usage": "Footnotes, micro labels, monospace eyebrows."
    },
    "xs": {
      "value": "1.4rem",
      "px": "14px",
      "usage": "Eyebrows, card titles, input labels, captions."
    },
    "sm": {
      "value": "1.6rem",
      "px": "16px",
      "usage": "Body text, button labels, list items."
    },
    "base": {
      "value": "1.8rem",
      "px": "18px",
      "usage": "Larger body paragraphs."
    },
    "md": {
      "value": "2.6rem",
      "px": "26px",
      "usage": "Section subheadings, dashboard card titles."
    },
    "lg": {
      "value": "3.4rem",
      "px": "34px",
      "usage": "Section headings, page titles."
    },
    "xl": {
      "value": "4.2rem",
      "px": "42px",
      "usage": "Large headings."
    },
    "2xl": {
      "value": "4.4rem",
      "px": "44px",
      "usage": "Hero and display text."
    }
  },
  "radius": {
    "rounded-xl": {
      "value": "12px",
      "usage": "Inputs and large buttons."
    },
    "rounded-2xl": {
      "value": "16px",
      "usage": "Cards and panels."
    },
    "rounded-[15px]": {
      "value": "15px",
      "usage": "Icon tiles."
    },
    "rounded-[2rem]": {
      "value": "32px",
      "usage": "Large feature and reference cards."
    },
    "rounded-nav": {
      "value": "11px",
      "usage": "Navigation items."
    },
    "rounded-full": {
      "value": "9999px",
      "usage": "Pills, tags, avatars."
    }
  },
  "shadow": {
    "Dashboard card": {
      "value": "0px 15px 34px -4px #56588114",
      "usage": "Dashboard content panels."
    },
    ".calc-card-shadow": {
      "value": "0 1px 0 rgba(10,15,36,0.04), 0 12px 32px -16px rgba(10,15,36,0.1)",
      "usage": "Marketing reference cards and tables."
    },
    "Hover card (active)": {
      "value": "0 16px 36px -10px rgba(20,97,224,0.45)",
      "usage": "Hover state on interactive feature cards."
    },
    "Icon tile": {
      "value": "0 12px 26px -12px rgba(20,97,224,0.6)",
      "usage": "Elevated icon tiles."
    },
    "shadow-sidebar-item": {
      "value": "0 1px 3px rgba(15,42,92,0.12), 0 0 0 1px rgba(15,42,92,0.08)",
      "usage": "Active sidebar item."
    }
  },
  "breakpoint": {
    "xs": {
      "value": "320px",
      "usage": "Small mobile."
    },
    "md": {
      "value": "768px",
      "usage": "Tablet — the main layout pivot."
    },
    "lg": {
      "value": "1024px",
      "usage": "Laptop."
    },
    "xl": {
      "value": "1440px",
      "usage": "Desktop."
    },
    "2xl": {
      "value": "1500px",
      "usage": "Ultra-wide."
    }
  },
  "logo": [
    {
      "name": "Wordmark",
      "src": "/images/brand/lantern-wordmark.svg",
      "url": "https://lantern.finance/images/brand/lantern-wordmark.svg",
      "fileName": "lantern-wordmark.svg",
      "width": 481,
      "height": 109,
      "color": "#1461E0",
      "usage": "The default logo. Use it wherever the layout is wider than it is tall — site header, footer, email signatures, decks, partner listings."
    },
    {
      "name": "Wordmark with logo",
      "src": "/images/brand/lantern-wordmark-with-logo.svg",
      "url": "https://lantern.finance/images/brand/lantern-wordmark-with-logo.svg",
      "fileName": "lantern-wordmark-with-logo.svg",
      "width": 483,
      "height": 330,
      "color": "#1461E0",
      "usage": "The full lockup — mark above wordmark. Use it where the brand is being introduced and there is vertical room: covers, title slides, print, social profiles."
    },
    {
      "name": "Logo mark",
      "src": "/images/brand/lantern-logo.svg",
      "url": "https://lantern.finance/images/brand/lantern-logo.svg",
      "fileName": "lantern-logo.svg",
      "width": 224,
      "height": 303,
      "color": "#1461E0",
      "usage": "The lantern on its own. Use it only in square or tight spaces where the name is already established — app icons, avatars, favicons, loading states."
    }
  ]
}