{"product_id":"official-emerald-ui-kit-for-figma","title":"Official Emerald UI Kit for Figma","description":"\u003ch1\u003eOfficial Emerald UI Kit for Figma\u003c\/h1\u003e\n\u003ch2\u003eEmerald — Design System, Not Just a Theme\u003c\/h2\u003e\n\u003cp\u003eEmerald is a complete visual language for Vuetify0: tokens, icons, components, and layout patterns shaped around calm, tactile interfaces. This Figma library is the design-side mirror of \u003ccode\u003e@paper\/emerald\u003c\/code\u003e — the same color scales, spacing rhythm, typography roles, and component anatomy you ship in code.\u003c\/p\u003e\n\u003cp\u003eDesign in Figma. Build in Vue. Nothing gets lost in translation.\u003c\/p\u003e\n\u003ch2\u003eWhat Makes This Kit Different\u003c\/h2\u003e\n\u003cp\u003eEmerald does not restyle someone else's components. It brings its own vocabulary — \u003ccode\u003eEmButton\u003c\/code\u003e, \u003ccode\u003eEmSelect\u003c\/code\u003e, \u003ccode\u003eEmKanban\u003c\/code\u003e, and the rest — while staying faithful to the compound structure underneath Vuetify0. When you hand off a screen, developers are not guessing: every frame maps to a documented component and a CSS token they already have installed.\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eDesign-to-code parity\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e* Tokens in Figma export from the same source as the npm package (\u003ccode\u003ecolors.ts\u003c\/code\u003e, \u003ccode\u003edesign-system.ts\u003c\/code\u003e)\u003c\/p\u003e\n\u003cp\u003e* Light and dark palettes switch with a single theme attribute — \u003ccode\u003eemerald-light\u003c\/code\u003e \/ \u003ccode\u003eemerald-dark\u003c\/code\u003e\u003c\/p\u003e\n\u003cp\u003e* Icon roles (\u003ccode\u003ecalendar\u003c\/code\u003e, \u003ccode\u003email\u003c\/code\u003e, \u003ccode\u003efinance\u003c\/code\u003e) resolve the same way in design and in \u003ccode\u003eEmIcon\u003c\/code\u003e\u003c\/p\u003e\n\u003cp\u003e* Compound parts (\u003ccode\u003eEmDialogTitle\u003c\/code\u003e, \u003ccode\u003eEmSelectItem\u003c\/code\u003e, \u003ccode\u003eEmCalendarHeader\u003c\/code\u003e) match the code API\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eAesthetic direction\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e* Cool mineral tones and jade-inspired accents\u003c\/p\u003e\n\u003cp\u003e* Soft contrast, fog-like surfaces, controlled vibrancy\u003c\/p\u003e\n\u003cp\u003e* Elevation with meaning — shadows only where surfaces float\u003c\/p\u003e\n\u003cp\u003e* Motion and state feedback designed to feel tactile without visual noise\u003c\/p\u003e\n\u003ch2\u003eInside the Kit\u003c\/h2\u003e\n\u003ch3\u003eToken Foundations\u003c\/h3\u003e\n\u003cp\u003eEvery visual decision lives under the \u003ccode\u003e--emerald-*\u003c\/code\u003e namespace — organized so designers and developers speak the same language.\u003c\/p\u003e\n\u003ctable\u003e\n\u003ccolgroup\u003e \u003ccol\u003e \u003ccol\u003e \u003c\/colgroup\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003cth colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003eFamily\u003c\/p\u003e\n\u003c\/th\u003e\n\u003cth colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003eExamples\u003c\/p\u003e\n\u003c\/th\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003cstrong\u003eColor\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003ccode\u003e--emerald-primary-600\u003c\/code\u003e, \u003ccode\u003e--emerald-surface\u003c\/code\u003e, \u003ccode\u003e--emerald-on-background\u003c\/code\u003e, \u003ccode\u003e--emerald-danger-400\u003c\/code\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003cstrong\u003eSpacing\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003ccode\u003e--emerald-spacing-2xs\u003c\/code\u003e through \u003ccode\u003e--emerald-spacing-m\u003c\/code\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003cstrong\u003eRadius \u0026amp; stroke\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003ccode\u003e--emerald-radius-m\u003c\/code\u003e, \u003ccode\u003e--emerald-stroke-s\u003c\/code\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003cstrong\u003eTypography\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003ccode\u003e--emerald-text-b2-size\u003c\/code\u003e, \u003ccode\u003e--emerald-text-b2-height\u003c\/code\u003e, \u003ccode\u003e--emerald-text-b2-weight\u003c\/code\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003cstrong\u003eIcon, shadow, motion\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003ccode\u003e--emerald-icon-m\u003c\/code\u003e, \u003ccode\u003e--emerald-shadow-m\u003c\/code\u003e, \u003ccode\u003e--emerald-motion-duration-fast\u003c\/code\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003c\/tbody\u003e\n\u003c\/table\u003e\n\u003cp\u003eColors ship as hex values \u003cstrong\u003eand\u003c\/strong\u003e as RGB channels for translucent overlays — the same dual format the runtime CSS emits.\u003c\/p\u003e\n\u003cp\u003eFigma variables are wired to these names so a token change in design propagates cleanly to implementation.\u003c\/p\u003e\n\u003ch3\u003eDual Themes\u003c\/h3\u003e\n\u003cp\u003eLight is the default environment. Dark is a deliberate companion — not a simple inversion. Toggle between \u003ccode\u003eemerald-light\u003c\/code\u003e and \u003ccode\u003eemerald-dark\u003c\/code\u003e to preview both modes without duplicating frames.\u003c\/p\u003e\n\u003ch3\u003eIcon System\u003c\/h3\u003e\n\u003cp\u003e48 glyphs, 72 role names. You pick by intent — \u003ccode\u003eenvelope\u003c\/code\u003e, not a filename. Aliases like \u003ccode\u003email → envelope\u003c\/code\u003e and \u003ccode\u003efinance → card\u003c\/code\u003e behave exactly as they do in code. Decorative by default; labelled when accessibility requires it.\u003c\/p\u003e\n\u003ch3\u003eComponent Library\u003c\/h3\u003e\n\u003cp\u003eEvery shipped \u003ccode\u003eEm*\u003c\/code\u003e component is represented with its variants, states, and compound parts:\u003c\/p\u003e\n\u003ctable\u003e\n\u003ccolgroup\u003e \u003ccol\u003e \u003ccol\u003e \u003c\/colgroup\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003cth colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003eCategory\u003c\/p\u003e\n\u003c\/th\u003e\n\u003cth colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003eComponents\u003c\/p\u003e\n\u003c\/th\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003cstrong\u003eActions\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003eEmButton\u003c\/p\u003e\n\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003cstrong\u003eForms\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003eEmTextField, EmTextarea, EmCheckbox, EmRadio, EmSwitch, EmSelect, EmSlider\u003c\/p\u003e\n\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003cstrong\u003eFeedback\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003eEmAlert, EmBadge, EmProgress, EmSpinner, EmSnackbar, EmTooltip\u003c\/p\u003e\n\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003cstrong\u003eNavigation\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003eEmTabs, EmBreadcrumbs, EmPagination, EmStep\u003c\/p\u003e\n\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003cstrong\u003eSurfaces\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003eEmCard, EmDialog, EmPopover, EmDivider, EmExpansionPanel\u003c\/p\u003e\n\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003cstrong\u003eData display\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003eEmList, EmAvatar, EmTag, EmCalendar, EmKanban\u003c\/p\u003e\n\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003e\u003cstrong\u003eSystem\u003c\/strong\u003e\u003c\/p\u003e\n\u003c\/td\u003e\n\u003ctd colspan=\"1\" rowspan=\"1\"\u003e\n\u003cp\u003eEmIcon\u003c\/p\u003e\n\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003c\/tbody\u003e\n\u003c\/table\u003e\n\u003cp\u003eEach component covers the interaction states that matter in production: default, hover, focus, active, disabled, and error — sized and spaced against the Emerald scale, not borrowed from another system.\u003c\/p\u003e\n\u003ch3\u003eDashboard Patterns\u003c\/h3\u003e\n\u003cp\u003eBeyond atoms and molecules, the kit includes layout scaffolding from the MIT showcase app — calendar views, kanban boards, and dashboard shells — so you can compose full product screens without rebuilding structure from scratch.\u003c\/p\u003e\n\u003ch2\u003eWho This Is For\u003c\/h2\u003e\n\u003cp\u003e\u003cstrong\u003e* Product designers\u003c\/strong\u003e building dashboards, SaaS tools, or productivity apps who want a cohesive system without starting from a blank canvas\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e* Design–dev teams\u003c\/strong\u003e on Vuetify0 who need Figma frames that map 1:1 to \u003ccode\u003e@paper\/emerald\u003c\/code\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e* Agencies\u003c\/strong\u003e delivering client work where handoff clarity saves rework\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e* Teams exploring beyond Material Design\u003c\/strong\u003e while keeping accessibility and behavior battle-tested through Vuetify0 underneath\u003c\/p\u003e\n\u003ch2\u003eWhat You Get\u003c\/h2\u003e\n\u003cp\u003e\u003cstrong\u003e* Full component set\u003c\/strong\u003e — every documented \u003ccode\u003eEm*\u003c\/code\u003e family with variants and compound parts\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e* Token library\u003c\/strong\u003e — color, spacing, radius, stroke, type, icon, shadow, and motion variables aligned with the npm package\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e* Light + dark themes\u003c\/strong\u003e — switchable via Figma variables \/ theme modes\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e* Role-based icon set\u003c\/strong\u003e — the complete Emerald glyph map with aliases\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e* Dashboard building blocks\u003c\/strong\u003e — calendar, kanban, and layout patterns from the showcase app\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e* Free updates\u003c\/strong\u003e — the kit evolves with Emerald as the design system matures\u003c\/p\u003e\n\u003ch2\u003eOpen Code, Premium Design File\u003c\/h2\u003e\n\u003cp\u003eThe Emerald design system — components, tokens, and the dashboard app — is \u003cstrong\u003eMIT licensed\u003c\/strong\u003e and ships as \u003ccode\u003e@paper\/emerald\u003c\/code\u003e.\u003c\/p\u003e\n\u003cp\u003eThis Figma UI Kit is the companion design asset: the fastest path from exploration to implementation when you want pixels and props to stay in sync.\u003c\/p\u003e\n\u003ch2\u003eBefore You Buy\u003c\/h2\u003e\n\u003cp\u003e\u003cstrong\u003eThis kit covers Emerald core components.\u003c\/strong\u003e It is the design counterpart of the open-source system documented at \u003ca href=\"https:\/\/0.vuetifyjs.com\/systems\/emerald\"\u003e0.vuetifyjs.com\/systems\/emerald\u003c\/a\u003e.\u003c\/p\u003e\n\u003cp\u003eLooking for Material Design and Vuetify 4 component parity? See the \u003ca href=\"https:\/\/store.vuetifyjs.com\/products\/official-vuetify-4-ui-kit-for-figma\"\u003eOfficial Vuetify 4 UI Kit for Figma\u003c\/a\u003e.\u003c\/p\u003e\n\u003ch2\u003eStart Designing with Emerald\u003c\/h2\u003e\n\u003cp\u003eOpen the file, set your theme, drop an \u003ccode\u003eEmButton\u003c\/code\u003e — and know the Vue component waiting on the other side already matches.\u003c\/p\u003e\n\u003cp\u003eQuestions or feedback? Reach us at \u003ca href=\"mailto:store@vuetifyjs.com\"\u003estore@vuetifyjs.com\u003c\/a\u003e or join the Vuetify Discord community.\u003c\/p\u003e","brand":"Vuetify","offers":[{"title":"Personal License","offer_id":48966903038174,"sku":null,"price":69.0,"currency_code":"USD","in_stock":true},{"title":"Commercial License","offer_id":48966903070942,"sku":null,"price":229.0,"currency_code":"USD","in_stock":true},{"title":"Unlimited License","offer_id":48966903103710,"sku":null,"price":499.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/2695\/0984\/files\/emerald-Cover.png?v=1788200758","url":"https:\/\/store.vuetifyjs.com\/products\/official-emerald-ui-kit-for-figma","provider":"Vuetify","version":"1.0","type":"link"}