Design #1. Landing ReLand

No product design is forever, especially in an era where AI is moving this fast. As requirements pile up and collaboration gets more complex, teams often hesitate: maybe this is the moment to redesign? But it's never easy — especially when the existing landing page still has to ship weekly while a new one is being built in parallel.

Why now?

Zeabur's original landing page only needed to make one thing clear — we were a usage-based deployment platform. If users understood CI/CD and pay-as-you-go, that was enough. But over the past year, Zeabur's product surface has kept expanding: AI Hub, Dedicated Server, Domain, Email, and more recently Skills built on top of Claude Code. We kept shoehorning them in the same way — add a card, add a blurb, add a link. Each step felt reasonable in isolation, but by the time you scrolled to the bottom, the page no longer read like a product home. It read like a display case that kept getting fuller: you could finish it, but it didn't tell a coherent story.

The user's intent on arrival has changed too. In the past, people read top to bottom — features, pricing, templates. Today, more and more visitors just want to hand us a project and have Zeabur figure out what comes next. The landing page needs a real AI entry point, not a decorative one.

Iterable, not one-shot

In the end, we didn't treat this redo as "a better-looking version of the landing page." What we actually wanted was a landing page that could carry future change — which means the point today isn't how polished this version is, but whether the next teammate, six months from now, will feel friction adding a new section.

That's the principle underneath the whole ReLand project: admit that the landing page is alive. It will keep being edited. So we focused our energy on three things.

First, we pulled colors, typography, and borders out of components and into a single set of CSS variables. Light and dark each define their own token set, swapped via html.dark. What remains in components is purely semantic — "brand color", "active state", "border". Theme switching is no longer something a specific component has to handle; it's a baseline capability the whole page gets for free.

LightDark

Second, every section is independently replaceable. Each block on the new homepage is its own component, and sections are stitched together with a fixed visual vocabulary: solid lines at the top and bottom, with diagonal-striped transition bands in between. The diagonals read like construction-site hazard tape — deliberately visible at the "seams". We didn't try to make the page feel seamless. On the contrary, we made it obvious where the interfaces are. The day someone adds a Skills section or removes a Templates one, the overall cadence won't break.

Third, we let the AI entry point run through the entire sightline. The AIBar isn't an auxiliary button; it's the visual terminus of the whole page. You start at the Hero, understand what we do in the middle stretch, and land naturally on the AIBar that sits above the CTA — you can drop code straight into it and start deploying, without registering, reading docs, or jumping into the Dashboard first.

The biggest change on the new homepage is the Hero.

So we painted it from scratch. The new Hero background is an entirely hand-written WebGL shader stack — warm oranges in light mode, purples in dark mode, crossfading softly on theme switch instead of hard-cutting. It reads like a gently perturbed sea of data — directional light, a fine character-dot lattice, a mild grid warp. This isn't about showing off. It's just that, as an infrastructure platform, Zeabur should be able to paint its own first screen. The Hero today is clean: the background sets the atmosphere, the tagline gives you a reason to decide, and the AIBar plus CTA give you something to do.

This "keep shaving one more layer off" approach is something we did over and over on this project. The designer's instinct is usually "it'd be better with a bit more." The harder judgment is "would it be better with one less layer?"

Trust

There was one decision in this redo that almost rewrote the whole site's character — we abandoned the big rounded corners.

On the old landing page, cards, buttons, and containers universally used 16px or larger radii. For the past few years, large rounded corners have been the default language of SaaS and consumer products: friendly, soft, approachable. They lower the interface's aggression and make people instinctively feel "this product isn't hard to use." For an early-stage product that needs to win new users' affection quickly, large radii are a very effective strategy.

But as Zeabur's users shifted from "developers who wanted to try it out" to "teams running production traffic on it", the large radii started to become a liability.

Big rounded corners give a first impression of psychological 'toyness'. The larger the radius, the more the interface looks like a polished pebble — pretty, harmless, something you can hold in your palm. But infrastructure is not a toy. When a user is about to hand us their company's production environment, what they want to see is a load-bearing wall, not foam building blocks. There's a plain observation in design psychology: the closer the curvature is to a circle, the closer it reads as "cute"; the closer it is to a straight line, the closer it reads as "serious". Zeabur now needs the latter.

The loss of "capacity". Big radii are fundamentally shaving off the four corners of a rectangle. The more the corners get shaved, the less the container looks like it can hold — visually, it's suggesting "this is a small object." But what we're showing is clusters, projects, servers — all heavy concepts. Using a container that looks light to hold something heavy always creates a perceptual mismatch.

The terminals, IDEs, monitoring panels, and cloud consoles developers open every day — almost none of them lean on large rounded corners. They use restrained small radii (4–8px), crisp edges, and dense information. When Zeabur's landing page used consumer-grade radii to tell an infrastructure story, users' brains subconsciously grouped us with "toy project hosting" rather than "a cloud platform you can run production on."

When every SaaS uses 16px+ radii and soft gradients, big radii stop transmitting any information — they're just noise. The brands that dared to tighten their radii and let edges meet cleanly (Linear, Vercel, Stripe Dashboard) come across as more "grown-up" visually.

Of course, throwing out rounded corners entirely isn't the answer either. Right angles carry their own extreme — cold, distancing, bureaucratic. We don't want the "I don't care whether you understand" posture of a bank's website. We want something closer to "I know you're doing something serious, and I'm here to take it seriously with you."

So in the new version, we converged the site-wide radius system down to a more restrained scale. Edges are clearer, separators are more direct, and the sharp edges on the diagonal transition bands are part of the same thinking — we want every visual resting point as you scroll to tell you: this is a serious platform, worth putting real workloads on.

Corner radius is just a symbol, but underneath it sits a shift in the whole communication strategy: from "come try us" to "we're ready to carry you."

Finally

ReLand shipped as a single release, but for us it isn't the endpoint — it's the starting point. For visitors, what matters isn't how dazzling the page looks; it's how much easier it is to get started. For ourselves, what matters is that the next time we want to add a new block, swap in a new theme, or respond to a new interaction pattern, we don't have to tear everything down again.

It also made us rethink what a landing page even is. For a deployment platform, the most important metric has never been "how premium it looks." It's "how many steps from seeing the product to the first deploy." The AIBar's sticky dock compresses that distance to almost nothing: glance at the background, read one tagline, scroll three screens, drop the project into the AIBar.

That's what we mean by "Landing ReLand" — the landing page shouldn't just be a showcase. It should itself be the first step of the deploy.