<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VMK UI Kit — Figma Backgrounds Match</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/fonts/phosphor-icons/src/css/icons.css">
<link rel="stylesheet" href="/css/kit.css">
<style>
html, body { padding: 0; margin: 0; background: #ffffff; }
#figma-backgrounds {
width: 1200px;
height: 900px;
padding: 40px;
box-sizing: border-box;
overflow: hidden;
background: #ffffff;
}
.figma-group { margin-bottom: 48px; }
.figma-group h2 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; margin: 0 0 20px; color: #1F1F1F; font-weight: 700; }
.figma-row { display: flex; align-items: flex-start; gap: 24px; }
.background-preview {
display: flex;
flex-direction: column;
gap: 8px;
border-radius: 16px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 1px 3px rgba(31, 31, 31, 0.08);
}
.background-preview .vmk-bg { width: 100%; height: 220px; }
.background-preview.desktop .vmk-bg { width: 420px; }
.background-preview.tablet .vmk-bg { width: 210px; }
.background-preview.mobile .vmk-bg { width: 140px; }
.background-label {
padding: 8px 12px;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 13px;
font-weight: 600;
color: #1F1F1F;
}
</style>
</head>
<body>
<div id="figma-backgrounds">
<div class="figma-group">
<h2>Gradient</h2>
<div class="figma-row">
<div class="background-preview desktop">
<div class="vmk-bg is-preview" data-variant="gradient" data-device="desktop"></div>
<span class="background-label">Desktop</span>
</div>
<div class="background-preview tablet">
<div class="vmk-bg is-preview" data-variant="gradient" data-device="tablet"></div>
<span class="background-label">Tablet</span>
</div>
<div class="background-preview mobile">
<div class="vmk-bg is-preview" data-variant="gradient" data-device="mobile"></div>
<span class="background-label">Mobile</span>
</div>
</div>
</div>
<div class="figma-group">
<h2>Shape</h2>
<div class="figma-row">
<div class="background-preview desktop">
<div class="vmk-bg is-preview" data-variant="shape" data-device="desktop"></div>
<span class="background-label">Desktop</span>
</div>
<div class="background-preview tablet">
<div class="vmk-bg is-preview" data-variant="shape" data-device="tablet"></div>
<span class="background-label">Tablet</span>
</div>
<div class="background-preview mobile">
<div class="vmk-bg is-preview" data-variant="shape" data-device="mobile"></div>
<span class="background-label">Mobile</span>
</div>
</div>
</div>
</div>
</body>
</html>
