When looking for a Property Management System (PMS) dashboard for a hotel project, I noticed most existing solutions look like they were built in 1998.
I decided to code a modern, premium dashboard from scratch using pure HTML and vanilla CSS. I focused on two main design trends: Dark Mode and Glassmorphism.
Here is a breakdown of how I approached the design, along with some CSS snippets you can use in your own projects.
- The Dark Mode Color Palette Instead of using pure black (#000000), I used a deep slate blue for the background. This reduces eye strain for hotel staff working night shifts and feels much more premium.
`css
:root {
--bg-dark: #0f172a; /* Deep slate /
--surface-dark: #1e293b; / Slightly lighter surface /
--accent-gold: #facc15; / Premium gold for CTAs */
--text-main: #f8fafc;
}
body {
background-color: var(--bg-dark);
color: var(--text-main);
}`
- The Glassmorphism Effect For the statistics cards (like Revenue and Occupancy Rate), I used a subtle glass effect to make them pop off the dark background without looking flat.
`css
.stat-card {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 24px;
transition: transform 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
}`
- The Result By combining these modern design tokens with a clean CSS Grid layout, the dashboard feels incredibly sleek. It tracks live bookings, room statuses, and RevPAR seamlessly.
Want the full code?
If you are a developer, agency, or freelancer building a SaaS or a booking system, you don't have to start from scratch.
I've packaged the complete, fully responsive HTML/CSS template. You can see the design and grab the source code here to save yourself 20 hours of coding:
👉 Download the Lumina PMS Template
Happy coding! Let me know if you have any questions about the CSS architecture in the comments.
Top comments (0)