Gate Review · site-gen · Unconventional Stays

Step 1 of 6

How this works

This is a private review room for your project. Pietro and his team have prepared deliverables for you to review at each milestone (we call them "gates"). When it's your turn, the active gate appears below.

Take your time. Open the supporting documents linked in each gate. Then, depending on the gate type: select your preferred option, approve as-is, or leave specific feedback. Pietro is notified the moment you submit. Your choice is logged immutably — useful if there's ever any disagreement about what was decided.

Locked gates below are placeholders for upcoming milestones — they'll unlock as we progress.

Visual direction

Pick the visual direction that feels right to you and, if you like, leave us a note.

Documents

Read the full Design Rationale

Design Rationale — Unconventional Stays Indonesia

*Design system for your one-page site · Version 1 · 2026-07-06*

---

1. In three sentences

You are an AI-first property firm in Indonesia: you turn the messy, opaque work of managing a remote asset into something precise, orderly and data-driven. Your audience — an investor handing over a villa from the other side of the world, or an expat looking for the right long-term home — needs to feel one thing above all: *this is handled, I'm in good hands.* The design delivers that through calm architectural typography, a deep "anchor" navy warmed by a single brass accent, and one signature motion: framed panels that draw themselves open as you scroll, as if you're opening a dossier onto your asset.

---

2. Positioning — the character of the brand

Primary: The Sage. The knower. Google, The Economist, Harvard live here. Everything you said about being *"AI-first, data-driven, precise, turning data into returns"* is Sage to the core — a brand that reassures by knowing, not by shouting.

Secondary: The Ruler. The steward. Mercedes, private banking, five-star custody. This is what makes handing over a property abroad feel safe: order, control, competence. It gives the site its quiet premium weight.

Alternatives we considered and set aside
- *The Caregiver* (the obvious choice for "reassured / relieved") — set aside because it reads consumer-soft: pastels, rounded shapes, a hand-on-the-shoulder tone. For someone trusting you with a real asset, reassurance has to read as competence and order, not tenderness.
- *The Hero* (bold, winning) — set aside because it pushes urgency and triumph. You asked explicitly for no sensationalism; the Hero is all sensation.

You said it yourself: *"we transform asset management into a data-driven, precise, automated process."* That sentence is Sage + Ruler almost word for word — knowledge, applied with order.

---

3. Colour — "Anchor Ink & Brass"

We built the palette with our in-house palette engine (tuned to the Ruler family, warm and premium), then refined it toward the two references you liked — the cream ground of eleos and the navy-and-linen warmth of Range Developments.

- Warm Paper (soft off-white) — the ground the whole site rests on. Calm, considered, never the cold clinical white of a spreadsheet.
- Ink Navy (near-black deep blue) — your anchor colour. It carries the headings, the buttons, and the one dark section at the end. It reads as deep water and institutional trust at the same time — apt for a firm operating on Indonesian coasts.
- Antique Brass (warm muted gold) — used sparingly: a rule line here, a section number there, the stroke of the opening frames. This single warm note is what turns "authoritative" into "in good hands". Not bright, not blingy — a restrained, grown-up warmth.

How it's distributed — a simple editorial rule: about 60% of the surface stays quiet background, 25% carries content and dark sections, and only ~10% brings the brass accent. It lets the page breathe and guides the eye where it matters.

Why not other palettes
- *Navy + gold "corporate luxury"* (the safe finance look) — we kept the navy but softened the gold to brass and warmed the ground, so you read as considered, not as another bank.
- *Blue + earth-teal* — deliberately avoided. That is exactly the palette of the travel/eco guides in your space (including the competitor you named, Rote Guide). You are not a tourist brand; the palette should not borrow their register.
- *A trendy gradient look* — avoided; it dates within a year, and your site needs to hold for three-plus.

Readability: dark text on the paper ground clears the accessibility bar comfortably (contrast ~15:1, well past the standard) — legible for readers with low vision, roughly 1 in 12 people. The design also survives a black-and-white print test, which means the hierarchy is doing the work, not just the colour.

---

4. Typography — architectural, confident, precise

- Headlines: Cabinet Grotesk — a bold modern grotesque. This is the direct answer to the Kononenko site you flagged for its typography: oversized, declarative, confident-not-trendy. It gives your statements the feel of architectural drawings.
- Body: Satoshi — a clean, humanist sans. Professional and highly readable for your services and FAQ.
- Data voice: JetBrains Mono — a monospace used only for small "instrument" details: section numbers (01 / 02 / 03), coordinates, your `KBLI 68200` licence, the phone number. This is the quiet signal that says *"AI-first, precise"* — without a single invented statistic.

Why not the usual choices — we avoided the editorial serif that most "knowledge" brands default to (it would have made you look like a magazine, not a firm), and we avoided Inter/Montserrat (the default of half the startups online — instantly forgettable). All three fonts are free and self-hosted, so there's no licensing cost and nothing to renew.

---

5. The hero — calm, not loud

Intensity chosen: Editorial — subtle, elegant, almost-invisible motion.

