Planr Website & Brand

The approach

A marketing site lives and dies by its first impression, so most of the work went into the hero and the handful of sections right below it. I wanted the page to feel confident and quiet rather than loud: clear typography, generous spacing, and a few well-placed visuals instead of a wall of features. The guiding idea was simple. The site should not describe the product so much as behave like it, calm and precise, so that visiting the page already feels a little like using the software.

Motion

Motion is where the personality lives, and it runs on the Motion library loaded in its leanest possible form so the animation code barely adds weight. The first time the page loads it performs a cascade inspired by the calmest software interfaces. The screen opens on the bare dark background, and then the navigation, the headline lines, the supporting sentence, the call to action and finally the live demo each rise into place one after another, lifting up a little and resolving from a soft blur into sharp focus, like a lens finding its subject. The order and timing are choreographed down to fractions of a second, and it only plays once per real page load and remembers it has played, so moving around the site never replays the show. There is even a performance conscious split in how it is done. The small text elements get the full blur and lift, but the large demo frame uses a plainer rise without blur, because blurring a big deeply nested element is expensive, and this way that animation stays on the fast compositor path.

As you scroll, the site keeps animating, but every one of those moments is a play once and rest, never a loop. Each feature card waits until it enters the viewport, performs its little story a single time, and freezes at the end. A status chip flips from pending through to complete with a one shot radar ping at the moment it changes. A facility switcher cycles through Stockholm, Riga and Tallinn while the numbers follow. A workflow ladder lights its steps in sequence and rolls the order status up on its own, and an operator’s task card walks from start to done. None of it repeats, which is what keeps the page feeling composed rather than busy. Busy loops shout for attention; a single confident gesture that then settles signals precision and control, which is exactly the feeling a planning tool wants to sell.

The demo

The centerpiece is the hero demo, and it is genuinely the heart of the page. Rather than a screenshot, it embeds an interactive replica of the real Flow product, rendered in the actual app’s own palette copied verbatim, so what you are looking at truly resembles the software running inside the page. A single piece of shared state drives everything at once. As the demo auto rotates between asking the assistant, work orders, the dashboard and workload, the same state swaps the headline’s supporting sentence and fills a thin countdown line beneath it, so the words and the picture change in perfect lockstep. It rotates on its own until a visitor clicks a view, and from that point it is theirs to drive. Behind the frame, the blue glow bleeds wider than the panel with a soft white core and two small light hints leaking past the side edges, giving the whole thing a lit from within, floating quality, and the bottom of the stage dissolves into the page through a mask gradient so it melts into the background instead of stopping at a hard edge.

Building it

The site runs on Next.js 15 with the App Router and React 19, written end to end in TypeScript and served in development through Turbopack. It leans heavily on static generation so the pages load almost instantly, and performance is treated as a design feature in its own right. What makes it interesting under the hood is that it is deliberately self contained. The wider Planr codebase is a monorepo running an older generation of its styling system, but the marketing site was cut loose to run on Tailwind CSS v4 with its own design tokens and its own font stack, sharing nothing with the product’s component library. That independence is the point. It let the site evolve its own visual language at its own pace while still quoting the real app where it matters.

The same discipline governs space. There is a strict house rule that you never type a raw spacing value into a page: every margin, gutter and rhythm comes from a primitive or a token, a single source of truth for the content rail width, the vertical breathing room between sections, and the gap from a heading down to its grid. That is invisible to a visitor, but it is the entire reason the site feels so even and intentional. Nothing is ever slightly off, because nothing is ever hand placed.

Underneath all of it sits a quiet commitment to accessibility and craft. Every animation honors the operating system’s reduce motion preference at three layers: the motion library is told to respect the setting globally, a media query switches off every custom keyframe, and the scroll triggered pieces check the preference in code and simply present their finished state. The scrollbars are restyled to blend into the dark instead of breaking the mood with bright system chrome, and the fonts swap in gracefully. The result is a marketing site that does not feel like marketing. It looks like the product, moves like the product, and treats the visitor with the same calm precision the product promises to bring to a factory floor.

The brand

The whole site lives in the dark. There is no light mode toggle to wrestle with; the document ships with dark mode locked on, and every decision flows from that. The background is not pure black but a soft near black, a quiet charcoal that keeps the eyes calm and lets color do its work without glare. Text hierarchy is built almost entirely out of transparency rather than different colors: headings and primary copy are white at roughly ninety three percent opacity, and running body text drops to about sixty nine percent, so the page reads as a single sheet of light with text floating at different depths into it. Thin guide lines in a barely there grey trace the edges of sections and cards, and a faint blueprint dot grid, white dots at five percent strength on a twenty two pixel rhythm, gives the dark surfaces a whisper of engineering paper texture. It is the kind of detail you feel before you notice it, and it suits an audience that lives on factory floors and in CAD drawings.

Color is used with real restraint, which makes the one signature hue land harder. Planr’s product blue, a vivid royal blue around #5177F6, is the accent that ties the marketing site to the live app. It shows up as the ambient glow behind the interactive demo, the fill on progress bars, and the highlight on badges and active states. Beyond that single blue, the only other saturated colors are the status and priority signals lifted straight from the real product: green for complete, blue for in progress, plus orange, red and grey for urgency, all mixed in a wide gamut color space so they stay rich against the dark. Everything else is monochrome on purpose. When almost nothing is colored, the thing that is colored reads as alive.

Typography carries the polish. The site self hosts InterVariable, the variable build of Inter that includes an optical sizing axis, so the letterforms quietly adjust their proportions to the size they are rendered at, tightening for big display headlines and opening up for small body text. Numbers and code lean on Geist Mono. The type scale is codified into a small set of named tokens rather than scattered across the markup, so a fifty six pixel hero headline, a forty pixel page intro, a forty four pixel article heading, and the universal fifteen pixel body are all defined once and reused everywhere. Headings sit at a medium weight with slightly negative letter spacing for that modern, engineered feel, and copy uses pretty wrapping so lines never strand a single orphan word.

The logo follows the same thinking. It is a modern take on the letter “P”, pared back to its essential geometry so it reads instantly at any size, from a sixteen pixel favicon to a full wordmark, and the same mark carries across the app icon, the browser tab, and the site itself. The aim throughout was a brand that gets out of the way: clean type, restrained color, and one memorable shape doing the heavy lifting.

What’s next

The site grows alongside the product. As Planr adds features, the marketing pages need to keep pace without turning into a cluttered feature dump, so the next round of work is mostly about structure, telling a clear story as there is more and more to say.