Remixes of beldicountryclub.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: Beldicountryclub
description: |
Beldi Country Club embodies understated Moroccan luxury — a refined retreat
that balances timeless elegance with warm, earthy authenticity. The visual
language draws from the property's ochre-brick architecture, lush
Mediterranean gardens, and sun-drenched courtyards, translating into a palette
of deep blacks, cream, and warm neutrals. Typography feels editorial and
sophisticated, with serif display faces paired against clean sans-serif body
text. The design philosophy eschews decoration in favour of breathing room,
allowing photography and content to speak directly. There is no applied depth
(shadows are nearly absent); instead, depth emerges from colour blocking and
surface contrast. The overall mood is calm, luxurious, and approachable —
inviting guests into a world of curated experiences.
source:
url: "https://beldicountryclub.com/activities"
pagesAnalyzed: 1
extractedAt: 2026-10-26
tokensMeasured: true
colors:
primary: "#000000"
ink: "#0F0D0B"
neutral-1: "#FFFFFF"
neutral-2: "#F7F4EE"
typography:
display:
fontFamily: Cardo
fontSize: 72px
fontWeight: 300
lineHeight: 1.05
letterSpacing: 0px
heading-md:
fontFamily: Cardo
fontSize: 28px
fontWeight: 300
lineHeight: 1.25
letterSpacing: 0px
heading-md-strong:
fontFamily: Cardo
fontSize: 28px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
body-xl:
fontFamily: Cardo
fontSize: 20px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
body-lg:
fontFamily: Cardo
fontSize: 16px
fontWeight: 300
lineHeight: 1.25
letterSpacing: 0px
body-lg-inter-variable:
fontFamily: "Inter Variable"
fontSize: 16px
fontWeight: 300
lineHeight: 1.63
letterSpacing: 0px
body-md:
fontFamily: "Inter Variable"
fontSize: 14px
fontWeight: 300
lineHeight: 1.43
letterSpacing: 0px
body-md-strong:
fontFamily: Lato
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
textTransform: uppercase
caption-sm:
fontFamily: Lato
fontSize: 12px
fontWeight: 300
lineHeight: 1.33
letterSpacing: 0px
textTransform: uppercase
caption-sm-strong:
fontFamily: Lato
fontSize: 12px
fontWeight: 600
lineHeight: 1.33
letterSpacing: 0px
caption-sm-tight:
fontFamily: Lato
fontSize: 12px
fontWeight: 600
lineHeight: 1.25
letterSpacing: 1.2px
textTransform: uppercase
caption-sm-2:
fontFamily: Lato
fontSize: 12px
fontWeight: 700
lineHeight: 1.33
letterSpacing: 0px
textTransform: uppercase
caption-xs:
fontFamily: "Inter Variable"
fontSize: 10px
fontWeight: 500
lineHeight: 1
letterSpacing: 1.6px
textTransform: uppercase
rounded:
none: 0px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section: 48px
band: 64px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.25) 0px -16px 48px 0px"
elevationStrategy: single-tier
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F7F7F7"
surfaceRaised: "#EEEEEE"
text: "#0F0D0B"
textMuted: "#636260"
border: "#E2E2E2"
accent: "#000000"
accentFg: "#FFFFFF"
focusRing: "#000000"
elevation: shadow
dark:
bg: "#0F0F10"
surface: "#1D1D1E"
surfaceRaised: "#29292A"
text: "#F5F5F5"
textMuted: "#9E9E9E"
border: "#353536"
accent: "#858585"
accentFg: "#0B0B0C"
focusRing: "#666666"
elevation: "border+surface"
gradients:
- context: hero
kind: radial
value: "radial-gradient(closest-side, rgb(255, 255, 255) 10%, rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0))"
components:
button-secondary:
typography: "{typography.caption-sm-tight}"
textColor: "{colors.neutral-2}"
height: 48px
padding: "12px 16px 12px 16px"
backgroundColor: "{colors.ink}"
button-secondary-lg:
typography: "{typography.body-xl}"
textColor: "{colors.neutral-2}"
height: 56px
padding: "0px 24px 0px 24px"
backgroundColor: "{colors.ink}"
button-primary:
typography: "{typography.body-md-strong}"
textColor: "{colors.neutral-1}"
height: 28px
padding: "4px 16px 4px 16px"
backgroundColor: "{colors.primary}"
button-outline:
typography: "{typography.caption-sm-tight}"
textColor: "{colors.ink}"
border: "1px solid oklab(0.160731 0.00206173 0.00494629 / 0.25)"
height: 48px
padding: "12px 16px 12px 16px"
button-icon:
textColor: "oklch(0.551 0.027 264.364)"
height: 64px
padding: "16px 16px 16px 16px"
fontSize: 16px
fontFamily: "Inter Variable"
fontWeight: 300
lineHeight: 1.5
card:
textColor: "oklch(0.373 0.034 259.733)"
padding: "40px 0px 40px 0px"
fontSize: 16px
fontFamily: "Inter Variable"
fontWeight: 300
lineHeight: 1.75
link:
typography: "{typography.body-md}"
textColor: "{colors.primary}"
link-2:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
padding: "8px 0px 8px 0px"
states:
other-hover:
target: other
state: hover
opacity: 1
other-focus:
target: other
state: focus
outlineWidth: 2px
other-focus-visible:
target: other
state: focus-visible
outlineWidth: 2px
other-disabled:
target: other
state: disabled
opacity: 0.3
button-hover:
target: button
state: hover
backgroundColor: "rgba(106, 114, 130, 0.05)"
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 1
navLinksVisible: 2
menuToggleVisible: true
headingPx: 44
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 670
gridColumns: 2
navLinksVisible: 2
menuToggleVisible: true
headingPx: 44
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 1024
gridColumns: 2
navLinksVisible: 12
menuToggleVisible: false
headingPx: 72
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1280
gridColumns: 2
navLinksVisible: 12
menuToggleVisible: false
headingPx: 72
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1440
gridColumns: 2
navLinksVisible: 12
menuToggleVisible: false
headingPx: 72
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 24
gradientsFound: 1
rolesUnassigned: 2
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Beldi Country Club embodies understated Moroccan luxury — a refined retreat that balances timeless elegance with warm, earthy authenticity. The visual language draws from the property's ochre-brick architecture, lush Mediterranean gardens, and sun-drenched courtyards, translating into a palette of deep blacks, cream, and warm neutrals. Typography feels editorial and sophisticated, with serif display faces paired against clean sans-serif body text. The design philosophy eschews decoration in favour of breathing room, allowing photography and content to speak directly. There is no applied depth (shadows are nearly absent); instead, depth emerges from colour blocking and surface contrast. The overall mood is calm, luxurious, and approachable — inviting guests into a world of curated experiences.
Key Characteristics:
{colors.primary} — #000000): Deep black used for primary CTAs, brand accent, active navigation states, and primary text emphasis. Conveys authority and luxury.{colors.ink} — #0F0D0B): Near-black, used for headings and primary body text. Slightly warmer than pure black, reflecting the property's earthy aesthetic.{colors.neutral-1} — #FFFFFF): Clean white, the primary page background and card surfaces.{colors.neutral-2} — #F7F4EE): Warm cream-off-white, used as a secondary surface or band background. No measured semantic role; appears decoratively to add warmth.Primary – Serif Display & Headings:
Cardo (serif), fallback: Georgia, serif. Used for all display sizes and section headings, conveying editorial prestige.
Secondary – Body & UI:
Inter Variable (sans-serif), with Lato (sans-serif) for buttons, captions, and compact metadata. Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Cardo | 72px | 300 | 1.05 | 0px | H1, hero headlines |
| Heading Large | Cardo | 28px | 400 | 1.25 | 0px | H2, section titles (strong variant) |
| Heading Medium | Cardo | 28px | 300 | 1.25 | 0px | H2, section titles (light variant) |
| Body Large | Cardo | 16px | 300 | 1.25 | 0px | Extended body copy, card descriptions |
| Body XL | Cardo | 20px | 400 | 1 | 0px | Accent body, introductory text |
| Body Medium (Inter) | Inter Variable | 16px | 300 | 1.63 | 0px | Standard body text, relaxed leading |
| Body Small (Inter) | Inter Variable | 14px | 300 | 1.43 | 0px | List items, supplementary text |
| Button / Link | Lato | 14px | 500 | 1.43 | 0px | Primary button text, uppercase |
| Caption Small | Lato | 12px | 600 | 1.25 | 1.2px | Navigation, metadata, uppercase |
| Caption Tiny | Inter Variable | 10px | 500 | 1 | 1.6px | Labels, uppercase, tight tracking |
Primary
{colors.primary} (#000000)#FFFFFF4px 16px 4px 16px28px208px{rounded.none} (0px)Secondary
{colors.ink} (#0F0D0B){colors.neutral-2} (#F7F4EE)12px 16px 12px 16px48px208px{rounded.none} (0px)Secondary Large
{colors.ink} (#0F0D0B){colors.neutral-2} (#F7F4EE)0px 24px 0px 24px56px288px{rounded.none} (0px)Outline
{colors.ink} (#0F0D0B)12px 16px 12px 16px48px208px1px solid rgba(0, 0, 0, 0.25) (thin line at 30% opacity){rounded.none} (0px){colors.neutral-2} (#F7F4EE), text color remains {colors.ink}Icon Button
#8B8D94)16px 16px 16px 16px64px65px{rounded.none} (0px)Hover States (General)
color: {colors.ink} (#0F0D0B)rgba(106, 114, 130, 0.05) or {colors.neutral-1} (#FFFFFF)Default Card
#5F6670 (muted ink for body text in cards)40px 0px 40px 0px (top/bottom only; width determines horizontal spacing)896px (desktop, may collapse on smaller viewports){rounded.none} (0px)Text Input / Outline Variant
{colors.neutral-1} (#FFFFFF){colors.ink} (#0F0D0B)1px solid rgba(0, 0, 0, 0.25) (30% opacity black){rounded.none} (0px){spacing.sm} to {spacing.md}2px solid {colors.ink} (#0F0D0B)0.3Navigation Link
{colors.ink} (#0F0D0B)8px 0px 8px 0px (compact vertical, no horizontal padding)72px (touch target in list context){rounded.none} (0px){colors.primary} (#000000) if not already blackThe spacing system is built on a base unit of 4px, scaling exponentially:
{spacing.xxs} = 4px — minimal gaps, internal padding{spacing.xs} = 8px — tight spacing between inline elements{spacing.sm} = 12px — standard compact padding{spacing.md} = 16px — default padding, standard gaps{spacing.lg} = 20px — generous content padding{spacing.xl} = 24px — heading and card spacing{spacing.xxl} = 32px — larger content blocks{spacing.xxxl} = 40px — internal section spacing (top/bottom of cards){spacing.section} = 48px — between major content sections{spacing.band} = 64px — hero bands, full-width section gapsUsage contexts:
{spacing.sm} horizontal, {spacing.xxs} vertical (compact){spacing.xxxl} vertical (40px), no horizontal (full-width or constrained by container){spacing.section} (48px) between major content blocks{spacing.band} (64px) for full-width section separations{spacing.section} and {spacing.band}Whitespace is generous and intentional. The design avoids clutter by surrounding content with breathing room — particularly around typography and photography. Full-width sections (hero, activity descriptions) use large vertical gaps ({spacing.band} = 64px) to establish rhythm. Card content is padded with {spacing.xxxl} (40px) vertically to suggest luxury and ease. Horizontal whitespace comes from the grid structure, not explicit margins on narrow viewports (0px section padding-x means content extends edge-to-edge, with grid columns providing the internal layout).
{rounded.none} = 0px — all buttons, cards, images, and interactive elements. The system is sharp-cornered throughout, reinforcing the modern, editorial aesthetic.No rounded or pill-shaped elements exist in this design system.
1px — used on outline buttons and input borders (e.g., 1px solid rgba(0, 0, 0, 0.25))The system uses color-blocking for depth. Shadows are nearly non-existent; instead, depth emerges from surface colour changes (black to white, white to cream, opaque to transparent). This reinforces the editorial, minimalist character and allows photography and content hierarchy to define visual layers.
| Level | Treatment | Use |
|---|---|---|
| Flat (base) | No shadow; transparent or white background | Body text, links, default state |
| Lifted | Very slight shadow, rgba(0, 0, 0, 0.25) 0px -16px 48px 0px (custom, barely visible) | Cards and containers when explicitly layered |
| Color-blocked | Black, cream, or white background change | Primary visual separation; buttons, active states |
Shadow Philosophy:
Shadows are almost entirely absent. The single shadow defined (sm: rgba(0, 0, 0, 0.25) 0px -16px 48px 0px) is a custom negative-vertical shadow that creates a barely-there lift, used sparingly. Depth primarily comes from background colour contrast and layering order rather than shadow blur or spread.
0.3) — applied to disabled button states and subtle border treatment (e.g., rgba(0, 0, 0, 0.25) on outline borders and input lines). Creates a visual feedback that an element is inactive or decorative without removing it from the layout.Z-index values are used for dropdown and overlay stacking:
z-index: 10z-index: 20z-index: 40z-index: 50z-index: 60z-index: 70These suggest a navigation or menu system with nested dropdowns. Base content is at z-index: auto or 0; overlays and modals would occupy higher indices as needed.
border-radius: 0px. Maintain this across extensions and custom components.{spacing.section} or {spacing.band} gaps. Don't crowd text or imagery.opacity: 0.3 or rgba(0, 0, 0, 0.25) for borders, not full greyscaling.1px solid rgba(0, 0, 0, 0.25) input or outline button border).| Viewport Width | Content Width | Grid Columns | Nav Links | Menu Toggle | Display Size | Body Size | Section Padding-x |
|---|---|---|---|---|---|---|---|
| 375px (mobile) | 375px | 1 | 2 visible | Yes | 44px | 16px | 0px |
| 768px (tablet) | 670px | 2 | 2 visible | Yes | 44px | 16px | 0px |
| 1024px (desktop) | 1024px | 2 | 12 visible | No | 72px | 16px | 0px |
| 1280px+ (wide) | 1280px+ | 2 | 12 visible | No | 72px | 16px | 0px |
| 1440px+ (max) | 1440px | 2 | 12 visible | No | 72px | 16px | 0px |
Key layout changes:
All interactive elements (buttons, links, icon buttons) maintain a minimum touch target of 48–64px (height and width combined), meeting WCAG AA accessibility standards. Examples:
{spacing.section} and {spacing.band}) remain consistent.{colors.primary} — #000000) — deep black for buttons, active states, brand mark{colors.ink} — #0F0D0B) — warm near-black for text hierarchy{colors.neutral-1} — #FFFFFF) — clean white for page and card backgrounds{colors.neutral-2} — #F7F4EE) — warm cream, secondary surface onlyNo semantic colors (error/success/warning) are defined by the site.
Use zero border-radius throughout. All components (buttons, cards, inputs) must be sharp-cornered (border-radius: 0px).
Pair fonts precisely: Cardo (light/regular) for display and headings; Inter Variable or Lato (sans-serif) for body and UI. Do not mix three or more typefaces.
Leverage color-blocking for depth. Do not rely on shadows; instead, use background colour changes (black to white, white to cream) to establish visual hierarchy.
Apply opacity at 30% for disabled / secondary states. Use opacity: 0.3 or rgba(0, 0, 0, 0.25) for borders and inactive elements.
Maintain 2-column grid on desktop and tablet. Single-column on mobile (< 768px). Never force more than 2 columns.
Preserve generous whitespace. Use {spacing.section} (48px) and {spacing.band} (64px) between major sections. Don't compress content.
Typography hierarchy via weight and size, not colour alone. Display: 72px/300 weight (light); headings: 28px/300–400 weight; body: 16px/300 weight.
Navigation remains visible on tablet. Collapse to toggle menu only below 1024px viewport width.
Uppercase small text with tight tracking. Buttons, labels, and captions use 1.2–1.6px letter-spacing and uppercase text-transform.
Line-height minimum 1.25 for body. Relaxed leading (1.25–1.63) is core to the luxury, editorial feel; never tighten to < 1.2.
No semantic status colours. The site does not declare error, success, warning, or info states in its markup. Do not invent a ramp; use text, icons, or border changes for feedback instead.
Two colours lack measured roles. {colors.neutral-1} (#FFFFFF) and {colors.neutral-2} (#F7F4EE) have no explicit semantic assignment and are described as canvas and decorative surfaces respectively. Their full usage scope may extend beyond the captured pages.
Interaction states partially measured. Hover and focus states exist (e.g., hover text changes to {colors.ink}, focus outline is 2px solid {colors.ink}), but disabled, active, and visited states for links are not fully specified. Disable state opacity is 0.3 for generic elements; button-specific disabled styling is not extracted.
Single-page analysis. Only the Activities page was measured. Surfaces behind authentication, checkout flows, or other protected areas were not visited. Additional patterns may exist on other pages (e.g., forms, tables, modals, carousels).
Mobile menu implementation not detailed. The toggle menu appears at < 1024px, but its exact structure (off-canvas, dropdown, accordion) and styling are not captured in the extraction data.
Gradients used only on hero. A radial gradient is applied to the hero background (radial-gradient(closest-side, rgb(255, 255, 255) 10%, rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0))), but no other gradients were observed. Extend this pattern to other full-width sections only if brand guidance supports it.
No explicit focus-visible vs focus distinction. Both :focus and :focus-visible use 2px solid outlines, but specific browser or keyboard-only behaviour may differ. Test keyboard navigation thoroughly.
Animation and transition timings not extracted. The design includes hover states but no duration, easing, or transform values. Assume instant feedback unless motion is explicitly captured in a later iteration.
Z-index range sparse. Six dropdown z-index values (10–70) are defined, but base content z-index and modal/overlay stacking are not specified. Infer as needed (modals typically > 100).