{"id":1124,"date":"2018-09-25T16:52:24","date_gmt":"2018-09-25T16:52:24","guid":{"rendered":"https:\/\/amitavasen.com\/portfolio\/?p=1124"},"modified":"2023-11-07T04:06:38","modified_gmt":"2023-11-07T04:06:38","slug":"design-system-veritas-polaris-design","status":"publish","type":"post","link":"https:\/\/amitavasen.com\/portfolio\/2018\/09\/25\/design-system-veritas-polaris-design\/","title":{"rendered":"Design System: Veritas Polaris Design"},"content":{"rendered":"<p>I was part of an internal team working on building a Design System at Veritas. The design was called Polaris and has the following components:<\/p>\n<ul>\n<li>Ready to use UX design components for Adobe XD and Sketch<\/li>\n<li>Patterns\n<ul>\n<li>Accessibility<\/li>\n<li>App Layout<\/li>\n<li>Color palettes<\/li>\n<li>Internationalization<\/li>\n<li>Typography<\/li>\n<li>Navigation<\/li>\n<li>Themes (in progress)<\/li>\n<\/ul>\n<\/li>\n<li>UI Components\n<ul>\n<li>Accordion<\/li>\n<li>Alerts<\/li>\n<li>Badges<\/li>\n<li>Buttons<\/li>\n<li>Cards<\/li>\n<li>Checkboxes<\/li>\n<li>Datalist<\/li>\n<li>Datatable\n<ul>\n<li>Infinite scrolling<\/li>\n<li>Pagination<\/li>\n<li>With integrated search<\/li>\n<li>With integrated search + action buttons<\/li>\n<\/ul>\n<\/li>\n<li>Date picker<\/li>\n<li>Dropdowns<\/li>\n<li>Forms<\/li>\n<li>Header (Topbar)<\/li>\n<li>Inputs<\/li>\n<li>List<\/li>\n<li>Label<\/li>\n<li>Modal\n<ul>\n<li>Modal with multiple actions<\/li>\n<li>Modal with info only<\/li>\n<\/ul>\n<\/li>\n<li>Progress bar<\/li>\n<li>Radio buttons<\/li>\n<li>Select<\/li>\n<li>Sidebar<\/li>\n<li>Spinners<\/li>\n<li>Stepper<\/li>\n<li>Tables (a simpler version of Datatable)<\/li>\n<li>Tabs<\/li>\n<li>Textarea\n<ul>\n<li>No format text<\/li>\n<li>With Rich text<\/li>\n<\/ul>\n<\/li>\n<li>Toggle buttons<\/li>\n<li>Tooltip<\/li>\n<li>Tree view<\/li>\n<li>Wizard<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Color Palettes<\/h3>\n<ul>\n<li>The color palette is based on Veritas marketing design guidelines<\/li>\n<li>Components colors are also based on accessibility ratio (and other related criteria)<\/li>\n<\/ul>\n<h3><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Polaris-branding-color-palette.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1127\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Polaris-branding-color-palette.png\" alt=\"\" width=\"1449\" height=\"811\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Polaris-branding-color-palette.png 1449w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Polaris-branding-color-palette-300x168.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Polaris-branding-color-palette-1024x573.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Polaris-branding-color-palette-768x430.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Polaris-branding-color-palette-850x476.png 850w\" sizes=\"auto, (max-width: 1449px) 100vw, 1449px\" \/><\/a><\/h3>\n<p>&nbsp;<\/p>\n<h3>Accessibility<\/h3>\n<ul>\n<li>Based on the Accessibility color contrast ratio<\/li>\n<li>Guidelines based on WCAG (Web Content\u00a0<b>Accessibility<\/b>\u00a0Guidelines)<\/li>\n<\/ul>\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Font-color-accessibility.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1128\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Font-color-accessibility.png\" alt=\"\" width=\"1428\" height=\"725\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Font-color-accessibility.png 1428w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Font-color-accessibility-300x152.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Font-color-accessibility-1024x520.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Font-color-accessibility-768x390.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Font-color-accessibility-850x432.png 850w\" sizes=\"auto, (max-width: 1428px) 100vw, 1428px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Blue-button-accessibility.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1129\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Blue-button-accessibility.png\" alt=\"\" width=\"1780\" height=\"921\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Blue-button-accessibility.png 1780w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Blue-button-accessibility-300x155.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Blue-button-accessibility-1024x530.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Blue-button-accessibility-768x397.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Blue-button-accessibility-1536x795.png 1536w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Blue-button-accessibility-850x440.png 850w\" sizes=\"auto, (max-width: 1780px) 100vw, 1780px\" \/><\/a><\/p>\n<h3><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Typography-accessibility.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1131\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Typography-accessibility.png\" alt=\"\" width=\"1452\" height=\"745\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Typography-accessibility.png 1452w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Typography-accessibility-300x154.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Typography-accessibility-1024x525.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Typography-accessibility-768x394.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Typography-accessibility-850x436.png 850w\" sizes=\"auto, (max-width: 1452px) 100vw, 1452px\" \/><\/a><\/h3>\n<p>&nbsp;<\/p>\n<h3>Layout<\/h3>\n<ul>\n<li>The following shows examples of some of the layouts with standard &#8220;header&#8221;, &#8220;sidebar&#8221; and &#8220;panels&#8221;<\/li>\n<li>Another example shows basic &#8220;datatable&#8221;<\/li>\n<\/ul>\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Design-layout-.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1134\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Design-layout-.png\" alt=\"\" width=\"1447\" height=\"770\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Design-layout-.png 1447w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Design-layout--300x160.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Design-layout--1024x545.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Design-layout--768x409.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Design-layout--850x452.png 850w\" sizes=\"auto, (max-width: 1447px) 100vw, 1447px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Content-panel.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1136\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Content-panel.png\" alt=\"\" width=\"1449\" height=\"771\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Content-panel.png 1449w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Content-panel-300x160.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Content-panel-1024x545.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Content-panel-768x409.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Content-panel-850x452.png 850w\" sizes=\"auto, (max-width: 1449px) 100vw, 1449px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Datable-design-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1137\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Datable-design-1.png\" alt=\"\" width=\"1449\" height=\"771\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Datable-design-1.png 1449w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Datable-design-1-300x160.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Datable-design-1-1024x545.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Datable-design-1-768x409.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Datable-design-1-850x452.png 850w\" sizes=\"auto, (max-width: 1449px) 100vw, 1449px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>Style Guide<\/h3>\n<ul>\n<li>Examples show the style guide for layout and the basic &#8220;grid&#8221; structure.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Style-guide-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1139\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Style-guide-1.png\" alt=\"\" width=\"1451\" height=\"772\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Style-guide-1.png 1451w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Style-guide-1-300x160.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Style-guide-1-1024x545.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Style-guide-1-768x409.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Style-guide-1-850x452.png 850w\" sizes=\"auto, (max-width: 1451px) 100vw, 1451px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Style-guide-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1140\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Style-guide-2.png\" alt=\"\" width=\"1449\" height=\"764\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Style-guide-2.png 1449w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Style-guide-2-300x158.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Style-guide-2-1024x540.png 1024w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Style-guide-2-768x405.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Style-guide-2-850x448.png 850w\" sizes=\"auto, (max-width: 1449px) 100vw, 1449px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>UI Components<\/h3>\n<ul>\n<li>The list of UI components consist of 30+ different components to build a web app<\/li>\n<li>Each UI component typically consists of HTML, CSS (and SASS), and JavaScript<\/li>\n<\/ul>\n<figure id=\"attachment_1144\" aria-describedby=\"caption-attachment-1144\" style=\"width: 952px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Vertical-stepper-wizard.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1144\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Vertical-stepper-wizard.png\" alt=\"\" width=\"952\" height=\"811\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Vertical-stepper-wizard.png 952w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Vertical-stepper-wizard-300x256.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Vertical-stepper-wizard-768x654.png 768w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Vertical-stepper-wizard-850x724.png 850w\" sizes=\"auto, (max-width: 952px) 100vw, 952px\" \/><\/a><figcaption id=\"caption-attachment-1144\" class=\"wp-caption-text\">Stepper (Vertical)<\/figcaption><\/figure>\n<p><a href=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Vertical-stepper-wizard-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1145\" src=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Vertical-stepper-wizard-2.png\" alt=\"\" width=\"772\" height=\"597\" srcset=\"https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Vertical-stepper-wizard-2.png 772w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Vertical-stepper-wizard-2-300x232.png 300w, https:\/\/amitavasen.com\/portfolio\/wp-content\/uploads\/2018\/09\/Vertical-stepper-wizard-2-768x594.png 768w\" sizes=\"auto, (max-width: 772px) 100vw, 772px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was part of an internal team working on building a Design System at Veritas. The design was called Polaris and has the following components: Ready to use UX design components for Adobe XD and Sketch Patterns Accessibility App Layout Color palettes Internationalization Typography Navigation Themes (in progress) UI Components Accordion Alerts Badges Buttons Cards&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1127,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[76,78,77],"class_list":["post-1124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-portfolio","tag-design-system","tag-pattern","tag-style"],"_links":{"self":[{"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/posts\/1124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/comments?post=1124"}],"version-history":[{"count":8,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/posts\/1124\/revisions"}],"predecessor-version":[{"id":1133,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/posts\/1124\/revisions\/1133"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/media\/1127"}],"wp:attachment":[{"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/media?parent=1124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/categories?post=1124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/amitavasen.com\/portfolio\/wp-json\/wp\/v2\/tags?post=1124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}