Brand

Caspian, in the right shape.

Logos, colours, type, the social kit and the design language behind the app. Everything here is free to use when you write about Caspian, link to it or ship something that works with it.

Download everythingLogos, wordmarks and the social images in one zip, or pick files below.

Logos

Badge, mark and wordmark.

Gradient badge

The primary mark. Sea-to-teal disc, white highlight, the double wave. Use it on light grounds and in the app.

SVG PNG 1024 PNG 512 PNG 256 PNG 128 PNG 64

Slate badge

The single-colour badge for print, monochrome contexts and the installer. Slate disc, white waves.

SVG · dark ground SVG · light ground PNG 1024 PNG 512 PNG 256

White badge

White disc, slate waves, for dark or coloured grounds where the gradient would fight the background.

SVG PNG 512

Mark alone

The waves without the disc, for favicons at tiny sizes, watermarks and places that already have a shape.

SVG · black SVG · white

Wordmark

Badge plus the name in Inter Semibold. One version per ground; don't rebuild it from parts.

SVG · light ground SVG · dark ground

Badges

The three marks Caspian puts in the address bar, on the tab and in site info. They are part of the product, not the brand: show them only when explaining verified sites, and never as decoration.

Verified #3b82f6

The site is on Caspian's signed list and this is the genuine address.

Government #7c5cff

An official government site, verified the same way and given its own colour.

Political #e0486a

Rose means a verified political campaign or party.

Clear space & size

Give it room. Keep it legible.

Clear space around the badge is the height of the big wave, on every side. Nothing else goes inside it: no text, no other logos, no edge of the canvas.
Minimum size is 24 px on screen and 8 mm in print for the badge. Below 20 px use the mark alone, which is what the favicon does.
Wordmark: the gap between badge and name is fixed at 0.55 badge widths; the name is set in Inter Semibold at 1.2 badge heights.

64 px40 px24 px16 px · mark

Colours

Light ground, ink text, three accents.

Click a swatch to copy its value. The interface is grey and white; colour is reserved for state and for the brand gradient, which only appears on the badge, the primary button and highlighted words.

Release channels

The colours the app uses for its channel dot and installer ribbon.

Typography

Inter for words, JetBrains Mono for numbers.

Stays out of your way.Display · 48–72 / 600 / −0.03em
Stays out of your way.Headline · 30–36 / 600 / −0.02em
Stays out of your way.Title · 19–20 / 600 / −0.02em
The browser that stays out of your way.Body · 15–16 / 400 / 0
Version 0.1.2 · 96 MB · Windows 10 / 11Caption · 12–13 / 400–500 / 0

Inter

UI and headlines. Weights 500 and 600 only; 400 for body copy. Headlines are tracked tight, −0.02em to −0.03em, and set with balanced wrapping.

JetBrains Mono

Versions, hashes, shortcuts and anything a person might copy.

⌘T⌘⇧AF120.1.2sha256:9f3a…c1e2

The app itself uses the system UI font (Segoe UI Variable, SF Pro, Cantarell); Inter matches its proportions on the web.

Liquid UI

The interface is one surface that flows.

Caspian's design language. Controls are pills, panels have 12 px corners, and nothing appears from nowhere: a popover grows out of the button that opened it. The button becomes a round blob that joins the card through a waisted stem with concave fillets, a metaball join like a drop of water meeting a puddle.

Main menu, right edge

Against the window edge, so the blob takes the card's corner.

New tab⌘T
New window⌘N
New private window⌘⇧N
History⌘Y
Settings⌘,

Site info, left

The badge in the address bar becomes the blob; the stem waists into the card.

Verified by Caspian

PayPal, Inc.

Payments

ConnectionSecure
Trackers blocked7
CertificateDetails ›

Downloads, mid-toolbar

Free-standing: fillets on both sides of the stem.

Downloads

Deep-Sea-Documentary.mkv64%
caspian-0.1.3-beta.exeDone

The join, exactly

Card: rounded rectangle, radius 12, top edge at y = neck.
Blob: circle, diameter 28, centred at (anchorX, 14), exactly over the button that opened it.
Stem: 0.62 × blob wide, from the circle down to the card top.
Fillets: concave, radius 9 where the stem meets the card; radius 3 where it leaves the circle.
Fill white, stroke 1px rgba(21,22,28,.1), shadow 0 14px 24px ink at 16%.
When the blob would pass the card's corner, it takes the corner: the right side of the circle continues straight down as the card edge.

Tab hover

A light accent gradient rises from the bottom.

New tabField notesWeather

← → ↻getcaspian.app

Hover the inactive tabs.

Tooltips

Small rounded cards that fade in below the control.

⧉Split view↓Downloads⋮Menu

New-tab dot grid

The lattice lights up in the accent colour under the cursor.

Move the pointer

Pills everywhere. Buttons, address bar, chips: radius 999.

Rounded shoulders. The toolbar's selected tab curves into the nav bar, Chrome-style, radius 9.

Motion. 250–500 ms, ease (0.2, 0.8, 0.2, 1). Popovers scale from the blob; nothing slides in from off-screen.

Usage

Do and don't.

Use the gradient badge on white or the ground colour, with clear space around it.
Use the white badge on dark or coloured grounds.
Keep the badge and the wordmark exactly as supplied; scale them together.
Write the name as “Caspian”, capital C, no “Browser” unless the context needs it.

Don't

×Don't recolour the badge, swap the gradient direction or add an outline.
×Don't stretch, rotate, skew or add effects (shadows are fine on the promo images only).
×Don't place the gradient badge on a busy photo without the white ring behind it.
×Don't rebuild the wordmark with a different typeface or a different gap.
×Don't use the waves as a pattern or crop the disc.

Caspian, the badge and the wave mark are trademarks. © Caspian. The assets on this page may be used to refer to Caspian; they may not be used to suggest endorsement. Press or asset questions: hello [at] getcaspian [dot] app.