Skip to main content

​
Overview

Ficha Dubai uses Tailwind CSS for styling with a custom configuration and additional CSS classes for glass effects and animations. The design system supports both light and dark modes.

​
Tailwind CSS Configuration

The Tailwind configuration is defined in the <script> tag in index.html: 
tailwind.config = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: "#2563eb",
        "accent-teal": "#00f5d4",
        "accent-gold": "#fbbf24",
        "background-light": "#f8fafc",
        "background-dark": "#0f172a",
        "navy-deep": "#0a1128",
      },
      fontFamily: {
        display: ["Plus Jakarta Sans", "Inter", "sans-serif"],
        body: ["Inter", "sans-serif"],
      },
      borderRadius: {
        DEFAULT: "0.75rem",
        'xl': "1rem",
        '2xl': "1.5rem",
      },
    },
  },
};

​
Custom Colors

Color Palette

The theme includes custom colors for branding and UI elements:
  • primary: #2563eb - Main brand color (blue)
  • accent-teal: #00f5d4 - Teal accent for CTAs
  • accent-gold: #fbbf24 - Gold accent for highlights
  • background-light: #f8fafc - Light mode background
  • background-dark: #0f172a - Dark mode background
  • navy-deep: #0a1128 - Deep navy for headers

​
Typography

Two font families are configured:
  • Display Font: Plus Jakarta Sans (for headings and prominent text)
  • Body Font: Inter (for general content)
Both fonts are loaded from Google Fonts: 
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet"/>

​
Custom CSS Classes

​
Glass Card Effect

The .glass-card class creates a frosted glass appearance with backdrop blur: 
.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
Usage: 
<div class="glass-card p-6 rounded-2xl">
  <!-- Your content -->
</div>

​
360 Tour Button

The .btn-360 class creates an eye-catching gradient button for 360° tours: 
.btn-360 {
  background: linear-gradient(135deg, #00f5d4 0%, #00d1b2 100%);
  box-shadow: 0 10px 25px -5px rgba(0, 245, 212, 0.4);
}

.btn-360:hover {
  box-shadow: 0 15px 30px -5px rgba(0, 245, 212, 0.6);
  transform: translateY(-2px);
}
Usage: 
<a href="#" class="btn-360 px-8 py-4 rounded-full font-display font-extrabold">
  Vista 360°
</a>

​
Material Icons

Custom styling for Material Symbols Outlined icons: 
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

​
Dark Mode

Dark mode is implemented using Tailwind’s dark: variant with class-based toggling: 
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 transition-colors duration-300">
Toggle dark mode with JavaScript: 
document.documentElement.classList.toggle('dark');

​
Customizing Colors

​
Change Primary Color

To change the primary brand color, update the Tailwind config: 
tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: "#10b981", // Change to green
        // ... other colors
      },
    },
  },
};

​
Change Accent Colors

Modify accent colors for CTAs and highlights: 
colors: {
  "accent-teal": "#06b6d4", // Change to cyan
  "accent-gold": "#f59e0b", // Change to amber
}
After changing colors in the Tailwind config, you may need to update the corresponding values in custom CSS classes like .btn-360 to maintain consistency.

​
Customizing Typography

​
Change Fonts

To use different fonts:
  1. Update the Google Fonts link in index.html:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Montserrat:wght@600;700;800&display=swap" rel="stylesheet"/>
  1. Update the Tailwind font configuration:
fontFamily: {
  display: ["Montserrat", "sans-serif"],
  body: ["Roboto", "sans-serif"],
}

​
Apply Font Classes

Use the font utilities in your HTML: 
<h1 class="font-display font-extrabold">Property Title</h1>
<p class="font-body">Description text</p>

​
Customizing Border Radius

The default border radius is set to 0.75rem. To change it: 
borderRadius: {
  DEFAULT: "0.5rem",    // Smaller rounded corners
  'xl': "1.25rem",
  '2xl': "2rem",        // Larger rounded corners
}

​
Example: Custom Color Scheme

Here’s a complete example of creating a custom purple theme: 
tailwind.config = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: "#7c3aed",           // Purple
        "accent-teal": "#8b5cf6",     // Light purple
        "accent-gold": "#c084fc",     // Lighter purple
        "background-light": "#faf5ff",
        "background-dark": "#1e1b4b",
        "navy-deep": "#0f172a",
      },
      fontFamily: {
        display: ["Plus Jakarta Sans", "sans-serif"],
        body: ["Inter", "sans-serif"],
      },
    },
  },
};
When customizing the color scheme, ensure sufficient contrast ratios for accessibility. Test both light and dark modes thoroughly.

​
Additional Styling Resources

Tailwind CSS Docs

Official Tailwind CSS documentation for utility classes

Google Fonts

Browse and select custom fonts for your project

Material Icons

Explore available Material Symbols icons

Color Palette Generator

Generate cohesive color schemes

Build docs developers (and LLMs) love

Get started for freeTalk to us