Remixes of marvesting.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: Marvesting
description: |
Marvesting's design system embodies a bold, forward-thinking brand identity
rooted in motion, connectivity, and purpose-driven storytelling. The visual
language combines deep, sophisticated navy and black surfaces with striking
hot pink accents, creating a premium, energetic aesthetic that commands
attention while maintaining corporate credibility. The system favours dramatic
typography, generous whitespace, and color-blocking over layered shadows,
establishing a clean, modern foundation that adapts fluidly across devices.
Geometric patterns, flowing curves, and subtle motion cues reinforce the
brand's philosophy of movement and keeping audiences engaged—every surface and
interaction reflects intentional, dynamic design.
source:
url: "https://marvesting.com/"
pagesAnalyzed: 6
extractedAt: 2026-10-22
tokensMeasured: true
colors:
primary: "#E72968"
accent: "#2A2A91"
canvas: "#FFFFFF"
surface-alt: "#0E0D30"
on-primary: "#E5E1D3"
ink: "#000000"
body: "#0E0D30"
muted: "#E5E1D3"
neutral-1: "#D6D6D6"
neutral-2: "#EDEDED"
typography:
display-xl:
fontFamily: "Mont heavy"
fontSize: 82px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
display-lg:
fontFamily: "Mont Heavy"
fontSize: 80px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
display-lg-strong:
fontFamily: "Mont Heavy"
fontSize: 80px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
display-md:
fontFamily: "Mont heavy"
fontSize: 69px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
display-sm:
fontFamily: "Mont Heavy"
fontSize: 60px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
display-sm-strong:
fontFamily: "Mont Heavy"
fontSize: 60px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
heading-md:
fontFamily: "Mont Heavy"
fontSize: 36px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
heading-md-strong:
fontFamily: "Mont Heavy"
fontSize: 36px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
heading-sm:
fontFamily: "Mont Heavy"
fontSize: 26px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
heading-sm-strong:
fontFamily: "Mont Heavy"
fontSize: 26px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
heading-xs:
fontFamily: "Mont heavy"
fontSize: 20px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
body-lg:
fontFamily: "Mont regular"
fontSize: 19px
fontWeight: 400
lineHeight: 1.52
letterSpacing: 0px
body-md:
fontFamily: "Mont regular"
fontSize: 18px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
body-md-uppercase:
fontFamily: "Mont regular"
fontSize: 18px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
textTransform: uppercase
body-sm:
fontFamily: "Mont regular"
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-sm-tight:
fontFamily: "Mont regular"
fontSize: 16px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
body-xs:
fontFamily: "Mont heavy"
fontSize: 15px
fontWeight: 500
lineHeight: 1
letterSpacing: 0px
label-sm:
fontFamily: "Mont regular"
fontSize: 14px
fontWeight: 400
lineHeight: 2.71
letterSpacing: 0px
label-sm-strong:
fontFamily: "Mont regular"
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
caption:
fontFamily: "Mont regular"
fontSize: 10px
fontWeight: 400
lineHeight: 2.16
letterSpacing: 0px
rounded:
none: 0px
xs: 15px
sm: 30px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 28px
xxl: 32px
xxxl: 40px
section: 52px
band: 56px
borderWidths:
thin: 1px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#0E0D30"
surfaceRaised: "#0D0C2E"
text: "#000000"
textMuted: "#0E0D30"
border: "#E0E0E0"
accent: "#E72968"
accentFg: "#000000"
focusRing: "#E72968"
elevation: shadow
dark:
bg: "#140B0F"
surface: "#221A1D"
surfaceRaised: "#2E2629"
text: "#FEF6F9"
textMuted: "#A59DA0"
border: "#3A3235"
accent: "#E72968"
accentFg: "#0B0B0C"
focusRing: "#E72968"
elevation: "border+surface"
contrastFailures:
- "light: text on surface = 1.12:1 (needs 4.5:1)"
components:
button-secondary:
typography: "{typography.body-md}"
textColor: "{colors.primary}"
height: 18px
rounded: "10%"
backgroundColor: "{colors.surface-alt}"
button-outline:
typography: "{typography.body-xs}"
textColor: "{colors.muted}"
border: "2px solid {colors.on-primary}"
height: 35.7656px
padding: "10.0625px 67.1094px 6.70312px 67.1094px"
rounded: "{rounded.sm}"
backgroundColor: "rgba(255, 255, 255, 0)"
button-outline-sm:
typography: "{typography.body-xs}"
textColor: "{colors.body}"
border: "2px solid {colors.surface-alt}"
height: 31.6562px
padding: "6.32812px 101.375px 6.32812px 101.375px"
rounded: "{rounded.sm}"
backgroundColor: "rgba(255, 255, 255, 0)"
button-icon:
textColor: "rgba(237, 237, 237, 0.9)"
height: 25px
fontSize: 25px
fontFamily: "Mont regular"
fontWeight: 400
lineHeight: 1.5
button-primary:
typography: "{typography.body-xs}"
textColor: "{colors.muted}"
height: 39px
padding: "12px 24px 12px 24px"
rounded: 20px
backgroundColor: "{colors.primary}"
button-primary-2:
typography: "{typography.body-xs}"
textColor: "{colors.muted}"
height: 39px
padding: "12px 24px 12px 24px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.primary}"
link:
typography: "{typography.body-sm}"
textColor: "{colors.primary}"
link-sm:
typography: "{typography.body-sm-tight}"
textColor: "{colors.body}"
padding: "13px 20px 13px 20px"
navigation:
typography: "{typography.body-sm}"
textColor: "{colors.body}"
height: 46px
footer:
typography: "{typography.body-sm}"
textColor: "{colors.body}"
states:
link-hover:
target: link
state: hover
textColor: "rgb(51, 51, 102)"
input-focus:
target: input
state: focus
borderColor: "rgb(51, 51, 51)"
button-hover:
target: button
state: hover
textColor: "{colors.canvas}"
textDecoration: none
backgroundColor: "rgb(204, 51, 102)"
other-hover:
target: other
state: hover
backgroundColor: "rgba(128, 128, 128, 0.1)"
button-focus-visible:
target: button
state: focus-visible
outline: "{colors.ink} solid 2px"
boxShadow: "{colors.canvas} 0px 0px 0px 4px"
outlineColor: "{colors.ink}"
outlineWidth: 2px
button-focus:
target: button
state: focus
outline: none
boxShadow: none
other-focus:
target: other
state: focus
textColor: "rgb(51, 51, 51)"
textDecoration: none
backgroundColor: "rgb(238, 238, 238)"
nav-hover:
target: nav
state: hover
textColor: "rgb(34, 34, 34)"
input-hover:
target: input
state: hover
opacity: 1
other-active:
target: other
state: active
textDecoration: underline
link-active:
target: link
state: active
textDecoration: none
button-disabled:
target: button
state: disabled
opacity: 0.3
other-focus-visible:
target: other
state: focus-visible
outline: "currentcolor solid 2px"
outlineColor: currentcolor
outlineWidth: 2px
breakpoints:
- width: 375
containerWidth: 365
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: true
headingPx: 44
bodyPx: 16
sectionPaddingX: 19
- width: 768
containerWidth: 737
gridColumns: 7
navLinksVisible: 0
menuToggleVisible: true
headingPx: 46
bodyPx: 16
sectionPaddingX: 38
- width: 1024
containerWidth: 984
gridColumns: 7
navLinksVisible: 0
menuToggleVisible: true
headingPx: 64
bodyPx: 16
sectionPaddingX: 51
- width: 1280
containerWidth: 1229
gridColumns: 7
navLinksVisible: 6
menuToggleVisible: true
headingPx: 80
bodyPx: 16
sectionPaddingX: 65
- width: 1440
containerWidth: 1382
gridColumns: 7
navLinksVisible: 6
menuToggleVisible: true
headingPx: 80
bodyPx: 16
sectionPaddingX: 65
coverage:
statesFound: 83
gradientsFound: 0
rolesUnassigned: 2
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Marvesting's design system embodies a bold, forward-thinking brand identity rooted in motion, connectivity, and purpose-driven storytelling. The visual language combines deep, sophisticated navy and black surfaces with striking hot pink accents, creating a premium, energetic aesthetic that commands attention while maintaining corporate credibility. The system favours dramatic typography, generous whitespace, and color-blocking over layered shadows, establishing a clean, modern foundation that adapts fluidly across devices. Geometric patterns, flowing curves, and subtle motion cues reinforce the brand's philosophy of movement and keeping audiences engaged—every surface and interaction reflects intentional, dynamic design.
Key Characteristics
{colors.primary}) for maximum visual impact{colors.on-primary}) serves as muted text on dark surfaces; pure black on light{colors.primary} — #E72968): Primary CTA fills, active navigation states, links, hover highlights on dark backgrounds. Hot pink with high saturation ensures visibility and brand recall.{colors.accent} — #2A2A91): Deep navy blue used as alternating hero band backgrounds, complementary to the primary accent, grounding brand moments.{colors.primary} — #E72968): Buttons, links, form focus states. Maintains brand consistency across all call-to-action surfaces.{colors.canvas} — #FFFFFF): Default page background. Clean, neutral foundation for content.{colors.ink} — #000000): Primary heading and text color on light surfaces. Maximum contrast for readability.{colors.on-primary} — #E5E1D3): Captions, secondary text, and label color on brand surfaces. Warm cream tone softens dark backgrounds.{colors.surface-alt} — #0E0D30): Alternating section band background and body text on dark surfaces. Deep charcoal-navy defining nocturnal sections.{colors.neutral-1} — #D6D6D6): Decorative borders and dividers. No specific role assigned; used for subtle separation.{colors.neutral-2} — #EDEDED): Decorative accents. No specific role assigned; used for light surface variations.Primary Font: Mont (regular and heavy weights)
Mont, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Mont Heavy | 82px | 400 | 1 | 0px | Hero-scale heading, maximum impact |
| Display Large Strong | Mont Heavy | 80px | 500 | 1.2 | 0px | Emphatic hero text, bold variant |
| Display Large | Mont Heavy | 80px | 400 | 1.2 | 0px | Hero heading, primary message |
| Display Medium | Mont Heavy | 69px | 400 | 1 | 0px | Large section heading |
| Display Small Strong | Mont Heavy | 60px | 500 | 1.2 | 0px | Bold subheading |
| Display Small | Mont Heavy | 60px | 400 | 1.2 | 0px | Section heading |
| Heading Medium Strong | Mont Heavy | 36px | 500 | 1.2 | 0px | Subsection title, bold |
| Heading Medium | Mont Heavy | 36px | 400 | 1.2 | 0px | Subsection title |
| Heading Small Strong | Mont Heavy | 26px | 500 | 1.2 | 0px | Card heading, bold |
| Heading Small | Mont Heavy | 26px | 400 | 1.2 | 0px | Card heading |
| Heading Extra Small | Mont Heavy | 20px | 500 | 1.2 | 0px | Small card title |
| Body Large | Mont Regular | 19px | 400 | 1.52 | 0px | Feature text, elevated body |
| Body Medium | Mont Regular | 18px | 400 | 1 | 0px | Link text, inline labels |
| Body Medium Uppercase | Mont Regular | 18px | 400 | 1.2 | 0px | Metadata, uppercase label |
| Body Small | Mont Regular | 16px | 400 | 1.5 | 0px | Standard body copy |
| Body Small Tight | Mont Regular | 16px | 400 | 1.25 | 0px | Compact body, navigation links |
| Body Extra Small | Mont Heavy | 15px | 500 | 1 | 0px | Compact heading accent |
| Label Small Strong | Mont Regular | 14px | 500 | 1.43 | 0px | Form label, bold |
| Label Small | Mont Regular | 14px | 400 | 2.71 | 0px | Form field label |
| Caption | Mont Regular | 10px | 400 | 2.16 | 0px | Footnote, metadata |
line-height: 1 or 1.2 for dense, powerful presence; body text relaxes to 1.5 for readability.0px for native character fit.{colors.primary} (#E72968){colors.on-primary} (#E5E1D3)12px 24px{rounded.sm} (30px) — pill-shaped#CC3366; opacity may reduce to 0.8{colors.surface-alt} (#0E0D30)rgba(237, 237, 237, 0.9) (off-white)0px{rounded.none} (0px) — sharprgba(255, 255, 255, 0) (transparent){colors.on-primary} (#E5E1D3)10px 67px2px solid {colors.on-primary} (#E5E1D3){rounded.sm} (30px) — pill-shapedrgba(255, 255, 255, 0) (transparent){colors.surface-alt} (#0E0D30)6px 101px2px solid {colors.surface-alt} (#0E0D30){rounded.sm} (30px) — pill-shaped{colors.surface-alt} (#0E0D30){colors.on-primary} (#E5E1D3){rounded.xs} (15px) on images; {rounded.none} on card body{spacing.xxxl} (40px) on large sections{colors.canvas} (#FFFFFF){colors.ink} (#000000){rounded.none} (0px){spacing.xxxl} (40px) to {spacing.section} (52px){colors.surface-alt} (#0E0D30){colors.on-primary} (#E5E1D3){spacing.xxs} (4px) solid, or 1px solid depending on state{rounded.sm} (30px) — pill-shaped10px 20px{colors.primary} (#E72968){colors.canvas} (#FFFFFF){colors.surface-alt} (#0E0D30)0px (full-width horizontal){colors.primary} (#E72968); background may shift to {colors.accent} (#2A2A91) on specific nav items{rounded.none} (0px){colors.on-primary} (#E5E1D3){colors.primary} (#E72968){colors.accent} (#2A2A91)Base unit: {spacing.xs} (8px)
Scale:
{spacing.xxs} (4px) — micro spacing, icon padding{spacing.xs} (8px) — tight element spacing{spacing.sm} (12px) — compact component padding{spacing.md} (16px) — standard body padding, input spacing{spacing.lg} (20px) — comfortable spacing between elements{spacing.xl} (28px) — generous spacing, card separation{spacing.xxl} (32px) — section spacing inside containers{spacing.xxxl} (40px) — large section padding{spacing.section} (52px) — major section breaks{spacing.band} (56px) — hero and full-width section paddingContext:
{spacing.md} (16px) horizontal, {spacing.sm} (12px) vertical{spacing.md} (16px) between rows{spacing.xxl} (32px) to {spacing.xxxl} (40px) internal padding{spacing.section} (52px) to {spacing.band} (56px) top/bottom padding{spacing.xxxl} (40px) on viewports < 768pxMax Width:
{spacing.lg} (20px) each side, reduced to {spacing.md} (16px) on smaller edges)Grid Columns: 7-column grid on desktop (1024px+); 1 column on mobile (375px–768px)
Container Strategy:
{colors.surface-alt}, {colors.canvas}, {colors.accent}) extend edge to edge{spacing.lg} (20px) on mobile, escalates to {spacing.xxxl} (40px)–{spacing.band} (56px)` on desktopThe system embraces generous, breathing whitespace to establish a premium, uncluttered aesthetic. Display typography is given room to dominate, with section breaks ({spacing.section} / {spacing.band}) creating visual rest between major ideas. Form fields and inputs maintain ample vertical separation to reduce cognitive load. Horizontal margins never compress below {spacing.md} (16px) on any viewport, preserving readability and focus.
{rounded.none} (0px) — Sharp, geometric components (images, flat containers, secondary buttons){rounded.xs} (15px) — Subtle rounding on images and accent borders{rounded.sm} (30px) — Pill-shaped buttons and inputs, primary interactive elements{rounded.full} (9999px) — Circles, overflow pill rendering (reserved for specialized use)1px — Input borders, form field outlines, subtle dividersThe system employs a color-blocking depth strategy rather than layered shadows. Depth is achieved by contrasting surface colors—dark backgrounds ({colors.surface-alt} — #0E0D30) alternate with light ({colors.canvas} — #FFFFFF) and brand accents ({colors.primary} — #E72968), creating visual hierarchy without shadow dependency. This flattens the visual language, emphasizing motion and color over spatial layering.
Elevation Strategy: Color-blocking—no multi-level shadow ladder is deployed. When shadows do appear (e.g., inset focus states on inputs), they are minimal (0px 0px 0px 1px inset) and serve validation purposes, not depth.
0.80 — Hover states on interactive overlays, softened text (e.g., icon buttons)0.20 — Subtle background hover on neutral surfaces; disabled state suggestion{colors.surface-alt} and {colors.canvas} sections to create depth and visual breaks.{rounded.sm} (30px) border-radius for cohesion and modern feel.{spacing.section} (52px) on desktop; respect mobile reductions ({spacing.xxxl} — 40px).{colors.primary} (#E72968) on CTAs, links, and active states ensures consistent brand presence.line-height: 1 or 1.2 for bold, dense presence; body uses 1.5 for comfort.2px dark, white 4px ring) for accessibility.{spacing.md}: Minimum horizontal padding is always {spacing.md} (16px), even on constrained viewports.0px, 15px, 30px, 9999px only.{colors.on-primary} (#E5E1D3); hover transitions to {colors.primary} (#E72968).{rounded.sm} (30px) for consistency; secondary buttons (icon) can use {rounded.none} when needed.| Breakpoint | Min Width | Content Column | Grid Columns | Nav Links Visible | Menu Toggle | Display Heading | Body Text | Section Padding X |
|---|---|---|---|---|---|---|---|---|
| Mobile | 375px | 365px | 1 | 0 | Yes | 44px | 16px | 19px |
| Tablet | 768px | 737px | 7 | 0 | Yes | 46px | 16px | 38px |
| Small Desktop | 1024px | 984px | 7 | 0 | Yes | 64px | 16px | 51px |
| Desktop | 1280px | 1229px | 7 | 6 | Yes | 80px | 16px | 65px |
| Large Desktop | 1440px | 1382px | 7 | 6 | Yes | 80px | 16px | 65px |
Key Changes:
Minimum interactive element size: 44px × 44px (based on button and input measurements).
35px–39px height; padding adds visual padding around touch area.31px–39px height to accommodate text and finger interaction.46px height baseline for comfortable tap targets.25px on desktop; consider wrapping in larger touch-friendly containers on mobile.Typography: Display sizes compress responsively:
16px across all breakpointsLayout:
19px → 38px → 51px → 65px as viewport expands.Navigation:
Forms:
Imagery & Hero Sections:
#E72968) — Use for buttons, active links, hover highlights on dark backgrounds#2A2A91) — Deep navy for hero bands, supporting sections#FFFFFF) — Default light surface#0E0D30) — Alternating hero and section backgrounds#000000) — Black, maximum contrast on white#E5E1D3) — Warm cream on navy/charcoal sections#D6D6D6, #EDEDED) — Decorative only; no semantic role{colors.surface-alt} and {colors.canvas} to establish page structure and depth without shadows.{rounded.sm} — 30px) with {colors.primary} background and {colors.on-primary} text. Hover state: darken background or reduce opacity to 0.8.{rounded.sm} (30px) border-radius, {colors.surface-alt} background on dark sections. Focus state: subtle inset shadow or border-color shift.{spacing.xxs} (4px) to {spacing.band} (56px). Never invent padding; scale steps are intentional for rhythm.{spacing.lg} (20px); escalate to {spacing.xxxl} (40px)–{spacing.band} (56px) at 1024px+. Heading sizes grow from 44px → 80px.2px solid outline (black on light, white on dark) with optional 4px ring. Do not remove outlines for aesthetics.0.3.{colors.primary} and {colors.accent} for interactive feedback.opacity: 0.3 on disabled buttons, but full disabled styling (text color, background) was not systematically measured across all components.{colors.neutral-1} (#D6D6D6) and {colors.neutral-2} (#EDEDED) have no measured semantic role. They appear decoratively in the codebase; their purpose in the production system is unclear.thin: 1px was extracted for input borders. Other border treatments (dividers, cards, containers) were not systematically captured.prefers-color-scheme, prefers-contrast, or print stylesheets were measured.