Explain the name
Calia comes from Kallos, the Greek word for beauty. The site needed to show that idea from the first second, as well as say it.
Calia ResidencesProperty · Residential development website
A residence that opens like a painting.
The website for Calia Residences by PGB in Danga Bay, Johor Bahru. The name means beauty, so the whole site is treated as one artwork in gold and blue paint.
In short
Calia Residences is a residential development in Danga Bay, Johor Bahru, by Paragon Globe Berhad (PGB). Potadot designed and built its website around the meaning of the name, which comes from the Greek word for beauty. Moving gold and blue paint opens the site, photographs have torn brush edges, and headlines change colour partway across. Behind that look sit pages for the layouts, facilities, location, gallery, a 360 tour and the approved advert details.
The client
A Johor Bahru waterfront address with a name to explain.
Calia Residences is developed by Paragon Globe Berhad, a developer listed on the Main Market of Bursa Malaysia. The development stands in Danga Bay beside Skudai Highway, with a shuttle service to CIQ and the RTS.
It has two towers, Tower A and Tower B, and four layouts that run from a one-bedroom suite to a three-bedroom dual-key home.
- 1,274
- Units
- 2
- Towers
- 4
- Layouts
- Q3 2029
- Expected completion
The job
A new name needs a meaning before the towers are finished.
PGB launched Calia Residences in 2025, so the name is new to buyers. The site has to give it a meaning a visitor remembers, then hold the details a buyer will check.
Speak to two kinds of buyer
The site talks to people looking for a home and people building a portfolio. Both need layouts, facilities and location in plain view.
Name the places around it
The site’s story leans on Danga Bay and Skudai Highway. Visitors need named places and distances to go with it, from CIQ to the schools.
Carry the approved details
Behind the paint, the site still has to show the licence, sales permit, tenure and building plan reference. Those numbers needed a page of their own, not small print under an artwork.
The concept
The name means beauty, so we painted the website.
A rendering of two towers cannot tell a visitor what Kallos means. A painting can. So the site is treated as one artwork: paint on textured paper, with a wave between chapters. The towers arrive after the mood is set.
The route through the page
-
1
Open
Paint moves behind a white card.
-
2
Name
Kallos, beside the towers.
-
3
Promise
Three words, three brushed photos.
-
4
Facts
Eight gold tiles, rising in one by one.
-
5
Place
24 places, a map and a distance line.
-
6
Register
A form beside the towers at night.
Where the look came from
The name
Kallos means beauty. That one word turned a property page into an art piece, and it explains why the site opens on paint instead of a building.
The shoreline
The site places Calia on the Danga Bay shoreline, so the blue paint reads as water. Blue and paper chapters meet on a curved wave, which looks like a tide line on the page.
The logo
A small four-point star sits above the I in Calia. The site lifts it out as a marker above its headlines, and as a navy star that grows to fill the screen before the location chapter.
The design
Gold and blue paint on a sheet of paper.
Two surfaces take turns: painted blue chapters and pale textured paper. Headlines are set in Dominance, a tall display face, and most of them change colour partway across a line, from navy or white into gold.
Colour
- Paper white
#FFFFFFTextured chapters and text on blue - Deep sea navy
#002B64Header, footer and location - Brushed gold
#BE8C5BTiles, form and buttons - Soft peach
#FFD9AFTitles on the facility bars - WhatsApp green
#25D366The chat button alone
Green is the one colour from outside the painting. It appears only on the chat button, so that button is easy to find on any chapter.
Type
Shuttle Service to CIQ and RTS
Marcellus · Menu, buttons and tile labelsNestled along the enchanting shoreline of Danga Bay, Johor Bahru.
Raleway · Reading text and formsTorn brush edge
Photographs on the home page have no straight edges. Each one is cut to a rough brush shape, so the towers and facilities look painted onto the paper instead of placed in a box.
Detail
The key points sit on brushed gold tiles with soft shadows, which stand out on the painted blue. The same tile returns on the distance line, larger, holding the Calia logo.
Rhythm
- Intro
- Address
- Concept
- Facts
- Facilities
- Location
- Contact
- Footer
Blue and paper take turns all the way down. A wave joins most changes, and the move into the location chapter is a navy star that grows to fill the screen as you scroll. The bar above is the real home page, to scale.
Walkthrough
From the first brushstroke to the form.
Follow the home page from the painted opening down to the form. The highlight shows where to look, and the note gives the reason.
The first thing you see is paint
Gold and blue paint moves in a looping video. A pale, see-through white card holds the logo and one line: Luxury Living Made Flexible.
Why This sets the mood before any building appears, and the card keeps the name readable over all that movement.
The name, explained beside the towers
The towers appear with a torn brush edge, next to a short note on the word Kallos.
Why The picture and the meaning sit side by side, so the idea behind the painted look is clear in one view.
Three words carry the promise
Connectivity, Community and Comfort each get a brushed photo and a short paragraph. The middle column sits a little lower.
Why Three words are easy to repeat. The stepped layout keeps them from looking like a standard block of three cards.
Eight tiles, then the page holds still
The tiles rise in one by one: shuttle service, GreenRE Gold certificate, EV charging, security, layouts and more. Then the block holds still while the paper chapter slides up over it.
Why A buyer comparing developments looks for these points. The pause keeps them on screen a little longer.
A long list, sorted into five groups
Facilities sit under five navy bars, from Community Hub to Kids’ Corner, each with its own short list.
Why Groups let a family look at one bar and a remote worker at another, without reading the full list.
Every place named, with a distance
Five tabs open 24 named places with their distances, beside a live Google map. Below them, a dashed line runs from Calia to six stops.
Why A named place with a distance tells a buyer more than a sentence about convenience.
A short form to end on
Name, phone number and email, with a consent box for the terms and PDPA clause, on a gold panel beside the towers at night.
Why Three fields ask little of a visitor who is still comparing, and the sales team gets what it needs to call back.
One card, one lineThe towers meet the nameThree words, three photosEight tiles, held in place
Five groupsTabs, map, distance lineThree fields
On the phone
The painting still leads on a phone.
The painted opening, torn edges and wave lines all carry over. The wide parts, the tiles and the distance line, were laid out again for a narrow screen.
- The white card stays centred over the paint
- Eight tiles fall into two columns
- The distance line wraps into two rows under the map
Built in
What sits behind the painting.
The home page sets the mood. The rest of the site does the detailed work for buyers and for the sales team.
Layout plans
A separate page shows Type A to Type D on tabs, with the size and the number of bedrooms and bathrooms.
360 tour
A VR Tour page in the main menu lets a visitor look around online before making a trip.
Facilities plan
Plans are split by tower and level, so a buyer can see where each facility sits.
Approved advert details
An APDL page, linked in the footer, lists the licence, permit, tenure, approval and completion details.
Built for search
Each page has its own title, and the site describes its pages and the organisation in a format Google can read.
Several ways to reach sales
The main pages end in the same form, and a WhatsApp button stays on screen. The Contact Us page adds the PGB Experience Gallery address and a map.
How we built it
Same process, every project.
Every Potadot project starts by understanding the client's situation before anything is designed. See all seven steps
- 1
Understand the business
What Calia means, who it is for, and what a home buyer and an investor each need to check.
- 2
Content creation
Short chapters for the home page, then separate pages for layouts, facilities, location and the advert details.
- 3
Design + build
Paint, paper, the torn edge and the wave came first, then each chapter for phone and desktop.
- 4
SEO + launch
Page titles and search data set up across the site, then launch and support.
Questions
About this project.
Does your development have a story behind its name? Tell Ricky on WhatsApp at +6011-1142 1029.
What did Potadot do for Calia Residences?
We worked out the painted concept, wrote the content, designed the pages and built the site, with pages for the layouts, facilities, location, gallery, 360 tour and approved advert details, plus search setup.
Why open on paint instead of a photo of the towers?
The name comes from the Greek word for beauty, and a tower render says little about that. Opening on paint gives the idea first and gives the site a look of its own. The towers follow within the first few scrolls.
Where do the legal advert details go on a site like this?
They get their own APDL page, linked from the footer. The painted pages stay uncluttered, and the licence, permit and approval details stay easy to find.
Can you build something like this for my development?
Yes. We start from your own name, location and buyers, so the idea would be yours and the look would be different. Tell us about your launch and we will show you how we would approach it.
