Skip to main content
The Adosa Real Estate website uses a sophisticated theme system built on CSS custom properties that provides a premium, luxury aesthetic with support for light and dark themes.

​
Color System

The color palette is defined in src/styles/theme.css and follows a numbered system (1-4) representing different semantic purposes:

​
Primary Colors

theme.css
:root {
  /* Color 1: Background (Light Beige) */
  --color-1: #F2F1EB;
  
  /* Color 2: Secondary/Muted (Medium Gray) */
  --color-2: #AEADA5;
  
  /* Color 3: Accent (Gold/Ochre) */
  --color-3: #D7AE56;
  
  /* Color 4: Primary Text (Dark Gray Ochre) */
  --color-4: #53534B;
}

​
Usage Guidelines

Color 1 - Background

Light beige background color (#F2F1EB) used for main page backgrounds and sections

Color 2 - Secondary

Medium gray (#AEADA5) for secondary text, borders, and subtle UI elements

Color 3 - Accent

Gold/ochre accent (#D7AE56) for CTAs, highlights, and premium touches

Color 4 - Text

Dark gray ochre (#53534B) for primary text and headings

​
Special Purpose Colors

:root {
  /* Overlay and inverse text colors */
  --color-overlay: #1a1a1a;
  --color-text-inverse: #ffffff;
}

​
Dark Theme

The theme system supports dark mode through a data attribute approach:
theme.css
[data-theme="dark"] {
  --color-1: #1a1a1a;
  --color-4: #F2F1EB;
}

​
Using Dark Theme

Apply the dark theme to any section or component: 
<section data-theme="dark" class="hero-section">
  <h1>Premium Properties</h1>
  <p>Discover luxury living</p>
</section>
You can also use the .theme-dark utility class for contextual styling:
global.css
.theme-dark {
  --color-4: #f2f1eb;
  --color-2: #ccc;
}

​
Typography Variables

Font family variables use the Onest font family throughout:
theme.css
:root {
  --font-heading: 'Onest', sans-serif;
  --font-body: 'Onest', sans-serif;
}

​
Font Sizes (Desktop)

:root {
  --font-size-h1: 4.5rem;  /* 72px */
  --font-size-h2: 3.5rem;  /* 56px */
  --font-size-h3: 2rem;    /* 32px */
  --font-size-p: 1.1rem;   /* 17.6px */
  --font-size-nav: 0.9rem; /* 14.4px */
}

​
Responsive Font Sizes (Mobile)

Font sizes automatically adjust on mobile devices:
theme.css
@media (max-width: 768px) {
  :root {
    --font-size-h1: 2.8rem;  /* 44.8px */
    --font-size-h2: 2.2rem;  /* 35.2px */
    --font-size-h3: 1.5rem;  /* 24px */
  }
}

​
Layout Variables

Spacing and layout dimensions are controlled through CSS variables: 
:root {
  /* Container padding */
  --spacing-container: 4rem;
  
  /* Navigation height */
  --height-nav: 90px;
}
Mobile adjustments: 
@media (max-width: 768px) {
  :root {
    --spacing-container: 1.5rem;
    --height-nav: 70px;
  }
}

​
Animation Variables

Premium easing and duration values for smooth animations:
theme.css
:root {
  /* Premium cubic-bezier easing */
  --ease-premium: cubic-bezier(0.25, 1, 0.5, 1);
  
  /* Duration presets */
  --duration-slow: 1.2s;
  --duration-medium: 0.8s;
}

​
Usage Example

.button {
  transition: transform var(--duration-medium) var(--ease-premium);
}

.button:hover {
  transform: translateY(-2px);
}

​
Theme Utilities

Additional helper variables in global.css:
global.css
:root {
  --border-radius: 4px;
  --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

​
Best Practices

Use var(--color-3) instead of hardcoding hex values to maintain consistency
Don’t use --color-3 for text if it’s meant for accents. Use the appropriate color variable for its intended purpose
When creating new components, verify they work correctly in both light and dark themes
The system automatically adjusts for mobile—use the CSS variables instead of writing custom media queries

Typography

Learn about the typography system

Responsive Design

Explore responsive utilities

Build docs developers (and LLMs) love

Get started for freeTalk to us