# Design System - Kevron Suites & Apartments

## 1. Color Palette Tokens

The Kevron color system is designed to evoke premium luxury, reliability, and modern smart living.

| Token | Hex | Role | Usage |
| :--- | :--- | :--- | :--- |
| `primary` | `#2B3192` | Kevron Royal Blue | Main brand actions, active headers, bold buttons |
| `primary-dark` | `#080D2B` | Midnight Navy | Dark backgrounds, overlays, typography headers |
| `secondary` | `#1FADEA` | Kevron Sky Cyan | Supporting elements, icons, interactive hover states |
| `accent-gold` | `#D6A84F` | Champagne Gold | Luxury highlights, premium badges, pricing labels |
| `bg-soft` | `#F4F8FF` | Soft Ice Blue | Card backgrounds, alternate sections |
| `border` | `#DDE6F3` | Mist Blue Grey | Border frames, visual dividing lines |
| `text` | `#4B5563` | Charcoal Grey | Standard readable body descriptions |
| `text-strong` | `#172033` | Charcoal Navy | High-contrast heading text |
| `success` | `#16A34A` | Emerald Green | Confirmation alerts, available booking rooms |
| `warning` | `#F59E0B` | Warm Amber | Incomplete checkout alerts, temporary notices |
| `error` | `#DC2626` | Soft Red | Error banners, occupied calendar ranges |

---

## 2. Typography Guidelines

Kevron Suites and Apartments utilizes a dual-font luxury system.

* ** luxury Headings**: `Marcellus`, Georgia, serif
  * Gives an artistic, elegant, premium hospitality aesthetic.
  * Capped at `1.8rem` for H1 to preserve readability and mobile layout.
* **Body, UI and Pricing Elements**: `Inter`, Arial, sans-serif
  * Highly readable geometric sans-serif for UI labels, tables, navigation, and description text.
  * Body text is strictly capped at `0.875rem`.

### Size Constraints
```css
h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 3vw, 1.8rem);
  font-weight: 400;
  line-height: 1.25;
}
h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 400;
  line-height: 1.3;
}
body {
  font-family: var(--font-body);
  font-size: clamp(0.8125rem, 1vw, 0.875rem);
  color: var(--color-text);
  line-height: 1.5;
}
```

---

## 3. Structural Radius & Borders

* **Buttons**: Border-radius of exactly `50px` (circular pill outline) for premium action touchpoints.
* **Cards & Containers**: Border-radius of exactly `0.1rem` (sharp, ultra-modern luxury lines).
* **Dividers & Outlines**: Box shadow: `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px` for high-end minimalistic containment.

---

## 4. Alternate Layout Systems

Every page must utilize alternating section backgrounds:
1. **Section 1**: Cloud White (`#FFFFFF`)
2. **Section 2**: Soft Ice Blue (`#F4F8FF`) or an ultra-soft blue gradient
3. **Section 3**: Midnight Navy (`#080D2B`) for high-fidelity luxury highlights and reviews blocks
4. **Section 4**: Gradient CTA block (e.g. Royal Blue `#2B3192` to Sky Cyan `#1FADEA`)

---

## 5. Micro-Animations

* **Buttons**: Fast `cubic-bezier(0.4, 0, 0.2, 1)` transitions for background-color, border-color, and scale adjustments (a subtle bouncy 3D push feel).
* **Cards**: Slow `transition-duration: 400ms` for background deepening and shadow expansions upon mouse enters.
* **Page Transitions**: Blends / fades using GSAP and Alpine wrappers.

---

## 6. Brand Logos & Assets Handling

To ensure high-fidelity, high-contrast display across various light, dark, and gold background environments, we utilize custom responsive vector logos:

* **Light Background Logo (`logo.svg`)**:
  - **Path**: `public/pictures/logo.svg`
  - **Monogram Color**: Royal Blue (`#2B3192`) & Gold (`#D6A84F`)
  - **Text Color**: Midnight Navy (`#080D2B`)
* **Dark Background Logo (`logo-dark.svg`)**:
  - **Path**: `public/pictures/logo-dark.svg`
  - **Monogram Color**: Gold (`#D6A84F`) & Sky Cyan (`#1FADEA`)
  - **Text Color**: White (`#FFFFFF`)

### Layout Integration Rules
* **Header / Footer Sizing**: Target size height of exactly `32px` to `40px` max, with automatic responsive scaling ratios (`aspect-ratio: 4/1`).
* **Fallback Text**: Always supply alternative description text `alt="Kevron Suites and Apartments"` for maximum screen-reader accessibility and image block prevention.