Brand book · living style guide
The Longbridge design system
Every swatch, specimen, and component on this page is rendered from the same design tokens and components that ship in production. It is wired to the source of truth, so it can't drift.
Flip the theme — the whole page re-tints from one token remap. Light and dark are the same system at two temperatures.
Honest infrastructure — products we run, and senior consulting.
Foundation
What Longbridge is, who it's for, and the promise the whole system exists to express.
The promise
Longbridge Technologies builds and runs honest infrastructure — self-serve products we operate ourselves, and senior, principal-led consulting — for people who treat their foundations as an edge, not an afterthought.
The conviction
“Infrastructure is a foundation, not a footnote. We build and run what we sell — so the tools are the ones we operate ourselves, and the advice comes from people who live with the trade-offs.”
The five attributes
Every design choice on this page should express all five. If a choice doesn't, it's wrong.
Honest
Real prices, no dark patterns. We say exactly what something costs and exactly what it does.
Engineered
Precise and technically credible. Monospace, real diagrams, numbers that add up.
Crafted
Premium execution, end to end. Cost-efficient is not the same as cheap — in the products or the consulting.
Warm
Builder-to-builder, human, not corporate. Warm paper, a single aurora-teal accent, plain language.
Calm
Quiet confidence, understated. Generous whitespace, restrained motion, no shouting.
Values
- Honesty
- We tell you what it costs and what it does — before you ask.
- Transparency
- Placeholders are labelled. Changes are announced. No fine-print traps.
- Fairness
- No lock-in, ever. Bring your own nodes and we never tax them; in consulting we build to hand back. Leave with what is yours.
The BYO-no-tax mechanic
Most managed Kubernetes charges you for the control plane and taxes every node you attach — per vCPU, per hour. Longbridge charges a flat price for the span and nothing for the piers. The compute that costs real money stays on hardware you already own.
Voice & tone
How Longbridge sounds: like one engineer telling another the truth.
Plain over clever
Say the true thing in the fewest words. "We never tax your nodes" beats "revolutionary cost optimisation".
Specific over vague
Name the machine, the cloud, the price. Specificity is how engineers earn trust.
Calm over loud
No exclamation marks, no urgency theatre. Confidence is quiet.
Builder-to-builder
Talk like one engineer telling another what actually works — and what does not.
Do / Don't
A flat monthly price for the control plane. Your nodes are always free.
Unbeatable, disruptive pricing that changes everything!
Prices are placeholders during early access.
Lock in this exclusive deal before it disappears forever.
Bring your own nodes across any cloud. Leave with them anytime.
The only platform you will ever need. Switching is impossible.
We manage the part that's annoying: etcd, certs, upgrades.
AI-powered, next-generation, cloud-native synergy.
Logo & identity
The mark is the Solid Arch — a square-shouldered masonry arch: a solid block with a true-semicircle portal cut from its underside, leaving two piers and a spanning crown. Drawn as mass in ink, never an outline. It is the bridge in longbridge — a load-bearing span — and, read as product, the control plane carrying the nodes beneath it. Below: the exact geometry it is built from, and what it means. Ink-forward — the identity itself carries no accent colour.
House brand + descriptive product, divider in
--color-border-strong. Product set in
--font-display 500, muted ink.
Keep clearspace ≥ the mark's pier width on every side. The built-in 6-unit margin around the arch is the safe-zone — it also makes the mark work as a maskable app icon.
Construction
One filled path on a 32×32 grid — no strokes, no gradients. Because the mark is mass, it stays crisp at any size and inverts by simply following the ink colour.
- viewBox
- 32 × 32
- Block
- x 6–26, y 7–25 (20 × 18) — square outer corners
- Portal
- true semicircle, r 6.6, centred on x 16
- Springing
- y 18.4; feet open to the base at y 25
- Piers
- 3.4u wide, inset to x 9.4 / 22.6
- Crown
- 4.8u of mass at the apex
- Fill
- currentColor (ink) · fill-rule
evenoddcuts the portal - Safe-zone
- ≈6u margin every side — maskable as an app icon
<path fill-rule="evenodd"
d="M 6 7 H 26 V 25 H 22.6 V 18.4
A 6.6 6.6 0 0 0 9.4 18.4 V 25 H 6 Z" />The mark, at size
Mass, not line — so it holds when it shrinks. The portal stays open and the shoulders stay square all the way down to 16 px.
What it means
A span on two piers
The literal bridge in longbridge — a long, load-bearing span. Read as product, the crown is the control plane and the piers are the nodes it carries.
Mass, not line
Filled ink, never a stroked outline. Solid and weight-bearing — honest and engineered, not decorative — and crisp from 64px down to 16.
Square shoulders
The outer corners stay square, so it reads as a load-bearing gateway — not a horseshoe, not a rainbow.
Ink-forward
No accent colour in the identity — warm paper and ink are the brand. The aurora teal is saved for the live product surfaces, never the logo.
Wordmark. longbridge, lowercase, set in Space Grotesk 500 at −0.03em tracking — the one place that face appears (see Typography). Lowercase and tightly tracked, it sits as a single calm, level line: a typographic span to match the mark.
Misuse
✕ Don't reset the wordmark in another typeface or weight.
✕ Don't place it on off-brand colour or busy art.
✕ Don't stretch, skew, or distort the lockup.
Favicon & app icon. The Solid Arch alone, in
ink, on a transparent ground (public/favicon.svg). It
carries the brand at 16 px because the portal and square
shoulders stay legible, and the ink colour follows the theme via a
prefers-color-scheme media query. The arch's margin is
a maskable-safe zone.
Color
Ink-forward / warm-monochrome. Warm paper and ink ARE the brand. Primary actions are high-contrast monochrome; the only chromatic accent is a restrained aurora teal — drawn from the hero's light — used sparingly (≈≤3 spots per page) for links, focus rings, and at most one intentional highlight. Components only ever touch the semantic layer. Contrast chips show body-text legibility on each colour.
Brand ramps
Sand — paper + ink
The identity. Warm paper and ink ARE the brand — warm-tinted greys (never cool), the calm monochrome ground everything sits on. Paper at 50 (#FAF7F1), ink at 900 (#211D17).
Aurora teal — the lone accent
The only chromatic note, drawn from the hero’s aurora. A restrained teal, used sparingly (≈≤3 spots per page) for links, focus rings, and at most one intentional highlight. Anchored at 700 (#0F766E); #4FC9B4 carries it in dark.
Semantic tokens
The contract components build against. Shown light and dark side by side — same names, remapped values.
Surfaces
--color-bg--color-bg-subtle--color-surface--color-surface-2--color-bg--color-bg-subtle--color-surface--color-surface-2Borders
--color-border--color-border-strong--color-border--color-border-strongText
--color-text--color-text-muted--color-text-faint--color-text--color-text-muted--color-text-faintPrimary action · monochrome
--color-primary--color-primary-hover--color-primary-contrast--color-primary--color-primary-hover--color-primary-contrastAccent · Aurora teal (the lone accent)
--color-accent--color-accent-hover--color-accent-contrast--color-accent-weak--color-accent--color-accent-hover--color-accent-contrast--color-accent-weakStatus
--color-success--color-info--color-warning--color-danger--color-success--color-info--color-warning--color-danger
Contrast chips report the WCAG ratio of body ink on each surface,
computed at build time. AA = ≥ 4.5:1 · AA large = ≥ 3:1.
Tint tokens (rgba) are marked and excluded from the numeric check.
Typography
Four self-hosted families: Hanken Grotesk for display, Inter for body and UI, IBM Plex Mono for labels, code, and prices — the engineering-honesty cue — and Space Grotesk for the wordmark alone.
font-family: var(--font-display) The control plane is the span. Your nodes are the piers.
AaBbCcGg 0123456789 €5 /mo · {} => []
font-family: var(--font-sans) We manage the control plane. You bring the nodes. We never tax them.
AaBbCcGg 0123456789 €5 /mo · {} => []
font-family: var(--font-mono) kubectl get nodes · conformant k8s · no node tax
AaBbCcGg 0123456789 €5 /mo · {} => []
font-family: var(--font-wordmark) longbridge
AaBbCcGg 0123456789 €5 /mo · {} => []
Type scale
- Longbridge
- Longbridge
- Longbridge
- Longbridge
- Longbridge
- Longbridge
- Longbridge
- Longbridge
- Longbridge
- Longbridge
Display — Hanken Grotesk
Headlines, hero, section titles. Tight tracking (-0.02em), balanced wrapping, weight 600–700.
Body — Inter
Paragraphs, UI, buttons. Comfortable line-height (1.6), weight 400–600. Quiet and legible at length.
Mono — IBM Plex Mono
Eyebrows, prices, code, badges, diagram labels. The honesty cue: real numbers, set like an engineer would.
Modeled phenomena
The backgrounds are not stock art or AI imagery. Each is a real mathematical or physical phenomenon, computed live in the browser — honest craft, the same conviction as the products. One per page, each paired with a quiet mono caption that names it.
One canvas per page, visibility-gated, frame- and DPR-capped, and
frozen to a single still under prefers-reduced-motion.
Each sits behind a discreet mono caption — the signature that names
the phenomenon, e.g. — aurora borealis · over the long dark ·
60°N. The aurora's mint → cyan → azure → violet ramp is where
the accent teal is drawn from.
Space · radius · elevation
A 4px spacing base, a small set of radii, and warm, low-contrast shadows. Generous whitespace is a brand attribute, not an afterthought.
Spacing scale
--spacing-1 4px --spacing-2 8px --spacing-3 12px --spacing-4 16px --spacing-5 20px --spacing-6 24px --spacing-8 32px --spacing-10 40px --spacing-12 48px --spacing-16 64px --spacing-20 80px --spacing-24 96px --spacing-32 128px Radius
--radius-sm 6px --radius-md 10px --radius-lg 14px --radius-xl 20px --radius-pill pill Elevation
--shadow-sm 0 1px 2px rgba(33,29,23,.06) --shadow-md 0 4px 12px rgba(33,29,23,.07) --shadow-lg 0 12px 32px rgba(33,29,23,.09) Warm, low-contrast shadows in light. In dark mode the system favours borders over shadow — elevation reads through surface + edge instead.
Components
The same components the marketing pages use — shown working, and re-tinting under dark mode because they only consume semantic tokens.
Button
variant: primary · secondary · ghost — size: sm · md · lg Badge
tone × {neutral, accent, secondary, success, info, warning, danger} · mono · dot Default card
Surface, hairline border, warm shadow-sm. The default panel.
Subtle card
surface-2 ground, no shadow. For nested or quiet contexts.
Accent card
accent-weak (aurora teal) ground with a teal edge. For one intentional emphasis, used sparingly.
Form input
.lb-input — focus ring uses --color-focus Pricing tier
featured lifts the most-popular tier with the accent ring Small
A home cluster or a side project.
- Your own nodes — always free
- Managed control plane
- Up to 5 worker nodes
Medium
Most popularA small team running real workloads.
- Your own nodes — always free
- Everything in Small
- Up to 25 worker nodes
- Email support
Large
Production across several clouds.
- Your own nodes — always free
- Everything in Medium
- Unlimited nodes
- Backups & PITR
Cluster diagram
the signature bridge-motif schematic — pure inline SVG on semantic tokens In context
Living proof the tokens and components compose into real product surfaces — re-tinting under dark mode because they only consume semantic tokens.
Longbridge Control Plane
Run one Kubernetes cluster across your homelab, Hetzner, and AWS.
We manage the control plane. You bring the nodes. We never tax them.
Small
A home cluster or a side project.
- Your own nodes — always free
- Managed control plane
- Per running replica
Medium
Most popularA small team running real workloads.
- Your own nodes — always free
- Twice the size
- Email support
Large
Production across several clouds.
- Your own nodes — always free
- Twice again
- Backups & PITR
Every tier includes your own nodes — always free. No per-vCPU tax. No bait-and-switch. Prices are placeholders during early access.
No node tax
A flat price for the control plane. We never charge for the hardware you already own.
No lock-in
Conformant Kubernetes, a plain kubeconfig. Leave with your nodes whenever you like.
No bait-and-switch
Placeholders are labelled. We tell you before anything changes. No dark patterns.
One system, two temperatures. Rendered from the tokens, all the way down.