Your brand promises reassurance to people who distrust hype. A loud, cinematic hero would read as exactly the sensationalism you ruled out. A silent, bare hero would waste the one moment you have to make someone exhale. Editorial sits precisely between: a full-bleed image of an Indonesian asset, a single oversized statement, and the framed panel drawing itself open. Confident and calm.

Why not the safe default — most sites reach for "parallax photo + grain" and look identical. We layer a fine architectural grid (a blueprint feel that reinforces precision) beneath the image, and let the opening frame carry the first impression instead.

---

6. The thing people will remember — "the frame that opens"

You pointed to Range Developments and *"the box that opens."* We've made that your signature.

A thin brass frame draws itself and opens outward as it scrolls into view — like opening a dossier, or a shutter onto a property. It appears in the hero, around each capability, and around the final call-to-action.

Why it's memorable: when someone describes your site later without remembering the name, they'll say *"it's the one where the panels drew themselves open."* It also tells your story wordlessly — *we open up your asset and put it in order.* No other site we've built uses it.

We keep it disciplined — around four appearances, never on every card — so it stays a signature, not a gimmick.

---

7. Section by section

Hero — one statement, the opening frame, two buttons (Call, Book). Emotion: *this is serious and it's calm.* We rejected a stat-counter hero (you have no figures to show yet, and we will not invent them) and a video hero (too much, too loud).

Reassurance line — a short editorial statement that names the worry (a remote asset, no visibility, wasted time) and answers it. Emotion: *they get my problem.* Revealed line by line as you scroll, so it lands like a thought, not a paragraph.

Approach (why AI-first) — three capabilities in alternating image/text blocks (the eleos rhythm you liked), each inside an opening frame, each tagged with a small number. Emotion: *there's a real method here.* We rejected a dense feature-grid — too much at once for a trust-first brand.

Services — two clean tracks, one for Owners & Investors, one for Tenants & Buyers, in a uniform card grid, with your `KBLI 68200` licence shown on valuation. Emotion: *there's a clear answer for exactly my situation.* We deliberately used a uniform grid (equal dignity, no visual chaos) rather than alternating oversized/undersized cards — the latter reads as clutter.

How it works — four numbered steps with a brass line that traces down them as you scroll. Emotion: *I can see exactly how they'd take custody — that's why I trust it.* Transparency of method is your strongest reassurance tool when you have no testimonials yet.

FAQ — a calm, single-open accordion that dissolves the last doubts (how the AI actually helps, cashflow transparency, what the rental experience feels like). Emotion: *my objections are answered.*

Contact — the one dark, navy section, closing the page like a firm's front desk. A large phone button (your primary goal) with "Book a consultation" beside it, and your real contact details. Emotion: *acting now means I can stop worrying.* The language is *"request a consultation"*, never *"buy now"* — it matches how a stewardship firm speaks.

---

8. What we deliberately did NOT do

- No invented proof. You have no testimonials, client logos, awards or metrics yet, and we did not fabricate any. Trust is built through clarity of method and your real licence, not fake numbers. (This is a firm rule for us.)
- No sensationalism. No exclamation marks, no "revolutionary", no countdowns, no urgency theatrics — exactly as you asked.
- No tourist-brand cues. No earth-teal palette, no adventure photography register, no conversational-backpacker tone — that space belongs to guides like your competitor, not to you.
- No dark-tech-startup look. No neon, no glowing gradients, no "AI = purple space background". Your AI story is told through precision and a data-mono voice, not sci-fi decoration.

---

9. How this differs from our other work

Our system requires every new site to be genuinely distinct from earlier ones of the same character. Our most recent Sage-family site was a warm, serif, terracotta editorial brand. Yours diverges on every major axis: a grotesque + mono type system (not serif), an ink-navy + brass palette (not terracotta), an architectural grid hero (not a photo-parallax), and a self-drawing opening frame as its signature (entirely new). You would never mistake the two for the same template.

---

10. Keeping it fresh

The site is built to hold for three-plus years. The palette can be refreshed against future colour trends while staying in-brand; the UI components receive security and accessibility updates automatically; and you can edit your copy, services and FAQ yourself, in plain language, through the admin panel built into the site — no developer needed.

---

11. A few things to confirm

1. Your real phone number and booking link. The whole site points at a phone call — we need the actual number and your preferred booking tool before we build.
2. Final trade name. We've used "Unconventional Stays Indonesia" as a working title — confirm the name you want on the site.
3. Photography. The opening frames want real images of your Indonesian assets/architecture. Do you have photos, or should we generate on-brand imagery? (We won't use generic stock.)

---

Revision log

- v1 — 2026-07-06: initial design system (Sage + Ruler; Anchor Ink & Brass palette; Cabinet Grotesk Expedition type system; Aperture Frame memorable element).

Waiting for previous gate · Site copy
Waiting for previous gate · Home preview
Waiting for previous gate · Site preview
Waiting for previous gate · Final check
Waiting for previous gate · Launch

This link expires on July 20, 2026