<!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 Badges 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-badges {
width: 1200px;
height: 743px;
padding: 40px;
box-sizing: border-box;
overflow: hidden;
background: #ffffff;
}
.figma-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
</style>
</head>
<body>
<div id="figma-badges">
<div class="figma-row">
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-accent">Accent</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-owner">Owner</span>
</div>
<div class="figma-row">
<span class="badge badge-outline">Outline</span>
<span class="badge badge-primary-outline">Primary Outline</span>
<span class="badge badge-secondary badge-outline">Secondary Outline</span>
<span class="badge badge-accent badge-outline">Accent Outline</span>
<span class="badge badge-success badge-outline">Success Outline</span>
<span class="badge badge-warning badge-outline">Warning Outline</span>
<span class="badge badge-info badge-outline">Info Outline</span>
<span class="badge badge-danger badge-outline">Danger Outline</span>
</div>
<div class="figma-row">
<span class="badge badge-primary badge-sm">Primary Small</span>
<span class="badge badge-secondary badge-sm">Secondary Small</span>
<span class="badge badge-success badge-sm">Success Small</span>
<span class="badge badge-danger badge-sm">Danger Small</span>
</div>
<div class="figma-row">
<span class="badge badge-primary badge-lg">Primary Large</span>
<span class="badge badge-secondary badge-lg">Secondary Large</span>
<span class="badge badge-success badge-lg">Success Large</span>
<span class="badge badge-danger badge-lg">Danger Large</span>
</div>
<div class="figma-row">
<span class="badge badge-primary with-icon"><i class="ph ph-check vmk-icon"></i> With icon</span>
<span class="badge badge-secondary with-icon"><i class="ph ph-star vmk-icon"></i> With icon</span>
<span class="badge badge-success with-icon"><i class="ph ph-check vmk-icon"></i> With icon</span>
<span class="badge badge-danger with-icon"><i class="ph ph-x vmk-icon"></i> With icon</span>
</div>
</div>
</body>
</html>
