Remixes of thebeautifulmarrakech.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Thebeautifulmarrakech
description: |
The Beautiful Marrakech's design system embodies luxury hospitality through a
refined, European-influenced aesthetic layered over Moroccan cultural imagery.
The visual language prioritizes elegance through generous whitespace, serif
and geometric typography mixing, and dramatic hero photography that anchors
each section. The palette is restrained—near-black with warm neutrals—allowing
rich photography and golden light to provide visual drama. There is no
aggressive branding; instead, the system trusts curated imagery and measured
typography to convey premium event planning and destination expertise. The
overall mood is sophisticated, timeless, and deeply rooted in place—evoking
both Parisian design restraint and Moroccan hospitality warmth.
source:
url: "https://thebeautifulmarrakech.com/evenementiel-a-marrakech/"
pagesAnalyzed: 6
extractedAt: 2026-10-26
tokensMeasured: true
colors:
primary: "#131516"
canvas: "#F2F3F5"
surface: "#FFFFFF"
on-primary: "#FFFFFF"
ink: "#FFFFFF"
hairline: "#6E8458"
accent-1: "#212934"
accent-2: "#212326"
neutral-1: "#000000"
typography:
display-xl:
fontFamily: Impact
fontSize: 78px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -1.17px
display-xl-playfair-display:
fontFamily: "Playfair Display"
fontSize: 78px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -1.17px
display-lg:
fontFamily: Montserrat
fontSize: 54px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -0.81px
display-md:
fontFamily: Montserrat
fontSize: 48px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -0.72px
display-md-libre-baskerville:
fontFamily: "Libre Baskerville"
fontSize: 48px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -0.72px
display-sm:
fontFamily: "Libre Baskerville"
fontSize: 40px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -0.6px
heading-xxl:
fontFamily: Montserrat
fontSize: 34px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -0.45px
heading-xl:
fontFamily: Montserrat
fontSize: 32px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -0.48px
heading-lg:
fontFamily: Montserrat
fontSize: 30px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -0.45px
heading-md:
fontFamily: Impact
fontSize: 24px
fontWeight: 400
lineHeight: 1.72
letterSpacing: 0.27px
heading-sm:
fontFamily: Impact
fontSize: 20px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -0.3px
heading-xs:
fontFamily: Montserrat
fontSize: 16px
fontWeight: 700
letterSpacing: 0.27px
textTransform: uppercase
body-xl:
fontFamily: Montserrat
fontSize: 20px
fontWeight: 400
lineHeight: 1.72
letterSpacing: 0.27px
body-lg:
fontFamily: Montserrat
fontSize: 16px
fontWeight: 400
lineHeight: 1.72
letterSpacing: 0.27px
body-lg-tight:
fontFamily: Montserrat
fontSize: 16px
fontWeight: 400
lineHeight: 1.72
letterSpacing: 0.24px
body-lg-2:
fontFamily: Montserrat
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0.24px
body-md:
fontFamily: Montserrat
fontSize: 14px
fontWeight: 400
lineHeight: 1.72
letterSpacing: 0.27px
body-md-strong:
fontFamily: Montserrat
fontSize: 14px
fontWeight: 700
lineHeight: 1.72
letterSpacing: 0.27px
button:
fontFamily: Impact
fontSize: 16px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 1px
textTransform: uppercase
label-lg:
fontFamily: Montserrat
fontSize: 18px
fontWeight: 400
lineHeight: 1.72
letterSpacing: 0.27px
label-md:
fontFamily: Montserrat
fontSize: 16px
fontWeight: 400
letterSpacing: 0px
label-sm:
fontFamily: Montserrat
fontSize: 14px
fontWeight: 400
letterSpacing: 0px
caption:
fontFamily: Montserrat
fontSize: 12px
fontWeight: 400
lineHeight: 1.72
letterSpacing: 0.27px
rounded:
none: 0px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 36px
band: 40px
borderWidths:
thin: 1px
shadows:
sm: "rgba(20, 22, 23, 0.09) 0px 0px 6px 0px"
elevationStrategy: single-tier
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#F2F3F5"
surface: "#FFFFFF"
surfaceRaised: "#FFFFFF"
text: "#FFFFFF"
textMuted: "#FAFBFC"
border: "#6E8458"
accent: "#131516"
accentFg: "#FFFFFF"
focusRing: "#131516"
elevation: shadow
dark:
bg: "#0E0F11"
surface: "#1C1D1F"
surfaceRaised: "#29292B"
text: "#F6F6F6"
textMuted: "#9E9E9F"
border: "#353537"
accent: "#727D83"
accentFg: "#0B0B0C"
focusRing: "#5F696E"
elevation: "border+surface"
contrastFailures:
- "light: text on bg = 1.11:1 (needs 4.5:1)"
- "light: muted on bg = 1.07:1 (needs 4.5:1)"
- "light: text on surface = 1:1 (needs 4.5:1)"
gradients:
- context: section
kind: linear
value: "linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0))"
- context: section
kind: linear
value: "linear-gradient(rgb(255, 255, 255) 0%, rgb(242, 243, 245) 100%)"
- context: section
kind: linear
value: "linear-gradient(rgb(242, 243, 245) 0%, rgb(255, 255, 255) 100%)"
components:
button-outline:
typography: "{typography.button}"
textColor: "{colors.hairline}"
border: "1px solid {colors.hairline}"
height: 47.1875px
padding: "13px 29px 13px 29px"
backgroundColor: "rgba(255, 255, 255, 0)"
button-icon:
textColor: "{colors.ink}"
height: 27.5156px
padding: "0px 0px 0px 8px"
fontSize: 16px
fontFamily: Arial
fontWeight: 400
button-icon-lg:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
height: 30px
backgroundColor: "rgba(19, 21, 22, 0.7)"
navigation:
typography: "{typography.body-lg}"
textColor: "rgb(20, 22, 23)"
height: 87.0312px
footer:
typography: "{typography.label-lg}"
textColor: "rgb(20, 22, 23)"
padding: "70px 30px 0px 30px"
backgroundColor: "rgb(20, 22, 23)"
link:
typography: "{typography.label-lg}"
textColor: "rgb(20, 22, 23)"
link-2:
textColor: "rgb(20, 22, 23)"
fontSize: 30px
fontFamily: Impact
fontWeight: 400
lineHeight: 1.2
states:
other-focus:
target: other
state: focus
textColor: "rgb(68, 68, 68)"
textDecoration: none
backgroundColor: "rgb(221, 221, 221)"
card-hover:
target: card
state: hover
backgroundColor: transparent
other-hover:
target: other
state: hover
transform: "translateY(105%)"
nav-hover:
target: nav
state: hover
textColor: "{colors.ink}"
link-hover:
target: link
state: hover
backgroundColor: "rgba(0, 0, 0, 0.7)"
input-hover:
target: input
state: hover
opacity: 1
transform: none
input-focus:
target: input
state: focus
textColor: transparent
button-hover:
target: button
state: hover
opacity: 0.6
breakpoints:
- width: 375
containerWidth: 328
gridColumns: 1
navLinksVisible: 23
menuToggleVisible: true
headingPx: 27
bodyPx: 18
sectionPaddingX: 0
- width: 768
containerWidth: 708
gridColumns: 3
navLinksVisible: 23
menuToggleVisible: true
headingPx: 29
bodyPx: 18
sectionPaddingX: 0
- width: 1024
containerWidth: 964
gridColumns: 5
navLinksVisible: 23
menuToggleVisible: true
headingPx: 30
bodyPx: 18
sectionPaddingX: 0
- width: 1280
containerWidth: 1220
gridColumns: 6
navLinksVisible: 23
menuToggleVisible: true
headingPx: 30
bodyPx: 18
sectionPaddingX: 0
- width: 1440
containerWidth: 1380
gridColumns: 7
navLinksVisible: 23
menuToggleVisible: true
headingPx: 30
bodyPx: 18
sectionPaddingX: 0
coverage:
statesFound: 62
gradientsFound: 3
rolesUnassigned: 3
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
The Beautiful Marrakech's design system embodies luxury hospitality through a refined, European-influenced aesthetic layered over Moroccan cultural imagery. The visual language prioritizes elegance through generous whitespace, serif and geometric typography mixing, and dramatic hero photography that anchors each section. The palette is restrained—near-black with warm neutrals—allowing rich photography and golden light to provide visual drama. There is no aggressive branding; instead, the system trusts curated imagery and measured typography to convey premium event planning and destination expertise. The overall mood is sophisticated, timeless, and deeply rooted in place—evoking both Parisian design restraint and Moroccan hospitality warmth.
Key Characteristics
{colors.primary} — #131516): Near-black used for CTAs, active states, brand accents, and primary text on light surfaces. The dominant dark anchor of the system.{colors.accent-1} — #212934): Secondary dark tone with no assigned role; appears in decorative contexts and layered backgrounds. Reserve for depth without semantic intent.{colors.accent-2} — #212326): Tertiary dark variant; similar to accent-1, used decoratively. No semantic role.{colors.hairline} — #6E8458): Warm sage green used for 1px borders, dividers, and button outlines. Provides visual relief against the near-black/white axis.{colors.canvas} — #F2F3F5): Soft cool-gray page background, creating a gentle holding space for content.{colors.surface} — #FFFFFF): Pure white; card, panel, and container backgrounds. Also used as heading and primary text color on dark surfaces.{colors.neutral-1} — #000000): Pure black; deepest text and shadow tones.{colors.surface}) or canvas gray ({colors.canvas}).{colors.hairline}).Primary: Montserrat (fallback: Helvetica, Arial, sans-serif)
Clean geometric sans-serif; used for body copy, labels, and most UI text. Neutral, professional, highly legible.
Secondary: Impact (fallback: Arial Black, sans-serif)
Bold, condensed geometric; reserved for buttons, headings, and accent display. Creates visual punch and brand personality.
Tertiary: Playfair Display (fallback: Georgia, serif)
High-contrast serif; used for largest display headings. Elegant, editorial, evokes luxury.
Quaternary: Libre Baskerville (fallback: Georgia, serif)
Refined traditional serif; used for large display/heading contexts. Warm, timeless elegance.
Fallback Stack (if none above match): Avenir, Roboto, Anton, or system sans-serif depending on context.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Playfair Display | 78px | 400 | 1.2 | -1.17px | Hero headline; maximum impact; negative tracking. |
| Display LG | Impact | 54px | 400 | 1.2 | -0.81px | Large feature text; condensed, negative tracking. |
| Display MD | Libre Baskerville | 48px | 400 | 1.2 | -0.72px | Section headline; elegant serif; negative tracking. |
| Display SM | Libre Baskerville | 40px | 400 | 1.2 | -0.6px | Large heading; serif warmth. |
| Heading XXL | Montserrat | 34px | 400 | 1.2 | -0.45px | Major section title; sans-serif, tight line height. |
| Heading XL | Montserrat | 32px | 400 | 1.2 | -0.48px | Section subheading; sans-serif. |
| Heading LG | Montserrat | 30px | 400 | 1.2 | -0.45px | Card/subsection title. |
| Heading MD | Impact | 24px | 400 | 1.72 | 0.27px | Accent heading; Impact adds visual weight. |
| Heading SM | Impact | 20px | 400 | 1.2 | -0.3px | Smaller accent heading. |
| Heading XS | Montserrat | 16px | 700 | auto | 0.27px | Uppercase label; bold; typically text-transform: uppercase. |
| Label LG | Montserrat | 18px | 400 | 1.72 | 0.27px | Form label, large. |
| Label MD | Montserrat | 16px | 400 | auto | 0px | Form input label. |
| Label SM | Montserrat | 14px | 400 | auto | 0px | Small form label. |
| Button | Impact | 16px | 400 | 1.2 | 1px | Uppercase, high letter-spacing; variants: text-transform: uppercase or capitalize. |
| Body LG | Montserrat | 16px | 400 | 1.72 | 0.27px | Primary body text; warm letter-spacing. |
| Body LG (tight) | Montserrat | 16px | 400 | 1.72 | 0.24px | Navigation links, list items; tighter tracking. |
| Body LG (alt) | Montserrat | 16px | 400 | 1.5 | 0.24px | Reduced line-height variant; dense copy. |
| Body MD | Montserrat | 14px | 400 | 1.72 | 0.27px | Secondary body, labels. |
| Body MD Strong | Montserrat | 14px | 700 | 1.72 | 0.27px | Emphasis within body. |
| Body XL | Montserrat | 20px | 400 | 1.72 | 0.27px | Large body, callouts. |
| Caption | Montserrat | 12px | 400 | 1.72 | 0.27px | Footnotes, metadata. |
Primary Outline
text-transform: uppercase{colors.hairline} (#6E8458){colors.hairline} (#6E8458)Secondary Outline (Smaller)
{colors.hairline} (#6E8458){colors.hairline} (#6E8458)Icon Button (Small)
{colors.surface} (#FFFFFF)rgba(19, 21, 22, 0.7) (semi-transparent dark)Icon Button (Default)
{colors.surface} (#FFFFFF)Default Card
{colors.primary} (#131516)Small Card (Compact)
{colors.primary} (#131516){colors.accent-2} (#212326) [observed on :hover state]Blog/Content Card (Large)
{colors.primary} (#131516)Text Input (Default)
{colors.primary} (#131516){colors.surface} (#FFFFFF){colors.hairline} (#6E8458) [inferred from form styling]{spacing.md} for consistency){colors.hairline} [observed in interaction state]Label
{colors.primary} (#131516)Primary Navigation
{colors.primary} (#131516){colors.surface} (#FFFFFF) [specific nav hover state observed]Navigation Link
{colors.primary} (#131516)Footer Container
{colors.primary} (#131516){colors.primary} (#131516)Base Unit: 4px ({spacing.xxs})
Scale (in multiples of 4px):
{spacing.xxs} = 4px — micro gutters between tightly grouped elements{spacing.xs} = 8px — small padding within components{spacing.sm} = 12px — moderate spacing; form gaps{spacing.md} = 16px — standard padding; form labels and inputs{spacing.lg} = 20px — breathing room between related sections{spacing.xl} = 24px — larger padding blocks{spacing.xxl} = 28px — significant vertical gaps{spacing.xxxl} = 32px — large spacing between major content blocks{spacing.section} = 36px — section separation{spacing.band} = 40px — hero band and full-width section paddingUsage Context:
{spacing.band} (40px) horizontal padding{spacing.md} to {spacing.xl} (16–24px){spacing.xs} to {spacing.md} (8–16px){spacing.section} to {spacing.band} (36–40px)Max Width: 1440px (observed on footer and largest measured container)
Content Column Width:
Grid Columns:
Section Patterns:
The system prioritizes open, breathable layouts. Section padding is generous (36–40px), allowing photography and typography to speak without crowding. Cards and containers have minimal padding or none (transparent backgrounds with photo fills). Body text uses 1.72 line-height for comfortable reading. Color blocking (white to canvas gray) creates visual separation without boxes or borders. This is a high-contrast, photography-first design where negative space is as important as content.
{rounded.none} = 0px — used across buttons, cards, containers, overlays, and navigation. The system is uniformly sharp-cornered, reinforcing editorial precision and luxury.All interactive and container roles measure 0px border-radius. There are no pill-shaped or rounded elements in this system.
| Level | Treatment | Use |
|---|---|---|
| Base (Flat) | No shadow; solid color or transparent | Page canvas, white cards, text overlays |
| Raised (Single Tier) | rgba(20, 22, 23, 0.09) 0px 0px 6px 0px | Floating elements, tooltips, hover-state lift |
Shadow Philosophy:
The system uses a single-tier elevation model with minimal reliance on shadows. Depth is achieved primarily through color blocking (white surfaces against canvas gray or dark overlays) rather than drop shadows. The one shadow in use—rgba(20, 22, 23, 0.09) 0px 0px 6px 0px—is a barely-there blur (6px, 9% opacity) applied only when UI elements need subtle lift (e.g., on focus or hover). This restraint keeps the design clean and maintains the photography-forward aesthetic.
Stacking is minimal and predictable. The site does not employ complex z-index ladders; most content uses default z-index, with overlays and dropdowns at 10–11.
{colors.hairline} — #6E8458) for all borders, dividers, and button outlines. It is the accent that breaks the dark/light axis.{spacing.band} = 40px) to create breathing room.linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)) to ensure text legibility.border-radius except 0px. Sharp, editorial look is core.{spacing.lg} (20px). Maintain visual breathing room across all viewport sizes.| Breakpoint | Viewport Width | Content Width | Grid Columns | Notable Changes | Nav Visible |
|---|---|---|---|---|---|
| Mobile | 375px | 328px | 1 | Single-column; largest heading 27px; body 18px | Yes (no toggle) |
| Tablet | 768px | 708px | 3 | Two- to three-column layouts; heading 29px | Yes |
| Desktop Small | 1024px | 964px | 5 | Multi-column grids; heading 30px | Yes |
| Desktop | 1280px | 1220px | 6 | Full layout; heading 30px | Yes |
| Desktop Large | 1440px | 1380px | 7 | Maximum width; heading 30px | Yes |
Key Observations:
Minimum interactive element sizes:
All measured touch targets exceed 44px recommended minimum on mobile.
{spacing.band} = 40px) applied horizontally across all breakpoints; vertical padding remains consistent.#131516) — near-black; used for buttons, text on light, active states#6E8458) — sage green; all 1px borders, button outlines, accents#F2F3F5) — soft gray; page background#FFFFFF) — pure white; card, panel, overlay backgrounds#131516) — same as CTA; dark text on light#131516) — dark text on white/gray#000000) — pure black; deepest shadows, extreme emphasislinear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)).#6E8458 border, 0px radius, 13px padding.rgba(20, 22, 23, 0.09) 0px 0px 6px 0px) only for floating/focus states. Most elements are flat.{colors.accent-1}, {colors.accent-2}, {colors.neutral-1}) have no measured semantic role. They are described as decorative; their exact usage contexts are not definitively mapped to UI patterns.translateY, scaleX), but transition-duration and easing were not measured.