GGS Studio
A website and booking system for a one-room recording studio in Lapu-Lapu City, with a transport bar that plays like a session.
GGS Studio rents its room and an engineer by the hour. The site lets artists book a slot, add recording or mixing, and pay at the studio or online, and gives staff a dashboard to manage it.
- Discipline
- Interfaces and products
- Client
- GGS Studio
- Year
- 2026
- Role
- Web design, Development, Booking system
- Tools
- HTML, CSS, JavaScript, Node
The real site, every page of it, running here with its booking backend switched off. Scroll inside it, press play, or open the booking and sign-in pages from its nav.
The page plays like a session
The waveform under the hero is the scroll bar. As you read down the page, the playhead moves along it, the played part of the wave lights up and the timecode counts toward 3:34. Once the hero is gone, a thin progress line in the nav takes over the job.
The headline lines rise in one after another, then drift up and fade as the hero scrolls away. Section headings wipe in from under a line, cards and photos follow in a stagger, and anything you scroll past leaves the way it came, upward, so scrolling back brings it down again.
A treated room with gold light
The site borrows from the room itself: near-black walls, a single gold for actions and prices, teal only for live or confirmed states. A transport bar with a waveform sits under the hero, so the page reads like a session timeline.
Corners are 2 pixels everywhere, groups are separated by hairlines, and notes use a thin rule instead of a coloured box.
- #020304 Treated wall
- #0A0C0E Panel
- #F4F8F8 Cream
- #FFD558 Gold
- #4DFFDB Live teal
Inter for the page, a monospace for timecodes, prices and slots. Gold is only for actions and prices, teal only for live or confirmed states.
Thought process
- 01
Bring the room online
The studio is dark, treated and lit with warm light. The site uses the same: near black with one gold.
- 02
Talk like a session
A transport bar with a waveform sits under the hero, so the page reads like a recording timeline.
- 03
Make booking clear
Date, add-ons, payment and details in four plain steps, with the rules written where people will see them.
