[{"data":1,"prerenderedAt":165},["ShallowReactive",2],{"page-schedio":3},{"doc":4,"isFallback":119},{"id":5,"title":6,"body":7,"description":117,"extension":118,"featureImage":17,"featured":119,"links":120,"meta":133,"navigation":134,"order":135,"path":136,"seo":137,"stem":138,"tags":139,"tools":143,"__hash__":164},"work_en\u002Fwork\u002Fschedio.md","Schedio: A Vue design system",{"type":8,"value":9,"toc":108},"minimark",[10,14,19,23,28,45,51,54,58,67,73,79,82,86,89,95,99],[11,12,6],"h1",{"id":13},"schedio-a-vue-design-system",[15,16],"img",{"src":17,"alt":18,"title":18},"\u002Fimages\u002Fschedio\u002Fschedio-feature.png","schedio",[20,21,22],"p",{},"Schedio is a Vue component library and design system I built for Spartan Bio. The goal was to formalize design at a small company where efficiency and consistency mattered more, not less, because of the team's size. I initiated it independently, shipped v1 over a couple of months, and maintained it for two years. The name comes from the Greek word for design (schédio, more or less); Spartan likes Greek themes.",[24,25,27],"h2",{"id":26},"design-tokens","Design tokens",[20,29,30,31,38,39,44],{},"The first step was defining the system's foundational elements: type, colour, spacing, motion. I structured these as ",[32,33,37],"a",{"href":34,"rel":35},"https:\u002F\u002Fwww.lightningdesignsystem.com\u002Fdesign-tokens\u002F",[36],"nofollow","design tokens"," using ",[32,40,43],{"href":41,"rel":42},"https:\u002F\u002Fgithub.com\u002Fsalesforce-ux\u002Ftheo",[36],"Theo",", which provided a single source of truth exportable in multiple formats. The tokens ended up informing work not just in Vue, but across our Windows (WPF) and React Native platforms, even where the components themselves couldn't be consumed directly.",[20,46,47],{},[15,48],{"alt":49,"src":50,"title":49},"Working on colors in Theo","\u002Fimages\u002Fschedio\u002Fschedio-tokens-colors.png",[20,52,53],{},"Some tokens, like transition easing and timing, only make sense in the context of components. I worked through the foundational tokens first, then developed them further alongside the component work.",[24,55,57],{"id":56},"component-library","Component library",[20,59,60,61,66],{},"I designed components in Adobe XD (Figma was new at the time and XD had better tooling for what I needed), generating static designs before building. ",[32,62,65],{"href":63,"rel":64},"https:\u002F\u002Fstorybook.js.org\u002F",[36],"Storybook"," provided the development sandbox and documentation layer. Some addons primarily supported React at the time, which required workarounds for Vue; none were significant, and the tradeoff was worth it. Our Windows developer could reference Storybook to understand design intent even when he couldn't consume the components directly.",[20,68,69],{},[15,70],{"alt":71,"src":72,"title":71},"Components in XD","\u002Fimages\u002Fschedio\u002Fschedio-xd.png",[20,74,75],{},[15,76],{"alt":77,"src":78,"title":77},"Schedio in Storybook","\u002Fimages\u002Fschedio\u002Fschedio-storybook.png",[20,80,81],{},"Every component was designed to WCAG 2.0 AA. I used Jest and Storybook to enforce accessibility standards during development rather than audit after the fact.",[24,83,85],{"id":84},"documentation","Documentation",[20,87,88],{},"Storybook is not ideal for non-technical documentation (usage guidelines, interaction philosophy, colour application). I needed somewhere to put it and didn't have the bandwidth to build a separate documentation site, so it stayed in Storybook alongside the components. For a small, mostly technical team, it worked. The limitation was a conscious tradeoff for the scale we were at.",[20,90,91],{},[15,92],{"alt":93,"src":94,"title":93},"Documentation for Schedio","\u002Fimages\u002Fschedio\u002Fschedio-logo-usage.png",[24,96,98],{"id":97},"outcome","Outcome",[20,100,101,102,107],{},"Schedio shipped as the foundation for Spartan's Vue corporate site and was used across internal tools. Its design tokens and interaction patterns informed work on our WPF and React Native platforms. Shopify's ",[32,103,106],{"href":104,"rel":105},"https:\u002F\u002Fgithub.com\u002FShopify\u002Fpolaris-react\u002F",[36],"Polaris"," was a significant influence on the approach, particularly its thinking on how a design system should serve a product team without constraining it.",{"title":109,"searchDepth":110,"depth":111,"links":112},"",2,1,[113,114,115,116],{"id":26,"depth":110,"text":27},{"id":56,"depth":110,"text":57},{"id":84,"depth":110,"text":85},{"id":97,"depth":110,"text":98},"A design system and component library for Spartan Bio","md",false,[121,124,127,130],{"title":122,"href":123},"Schedio","https:\u002F\u002Fspartanbio-design.netlify.app",{"title":125,"href":126},"Schedio fork on GitHub","https:\u002F\u002Fgithub.com\u002Falexkcollier\u002Fschedio",{"title":128,"href":129},"Schedio Tokens","https:\u002F\u002Fspartanbio.github.io\u002Fschedio-tokens\u002F",{"title":131,"href":132},"Schedio Tokens fork on GitHub","https:\u002F\u002Fgithub.com\u002Falexkcollier\u002Fschedio-tokens",{},true,4,"\u002Fwork\u002Fschedio",{"title":6,"description":117},"work\u002Fschedio",[140,141,142],"Design","Development","Design System",[144,148,152,154,156,160],{"name":145,"img":146,"href":147},"Adobe XD","\u002Fimages\u002Ftools\u002Fxd.svg","https:\u002F\u002Fwww.adobe.com\u002Fca\u002Fproducts\u002Fxd.html",{"name":149,"img":150,"href":151},"Vue.js","\u002Fimages\u002Ftools\u002Fvue.svg","https:\u002F\u002Fvuejs.org",{"name":65,"img":153,"href":63},"\u002Fimages\u002Ftools\u002Fstorybook.svg",{"name":43,"img":155,"href":41},"\u002Fimages\u002Ftools\u002Ftheo.png",{"name":157,"img":158,"href":159},"Sass","\u002Fimages\u002Ftools\u002Fsass.svg","https:\u002F\u002Fsass-lang.com",{"name":161,"img":162,"href":163},"Jest","\u002Fimages\u002Ftools\u002Fjest.png","https:\u002F\u002Fjestjs.io\u002F","sYoB4owvPDR5IRepvb7WHd95c-ymXeRRfJxEcvisWjI",1782790338318]