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.
Who Lantern is
Start here if you are writing about Lantern, building a partner page, or briefing a designer. Everything downstream follows from these.
| Field | Value |
|---|---|
| Legal name | Lantern Finance, Inc. |
| Brand name | Lantern Finance |
| Short name | Lantern |
| Tagline | Borrow, trade, and custody crypto with Lantern. |
| What Lantern does | 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 |
| https://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.
Wordmark, lockup, and mark
Three files, one identity. These are the only approved Lantern logos — pick the one that fits the space and use it as supplied.
The default logo. Use it wherever the layout is wider than it is tall — site header, footer, email signatures, decks, partner listings.
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.
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.
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. |
Using the logo
Do
- Use the supplied SVG at its native proportions.
- Place the logo on white, gray-100, or paleBlue.
- Pick the lockup, wordmark, or mark to fit the space.
- Keep the fill at #1461E0.
- Let the background show through the transparent SVG.
Don't
- Stretch, condense, or rotate the logo.
- Place the logo on a busy photo or a saturated blue fill.
- Rebuild a lockup by combining the mark and wordmark yourself.
- Recolor the logo to any other hex, including the other brand blues.
- Add shadows, outlines, gradients, or glows to the logo.
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.
Default text color and near-black backgrounds.
The Lantern blue. Primary CTAs, links, active states, the logo.
Page background.
Dashboard content area behind cards.
Slightly off-white surfaces — cards, chips.
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.
Hover state for primary buttons; lighter interactive accents.
Mid-hover; gradient stops.
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.
Lightest surface; alternate row backgrounds.
Input wrappers and chip backgrounds.
Secondary body text, muted labels.
Placeholder text, disabled text, eyebrow text.
Border color for inputs and cards.
Same value as gray-300; interchangeable.
Darker muted text; input label text.
Status colors
Loan health, success, and error states. These carry meaning — never use them decoratively.
Positive financial status; healthy LTV; success states.
Success buttons and positive value displays.
Warning state text — approaching margin call.
Danger / critical status text — margin call, liquidation risk.
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.
Info badge backgrounds; dashboard sidebar accent.
Warning badge backgrounds — pair with moderate.
Error badge backgrounds — pair with critical.
Accents
A rare, deliberate accent. Not legible as text at body sizes.
Decorative crypto-related accents only.
Gradients
Named gradient utilities from packages/lib/styles/globals.css. Do not hand-write new gradients.
Root dashboard layout wrapper. Falls back to a 180° linear gradient below 768px.
High-emphasis CTA cards and banners on marketing pages.
Decorative blue glow behind marketing sections. Absolutely positioned, never interactive.
Lighter companion glow to aurora-left.
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.
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
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.
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.
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.
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.
| Token | Class | Size | Specimen | Usage |
|---|---|---|---|---|
| 2xs | text-2xs | 1.2rem / 12px | Aa | Footnotes, micro labels, monospace eyebrows. |
| xs | text-xs | 1.4rem / 14px | Aa | Eyebrows, card titles, input labels, captions. |
| sm | text-sm | 1.6rem / 16px | Aa | Body text, button labels, list items. |
| base | text-base | 1.8rem / 18px | Aa | Larger body paragraphs. |
| md | text-md | 2.6rem / 26px | Aa | Section subheadings, dashboard card titles. |
| lg | text-lg | 3.4rem / 34px | Aa | Section headings, page titles. |
| xl | text-xl | 4.2rem / 42px | Aa | Large headings. |
| 2xl | text-2xl | 4.4rem / 44px | Aa | Hero and display text. |
Fluid display utilities
Marketing headings scale with the viewport. Use these instead of fixed hero sizes.
| 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
Prefer <Typography variant='…'> from @packages/lib/components/typography over hand-written heading classes.
| 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. |
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.
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
| 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
Elevation is subtle and blue-tinted. Cards lift; they do not float.
| 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
Motion is short and functional. Nothing decorative animates for longer than it takes to read it.
| 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. |
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.
| 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. |
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".
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.
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].