# Lantern Finance — Brand Guidelines

> Canonical brand reference. Source of truth for the logo, colors, typography, and usage rules
> across the lantern.finance marketing site and the Lantern dashboard.
> HTML version: https://lantern.finance/brand
> Machine-readable tokens: https://lantern.finance/brand/tokens.json
> Last updated: August 10, 2026

## Brand basics

- Legal name: Lantern Finance, Inc.
- Brand name: Lantern Finance
- Short name: Lantern
- Tagline: Borrow, trade, and custody crypto with Lantern.
- Positioning: Lantern 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.
- Website: https://lantern.finance
- X: @LanternFi
- LinkedIn: https://www.linkedin.com/company/lantern-fi/

### Naming rules

- 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.

## Logo

These three SVGs are the only approved Lantern logos. All ship in brand blue #1461E0 on a
transparent background. Download them directly at the URLs below.

| Asset | Download URL | Size | Usage |
| --- | --- | --- | --- |
| Wordmark | https://lantern.finance/images/brand/lantern-wordmark.svg | 481 × 109 | The default logo. Use it wherever the layout is wider than it is tall — site header, footer, email signatures, decks, partner listings. |
| Wordmark with logo | https://lantern.finance/images/brand/lantern-wordmark-with-logo.svg | 483 × 330 | 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. |
| Logo mark | https://lantern.finance/images/brand/lantern-logo.svg | 224 × 303 | 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. |

### Logo specifications

