<!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 Forms 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-forms {
width: 1200px;
height: 2648px;
padding: 40px;
box-sizing: border-box;
overflow: hidden;
background: #ffffff;
}
.figma-row { margin-bottom: 32px; max-width: 600px; }
</style>
</head>
<body>
<div id="figma-forms">
<div class="figma-row form-group">
<label class="label">Default input
<input type="text" class="input" value="Example value" placeholder="Placeholder text">
</label>
</div>
<div class="figma-row form-group">
<label class="label is-required">Required input
<input type="text" class="input" placeholder="Placeholder text">
</label>
</div>
<div class="figma-row form-group">
<label class="label">Hover state
<input type="text" class="input is-hover" value="Hover value" placeholder="Placeholder text">
</label>
</div>
<div class="figma-row form-group">
<label class="label">Focus state
<input type="text" class="input" placeholder="Focused input" style="border-color:#7EC0C9; box-shadow:0 0 0 3px rgba(126,192,201,0.24);">
</label>
</div>
<div class="figma-row form-group">
<label class="label">Disabled input
<input type="text" class="input" value="Disabled value" disabled>
</label>
</div>
<div class="figma-row form-group is-error">
<label class="label">Error state
<input type="text" class="input" value="Invalid value">
<p class="input-help is-error">Please enter a valid value.</p>
</label>
</div>
<div class="figma-row form-group is-success">
<label class="label">Success state
<input type="text" class="input" value="Valid value">
<p class="input-help is-success">Looks good!</p>
</label>
</div>
<div class="figma-row form-group">
<label class="label">With left icon
<i class="ph ph-magnifying-glass vmk-icon"></i>
<input type="text" class="input input-icon-left" placeholder="Search...">
</label>
</div>
<div class="figma-row form-group">
<label class="label">Small input
<input type="text" class="input input-sm" value="Small value">
</label>
</div>
<div class="figma-row form-group">
<label class="label">Large input
<input type="text" class="input input-lg" value="Large value">
</label>
</div>
<div class="figma-row form-group">
<label class="label">Textarea
<textarea class="input" rows="4" placeholder="Type a message..."></textarea>
</label>
</div>
</div>
</body>
</html>
