<!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 Button 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-buttons {
width: 1200px;
height: 2372px;
padding: 32px 40px;
box-sizing: border-box;
overflow: hidden;
background: #ffffff;
}
.figma-section { margin-bottom: 48px; }
.figma-section 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: center; gap: 12px; margin-bottom: 16px; }
</style>
</head>
<body>
<div id="figma-buttons">
<div class="figma-section">
<h2>Primary Buttons</h2>
<div class="figma-row">
<button class="btn btn-primary btn-lg" type="button">Button</button>
<button class="btn btn-primary btn-lg is-hover" type="button">Button</button>
<button class="btn btn-primary btn-lg is-active" type="button">Button</button>
<button class="btn btn-primary btn-lg" type="button" disabled>Button</button>
<button class="btn btn-primary btn-lg btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-primary btn-lg btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-primary btn-lg btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-primary btn-lg btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-primary btn-md" type="button">Button</button>
<button class="btn btn-primary btn-md is-hover" type="button">Button</button>
<button class="btn btn-primary btn-md is-active" type="button">Button</button>
<button class="btn btn-primary btn-md" type="button" disabled>Button</button>
<button class="btn btn-primary btn-md btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-primary btn-md btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-primary btn-md btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-primary btn-md btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-primary btn-sm" type="button">Button</button>
<button class="btn btn-primary btn-sm is-hover" type="button">Button</button>
<button class="btn btn-primary btn-sm is-active" type="button">Button</button>
<button class="btn btn-primary btn-sm" type="button" disabled>Button</button>
<button class="btn btn-primary btn-sm btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-primary btn-sm btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-primary btn-sm btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-primary btn-sm btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-primary btn-xs" type="button">Button</button>
<button class="btn btn-primary btn-xs is-hover" type="button">Button</button>
<button class="btn btn-primary btn-xs is-active" type="button">Button</button>
<button class="btn btn-primary btn-xs" type="button" disabled>Button</button>
<button class="btn btn-primary btn-xs btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-primary btn-xs btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-primary btn-xs btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-primary btn-xs btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
</div>
<div class="figma-section">
<h2>Secondary Buttons</h2>
<div class="figma-row">
<button class="btn btn-secondary btn-lg" type="button">Button</button>
<button class="btn btn-secondary btn-lg is-hover" type="button">Button</button>
<button class="btn btn-secondary btn-lg is-active" type="button">Button</button>
<button class="btn btn-secondary btn-lg" type="button" disabled>Button</button>
<button class="btn btn-secondary btn-lg btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-secondary btn-lg btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-secondary btn-lg btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-secondary btn-lg btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-secondary btn-md" type="button">Button</button>
<button class="btn btn-secondary btn-md is-hover" type="button">Button</button>
<button class="btn btn-secondary btn-md is-active" type="button">Button</button>
<button class="btn btn-secondary btn-md" type="button" disabled>Button</button>
<button class="btn btn-secondary btn-md btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-secondary btn-md btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-secondary btn-md btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-secondary btn-md btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-secondary btn-sm" type="button">Button</button>
<button class="btn btn-secondary btn-sm is-hover" type="button">Button</button>
<button class="btn btn-secondary btn-sm is-active" type="button">Button</button>
<button class="btn btn-secondary btn-sm" type="button" disabled>Button</button>
<button class="btn btn-secondary btn-sm btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-secondary btn-sm btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-secondary btn-sm btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-secondary btn-sm btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-secondary btn-xs" type="button">Button</button>
<button class="btn btn-secondary btn-xs is-hover" type="button">Button</button>
<button class="btn btn-secondary btn-xs is-active" type="button">Button</button>
<button class="btn btn-secondary btn-xs" type="button" disabled>Button</button>
<button class="btn btn-secondary btn-xs btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-secondary btn-xs btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-secondary btn-xs btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-secondary btn-xs btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
</div>
<div class="figma-section">
<h2>Tertiary Buttons</h2>
<div class="figma-row">
<button class="btn btn-tertiary btn-lg" type="button">Button</button>
<button class="btn btn-tertiary btn-lg is-hover" type="button">Button</button>
<button class="btn btn-tertiary btn-lg is-active" type="button">Button</button>
<button class="btn btn-tertiary btn-lg" type="button" disabled>Button</button>
<button class="btn btn-tertiary btn-lg btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-tertiary btn-lg btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-tertiary btn-lg btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-tertiary btn-lg btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-tertiary btn-md" type="button">Button</button>
<button class="btn btn-tertiary btn-md is-hover" type="button">Button</button>
<button class="btn btn-tertiary btn-md is-active" type="button">Button</button>
<button class="btn btn-tertiary btn-md" type="button" disabled>Button</button>
<button class="btn btn-tertiary btn-md btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-tertiary btn-md btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-tertiary btn-md btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-tertiary btn-md btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-tertiary btn-sm" type="button">Button</button>
<button class="btn btn-tertiary btn-sm is-hover" type="button">Button</button>
<button class="btn btn-tertiary btn-sm is-active" type="button">Button</button>
<button class="btn btn-tertiary btn-sm" type="button" disabled>Button</button>
<button class="btn btn-tertiary btn-sm btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-tertiary btn-sm btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-tertiary btn-sm btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-tertiary btn-sm btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-tertiary btn-xs" type="button">Button</button>
<button class="btn btn-tertiary btn-xs is-hover" type="button">Button</button>
<button class="btn btn-tertiary btn-xs is-active" type="button">Button</button>
<button class="btn btn-tertiary btn-xs" type="button" disabled>Button</button>
<button class="btn btn-tertiary btn-xs btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-tertiary btn-xs btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-tertiary btn-xs btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-tertiary btn-xs btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
</div>
<div class="figma-section">
<h2>Destructive Buttons</h2>
<div class="figma-row">
<button class="btn btn-danger btn-lg" type="button">Button</button>
<button class="btn btn-danger btn-lg is-hover" type="button">Button</button>
<button class="btn btn-danger btn-lg is-active" type="button">Button</button>
<button class="btn btn-danger btn-lg" type="button" disabled>Button</button>
<button class="btn btn-danger btn-lg btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger btn-lg btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger btn-lg btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger btn-lg btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-danger btn-md" type="button">Button</button>
<button class="btn btn-danger btn-md is-hover" type="button">Button</button>
<button class="btn btn-danger btn-md is-active" type="button">Button</button>
<button class="btn btn-danger btn-md" type="button" disabled>Button</button>
<button class="btn btn-danger btn-md btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger btn-md btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger btn-md btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger btn-md btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-danger btn-sm" type="button">Button</button>
<button class="btn btn-danger btn-sm is-hover" type="button">Button</button>
<button class="btn btn-danger btn-sm is-active" type="button">Button</button>
<button class="btn btn-danger btn-sm" type="button" disabled>Button</button>
<button class="btn btn-danger btn-sm btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger btn-sm btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger btn-sm btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger btn-sm btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-danger btn-xs" type="button">Button</button>
<button class="btn btn-danger btn-xs is-hover" type="button">Button</button>
<button class="btn btn-danger btn-xs is-active" type="button">Button</button>
<button class="btn btn-danger btn-xs" type="button" disabled>Button</button>
<button class="btn btn-danger btn-xs btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger btn-xs btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger btn-xs btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger btn-xs btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
</div>
<div class="figma-section">
<h2>Destructive Secondary Buttons</h2>
<div class="figma-row">
<button class="btn btn-danger-secondary btn-lg" type="button">Button</button>
<button class="btn btn-danger-secondary btn-lg is-hover" type="button">Button</button>
<button class="btn btn-danger-secondary btn-lg is-active" type="button">Button</button>
<button class="btn btn-danger-secondary btn-lg" type="button" disabled>Button</button>
<button class="btn btn-danger-secondary btn-lg btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-secondary btn-lg btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-secondary btn-lg btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-secondary btn-lg btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-danger-secondary btn-md" type="button">Button</button>
<button class="btn btn-danger-secondary btn-md is-hover" type="button">Button</button>
<button class="btn btn-danger-secondary btn-md is-active" type="button">Button</button>
<button class="btn btn-danger-secondary btn-md" type="button" disabled>Button</button>
<button class="btn btn-danger-secondary btn-md btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-secondary btn-md btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-secondary btn-md btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-secondary btn-md btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-danger-secondary btn-sm" type="button">Button</button>
<button class="btn btn-danger-secondary btn-sm is-hover" type="button">Button</button>
<button class="btn btn-danger-secondary btn-sm is-active" type="button">Button</button>
<button class="btn btn-danger-secondary btn-sm" type="button" disabled>Button</button>
<button class="btn btn-danger-secondary btn-sm btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-secondary btn-sm btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-secondary btn-sm btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-secondary btn-sm btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-danger-secondary btn-xs" type="button">Button</button>
<button class="btn btn-danger-secondary btn-xs is-hover" type="button">Button</button>
<button class="btn btn-danger-secondary btn-xs is-active" type="button">Button</button>
<button class="btn btn-danger-secondary btn-xs" type="button" disabled>Button</button>
<button class="btn btn-danger-secondary btn-xs btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-secondary btn-xs btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-secondary btn-xs btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-secondary btn-xs btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
</div>
<div class="figma-section">
<h2>Destructive Tertiary Buttons</h2>
<div class="figma-row">
<button class="btn btn-danger-tertiary btn-lg" type="button">Button</button>
<button class="btn btn-danger-tertiary btn-lg is-hover" type="button">Button</button>
<button class="btn btn-danger-tertiary btn-lg is-active" type="button">Button</button>
<button class="btn btn-danger-tertiary btn-lg" type="button" disabled>Button</button>
<button class="btn btn-danger-tertiary btn-lg btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-tertiary btn-lg btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-tertiary btn-lg btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-tertiary btn-lg btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-danger-tertiary btn-md" type="button">Button</button>
<button class="btn btn-danger-tertiary btn-md is-hover" type="button">Button</button>
<button class="btn btn-danger-tertiary btn-md is-active" type="button">Button</button>
<button class="btn btn-danger-tertiary btn-md" type="button" disabled>Button</button>
<button class="btn btn-danger-tertiary btn-md btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-tertiary btn-md btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-tertiary btn-md btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-tertiary btn-md btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-danger-tertiary btn-sm" type="button">Button</button>
<button class="btn btn-danger-tertiary btn-sm is-hover" type="button">Button</button>
<button class="btn btn-danger-tertiary btn-sm is-active" type="button">Button</button>
<button class="btn btn-danger-tertiary btn-sm" type="button" disabled>Button</button>
<button class="btn btn-danger-tertiary btn-sm btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-tertiary btn-sm btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-tertiary btn-sm btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-tertiary btn-sm btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
<div class="figma-row">
<button class="btn btn-danger-tertiary btn-xs" type="button">Button</button>
<button class="btn btn-danger-tertiary btn-xs is-hover" type="button">Button</button>
<button class="btn btn-danger-tertiary btn-xs is-active" type="button">Button</button>
<button class="btn btn-danger-tertiary btn-xs" type="button" disabled>Button</button>
<button class="btn btn-danger-tertiary btn-xs btn-icon-only" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-tertiary btn-xs btn-icon-only is-hover" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-tertiary btn-xs btn-icon-only is-active" type="button"><i class="ph ph-plus"></i></button>
<button class="btn btn-danger-tertiary btn-xs btn-icon-only" type="button" disabled><i class="ph ph-plus"></i></button>
</div>
</div>
</div>
</body>
</html>
