Remixes of www.jnanetamsna.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: Jnanetamsna
description: |
Jnane Tamsna's design system embodies timeless elegance rooted in Moroccan
hospitality and botanical luxury. The visual language balances warm terracotta
and ochre tones—echoing the property's iconic architecture and sun-baked
palaces—with sophisticated neutrals and delicate sage accents. Typography
favors classical serif faces paired with measured restraint, evoking
handwritten correspondence and curated editorial design. The aesthetic
prioritizes serene, unhurried discovery: generous whitespace, deliberate color
blocking, and imagery of lush gardens and candlelit evenings create an
immersive sense of place. Every element reinforces the brand's promise: that
events here are not transactions, but transformative experiences across a
nine-acre sanctuary.
source:
url: "https://www.jnanetamsna.com/events"
pagesAnalyzed: 6
extractedAt: 2026-10-26
tokensMeasured: true
colors:
primary: "#D1D4BC"
canvas: "#333333"
surface-alt: "#FFFFFF"
ink: "#FFFFFF"
body: "#D1D4BC"
muted: "#241314"
error: "#DCCCC0"
accent-1: "#B8AD85"
neutral-1: "#F3F2ED"
neutral-2: "#000000"
typography:
heading-lg:
fontFamily: oriyaMN
fontSize: 30px
fontWeight: 300
lineHeight: 1.2
letterSpacing: 0.75px
heading-md:
fontFamily: system-ui
fontSize: 24px
fontWeight: 500
lineHeight: 2.04
letterSpacing: 0px
heading-sm:
fontFamily: "Cormorant Garamond"
fontSize: 18px
fontWeight: 500
lineHeight: 1.63
letterSpacing: 0px
heading-xs:
fontFamily: system-ui
fontSize: 14px
fontWeight: 400
lineHeight: 3.5
letterSpacing: 0px
body-xl:
fontFamily: "Cormorant Garamond"
fontSize: 24px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
body-lg:
fontFamily: "Cormorant Garamond"
fontSize: 20px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
body-lg-strong:
fontFamily: "Cormorant Garamond"
fontSize: 20px
fontWeight: 500
lineHeight: 1.4
letterSpacing: 0px
body-md:
fontFamily: "Cormorant Garamond"
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: "Cormorant Garamond"
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
body-sm-strong:
fontFamily: "Cormorant Garamond"
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
nav:
fontFamily: oriyaMN
fontSize: 20px
fontWeight: 300
lineHeight: 1.4
letterSpacing: 2px
rounded:
none: 0px
full: 9999px
spacing:
xxs: 8px
xs: 12px
sm: 16px
md: 24px
lg: 32px
xl: 40px
xxl: 48px
xxxl: 56px
section: 64px
band: 80px
borderWidths:
thin: 1px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FCFCFA"
surface: "#F2F2F0"
surfaceRaised: "#EAEAE9"
text: "#1B1B1A"
textMuted: "#70706E"
border: "#D9D9D7"
accent: "#72774D"
accentFg: "#FFFFFF"
focusRing: "#8A905D"
elevation: shadow
dark:
bg: "#333333"
surface: "#FFFFFF"
surfaceRaised: "#FFFFFF"
text: "#FFFFFF"
textMuted: "#D1D4BC"
border: "#4B4B4B"
accent: "#D1D4BC"
accentFg: "#0B0B0C"
focusRing: "#D1D4BC"
elevation: "border+surface"
contrastFailures:
- "dark: text on surface = 1:1 (needs 4.5:1)"
gradients:
- context: hero
kind: linear
value: "linear-gradient(oklab(0 0 0 / 0.7) 0%, oklab(0 0 0 / 0.45) 50%, rgba(0, 0, 0, 0) 100%)"
components:
button-icon:
typography: "{typography.body-md}"
textColor: "{colors.canvas}"
height: 44px
rounded: "3.35544e+07px"
backgroundColor: "oklab(0.999994 0.0000455677 0.0000200868 / 0.7)"
button-icon-sm:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
height: 40px
padding: "8px 8px 8px 8px"
button-outline:
textColor: "{colors.canvas}"
border: "1px solid {colors.canvas}"
height: 34px
padding: "6px 24px 6px 24px"
fontSize: 14px
fontFamily: oriyaMN
fontWeight: 300
lineHeight: 1.43
button-outline-2:
textColor: "{colors.ink}"
border: "1px solid {colors.surface-alt}"
height: 34px
padding: "6px 24px 6px 24px"
fontSize: 14px
fontFamily: oriyaMN
fontWeight: 300
lineHeight: 1.43
navigation:
typography: "{typography.body-md}"
textColor: "rgb(26, 20, 16)"
height: 64px
backgroundColor: "lab(21.2467 0 0 / 0.95)"
navigation-2:
typography: "{typography.body-md}"
textColor: "rgb(26, 20, 16)"
height: 64px
footer:
typography: "{typography.body-md}"
textColor: "rgb(26, 20, 16)"
link:
typography: "{typography.nav}"
textColor: "{colors.ink}"
states:
other-hover:
target: other
state: hover
textColor: "{colors.canvas}"
other-focus:
target: other
state: focus
borderColor: "{colors.canvas}"
breakpoints:
- width: 375
containerWidth: 327
gridColumns: 3
navLinksVisible: 2
menuToggleVisible: true
headingPx: 24
bodyPx: 16
sectionPaddingX: 24
- width: 768
containerWidth: 704
gridColumns: 3
navLinksVisible: 2
menuToggleVisible: true
headingPx: 30
bodyPx: 16
sectionPaddingX: 32
- width: 1024
containerWidth: 768
gridColumns: 3
navLinksVisible: 2
menuToggleVisible: true
headingPx: 30
bodyPx: 16
sectionPaddingX: 32
- width: 1280
containerWidth: 768
gridColumns: 3
navLinksVisible: 2
menuToggleVisible: true
headingPx: 30
bodyPx: 16
sectionPaddingX: 32
- width: 1440
containerWidth: 1280
gridColumns: 3
navLinksVisible: 2
menuToggleVisible: true
headingPx: 30
bodyPx: 16
sectionPaddingX: 32
coverage:
statesFound: 10
gradientsFound: 1
rolesUnassigned: 3
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: true
Jnane Tamsna's design system embodies timeless elegance rooted in Moroccan hospitality and botanical luxury. The visual language balances warm terracotta and ochre tones—echoing the property's iconic architecture and sun-baked palaces—with sophisticated neutrals and delicate sage accents. Typography favors classical serif faces paired with measured restraint, evoking handwritten correspondence and curated editorial design. The aesthetic prioritizes serene, unhurried discovery: generous whitespace, deliberate color blocking, and imagery of lush gardens and candlelit evenings create an immersive sense of place. Every element reinforces the brand's promise: that events here are not transactions, but transformative experiences across a nine-acre sanctuary.
Key Characteristics
{colors.primary} — #D1D4BC): Primary CTA fills, brand accent, active states; also serves as body copy text in certain contexts. Soft sage-beige unifying element across the system.#333333): Text and interactive element outlines; used in button borders, nav text, and body copy on light backgrounds.#FFFFFF): Alternating section bands, card surfaces, high-contrast headings and primary text on dark backgrounds.{colors.canvas} — #333333): Default page background, header bar, dark hero sections.{colors.muted} — #241314): Captions, secondary text, reduced-emphasis content.{colors.neutral-1} — #F3F2ED): Light neutral surface, subtle fills.{colors.neutral-2} — #000000): Deep neutral for maximum contrast; decorative accents.{colors.accent-1} — #B8AD85): Unassigned role; decorative warm tone without functional purpose in the current system.{colors.error} — #DCCCC0): Error states and destructive actions.Primary: Cormorant Garamond
Fallback: Georgia, serif
Secondary: oriyaMN
Fallback: system-ui, sans-serif
Display Fallback: system-ui
Fallback: -apple-system, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | oriyaMN | 30px | 300 | 1.2 | 0.75px | Hero titles, main page headings |
| Heading Medium | system-ui | 24px | 500 | 2.04 | 0px | Section headings, prominent UI |
| Heading Small | oriyaMN | 18px | 500 | 1.63 | 0px | Subsection titles, h2 elements |
| Heading XS | system-ui | 14px | 400 | 3.5 | 0px | Labels, auxiliary headings |
| Body XL | Cormorant Garamond | 24px | 400 | 1.63 | 0px | Large body text, feature content |
| Body Large | Cormorant Garamond | 20px | 400 | 1.63 | 0px | Primary body copy |
| Body Large Strong | Cormorant Garamond | 20px | 500 | 1.4 | 0px | Emphasized body text |
| Body Medium | Cormorant Garamond | 16px | 500 | 1.5 | 0px | Navigation links, button text |
| Body Small Strong | Cormorant Garamond | 14px | 500 | 1.43 | 0px | Links, emphasis elements |
| Body Small | Cormorant Garamond | 14px | 400 | 1.43 | 0px | Secondary text, captions |
| Navigation | oriyaMN | 20px | 300 | 1.4 | 2px | Header navigation items; spaced letter tracking |
{typography.nav}) to reinforce the boutique, deliberate pacing of the brand.Primary (Icon / Pill)
{typography.body-md} (Cormorant Garamond, 16px, weight 500)oklab(0.999994 0.0000455677 0.0000200868 / 0.7) (off-white with 70% opacity)#3333330px{rounded.full} (pill-shaped)0pxnoneIcon Small (Sharp, White Text)
{typography.body-md} (Cormorant Garamond, 16px, weight 500)rgba(0, 0, 0, 0) (transparent)#FFFFFF{spacing.xs} (12px on all sides, rendered as 8px){rounded.none} (0px sharp)0pxnoneOutline (Dark Text)
rgba(0, 0, 0, 0) (transparent)#333333{thin} (1px solid #333333)6px 24px{rounded.none} (0px sharp)noneOutline Secondary (White Text)
rgba(0, 0, 0, 0) (transparent)#FFFFFF{thin} (1px solid #FFFFFF)6px 24px{rounded.none} (0px sharp)noneHover State
0.8#333333, #FFFFFF, or {colors.primary})Focus State
borderColor: #333333 with focus-visible ringDefault (Dark Background)
{typography.body-md} (Cormorant Garamond, 16px, weight 500)lab(21.2467 0 0 / 0.95) (near-black with slight transparency)#333333 (dark text; label says rgb(26, 20, 16), close approximation)0px{rounded.none}0pxnoneAlternate (Transparent Background)
{typography.body-md} (Cormorant Garamond, 16px, weight 500)rgba(0, 0, 0, 0) (fully transparent)#333333Navigation Links
{typography.nav} (oriyaMN, 20px, weight 300, line-height 1.4, letter-spacing 2px)#FFFFFF or #333333 (context-dependent)0.7Default (Large)
#FFFFFFrgba(0, 0, 0, 0) (transparent)0.7Body Link (Cormorant)
{typography.body-sm-strong} (Cormorant Garamond, 14px, weight 500, line-height 1.43)#333333 (or #FFFFFF in dark contexts)0.7 or color shifts to {colors.primary}Base unit: 8px
Full scale:
{spacing.xxs} = 8px — micro gaps, icon padding{spacing.xs} = 12px — tight spacing between elements{spacing.sm} = 16px — standard internal padding, section margins{spacing.md} = 24px — component spacing, card padding{spacing.lg} = 32px — larger container margins{spacing.xl} = 40px — section separators{spacing.xxl} = 48px — major content divisions{spacing.xxxl} = 56px — large section gaps{spacing.section} = 64px — standard section vertical padding{spacing.band} = 80px — hero/feature band padding{spacing.md} (24px) per side{spacing.lg} (32px) per side{spacing.lg} (32px) per sideThe system emphasizes editorial breathing room: large type sizes (24–30px) with 1.4–2.0 line heights create natural rhythm. Sections are separated by {spacing.section} (64px) or {spacing.band} (80px) vertically, allowing images and text to command attention without visual clutter. Horizontal padding scales modestly (24–32px) to preserve focus on centered content columns.
{rounded.none} = 0px — Buttons (outline variants), navigation, cards, links; sharp, architectural aesthetic{rounded.full} = 9999px — Icon buttons only; pill-shaped interactive targetsThe system prefers sharp edges, reserving pill shapes for compact icon buttons only.
{thin}) = 1px — Outline button borders, form inputs, hairline accentsThe Jnane Tamsna system employs color-blocking rather than shadow layering: depth and hierarchy come from surface color changes and strategic use of light and dark backgrounds. No multi-tier shadow scale was measured; instead, transparent overlays and background color shifts create visual separation.
Gradient Overlay (Hero Sections)
linear-gradient(oklab(0 0 0 / 0.7) 0%, oklab(0 0 0 / 0.45) 50%, rgba(0, 0, 0, 0) 100%)0.75) — Hover state for icon buttons; subtle dimming without full fade0.7) — Overlay and background fills; creates semi-transparent surfaces0.0) — Transparent backgrounds for outline buttons and link elements| Layer | Z-index | Use |
|---|---|---|
| Dropdown (standard) | 10 | Menus below modal/sticky elements |
| Dropdown (elevated) | 40 | Elevated dropdown menus or sticky headers |
The system uses a shallow stacking scale, reserving higher indices for truly modal content (not measured in extraction).
{colors.canvas}) and light ({colors.surface-alt}) backgrounds rather than stacking shadows.{rounded.none} (0px) for outline and secondary buttons; {rounded.full} only for icon buttons.{colors.primary} as the unifying accent. It ties brand elements and CTAs together across dark and light backgrounds.{rounded.none}) are the system default except for small icon buttons.linear-gradient(oklab(0 0 0 / 0.7)...) to ensure 70% opacity darkening.| Viewport | Content Width | Grid Columns | Heading Size | Body Size | Section Padding X | Key Changes |
|---|---|---|---|---|---|---|
| 375px (Mobile) | 327px | 3 | 24px | 16px | 24px | Single-column layout; reduced padding |
| 768px (Tablet) | 704px | 3 | 30px | 16px | 32px | Increased content column; larger headings unlock |
| 1024px (Desktop) | 768px | 3 | 30px | 16px | 32px | Further refinement; nav links remain visible (2 shown) |
| 1280px (Large) | 768px | 3 | 30px | 16px | 32px | No change from 1024px |
| 1440px (XL) | 1280px | 3 | 30px | 16px | 32px | Full-width content column |
Breakpoint Summary:
#D1D4BC) — sage-beige unifying element; use on light backgrounds and neutral surfaces.#333333) — charcoal page base, header bar, dark hero sections.#FFFFFF) — white alternating bands, high-contrast text on dark.#FFFFFF on #333333); Neutral Light (#333333 on #F3F2ED).#241314) — captions, reduced-emphasis copy.#DCCCC0) — error states, warnings.#333333 and #FFFFFF; use gradient overlays only on hero images.{rounded.none}) or pill-shaped ({rounded.full}), never rounded-moderate. Icon buttons → pill; outline → sharp.{spacing.lg} (32px) horizontal padding on tablet+, {spacing.md} (24px) on mobile.0.7–0.8 for buttons; color shifts to {colors.primary} on text links; maintain focus-visible ring on outline buttons.{spacing.section} (64px) for vertical section separators. Large hero or feature bands may scale to {spacing.band} (80px).linear-gradient(oklab(0 0 0 / 0.7) 0%, oklab(0 0 0 / 0.45) 50%, rgba(0, 0, 0, 0) 100%) — always apply to ensure text legibility.#B8AD85) and Neutral Light/Dark (#F3F2ED, #000000) have no explicit functional role; treat as decorative or secondary fill. If future UI requires them, assign roles deliberately rather than assume.#DCCCC0 error color are not defined.derived marker on color themes indicates calculated fallbacks, not user-switchable modes. If theme-switching is planned, it is not present in this extraction.tokens:
colors:
primary:
value: "#D1D4BC"
role: "Primary / Brand Accent"
accent_1:
value: "#B8AD85"
role: "Decorative"
canvas:
value: "#333333"
role: "Canvas"
surface_alt:
value: "#FFFFFF"
role: "Surface Alt / Ink"
muted:
value: "#241314"
role: "Muted"
neutral_1:
value: "#F3F2ED"
role: "Decorative"
neutral_2:
value: "#000000"
role: "Decorative"
error:
value: "#DCCCC0"
role: "Error"
typography:
body_lg_strong:
fontFamily: "Cormorant Garamond"
fontSize: "20px"
fontWeight: "500"
lineHeight: "1.4"
letterSpacing: "0px"
body_sm:
fontFamily: "Cormorant Garamond"
fontSize: "14px"
fontWeight: "400"
lineHeight: "1.43"
letterSpacing: "0px"
body_sm_strong:
fontFamily: "Cormorant Garamond"
fontSize: "14px"
fontWeight: "500"
lineHeight: "1.43"
letterSpacing: "0px"
body_xl:
fontFamily: "Cormorant Garamond"
fontSize: "24px"
fontWeight: "400"
lineHeight: "1.63"
letterSpacing: "0px"
body_md:
fontFamily: "Cormorant Garamond"
fontSize: "16px"
fontWeight: "500"
lineHeight: "1.5"
letterSpacing: "0px"
body_lg:
fontFamily: "Cormorant Garamond"
fontSize: "20px"
fontWeight: "400"
lineHeight: "1.63"
letterSpacing: "0px"
heading_sm:
fontFamily: "oriyaMN"
fontSize: "18px"
fontWeight: "500"
lineHeight: "1.63"
letterSpacing: "0px"
heading_lg:
fontFamily: "oriyaMN"
fontSize: "30px"
fontWeight: "300"
lineHeight: "1.2"
letterSpacing: "0.75px"
nav:
fontFamily: "oriyaMN"
fontSize: "20px"
fontWeight: "300"
lineHeight: "1.4"
letterSpacing: "2px"
heading_md:
fontFamily: "system-ui"
fontSize: "24px"
fontWeight: "500"
lineHeight: "2.04"
letterSpacing: "0px"
heading_xs:
fontFamily: "system-ui"
fontSize: "14px"
fontWeight: "400"
lineHeight: "3.5"
letterSpacing: "0px"
spacing:
xxs: "8px"
xs: "12px"
sm: "16px"
md: "24px"
lg: "32px"
xl: "40px"
xxl: "48px"
xxxl: "56px"
section: "64px"
band: "80px"
rounded:
none: "0px"
full: "9999px"
borders:
thin: "1px"
opacity:
high: "0.75"
medium: "0.70"
none: "0.00"
zIndex:
dropdown: "10"
dropdown_elevated: "40"
gradients:
hero_overlay: "linear-gradient(oklab(0 0 0 / 0.7) 0%, oklab(0 0 0 / 0.45) 50%, rgba(0, 0, 0, 0) 100%)"