{"id":53888,"date":"2024-07-25T03:09:40","date_gmt":"2024-07-25T10:09:40","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=53888"},"modified":"2024-08-01T04:43:03","modified_gmt":"2024-08-01T11:43:03","slug":"color-tokens-in-uxpin","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/","title":{"rendered":"Color Tokens in Open Beta \u2013 Simplify Color Management"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/CT_blog-1024x512.png\" alt=\"CT blog\" class=\"wp-image-53892\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/CT_blog-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/CT_blog-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/CT_blog-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/CT_blog.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>As part of our commitment to help you create consistent user interfaces, we\u2019re excited to introduce Color Tokens \u2014 a powerful tool that brings a new level of precision and organization to your design workflow.<\/p>\n\n\n\n<p>In open beta, you can set up a color token library, easily update your design system and control colors of your components. In the future, you will be able to facilitate the full design process with colors. Follow along the advice posted in this article. Set up a UXPin account. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin for free<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What are Color Tokens?<\/h2>\n\n\n\n<p>Color tokens are a set of predefined, reusable variables representing colors used in a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-system-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/cloud-sync-data.png\" alt=\"cloud sync data\" class=\"wp-image-53728\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/cloud-sync-data.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/cloud-sync-data-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Instead of manually applying hex codes or RGB values across different elements, designers can now use these tokens to ensure uniformity, consistency, as well as simplify updates and maintenance of colors in their design system.<\/p>\n\n\n\n<p>Learn more about design tokens: <em><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-are-design-tokens\/\" target=\"_blank\" rel=\"noreferrer noopener\">What are design tokens?<\/a><\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Are Color Tokens Important?<\/h2>\n\n\n\n<p>Color Tokens help keep designs consistent by using the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/choose-color-pallete\/\" target=\"_blank\" rel=\"noreferrer noopener\">same colors across projects<\/a>. They make updates easy, reducing manual work. They also help teams use a common set of colors, so everything looks cohesive and in line with company standards.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Consistency<\/strong>: By using Color Tokens, teams can ensure that the same color values are applied consistently across all design assets, eliminating discrepancies and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/brand-consistency\/\" target=\"_blank\" rel=\"noreferrer noopener\">maintaining brand integrity<\/a>.<\/li>\n\n\n\n<li><strong>Efficiency<\/strong>: Tokens streamline the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-process-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">design process<\/a> by reducing the need for repetitive tasks. When a color change is required, tokens can help designers and engineers do it quickly, saving time and reducing errors.<\/li>\n\n\n\n<li><strong>Collaboration<\/strong>: Color tokens facilitate better collaboration between designers and developers. With a shared language and defined color standards, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-handoff-with-merge\/\" target=\"_blank\" rel=\"noreferrer noopener\">design handoffs<\/a> are smoother, and the implementation is more accurate.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">How to Access Color Tokens in UXPin<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"637\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/color-tokens-uxpin-1024x637.avif\" alt=\"color tokens uxpin\" class=\"wp-image-53898\" style=\"width:750px\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/color-tokens-uxpin-1024x637.avif 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/color-tokens-uxpin-483x300.avif 483w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/color-tokens-uxpin-768x477.avif 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/color-tokens-uxpin-290x180.avif 290w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/color-tokens-uxpin.avif 1504w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Before you can access Color Tokens, you need to set them up. You can do that manually or convert an existing library into a Color Token library. See UXPin&#8217;s documentation for detailed instructions: <em><a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/color-design-tokens\/\" target=\"_blank\" rel=\"noreferrer noopener\">Color Design Tokens<\/a><\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Convert an existing library<\/h3>\n\n\n\n<p>If you created a Color library in UXPin before July 17th, 2024, you can convert it to a token library and use the saved colors as token colors.<\/p>\n\n\n\n<p>Open the existing library, click Library Settings and Click &#8216;convert library to use colors as tokens&#8217;. Save changes and you\u2019re good to use those colors as tokens.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Set up a new library<\/h3>\n\n\n\n<p>To create a Color Token library, you need to navigate to <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-system-libraries\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design System Library<\/a> in UXPin. Open Design System Libraries (or press \u201ccmd\u201d + \u201c2\u201d to get there faster).<\/p>\n\n\n\n<p>Then, at the bottom of the panel, click \u201c+ New library\u201d. Navigate to the colors section and get ready to add Color Tokens.<\/p>\n\n\n\n<p>You can set up Color Tokens in two ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Copy colors from selected elements<\/strong> \u2013 select one or more elements on the canvas and click \u201c+Add\u201d in the library panel to add the colors as tokens.<\/li>\n\n\n\n<li><strong>Type in a color HEX code<\/strong> \u2013 enter the HEX codes to set up Color Tokens automatically.<\/li>\n<\/ul>\n\n\n\n<p>The colors from your library will also appear in the Color Picker, so you can quickly apply them to elements on the canvas. Select the element that you want to switch a color of and choose an appropriate color from the library.<\/p>\n\n\n\n<p>This trick works for setting up the colors for properties like fill, border, and shadow.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Can You Do with Color Tokens in UXPin?<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Change colors of elements that you have on the canvas<\/strong> \u2013 Pick an element and add a color to it from the saved Color Tokens.<\/li>\n\n\n\n<li><strong>Update colors in your design system<\/strong> \u2013 If you use a design system, you can now try new colors and change your design system library for a more modern look.<\/li>\n\n\n\n<li><strong>Maintain a uniform look within a project<\/strong> \u2013 Access the same Color Tokens in every new prototype that you and your teammates create within a project.<\/li>\n\n\n\n<li><strong>Share Color Tokens across your organization<\/strong> \u2013 Share your design system library with tokens across your organizations, so everyone can use the same Color Tokens.<\/li>\n\n\n\n<li><strong>Manage Color Tokens as you like<\/strong> \u2013 Set up new Color Tokens, update existing ones, share them with your team, and more.\u00a0<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">A Step Towards Comprehensive Design Tokens<\/h2>\n\n\n\n<p>Introducing Color Tokens is just the beginning. At UXPin, we understand that Design Tokens extend far beyond color. As part of our commitment to creating a robust design system, we are actively working on expanding our token offerings to include typography, spacing, and other <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">design elements<\/a>.<\/p>\n\n\n\n<p>This comprehensive approach will further enhance consistency, improve scalability, and streamline the entire design-to-development workflow.<\/p>\n\n\n\n<p>Use code-backed components in both design and development. Build advanced prototypes effortlessly and generate production-ready code directly from the design. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin for free<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>As part of our commitment to help you create consistent user interfaces, we\u2019re excited to introduce Color Tokens \u2014 a powerful tool that brings a new level of precision and organization to your design workflow. In open beta, you can set up a color token library, easily update your design system and control colors of<\/p>\n","protected":false},"author":3,"featured_media":53892,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199,334,19],"tags":[],"class_list":["post-53888","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems","category-features","category-uxpin"],"yoast_title":"","yoast_metadesc":"Dive into our new feature \u2013 color tokens. Manage, unify, and scale colors across your prototypes and keep your team unified.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Color Tokens in Open Beta \u2013 Simplify Color Management | UXPin<\/title>\n<meta name=\"description\" content=\"Dive into our new feature \u2013 color tokens. Manage, unify, and scale colors across your prototypes and keep your team unified.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Color Tokens in Open Beta \u2013 Simplify Color Management\" \/>\n<meta property=\"og:description\" content=\"Dive into our new feature \u2013 color tokens. Manage, unify, and scale colors across your prototypes and keep your team unified.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-25T10:09:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-01T11:43:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/CT_blog.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/color-tokens-in-uxpin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/color-tokens-in-uxpin\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Color Tokens in Open Beta \u2013 Simplify Color Management\",\"datePublished\":\"2024-07-25T10:09:40+00:00\",\"dateModified\":\"2024-08-01T11:43:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/color-tokens-in-uxpin\\\/\"},\"wordCount\":781,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/color-tokens-in-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/CT_blog.png\",\"articleSection\":[\"Blog\",\"Design Systems\",\"Features\",\"UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/color-tokens-in-uxpin\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/color-tokens-in-uxpin\\\/\",\"name\":\"Color Tokens in Open Beta \u2013 Simplify Color Management | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/color-tokens-in-uxpin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/color-tokens-in-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/CT_blog.png\",\"datePublished\":\"2024-07-25T10:09:40+00:00\",\"dateModified\":\"2024-08-01T11:43:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Dive into our new feature \u2013 color tokens. Manage, unify, and scale colors across your prototypes and keep your team unified.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/color-tokens-in-uxpin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/color-tokens-in-uxpin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/color-tokens-in-uxpin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/CT_blog.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/CT_blog.png\",\"width\":1200,\"height\":600,\"caption\":\"CT blog\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/color-tokens-in-uxpin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Color Tokens in Open Beta \u2013 Simplify Color Management\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Color Tokens in Open Beta \u2013 Simplify Color Management | UXPin","description":"Dive into our new feature \u2013 color tokens. Manage, unify, and scale colors across your prototypes and keep your team unified.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/","og_locale":"en_US","og_type":"article","og_title":"Color Tokens in Open Beta \u2013 Simplify Color Management","og_description":"Dive into our new feature \u2013 color tokens. Manage, unify, and scale colors across your prototypes and keep your team unified.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/","og_site_name":"Studio by UXPin","article_published_time":"2024-07-25T10:09:40+00:00","article_modified_time":"2024-08-01T11:43:03+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/CT_blog.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Color Tokens in Open Beta \u2013 Simplify Color Management","datePublished":"2024-07-25T10:09:40+00:00","dateModified":"2024-08-01T11:43:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/"},"wordCount":781,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/CT_blog.png","articleSection":["Blog","Design Systems","Features","UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/","name":"Color Tokens in Open Beta \u2013 Simplify Color Management | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/CT_blog.png","datePublished":"2024-07-25T10:09:40+00:00","dateModified":"2024-08-01T11:43:03+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Dive into our new feature \u2013 color tokens. Manage, unify, and scale colors across your prototypes and keep your team unified.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/CT_blog.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/CT_blog.png","width":1200,"height":600,"caption":"CT blog"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/color-tokens-in-uxpin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Color Tokens in Open Beta \u2013 Simplify Color Management"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/53888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=53888"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/53888\/revisions"}],"predecessor-version":[{"id":53904,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/53888\/revisions\/53904"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/53892"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=53888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=53888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=53888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}