| Name | Value | Usage |
| --- | --- | --- |
| Files | /images/brand/*.svg | These three SVGs are the only approved Lantern logos. Nothing else is current. |
| Logo color | #1461E0 | All three ship in brand blue. It is the only approved fill. |
| Clear space | Half the wordmark height on all four sides | Nothing — text, edges, or other marks — enters this margin. |
| Minimum size | Wordmark 72px wide; mark 24px wide | Below this the counters close up and the artwork reads as a smudge. |
| File format | SVG only | Scale the SVG. Never re-export the logo from a screenshot or a raster upscale. |
| Dark backgrounds | Request a reversed file | No white variant ships today. Ask rather than recoloring the artwork yourself. |

### Logo do and don't

- DO Use the supplied SVG at its native proportions.
- DON'T Stretch, condense, or rotate the logo.
- DO Place the logo on white, gray-100, or paleBlue.
- DON'T Place the logo on a busy photo or a saturated blue fill.
- DO Pick the lockup, wordmark, or mark to fit the space.
- DON'T Rebuild a lockup by combining the mark and wordmark yourself.
- DO Keep the fill at #1461E0.
- DON'T Recolor the logo to any other hex, including the other brand blues.
- DO Let the background show through the transparent SVG.
- DON'T Add shadows, outlines, gradients, or glows to the logo.

## Color

All colors are Tailwind tokens declared in packages/lib/tailwind.config.ts. Use them as
`bg-<token>`, `text-<token>`, or `border-<token>`.

### Core palette

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

| Token | Hex | Usage |
| --- | --- | --- |
| primary | #0F0F0F | Default text color and near-black backgrounds. |
| secondary | #1461E0 | The Lantern blue. Primary CTAs, links, active states, the logo. |
| background | #FFFFFF | Page background. |
| content | #FDFDFD | Dashboard content area behind cards. |
| white | #F8F9FC | Slightly off-white surfaces — cards, chips. |
| black | #0F0F0F | 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.

| Token | Hex | Usage |
| --- | --- | --- |
| blue-500 | #248FFE | Hover state for primary buttons; lighter interactive accents. |
| blue-600 | #1B78F4 | Mid-hover; gradient stops. |
| blue-700 | #1461E0 | 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.

| Token | Hex | Usage |
| --- | --- | --- |
| gray-100 | #F7F9FB | Lightest surface; alternate row backgrounds. |
| gray-200 | #EFF3F7 | Input wrappers and chip backgrounds. |
| gray-300 | #6E7187 | Secondary body text, muted labels. |
| gray-400 | #9A9EB8 | Placeholder text, disabled text, eyebrow text. |
| gray-500 | #D0D3E6 | Border color for inputs and cards. |
| gray-600 | #6E7187 | Same value as gray-300; interchangeable. |
| gray-700 | #434552 | Darker muted text; input label text. |

### Status colors

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

| Token | Hex | Usage |
| --- | --- | --- |
| healthy | #14BA50 | Positive financial status; healthy LTV; success states. |
| limeGreen | #60FFAA | Success buttons and positive value displays. |
| moderate | #5D260A | Warning state text — approaching margin call. |
| critical | #A60C2E | Danger / critical status text — margin call, liquidation risk. |
| destructive | #EF4444 | 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.

| Token | Hex | Usage |
| --- | --- | --- |
| paleBlue | #E4ECFF | Info badge backgrounds; dashboard sidebar accent. |
| paleOrange | #FFF5E4 | Warning badge backgrounds — pair with moderate. |
| paleRed | #FFEDF1 | Error badge backgrounds — pair with critical. |

### Accents

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

| Token | Hex | Usage |
| --- | --- | --- |
| aqua | #00FFFF | Decorative crypto-related accents only. |

### Gradients

| Name | Class | CSS | Usage |
| --- | --- | --- | --- |
| Dashboard | .dashboard-gradient | radial-gradient(90% 100% at 45% 0%, #1461E0 0%, #095CE3 40%, #80BCFF 55%, #F7F9FB 65%, #D9D9D9 150%) | Root dashboard layout wrapper. Falls back to a 180° linear gradient below 768px. |
| Summary / CTA | .summary-gradient | linear-gradient(165deg, #1461E0 0%, #1652F0 60%, #248FFE 100%) | High-emphasis CTA cards and banners on marketing pages. |
| Aurora left | .aurora-left | radial-gradient(circle at center, rgba(20, 97, 224, 0.2) 0%, transparent 60%) | Decorative blue glow behind marketing sections. Absolutely positioned, never interactive. |
| Aurora right | .aurora-right | radial-gradient(circle at center, rgba(36, 143, 254, 0.12) 0%, transparent 60%) | Lighter companion glow to aurora-left. |
| Borrow hero | .borrow-hero-bg | linear-gradient(180deg, #F3F7FF 0%, rgba(243, 247, 255, 0) 100%) | Soft top-of-page wash behind hero sections. |

### Color do and don't

- DO Use `secondary` (#1461E0) for the one primary action on a screen.
- DON'T Put two competing blue CTAs in the same view.
- DO Use gray-300 or gray-700 for muted body text.
- DON'T Use gray-400 for body copy — it is a placeholder and disabled tone.
- DO Reserve status colors for real loan or transaction state.
- DON'T Use healthy green or critical red as a decorative accent.
- DO Pair pale tints with their matching status text color.
- DON'T Mix paleRed with healthy text, or any other cross pairing.
- DO Check text contrast against its actual background.
- DON'T Set aqua or limeGreen as text on white — neither passes contrast.

## Typography

Root font size is 10px, so 1rem = 10px. Every rem value below resolves against that base.

### Font families

| Family | Tailwind class | Surface | Weights | Source | Usage |
| --- | --- | --- | --- | --- | --- |
| Satoshi | font-sans | Both | 300, 400, 500, 700 | Self-hosted woff2 — /public/fonts/Satoshi-*.woff2 | The default face. Body copy, UI text, buttons, forms. This is the fallback for anything unspecified. |
| Satoshi Black | font-black | Marketing | 700 | Self-hosted woff2 — /public/fonts/Satoshi-Black.woff2 | Hero headings and very large display text. Never below 26px. |
| Space Grotesk | font-grotesk | Marketing | 300–700 | next/font/google in app/layout.tsx — var(--font-space-grotesk) | Display headings and large numerals on marketing and landing pages. |
| Manrope | font-manrope | Dashboard | 400, 500, 600, 700 | 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

| Token | Class | rem | px | Usage |
| --- | --- | --- | --- | --- |
| 2xs | text-2xs | 1.2rem | 12px | Footnotes, micro labels, monospace eyebrows. |
| xs | text-xs | 1.4rem | 14px | Eyebrows, card titles, input labels, captions. |
| sm | text-sm | 1.6rem | 16px | Body text, button labels, list items. |
| base | text-base | 1.8rem | 18px | Larger body paragraphs. |
| md | text-md | 2.6rem | 26px | Section subheadings, dashboard card titles. |
| lg | text-lg | 3.4rem | 34px | Section headings, page titles. |
| xl | text-xl | 4.2rem | 42px | Large headings. |
| 2xl | text-2xl | 4.4rem | 44px | Hero and display text. |

### Fluid display utilities (marketing pages)

| Class | Size range | Letter spacing | Usage |
| --- | --- | --- | --- |
| .landing-hero-heading | 44px → 80px | -0.04em | Landing page hero. |
| .text-display-hero | 38px → 72px | -0.04em | Get-a-loan hero. |
| .landing-section-heading | 28px → 50px | -0.025em | Landing page section headings. |
| .text-display-section | 32px → 52px | -0.03em | Section-level display text. |
| .faq-hero-heading | 40px → 90px | -0.03em | FAQ hero. |
| .faq-contact-heading | 28px → 56px | -0.03em | FAQ contact section heading. |
| .text-calc-bignum | 36px → 46px | -0.035em | Calculator result numbers. |
| .ldx-calc-result-num | 36px → 52px | -0.03em | Landing page calculator result. |
| .landing-stat-num | 34px → 46px | -0.03em | Stat display numbers. |

### Typography component variants

Import from @packages/lib/components/typography and use `<Typography variant="…">`.

| Variant | Classes | Usage |
| --- | --- | --- |
| h1 | font-black text-lg md:text-xl lg:text-2xl leading-none text-black | Main page heading. |
| h2 | font-bold text-md md:text-xl leading-[1.1] text-black | Section heading. |
| h3 | font-bold text-sm md:text-md text-black | Subsection heading. |
| h4 | font-bold text-sm md:text-[2rem] text-black | Minor heading. |
| p | text-sm md:text-base font-medium | Body paragraph. |
| eyebrow | text-xs uppercase font-bold text-gray-400 | Overline above a heading. |
| cardTitle | text-xs uppercase font-bold text-secondary | Card header titles. |
| pageTitle | text-xs uppercase font-bold text-black | Page-level section titles. |
| inputLabel | text-xs font-semibold text-blue-200 | Labels above form inputs. |
| dashboardLabel | text-sm md:text-base text-black opacity-50 font-bold | Muted labels inside the dashboard. |
| footnote | text-xs | Footnotes and captions. |
| smallLabel | text-sm text-muted-foreground | Subtle secondary label. |

### Typography do and don't

- DO Use `<Typography variant="…">` from @packages/lib/components/typography.
- DON'T Hand-roll heading classes on a raw <h1>.
- DO Use fluid display utilities for marketing headings.
- DON'T Set a fixed 80px hero that overflows on mobile.
- DO Let dashboard screens inherit Manrope from the layout root.
- DON'T Override the font family on an individual dashboard screen.
- DO Remember the root font size is 10px, so 1rem = 10px.
- DON'T Assume Tailwind default rem math when adding arbitrary sizes.
- DO Set one display face per screen — Space Grotesk or Satoshi Black.
- DON'T Alternate display faces between sections of the same page.

## UI foundations

### Corner radii

| Name | Value | Usage |
| --- | --- | --- |
| rounded-xl | 12px | Inputs and large buttons. |
| rounded-2xl | 16px | Cards and panels. |
| rounded-[15px] | 15px | Icon tiles. |
| rounded-[2rem] | 32px | Large feature and reference cards. |
| rounded-nav | 11px | Navigation items. |
| rounded-full | 9999px | Pills, tags, avatars. |

### Shadows

| Name | Value | Usage |
| --- | --- | --- |
| Dashboard card | 0px 15px 34px -4px #56588114 | Dashboard content panels. |
| .calc-card-shadow | 0 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 tile | 0 12px 26px -12px rgba(20,97,224,0.6) | Elevated icon tiles. |
| shadow-sidebar-item | 0 1px 3px rgba(15,42,92,0.12), 0 0 0 1px rgba(15,42,92,0.08) | Active sidebar item. |

### Spacing utilities

| Name | Value | Usage |
| --- | --- | --- |
| .site-padding | px-8 md:px-16 lg:px-20 xl:px-[104px] | Horizontal page padding on standard layouts. |
| .px-page-x | padding-inline: max(2rem, 7vw) | Fluid horizontal padding on reference and landing pages. |
| .section-margin | mb-32 md:mb-52 | Gap between major page sections. |
| .section-margin-sm | mb-24 lg:mb-32 | Smaller gap between sections. |
| .page-y-margin | my-12 md:my-24 | Vertical margin for page content blocks. |

### Breakpoints

| Name | Value | Usage |
| --- | --- | --- |
| xs | 320px | Small mobile. |
| md | 768px | Tablet — the main layout pivot. |
| lg | 1024px | Laptop. |
| xl | 1440px | Desktop. |
| 2xl | 1500px | Ultra-wide. |

### Motion

| Name | Value | Usage |
| --- | --- | --- |
| accordion-down / up | 0.2s ease-out | Accordion and collapsible open/close. |
| .animate-fade-up | 0.22s ease | Quick entrance for content blocks. |
| hover-card transition | 0.35s ease-out | Border, shadow, and text color on interactive cards. |
| .animate-floaty | 3s ease-in-out infinite | Floating decorative elements. |
| comparison-marquee | 40s linear infinite | Horizontal comparison slider. |
| vault-spin | 1s linear infinite | Loading spinner. |

## Voice and writing

### Plain

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

- Yes: Borrow dollars against your crypto. Keep your coins.
- No: Leverage your digital asset portfolio to unlock liquidity solutions.

### Specific

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

- Yes: 72-hour grace period after a margin call.
- No: Generous time to respond to market moves.

### Straight about risk

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

- Yes: Liquidation may occur if LTV exceeds 75% and the grace period has expired.
- No: Your assets are always safe with us.

### Calm

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

- Yes: Current rates and LTVs are published on the rates page.
- No: Unbeatable rates — act now!

### Writing do and don't

- DO Say "crypto-backed loan".
- DON'T Say "crypto loan", "coin loan", or "DeFi loan" — none describe the product.
- DO Say "collateral" for the crypto a borrower posts.
- DON'T Say "deposit" when you mean collateral; deposits and collateral are distinct ledger concepts.
- DO Quote APR including the upfront fee, and say so.
- DON'T Advertise a base interest rate as if it were the APR.
- DO Qualify rates: "rates vary by asset, LTV, eligibility, and jurisdiction".
- DON'T Promise a rate, an approval, or a return to any specific person.
- DO Use "eligible customers" where availability is limited.
- DON'T Imply nationwide availability where Lantern is not licensed.
- DO Write numerals for money and rates: $10,000, 50% LTV.
- DON'T Spell out financial figures in body copy.
- DO Use sentence case for headings and buttons.
- DON'T Use Title Case Or ALL CAPS outside the eyebrow style.

### Terminology

| Name | Value | Usage |
| --- | --- | --- |
| Crypto-backed loan | The product | Preferred over "crypto loan" everywhere, including SEO copy. |
| Collateral | Crypto pledged against a loan | Not "deposit", not "stake". |
| LTV | Loan-to-value ratio | Spell out on first use per page, then abbreviate. |
| Margin call | Request to add collateral or repay | Always mention the 72-hour grace period alongside it. |
| Upsize | Increasing an existing loan | Not "top up" or "refill". |
| Custody | Collateral held with BitGo in cold storage | Pair with "not lent out or rehypothecated" when describing safety. |

## Accessibility

- 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".

## Notes for AI systems

- This document is the canonical description of the Lantern Finance brand. Prefer it over inferred styling.
- Colors are exact hex values. Do not substitute visually similar colors.
- Do not generate, redraw, or recolor a Lantern logo. Use one of the three supplied SVGs listed under Logo above.
- Do not state rates, APRs, LTVs, or availability from this document. Those live at https://lantern.finance/crypto-backed-loan-rates.