2026
Emberline
Hosting that feels warm — and never hides the bill.
A warm, developer-friendly hosting platform: git-push deploys, live logs, domains with automatic TLS, edge regions and transparent usage-based billing.
A self-initiated concept, designed like a real product.
The brief we set ourselves
Design a hosting console for people who ship small web apps: git-push deploys, live logs, domains with automatic TLS, edge regions and usage-based billing — and make it feel calm and warm instead of cold infrastructure.
Who it is for
Indie developers, small studios and agencies shipping web apps; teams outgrowing shared hosting who need clarity more than knobs.
What we designed
Projects overview, deployment detail with a live log, domains with an honest error state, a marketing pricing page with a cost calculator, and the component sheet behind all of them.
Design facts from the concept files — not business results.
02ResearchSmall teams want a cloud that explains itself.
Before any pixels: where the market is going, how the leaders present deploys and pricing, and which of their patterns earn their place in a calmer product.
Before any pixels: where the market is going, how the leaders present deploys and pricing, and which of their patterns earn their place in a calmer product.
- Market
Y Combinator's Fall 2026 Requests for Startups name «A Cloud for Small Software».
DecisionDesign for one small team, not an enterprise org chart: a single team switcher, plain language, no jargon in the main path.
- Momentum
Developer hosting is growing fast: Vercel passed $200M ARR in mid-2025, roughly doubling in ~15 months (third-party estimate).
DecisionThe category is crowded, so features alone will not differentiate — warmth and billing transparency will.
- Pricing patterns
Vercel shows «N included → then per unit» rows; Hetzner puts the monthly price on the card; Render prices instances from $7/month.
DecisionTier cards with a monthly price, a usage table with included-quota markers and a calculator that shows the bill before it happens.
Patterns we borrowed
- Vercel
- Deployments dashboard with statuses and preview URLs; «included / then per unit» usage rows
- Render / Fly
- Regions and instances as compact cards and chips
- Hetzner
- A transparent monthly price right on the tier card
- Cloudflare
- Only the feeling of warm orange on neutral white; every hue shifted (#F6821F → #F28A2E, #FF6633 → #F2653A, #FBAD41 → #F7B550) and a darker ember #B8500C for anything interactive
What we left out
Names, logos, copy and illustrations of any of these companies. Emberline has its own name, mark and 3D renders.
Moodboard references
From grey boxes to a warm, legible console.
The «before» is not drawn after the fact: every wireframe below is generated from the same screen markup, reduced to outlines, readable labels and grey word-bars — no colour, imagery or effects. Drag the handle to compare.
- 01
Hierarchy
One primary action per screen (New project, Open preview), status before metadata, the running step pulled forward in the build timeline.
- 02
Grid & density
240 px sidebar and a 12-column content grid with 24/32 px gutters; dense 40 px table rows where engineers scan, air where they decide.
- 03
States
Building / Ready / Error / Canceled badges, hover on project cards, a 2 px ember focus ring, and a full error state on Domains: invalid hostname, misconfigured CNAME, propagation by region.
- 04
Assets
Three 3D renders made for the concept — the backdrop behind the glass log, the pricing hero and the empty state. No stock, no third-party marks.
- 05
Glass, measured
The log viewer is 30 px backdrop blur over the render. Every text line was checked against the worst pixel underneath it: 6.32:1 at the lowest.
- 06
Real-looking data
Commits, branches, regions (fra1 · iad1 · sin1), build timings and invoices instead of lorem ipsum, so the layout is tested by realistic lengths.
Warm on neutral: colour only glows where it matters.
Glow orange is decoration only (2.38:1 on paper), so every interactive element uses a darker ember. Inter Tight sets the engineered headlines, Inter the interface, JetBrains Mono the logs.
An «E» cut from three diagonal ember bands — picked from four sketched directions because it still reads at 16–24 px.
#B8500C
vs bg 4.8:1 · label 5.01:1
#F28A2E
on bg 2.38:1
#1E1A17
on bg 16.56:1
#FBFAF8
text on it 16.56:1
#FFFFFF
text on it 17.28:1
#625A54
on bg 6.47:1
Accent / bg 2.38:1 — glow orange is for fills and brand moments with dark text, never for text or signal icons.
Inter Tight 700Emberline
Inter Tight 700Indie developers, small studios and agencies shipping web apps
Inter 400 · 16/26A warm, developer-friendly hosting platform: git-push deploys, live logs, domains with automatic TLS, edge regions and transparent usage-based billing.
Inter 600 · 12web hosting / edge platform
Four screens, one calm system.
Projects overview
KPI tiles with sparklines, project cards with status, branch, last commit and regions, an import card and recent activity — everything a small team checks in the morning.
Domains — the error state
We designed the failure first: an invalid hostname, a misconfigured domain with the wrong CNAME highlighted in the DNS table, and propagation by region.
Glass log viewer
Levels, error and highlight lines, follow switch and cursor — readable over the render.
DNS records
The wrong record is flagged in place, with the expected value right under it.
Pricing page
Four tiers with a «most popular» ribbon, an included / then usage table and a calculator with included-quota markers and a dark estimate panel.
Component sheet
Logo and palette, buttons with focus, the glass log viewer, status badges and region chips, usage meters (included / alert / overage), ⌘K palette, tier card, empty state and inputs.
WarmEngineeredTrustworthy
06Build planHow we would build it.
Emberline is infrastructure, so the design only holds if the system behind it does. Six stages take it from the cost model to launch — each one ends with something we can show, test or ship.
Emberline is infrastructure, so the design only holds if the system behind it does. Six stages take it from the cost model to launch — each one ends with something we can show, test or ship.
- Git pushWebhook from GitHub or GitLab, one per branch
- Build runnersIsolated containers with a shared cache
- Edge regionsfra1 · iad1 · sin1, automatic TLS
- Log & usage streamsLevels, retention, usage meters
- Console & billingDashboard, alerts, invoices
System sketch — from a git push to the invoice
- 01
Discovery & architecture
Tenancy model, regions, build isolation and the cost model behind every price on the pricing page.
DeliverablesArchitecture mapPricing model - 02
Git → build pipeline
Webhooks from git providers, isolated build runners with a shared cache, a preview URL per branch.
DeliverablesBuild servicePreview routing - 03
Edge & domains
Edge regions, DNS verification, automatic TLS via ACME, propagation checks feeding the Domains screen.
DeliverablesDomain serviceCert automation - 04
Live logs & observability
Streaming build and runtime logs with levels, filters and retention — the data behind the glass log viewer.
DeliverablesLog pipelineRetention policy - 05
Usage metering & billing
Meters for bandwidth, compute and builds with included quotas, alerts before overage, invoices.
DeliverablesMeteringInvoicesAlerts - 06
Hardening & launch
Load tests, a status page, docs and a migration path from shared hosting.
DeliverablesRunbooksStatus pageDocs
Questions & answers
Is Emberline a real product?
No. Emberline is a self-initiated concept by Omnisense — a brief we set ourselves, with no client and no business metrics. All product data in the screens is fictional.
Who is Emberline for?
Indie developers, small studios and agencies shipping web apps, and teams outgrowing shared hosting who need clarity more than knobs.
What did you design?
A hosting console for desktop: projects overview, deployment detail with a live log, domains with an honest error state, a marketing pricing page with a cost calculator, and the component sheet behind all of them.
How does Emberline avoid surprise bills?
Billing transparency is the core idea: tier cards with a monthly price, a usage table with included-quota markers and a calculator that shows the bill before it happens. Usage meters warn before overage.
How would it be built?
In six stages: discovery and architecture, a git-to-build pipeline, edge regions and domains with automatic TLS, live logs, usage metering and billing, then hardening and launch. The proposed stack includes a React / Next.js console, container build runners, Postgres and ACME / Let's Encrypt.
Are the 3D images stock?
No. The three 3D renders — the backdrop behind the glass log, the pricing hero and the empty state — were made for the concept. No stock, no third-party marks.
