2026
RockNode
Game servers that don't fall — and a site that sizes the server for you. Product design, development and SEO for rocknode.app.
Game servers that don't fall: pick a game, tell us how you play, and the plan sizes itself — live in about a minute.
A live product we designed, built and set up for search — and how we would refresh it.
The product
RockNode rents game servers to friend groups and small communities. Minecraft and Modded Minecraft are available now, twenty more games are announced. The promise is simple: pick a game, say how many people play, and the plan sizes itself — no spec sheets.
What we did
Product design and the visual system, the Next.js front end with a headless CMS, the back end that turns a payment into a running server, monitoring and a public status page, a support chat — and the SEO groundwork: ten languages, hreflang, structured data and content gates.
This case
Shows the live site as it is (before) and a refresh we propose on top of it (after): the same brand, copy and prices, with clearer hierarchy, a calmer catalog and pages without empty blocks. The refresh lives in HTML only; every decision comes with a note on how to ship it in the existing code.
About this project
RockNode is a live product in its pre-launch phase: the copy describes the finished service, the buttons lead to a waitlist. No traffic, revenue or customer figures are shown or implied here. Game names belong to their publishers; RockNode uses no publisher artwork.
Design and build facts from the project files — not business results.
02ResearchA strong product, introduced by a form that isn't ready yet.
Before redrawing anything we audited the live public pages at 1440 and 390 — home, catalog, two game pages, blog and status — and checked the tokens behind them. Twelve findings; the main ones below.
Before redrawing anything we audited the live public pages at 1440 and 390 — home, catalog, two game pages, blog and status — and checked the tokens behind them. Twelve findings; the main ones below.
- First screen
The plan finder opens with two locked steps, a disabled «Continue» and a plan card that says «Pick a game». Three things you can't use, one you can.
DecisionKeep every step, field and option of the plan finder; redesign how they read — a clear game picker, visible «Step n of N», and a result that reads as a plan.
- Contrast
The smallest text — plan-finder hints, the pricing footnote, blog dates — uses a grey that measures 3.92:1 on the card surface.
DecisionOne token: #6C7788 → #8A94A6, 5.82:1. Every hint on the site passes without touching a component.
- Catalog
Twenty «Soon» games get the same tall card as the two you can buy; sixteen of them are empty dark boxes with a name in the middle.
DecisionAvailable games as wide cards with the «from» price and one action; announced games as compact typographic tiles — no borrowed game art.
- Game page
«Recommended plans» on the Minecraft page has a heading and a button but no plans; «Server software» is a label with nothing under it.
DecisionOne ladder of five plans with icons, players, RAM and price replaces both the empty section and the separate specs table.
- Search
One meta description promised «round-the-clock» monitoring — a wording the site's own claims gate does not catch.
DecisionRewrite the snippet and add the pattern to the gate (proposed to the owner, not changed on the live site).
Patterns we borrowed
- RockNode's own system
- Torch #F2A63A and the CTA gradient, night #090B10 surfaces, the status green, liquid-glass tokens and the cube logo — unchanged
- RockNode's own art
- Castle-and-owl hero scene, mascots, monitoring vista, plan buildings and the two game icons — all from the site itself
- Hosting dashboards
- Status as rows that explain themselves, prices that read the same everywhere, plans as a ladder
- Platform guidelines
- Liquid glass only over imagery, never over a flat gradient; 4.5:1 for every line of small text
What we left out
Publisher logos, cover art and screenshots of any game; modpack icons in this portfolio (they stay on the live site, where they come from Modrinth); any number about uptime, traffic or customers.
Moodboard references
From the live site to a calmer, clearer RockNode.
Here the «before» is real: screenshots of the live public pages, taken on 30 Oct 2026 in the site's default dark theme. The «after» is our HTML refresh with the same copy and prices. Drag a handle to compare the top of each page.
Desktop · 1440
Mobile · 390
- 01
Same plan finder, clearer
Every step, field and option of the live plan finder stays — game picker and select, players slider, modpack and game version — with visible step labels, a clear selected game and a result that reads as a plan.
- 02
One price tag
The same price component everywhere — hero, plan finder, catalog, plan cards and the ladder: a raised currency sign, a tabular amount, a quiet period.
- 03
Available vs announced
Two wide cards for what you can buy today, twenty compact typographic tiles for what is coming — the catalog page is about half as long.
- 04
No empty blocks
The Minecraft page's empty «Recommended plans» and «Server software» are filled; the specs table and the plans merged into one ladder.
- 05
Glass only over art
Liquid glass sits over RockNode's own illustrations — the hero scene, the monitoring vista, the waitlist scene — with a masked rim, never over a flat gradient.
- 06
Measured, both widths
Every text node checked for WCAG contrast (lowest 5.65:1) and every line over glass or art checked against its worst pixel underneath; no horizontal scroll at 390.
RockNode's own torchlight, used with more discipline.
The palette is RockNode's: torch #F2A63A carries every action (9.7:1 on night #090B10), violet #8B7CF0 is a quiet second accent, status green #4ADE80 means «live». The only change is the third grey, lifted for contrast. The site uses system fonts on purpose; the HTML refresh stands in Inter and JetBrains Mono, the mono already in RockNode's stack.
RockNode's own mark — an isometric torch-lit cube from the site's logo.svg. Used exactly as the site renders it; on phones the name sits in two lines, «Rock / Node» — the owner's choice, kept.
#F2A63A
vs bg 9.65:1 · label 10.29:1
#8B7CF0
on bg 5.85:1
#EEF1F5
on bg 17.37:1
#090B10
text on it 17.37:1
#14181F
text on it 15.71:1
#A6B0BF
on bg 8.98:1
Inter 700RockNode
Inter 700Friend groups and small communities who want their own Minecraft or modded world without reading spec sheets
Inter 400 · 16/26Game servers that don't fall: pick a game, tell us how you play, and the plan sizes itself — live in about a minute.
Inter 600 · 12game server hosting
Four pages and the cart, one markup for both widths.
Every page below is a single HTML file rendered at 1440 and at 390 — the layout changes come from media queries, the way it would ship in RockNode's Tailwind front end.
Home
The plan finder in glass over the castle scene, the crew, available games before announced ones, fleet status, the one-minute provisioning story, three plans with all nine on a ladder, the waitlist and the blog.
Game catalog
Search and filters in one bar, Minecraft and Modded Minecraft as wide cards with the «from» price, twenty announced games as compact typographic tiles, and the waitlist vote.
Minecraft
Hero with price and two actions, the plan finder, a ladder of five plans in place of the empty «Recommended plans», features, modpacks, versions, FAQ and guides.
Cart drawer
The cart drops from the header icon: the configured server with its plan illustration, the plan changed in place along the tier ladder, what every plan includes, a plain total and checkout — the same contents and rules as the live cart.
Valheim — a game without modpacks
The same game template with one step: only «How many players?», the benefits filling the left half, The Keep on the right with the «Join waitlist for this plan» of an announced game, two plans, BepInEx and Valheim Plus.
Status
Two columns: what the page is and what it will not show on the left, the live self-checks in glass on the right — each row carries its own explanation.
Component sheet
Logo, price tag, palette with the contrast fix, type, buttons with focus and disabled, badges and chips, the liquid-glass recipe, game tiles, plan card, status row and the trust strip.
TorchlitHonestCalm
06Build planWhat runs behind the pages.
RockNode is infrastructure, so the site is the visible tip of it. The work went in six stages, each ending in something that runs, is tested and is gated in CI.
RockNode is infrastructure, so the site is the visible tip of it. The work went in six stages, each ending in something that runs, is tested and is gated in CI.
- Next.js site10 languages, plan finder, catalog, blog
- Headless CMSPayload: games, posts, translations → generated content
- Back end + queueNestJS, Postgres, Redis job queue, Stripe
- Game panelPelican Panel + Wings: one container per server
- Monitoring & statusPrometheus, Alertmanager, Grafana, public /status
System sketch — from a click on «Continue» to a running game server
- 01
Architecture & pricing model
An open-source game panel (Pelican + Wings) under our own Next.js interface instead of a fork; Minecraft and Modded Minecraft first; one canonical price catalog shared by front end and back end.
DeliverablesArchitecture decisionsPrice catalog - 02
Site & design system
Next.js 14 + Tailwind with one token set, a breakpoint scale from phones to ultrawide, liquid-glass panels with fallbacks, WebP art with explicit sizes.
DeliverablesFront endDesign tokens - 03
Content & languages
A Payload CMS for games and posts, synced into generated files that the build reads; ten languages with per-market pricing and quality gates on translations.
DeliverablesCMS10 localesContent gates - 04
Payments → server
Stripe checkout, magic-link sign-in without passwords, and a queue-driven back end that reserves capacity before payment and creates the server through the panel API.
DeliverablesCheckoutProvisioning queue - 05
Monitoring & status
Prometheus metrics, alert rules under unit tests, delivery to the team, and a public status page that shows only what is actually measured.
DeliverablesAlert rulesStatus page - 06
Support
A glass support chat on top of Chatwoot, with an AI assistant for first answers and an honest hand-off to the team in the same conversation.
DeliverablesSupport chatKnowledge base
07SEOTen languages, one catalog, and gates that keep the copy honest.
The SEO work on RockNode is mostly structure and discipline: every page exists in ten languages with correct alternates, every game page says what it is in structured data, and the build refuses copy that promises what the service cannot guarantee.
The SEO work on RockNode is mostly structure and discipline: every page exists in ten languages with correct alternates, every game page says what it is in structured data, and the build refuses copy that promises what the service cannot guarantee.
Search snippets as we would write them — titles and descriptions drafted from this concept's own page copy, shown without any search engine's branding.
- 01
Audit
What we set up so that search engines read the site the way people do.
What we check- Sitemap with an hreflang alternate for every language and an x-default
- Canonical URLs per language; locale prefixes /de, /fr … /pt-BR
- Unreleased drafts kept out of the index by a publish gate in the CMS
- Robots rules and noindex for account, checkout and sign-in
- A claims gate in CI: uptime percentages, staffed-support promises and prices in prose fail the build — in all ten languages
- 02
Keyword map
Searches grouped by intent; each group has exactly one page that answers it, so pages do not compete.
Example clusters · no volumes, conceptGame hostingminecraft server hostingmodded minecraft server hostingvalheim server hostingSizinghow much ram for a game serverminecraft server ramHow-tohost a game servergame server without port forwardingwhy is my game server laggingBrandrocknoderocknode status - 03
Site structure
One page per game and per guide in every language, and structured data that says what each page is.
Page planStructured dataOrganizationWebSiteProductAggregateOfferFAQPageBreadcrumbList/Home/games/Catalog/games/minecraft/Minecraft/games/<game>/21 more game pages
/blog/Guides/blog/<post>/Posts
/statusStatus/de/ … /pt-BR/9 more languages
- 04
Speed & Core Web Vitals
The heaviest things on the page are RockNode's own illustrations, so speed work starts with them.
Targets · 75th percentile of visitsLCP< 2.5 sHero art as WebP at the right width; system fonts on the live site, so no font bytes at allINP< 200 msThe plan finder is plain client logic — no request until checkoutCLS< 0.1Width and height on every image, enforced by a testThresholds are Google's published «good» values for Core Web Vitals — targets for the build, not measured results.
Questions & answers
What is RockNode?
RockNode rents game servers to friend groups and small communities. Minecraft and Modded Minecraft are available now, twenty more games are announced. You pick a game, say how many people play, and the plan sizes itself — no spec sheets.
Is RockNode a concept like the other cases?
No. RockNode is studio work on a live product: product design and the visual system, the Next.js front end with a headless CMS, the back end, monitoring and the SEO groundwork. It is in its pre-launch phase, so the buttons lead to a waitlist.
Is the refreshed design on this page live?
No. The «after» is a refresh we propose on top of the live site: the same brand, copy and prices, with clearer hierarchy, a calmer catalog and pages without empty blocks. It lives in HTML only, and every decision comes with a note on how to ship it in the existing code.
How does a payment become a running game server?
Stripe checkout and magic-link sign-in lead to a queue-driven back end that reserves capacity before payment and creates the server through the Pelican Panel API — one container per server. Prometheus metrics, alert rules and a public status page watch the result.
Which languages does the site support?
Ten languages, with hreflang alternates, per-market pricing and quality gates on translations. A claims gate in CI also fails the build on copy that promises what the service cannot guarantee — in all ten languages.
Do you show traffic or customer numbers?
No. No traffic, revenue or customer figures are shown or implied here. The numbers on this page are design and build facts from the project files, not business results.
