Typography
Typeface · SangBleu Sunrise — Primary
La Palmeraie
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Typeface · Diana William — Secondary
La Palmeraie
Heading One
Heading Two
Heading Three
Typeface · Open Sans — Light (300)
The art of hospitality, refined in every detail.
The art of hospitality, refined in every detail.
The art of hospitality, refined in every detail.
The art of hospitality, refined in every detail.
The art of hospitality, refined in every detail.
Typeface · Open Sans — Regular (400)
The art of hospitality, refined in every detail.
The art of hospitality, refined in every detail.
The art of hospitality, refined in every detail.
The art of hospitality, refined in every detail.
The art of hospitality, refined in every detail.
Typeface · Open Sans — Bold (700)
The art of hospitality, refined in every detail.
The art of hospitality, refined in every detail.
The art of hospitality, refined in every detail.
The art of hospitality, refined in every detail.
The art of hospitality, refined in every detail.
Buttons
Behavior reference for all button types and interaction states.
Primary
Dark Surface
Secondary
Link
Colors
Brand palette and functional application of each color.
Brand Color · Main Colors
Brand Color · Opacity
Brand Color · Alerts
Color Application
Grid
12-column desktop · 8-column tablet · 4-column mobile. Gap: 24px desktop, 16px tablet/mobile.
Responsive Breakpoints
| Breakpoint | SCSS token | Condition | Columns | Gutter | Device |
|---|---|---|---|---|---|
| Desktop full | desktop-xl | min-width: 1921px | 12 | 1.5rem (24px) | Desktop |
| Desktop large | desktop-lg | min-width: 1441px | 12 | 1.5rem (24px) | Desktop |
| Desktop | desktop | min-width: 991px | 12 | 1.5rem (24px) | Desktop |
| Tablet | tablet | max-width: 990px | 8 | 1rem (16px) | Tablet |
| Mobile | mobile | max-width: 768px | 4 | 1rem (16px) | Mobile |
| Mobile SM | mobile-sm | max-width: 374px | 4 | 1rem (16px) | Mobile |
Desktop — 12 columns · gap 1.5rem (24px)
Tablet — 8 columns · gap 1rem (16px)
Mobile — 4 columns · gap 1rem (16px)
Class reference
| Class | Breakpoint | Effect |
|---|---|---|
| .col-{1–12} | Desktop (>990px) | Span N of 12 columns |
| .col-t-{1–8} | Tablet (≤990px) | Override span: N of 8 columns |
| .col-m-{1–4} | Mobile (≤768px) | Override span: N of 4 columns |
| .col-full | All | Span all columns (1 / -1) |
| .container | All | max-width 90rem (1440px) · 1.5rem padding |
| .container--full | All | max-width 120rem (1920px) |
| .container--fluid | All | No max-width |
| .grid--gap-none | All | gap: 0 |
| .grid--gap-sm | All | gap: 0.5rem (8px) |
| .grid--gap-md | All | gap: 1rem (16px) |
| .grid--gap-lg | All | gap: 1.5rem (24px) |
Shadows
Standardized shadow styles used to define layers, establish hierarchy, and distinguish interactive elements across the interface.
Token reference
| Class | SCSS variable | Value | Usage |
|---|---|---|---|
| .shadow-lg | $shadow-large | 0 16px 48px rgba(0,0,0,0.12) | Modals, dropdowns, hero cards |
| .shadow-md | $shadow-medium | 0 8px 24px rgba(0,0,0,0.08) | Cards, panels, popovers |
| .shadow-sm | $shadow-small | 0 2px 12px rgba(0,0,0,0.06) | Subtle lift, hover states |
| .shadow-none | $shadow-none | none | Remove shadow (e.g. active state) |
Spacing
Standardized spacing scale for consistent layout, clear visual hierarchy, and predictable behavior across all components and breakpoints. Always use defined tokens to maintain alignment, readability, and scalability.
Spacing size — all values in rem · 1rem = 16px