Lantern Finance Logo

    Official Lantern brand guidelines

    How Lantern looks, sounds, and is used

    This is the canonical reference for the Lantern Finance brand across the marketing site and the product dashboard: logo assets, exact color values, typography for both surfaces, and the rules for using them. Everything here matches the tokens shipped in the codebase.

    Brand blue
    #1461E0
    Marketing type
    Space Grotesk / Satoshi
    Dashboard type
    Manrope
    Root font size
    10px

    Machine-readable versions: /brand/llms.txt (plain text) and /brand/tokens.json (design tokens). Both are generated from the same source as this page. Last updated August 10, 2026.

    Brand basics

    Who Lantern is

    Start here if you are writing about Lantern, building a partner page, or briefing a designer. Everything downstream follows from these.

    Lantern Finance brand basics: name, tagline, positioning, and channels.
    FieldValue
    Legal nameLantern Finance, Inc.
    Brand nameLantern Finance
    Short nameLantern
    TaglineBorrow, trade, and custody crypto with Lantern.
    What Lantern doesLantern is an all-in-one digital asset platform that lets customers trade, hold, and access liquidity against supported crypto without selling it. Customers can use crypto-backed credit lines to unlock USD or stablecoin funds while staying invested and managing their crypto in one place. Collateral is held at BitGo and never lent out or rehypothecated, with responsive, US-based support when customers need help.
    Websitehttps://lantern.finance
    X@LanternFi
    LinkedInhttps://www.linkedin.com/company/lantern-fi/

    Naming

    How the name is written in product, marketing, and partner copy.

    • Write the company name as Lantern Finance on first mention, then Lantern for the rest of the page.
    • Use the legal name Lantern Finance, Inc. only in contracts, filings, disclosures, and structured data — never in marketing or product copy.
    • Never write it as one word (Lanternfinance), all caps (LANTERN), or all lowercase (lantern) in body copy.
    • `@LanternFi` is the social handle only. Do not use it as a product or company name in copy.
    • Product surfaces are lowercase after the brand name: "the Lantern dashboard", "the Lantern app", not "Lantern Dashboard".
    • Never use the brand name as a verb ("lanterned") or a possessive of the logo mark.
    Color

    Palette

    Every color is a Tailwind token declared in packages/lib/tailwind.config.ts. Use the token, not the hex, in code — the hex values here are for design tools and third-party surfaces.

    Core palette

    The five values that carry almost every screen. If a color decision is unclear, it is one of these.

    #0F0F0F
    primary

    Default text color and near-black backgrounds.

    #1461E0
    secondary

    The Lantern blue. Primary CTAs, links, active states, the logo.

    #FFFFFF
    background

    Page background.

    #FDFDFD
    content

    Dashboard content area behind cards.

    #F8F9FC
    white

    Slightly off-white surfaces — cards, chips.

    #0F0F0F
    black

    Same value as primary; use when you mean explicit black text.

    Blue scale

    Interactive states and gradient stops. blue-700 is the same value as secondary.

    #248FFE
    blue-500

    Hover state for primary buttons; lighter interactive accents.

    #1B78F4
    blue-600

    Mid-hover; gradient stops.

    #1461E0
    blue-700

    Same as secondary; use when you mean explicit blue text.

    Gray scale

    Surfaces, borders, and muted text. Note that gray-300 and gray-600 are the same value.

    #F7F9FB
    gray-100

    Lightest surface; alternate row backgrounds.

    #EFF3F7
    gray-200

    Input wrappers and chip backgrounds.

    #6E7187
    gray-300

    Secondary body text, muted labels.

    #9A9EB8
    gray-400

    Placeholder text, disabled text, eyebrow text.

    #D0D3E6
    gray-500

    Border color for inputs and cards.

    #6E7187
    gray-600

    Same value as gray-300; interchangeable.

    #434552
    gray-700

    Darker muted text; input label text.

    Status colors

    Loan health, success, and error states. These carry meaning — never use them decoratively.

    #14BA50
    healthy

    Positive financial status; healthy LTV; success states.

    #60FFAA
    limeGreen

    Success buttons and positive value displays.

    #5D260A
    moderate

    Warning state text — approaching margin call.

    #A60C2E
    critical

    Danger / critical status text — margin call, liquidation risk.

    #EF4444
    destructive

    Error states and the destructive button variant. Declared as rgb(239, 68, 68).

    Pale tints

    Background fills for status badges. Always pair a tint with its matching status text color.

    #E4ECFF
    paleBlue

    Info badge backgrounds; dashboard sidebar accent.

    #FFF5E4
    paleOrange

    Warning badge backgrounds — pair with moderate.

    #FFEDF1
    paleRed

    Error badge backgrounds — pair with critical.

    Accents

    A rare, deliberate accent. Not legible as text at body sizes.

    #00FFFF
    aqua

    Decorative crypto-related accents only.

    Gradients

    Named gradient utilities from packages/lib/styles/globals.css. Do not hand-write new gradients.

    Dashboard

    Root dashboard layout wrapper. Falls back to a 180° linear gradient below 768px.

    Summary / CTA

    High-emphasis CTA cards and banners on marketing pages.

    Aurora left

    Decorative blue glow behind marketing sections. Absolutely positioned, never interactive.

    Aurora right

    Lighter companion glow to aurora-left.

    Borrow hero

    Soft top-of-page wash behind hero sections.

    Using color

    Do

    • Use `secondary` (#1461E0) for the one primary action on a screen.
    • Use gray-300 or gray-700 for muted body text.
    • Reserve status colors for real loan or transaction state.
    • Pair pale tints with their matching status text color.
    • Check text contrast against its actual background.

    Don't

    • Put two competing blue CTAs in the same view.
    • Use gray-400 for body copy — it is a placeholder and disabled tone.
    • Use healthy green or critical red as a decorative accent.
    • Mix paleRed with healthy text, or any other cross pairing.
    • Set aqua or limeGreen as text on white — neither passes contrast.
    Typography

    Type system

    Two surfaces, four faces. The marketing site leads with Space Grotesk over Satoshi; the dashboard runs on Manrope. The root font size is 10px, so 1rem = 10px.

    Font families

    SatoshiBoth

    Borrow without selling

    1234567890 — $48,250.00 — 50% LTV

    Weights
    300, 400, 500, 700
    Source
    Self-hosted woff2 — /public/fonts/Satoshi-*.woff2

    The default face. Body copy, UI text, buttons, forms. This is the fallback for anything unspecified.

    Satoshi BlackMarketing

    Borrow without selling

    1234567890 — $48,250.00 — 50% LTV

    Weights
    700
    Source
    Self-hosted woff2 — /public/fonts/Satoshi-Black.woff2

    Hero headings and very large display text. Never below 26px.

    Space GroteskMarketing

    Borrow without selling

    1234567890 — $48,250.00 — 50% LTV

    Weights
    300–700
    Source
    next/font/google in app/layout.tsx — var(--font-space-grotesk)

    Display headings and large numerals on marketing and landing pages.

    ManropeDashboard

    Borrow without selling

    1234567890 — $48,250.00 — 50% LTV

    Weights
    400, 500, 600, 700
    Source
    next/font/google in app/(main)/layout.tsx — var(--font-manrope)

    Body and UI text inside the authenticated dashboard. Applied at the layout root, so dashboard screens inherit it.

    Type scale

    Shared by both surfaces. Sizes are rem values against the 10px root.

    Lantern type scale tokens, rem values, pixel values, and usage.
    TokenClassSizeSpecimenUsage
    2xstext-2xs1.2rem / 12pxAaFootnotes, micro labels, monospace eyebrows.
    xstext-xs1.4rem / 14pxAaEyebrows, card titles, input labels, captions.
    smtext-sm1.6rem / 16pxAaBody text, button labels, list items.
    basetext-base1.8rem / 18pxAaLarger body paragraphs.
    mdtext-md2.6rem / 26pxAaSection subheadings, dashboard card titles.
    lgtext-lg3.4rem / 34pxAaSection headings, page titles.
    xltext-xl4.2rem / 42pxAaLarge headings.
    2xltext-2xl4.4rem / 44pxAaHero and display text.

    Fluid display utilities

    Marketing headings scale with the viewport. Use these instead of fixed hero sizes.

    Fluid display text utilities, size ranges, and letter spacing.
    ClassSize rangeLetter spacingUsage
    .landing-hero-heading44px → 80px-0.04emLanding page hero.
    .text-display-hero38px → 72px-0.04emGet-a-loan hero.
    .landing-section-heading28px → 50px-0.025emLanding page section headings.
    .text-display-section32px → 52px-0.03emSection-level display text.
    .faq-hero-heading40px → 90px-0.03emFAQ hero.
    .faq-contact-heading28px → 56px-0.03emFAQ contact section heading.
    .text-calc-bignum36px → 46px-0.035emCalculator result numbers.
    .ldx-calc-result-num36px → 52px-0.03emLanding page calculator result.
    .landing-stat-num34px → 46px-0.03emStat display numbers.

    Typography component

    Prefer <Typography variant='…'> from @packages/lib/components/typography over hand-written heading classes.

    Typography component variants and the classes each one applies.
    VariantClassesUsage
    h1font-black text-lg md:text-xl lg:text-2xl leading-none text-blackMain page heading.
    h2font-bold text-md md:text-xl leading-[1.1] text-blackSection heading.
    h3font-bold text-sm md:text-md text-blackSubsection heading.
    h4font-bold text-sm md:text-[2rem] text-blackMinor heading.
    ptext-sm md:text-base font-mediumBody paragraph.
    eyebrowtext-xs uppercase font-bold text-gray-400Overline above a heading.
    cardTitletext-xs uppercase font-bold text-secondaryCard header titles.
    pageTitletext-xs uppercase font-bold text-blackPage-level section titles.
    inputLabeltext-xs font-semibold text-blue-200Labels above form inputs.
    dashboardLabeltext-sm md:text-base text-black opacity-50 font-boldMuted labels inside the dashboard.
    footnotetext-xsFootnotes and captions.
    smallLabeltext-sm text-muted-foregroundSubtle secondary label.

    Using type

    Do

    • Use `<Typography variant="…">` from @packages/lib/components/typography.
    • Use fluid display utilities for marketing headings.
    • Let dashboard screens inherit Manrope from the layout root.
    • Remember the root font size is 10px, so 1rem = 10px.
    • Set one display face per screen — Space Grotesk or Satoshi Black.

    Don't

    • Hand-roll heading classes on a raw <h1>.
    • Set a fixed 80px hero that overflows on mobile.
    • Override the font family on an individual dashboard screen.
    • Assume Tailwind default rem math when adding arbitrary sizes.
    • Alternate display faces between sections of the same page.
    UI foundations

    Shape, depth, space, and motion

    The rest of the visual language. These tokens keep marketing pages and the dashboard recognizably the same product.

    Corner radii

    Corner radius tokens and where each is used.
    NameValueUsage
    rounded-xl12pxInputs and large buttons.
    rounded-2xl16pxCards and panels.
    rounded-[15px]15pxIcon tiles.
    rounded-[2rem]32pxLarge feature and reference cards.
    rounded-nav11pxNavigation items.
    rounded-full9999pxPills, tags, avatars.

    Shadows

    Elevation is subtle and blue-tinted. Cards lift; they do not float.

    Shadow values and where each is used.
    NameValueUsage
    Dashboard card0px 15px 34px -4px #56588114Dashboard content panels.
    .calc-card-shadow0 1px 0 rgba(10,15,36,0.04), 0 12px 32px -16px rgba(10,15,36,0.1)Marketing reference cards and tables.
    Hover card (active)0 16px 36px -10px rgba(20,97,224,0.45)Hover state on interactive feature cards.
    Icon tile0 12px 26px -12px rgba(20,97,224,0.6)Elevated icon tiles.
    shadow-sidebar-item0 1px 3px rgba(15,42,92,0.12), 0 0 0 1px rgba(15,42,92,0.08)Active sidebar item.

    Spacing utilities

    Layout spacing utility classes and where each is used.
    NameValueUsage
    .site-paddingpx-8 md:px-16 lg:px-20 xl:px-[104px]Horizontal page padding on standard layouts.
    .px-page-xpadding-inline: max(2rem, 7vw)Fluid horizontal padding on reference and landing pages.
    .section-marginmb-32 md:mb-52Gap between major page sections.
    .section-margin-smmb-24 lg:mb-32Smaller gap between sections.
    .page-y-marginmy-12 md:my-24Vertical margin for page content blocks.

    Breakpoints

    Responsive breakpoints.
    NameValueUsage
    xs320pxSmall mobile.
    md768pxTablet — the main layout pivot.
    lg1024pxLaptop.
    xl1440pxDesktop.
    2xl1500pxUltra-wide.

    Motion

    Motion is short and functional. Nothing decorative animates for longer than it takes to read it.

    Animation durations, easings, and where each is used.
    NameValueUsage
    accordion-down / up0.2s ease-outAccordion and collapsible open/close.
    .animate-fade-up0.22s easeQuick entrance for content blocks.
    hover-card transition0.35s ease-outBorder, shadow, and text color on interactive cards.
    .animate-floaty3s ease-in-out infiniteFloating decorative elements.
    comparison-marquee40s linear infiniteHorizontal comparison slider.
    vault-spin1s linear infiniteLoading spinner.
    Voice and writing

    How Lantern sounds

    Lantern explains borrowing money against volatile collateral. Clarity is a safety feature, not a style preference.

    Plain

    Short sentences, concrete nouns. Explain a loan the way you would to a friend who has never taken one.

    YesBorrow dollars against your crypto. Keep your coins.

    NoLeverage your digital asset portfolio to unlock liquidity solutions.

    Specific

    Numbers beat adjectives. Name the rate, the LTV, the grace period.

    Yes72-hour grace period after a margin call.

    NoGenerous time to respond to market moves.

    Straight about risk

    Never bury the downside. Collateralized lending carries liquidation risk and we say so.

    YesLiquidation may occur if LTV exceeds 75% and the grace period has expired.

    NoYour assets are always safe with us.

    Calm

    No hype, no urgency tactics, no exclamation marks in product copy.

    YesCurrent rates and LTVs are published on the rates page.

    NoUnbeatable rates — act now!

    Writing rules

    Do

    • Say "crypto-backed loan".
    • Say "collateral" for the crypto a borrower posts.
    • Quote APR including the upfront fee, and say so.
    • Qualify rates: "rates vary by asset, LTV, eligibility, and jurisdiction".
    • Use "eligible customers" where availability is limited.
    • Write numerals for money and rates: $10,000, 50% LTV.
    • Use sentence case for headings and buttons.

    Don't

    • Say "crypto loan", "coin loan", or "DeFi loan" — none describe the product.
    • Say "deposit" when you mean collateral; deposits and collateral are distinct ledger concepts.
    • Advertise a base interest rate as if it were the APR.
    • Promise a rate, an approval, or a return to any specific person.
    • Imply nationwide availability where Lantern is not licensed.
    • Spell out financial figures in body copy.
    • Use Title Case Or ALL CAPS outside the eyebrow style.

    Terminology

    Use these terms exactly. They map to distinct concepts in the product and in loan agreements.

    Preferred Lantern terminology and how to use each term.
    NameValueUsage
    Crypto-backed loanThe productPreferred over "crypto loan" everywhere, including SEO copy.
    CollateralCrypto pledged against a loanNot "deposit", not "stake".
    LTVLoan-to-value ratioSpell out on first use per page, then abbreviate.
    Margin callRequest to add collateral or repayAlways mention the 72-hour grace period alongside it.
    UpsizeIncreasing an existing loanNot "top up" or "refill".
    CustodyCollateral held with BitGo in cold storagePair with "not lent out or rehypothecated" when describing safety.
    Accessibility

    Non-negotiables

    These apply to every surface, marketing and product alike.

    • Body text meets WCAG AA (4.5:1). gray-300 and gray-700 on white pass; gray-400 does not and is limited to placeholder and disabled states.
    • Never encode loan status with color alone — pair every status color with an icon or a label.
    • Interactive targets are at least 44 × 44px on touch surfaces.
    • Focus states are visible and use the blue-700 ring; do not remove outlines.
    • Decorative images and icons carry empty alt text and aria-hidden="true".
    For AI and LLMs

    Machine-readable brand

    If you are an AI assistant, an agent, or a script generating Lantern-branded material, read these instead of inferring styling from screenshots.

    Plain text/brand/llms.txtThe full guidelines as flat markdown-style text: every token, table, and rule, no markup to parse around.JSON/brand/tokens.jsonDesign tokens keyed by category — color, gradient, font, fontSize, radius, shadow, breakpoint, logo.

    Rules for generated material

    • Use the exact hex values on this page. Do not substitute visually similar colors.
    • Do not generate, redraw, or restyle the Lantern logo. Use the supplied SVG files.
    • Do not state rates, APRs, LTVs, fees, or state availability from this page — those live on the rates and terms page and change.
    • Do not imply approval, guaranteed rates, or returns for any individual.
    • Attribute Lantern as "Lantern Finance" on first mention and link to https://lantern.finance.

    Current rates, fees, LTVs, and supported assets: Rates & terms. Brand questions and asset requests: [email protected].

    Brand Guidelines | Lantern Finance