Bumi Cinta · Brand System
The living visual reference for bumicintabali.com: colors, typography, interaction standards, and the workflow and marketing rules the site is built under. This page is the "latest" pointer; it is republished at this same link every time the guide version bumps.
01 · Color
Canonical source: new-work/styles/variables.css, distilled from the SLP module (SpiritTabs), the most internally consistent part of the site. Name any of these in a directive and it resolves to one variable and one hex value.
Bumi Green, Forest Green, and Ink are dark: they carry Cloud or white text. Cloud and Sand are light: they carry Stone or Ink text. Both golds are accents only; check contrast before using either as text on a light ground.
A pre-rebuild interim palette (moss, paper, amber, sage) still lives in src/app/globals.css because older components reference it. It is marked with a warning comment. Never style new UI with those tokens.
02 · Typography
Americano for headings and display, Montserrat for everything else. No other family should appear; any "AG Headings" reference in CSS is a dead token from an unloaded font, treat it as a bug.
Americano has no italic cut. Only 400 and 700 are loaded, both upright. Never set font-style: italic on Americano: the browser fakes a slant. Italic on this site is Montserrat only.
For contractors and design files. Web format first, desktop format for Figma and Illustrator.
Americano Regular (woff2) · Regular (ttf) · Americano Bold (woff2) · Bold (ttf)
Licensing: the files are a URW Americana W01 webfont kit. Confirm the licence covers each contractor before sending, and before any new domain serves it.
Earth Love Sanctuary
From the mountain to the sea, Kaja to Kelod.
figma-hero-title welcome titles, 18 components sitewide.Bumi Cinta · Spirit
Intentionally designed with deep respect for the land, Bumi Cinta offers accommodation immersed in the jungle, where modern comfort and environmental responsibility exist in quiet harmony.
"In Barefoot Magnificence"
Each page keeps its own H1 treatment; all are upright now, sizes vary from 25 to 46px. A past pass that unified them was reverted. Change H1s only page by page, by name.
03 · Interaction
Reference implementation: .figma-outline-button in header.css, the "Stay With Us" button.
Buttons and inputs: 4px. Cards and grouped containers: 12px (footer CTA grid, cookie consent card). Circular elements: 999px.
Separation on light grounds comes from the Border color, not heavy drop shadows. Where a shadow exists it is soft and low-contrast.
04 · Workflow
Ergonomics for giving directives and keeping the guide honest.
new-work/styles/variables.css holds the values. new-work/STYLE-GUIDE.md names them and carries the version. This page is the visual "latest". Change a token, bump the version, republish this page: one commit.
Say "Sand", "the SLP module", "the Forest Lover module", or "the Venue amenities section" and it maps to one file and one value. Nicknames below.
All images live under /images/, with descriptive hyphenated SEO filenames (Gallery-North-Shore-Bali-1.jpg), never numbered files in bare folders.
No em dashes anywhere in site copy. "Eco" is valid in SEO meta tags but stays out of visible on-page copy. Titles and headings follow the keyword strategy below without reading like keywords.
| Nickname | File | What it renders |
|---|---|---|
| SLP module | SpiritTabs.tsx + spirit-tabs.css | Spirit / Land / People tabs + the mission statement section. Canonical typography source. |
| Header | Header.tsx + header.css | Sticky site header on every page (Home swaps in HeroBanner's own bar) |
| Hamburger drawer | FullscreenMenu.tsx | Fullscreen nav drawer opened from the header |
| Home hero | HeroBanner.tsx | Homepage top video/logo hero, / only |
| Forest Lover module | FooterCTA.tsx | Rotating-title CTA band with action tiles + email signup |
| Site footer | NewWorkFooter.tsx | Bottom footer nav + logo, every page |
| Legal shell | LegalPage.tsx | Shared shell for Terms/Privacy: compact hero + prose |
| Sitemap | sitemap/page.tsx | The /sitemap page |
05 · Marketing
The SEO silo strategy: silo pages are the most optimized, while feature pages, deep dives, and journal posts exist to support them through vertical and lateral terms.
Persona · Retreat Leader
Searches with commercial intent: "North Bali retreat center", "Bali retreat venue hire", "host a retreat in Bali". Decision mode; venue pages and the Host a Retreat silo serve them.
Persona · Guest
High-volume experience searches: "North Bali yoga retreat", "wellness retreat North Bali", "bamboo retreat Bali", "Bali retreat off the beaten path". Experiences and accommodation silos serve them.
Persona · Community Member
Belonging searches: "co-living retreat Bali", "conscious community Bali". Community and Pantai pages serve them; deliberately unlinked from main nav for now.
| Tier | Terms | Where they live |
|---|---|---|
| Primary anchor | "North Bali retreat center", "North Bali retreat" (own it on every page), "retreat center North Bali" | Home title and description, sitewide title template |
| Horizontal (geo) | yoga / wellness / spiritual "retreat North Bali" | Silo page titles |
| Vertical (offer) | "Bali retreat venue hire", "yoga retreat Bali small group", "co-living retreat Bali", "Tejakula Bali retreat" | Matching subpages, one vertical each |
| Identity | Eco Retreat, Eco Sanctuary, Eco Luxury (+ Bali, North Bali, Northshore Bali) | Meta tags only, never visible copy |
"Bumi Cinta - North Bali Retreat Center & Eco Sanctuary". Contains the primary anchor as a contiguous phrase. Subpages append "- Bumi Cinta".
"An eco luxury retreat center on Bali's north shore. Host or join yoga and wellness retreats amid waterfalls, ancient trees and clean ocean air." Speaks to both hosts and guests in one line.
06 · History
v2.0 · September 7, 2026
Lora retired sitewide, replaced by Americano (URW Americana), self-hosted via next/font/local. 169 font-family declarations across 87 files swapped; sizes, weights and spacing preserved. Americano has no italic cut, so the 92 italic declarations Lora carried were set upright and the hero style tokens flipped to normal. Italic is now Montserrat only. Display sizes rebalanced: home H1 58 to 46 bold, welcome titles 46 to 36 bold at -0.02em, drawer headings 56 to 50, story cards unified at 30, venue quotes 46 to 38. Typeface files added for download above.
v1.2 · August 21, 2026
"Cream" renamed to "Cloud" (value unchanged, #f5f1eb; CSS variable keeps its legacy name). Display Headline's 700-bold upright cut discontinued as interim; Lora italic used instead until a new display font is found.
v1.1 · August 21, 2026
Added interaction standards (4px button radius, 12px container radius, legacy palette prohibition), version tracking, the token-to-guide-to-artifact workflow rule, and this page as the canonical latest link. Home metadata retargeted at the keyword anchors. Cookie consent card rebuilt on the new system.
v1.0 · August 2026 (baseline)
Palette, typography, module and section references confirmed from the SLP module as the sitewide standard.