 Um, so, uh, oops, no, that was the wrong direction. Ha, ha, ha, ha, good, um, thank you Drupal's house for having us, um, especially thank you for this view. It's awesome. We almost feel like home. Good. Uh, now we're here today to talk about the New Zealand government design system and sector Drupal eight. Um, I am Hiker. I am a senior producer at Sparks interactive in Wellington and I work mostly with sector, uh, with public sector clients and I'm also happened to be the sector product owner and I brought Danielle. Hi everyone. Uh, I've worked with Spark since 2014 as a developer and at the moment I'm the technical lead on our open source distribution sector. And for this talk, I'll be going over some of the technical aspects later on, but for now I'll hand to Hiker and we will never give anybody else this role. Um, very good. Uh, now what is sector? Um, so sector is a Drupal distribution. It's a Sparks Drupal distribution. Um, and we use it for a wide variety of, um, public sector and private sector, um, websites in Wellington. Now, uh, what we want to show you today is a lot. It's a bit of a slight marathon. So, um, bear with me. So what is the design system just to align the turn terminology? What is happening in the public sector? What is happening in Wellington? What are we planning for sector? And yes, I hope we have some times for some, um, questions and I hope I have some answers. Good. Okay. So let's just dig in. What is the design system in a nutshell? Design has always been about systems and how to create products in a scalable and repeatable way systems that enable us to manage the chaos and create better products. Airbnb is one of the leading initiatives here. Um, look at their resources. You wouldn't mind, you wouldn't know this like they have other cool business, but they really rocked the boat here. So a design system is commonly understood as a catalog of reusable components and templates used in building websites and mobile apps. But this would be bloody boring. A successful design system can create an ongoing process to communicate content, design and code standards. This is not about code and it should never be about code alone. It helps you to create a consistent user experience and a strong recognizable user interface. Now, how can this look like? So it should be a show and tell for your team. This is how you do this. Um, your team should be able to just grab building blocks from the system and put it in their day to day work. It bridges the, uh, it bridges the gap between content, visuals and code. The components should be useful. They should be usable. They should validate. They should look great across devices. You need give to give people, um, an opportunity to engage with your system. There needs to be a community around it and you need to let people contribute. This is not a top down. This needs to be across disciplines. Now, examples, um, as I said, so there are many brands outside, um, out there that publish their pattern libraries, their code standards and their, um, design style guides online. Um, style guides IO is a really great example, um, for those things. Um, it has in the, in the, um, example libraries at over 200 and, um, 200 examples of pattern library standard documents and style guides. Now you see some, uh, big brands coming in here. So first one is IBM and then you also see brands being represented twice. Uh, for example, pet a mail trim is represented with their pattern lab and with their content style guide. You also see down here some government initiatives coming in. So great place to get started. Now let's look at one of these systems in a bit more detail. This is Polaris by Shopify. Now Shopify has a strong online business model, but it doesn't require them to publish all of the stuff, but what they have done is great. So you can see, um, there are some hoops. There are some, uh, guides, um, but you can, what I'm talking about here is you can see the, the, how this is weight, the sections, they start with content. They have design, they have components and they have patterns. They have updates. They have a, um, they have a, um, community around this and they have some links to resources. This is practicing what you breach every single page on this style guide is engaging. It explains people. It doesn't talk down to people and it does some really clever things. So, um, content starts with voice and tone. Um, design starts with the colors. Um, so it really is basically from the smallest components to the biggest pictures. Now the components. Let's look at one really small component. This is like the smallest component you can imagine. It's just a connect button for the account. So they have examples. They have code. Code is really important. Um, you can also tweak something and play around with this. This is all reactive. No idea what it does, but it looks very sexy. They have links to accessibility. They have best practice. They have content guidelines and look at this section, how long this is. Yeah. Wow. This is what we want to see. Also, when you want to, like that, we will talk about pushback in a bit. It's really, really important to tell people how to do things, but then they still don't do it. So to tell people how not to do things is sometimes really helpful. Yeah. Plus you can pick them up and you can pick, uh, you can put the biggest crimes up there. Good. Okay. You also have, um, patterns and guides really good. Have a look. So let's just swipe back, um, and, um, practice what you preach. Now, um, why you might need one. A unified design system is essential to building better and faster, better because a cohesive experience is more easily understood by your users and faster because it gives us a common language to work with cross disciplines. Um, a consistent user, consistent user interfaces are easy to understand. I mean, this is not rocket science, but doing a design system. You can develop the system and catalog and communicate a common design strategy. I'm talking about content. I repeat this a bit. Content design code, um, to prove equality and maintainability content design code, you can reduce your editorial design and technology depth. You can improve usability and accessibility. You have this toolbox to prototype and iterate faster. And plus it's really good when you have staff overturn. Yeah, they just get the manual. And if you do the, um, design system in an engaging way with a, with their community around it, they even might read the manual. Now, here's the simple truth. You can't innovate on products without first innovating the way you built them. Now there will be pushback. There will be a lot of pushback to find a common, um, agreement on anything as charged as the creative arts and content design and code are creative. Arts is really, really hard. People will be afraid. It's too limiting. They lose the, they lose their creative corner. They lose their ownership. They have to talk to others. They're also common misconceptions. This is and can never be a one and go, one and done. And, um, so what you have is you have, you really need to see this as a garden. Yeah. The weeds are going to take over. You need to pamper and you need to prune. And there needs to be a head gardener after the big shots have left. A design system also, a good design system will also cover everything you need to get started. It's not going to do the whole job for you. You still need work. I mean, we still won't all want to get paid. Yeah. But you should have all you need to get started. Ah, good. So let's have a look into the public sector and, um, the science systems in the public sector. So in this case, um, we are going to look at Guft, oops, at Guft UK and what the Australians have done. It's looking great guys. You can really be proud of this. Um, good. So, um, the Guft UK initiative since the team at Guft UK published the, um, governance design, government design principles. I think it was in 2007. They rocked the boat and they said absolutely new standards in online government. Um, they are not as far down the track with this initiative as are the US and Canada, but they are referred back to because they do great work, um, from both the New Zealand and the Australian, um, government, uh, standards. So if you just have a quick look into here, so, um, you have a strong vision statement plus again, practice what you preach. This looks like the style they are after. They also work from a common design, sorry, from a common service design. So all of the sites that sits on a sub domain of government UK need to look like this as does the style guide or the design system. Um, you have styles, you have components, you have patterns, you have community, you have support, you have a roadmap. There's everything there. Now again, I just want you to show you, um, my favorite, um, component. And I think they called us a pattern or component. Sometimes this is still really, really confusing. I know it's a pattern. Here we go. Um, it's a pattern because it's more than a component. So again, so what I'm wondering, what am I renting out on about? So this is a national insurance number field. Yes, there is an input field and yes, we want to have this accessible, but people don't see code. People see labels. They see this description. Why on earth would you use not the same text, not the same visuals on something like this? It's not rocket science. Good. If we go down, um, there are, you can see this when to use this pattern, when not to use this pattern, how it works. They have all of the technology, but they have error messages. There's everything there again. And then there's called to improve the page and an invitation on how you can do this. So this definitely ticks a lot of the boxes. So rather than going back to the slides, I'm actually going and going to hop over to the Australian, um, design system. Um, this looks, um, really great. I hope there are some people here that actually were involved in this because I have a lot of questions. Um, so come and see me later if possible. Now, um, this is looking great. Now it does have a bit of a different, um, focus, um, than the, um, got UK has. This is totally focused on, um, uh, community building and contribution. So this is definitely a team, um, effort. And they also have this in their mission statement. It's about uniting teams, um, that create digital services through inclusive design, open source code and shared insights. They definitely also practice what they preach. Um, this is a very engaging tool. I just show you, um, just on a little component. I think we chose breadcrumbs here. Yay. Um, so you have, um, really, um, a history, install instructions, you have tags, you have, um, what is required to get this going and look at this. You have the contributors. You even have their faces if they want to show them very good. You have the tabs with the rational accessibility code discussion. This is really good work. Now the only thing, um, that is missing a tiny bit here, and maybe I haven't dealt, um, deep enough is, um, content and, um, just a bit more guidance around content for these bits and pieces. Good. Okay. So we have both of those very good. Now what's happening in, uh, New Zealand at the moment. So we got, and I hope this is working. This is now very exciting. Um, we have Mark protect, uh, Patrick, um, here from, um, DIA, um, talking about, um, their journey and what led them to, um, a government, uh, to just embark onto this journey. Hi, my name is Mark Kirkpatrick. I'm a lead product owner working for New Zealand government, working at the department of internal affairs. So I'm going to talk to you briefly about the New Zealand government design system. So to start a catalyst for this work was we as a business unit had a need to unify the look and feel across our products, products such as go down and Z and down a lot of and digital local. As we were doing this work, we decided to broaden that piece of work to look at all of the government design systems that could be applied across different agencies, et cetera. We spun up an initial piece of work, discovery piece of work in 2018 where we looked at the private sector, working, working this space in the private sector, but also looking at other governments work, namely the UK, the US and Australia. Our initial findings out of those discovery period was around user benefits. Obviously, there, once you deliver consistency in parents, there is trust associated with that, but also the value in establishing a common library of components that is tested to meet web and accessibility standards. We also discovered some of the best business benefits associated with design systems, and obviously you could save money by reusing existing tried and tested parents, but also there are other benefits. For example, having an established design system with good documentation helps onboarding people to new teams. Also, there is a power in a community around the design system, a community of contributors and consumers, and that helps the design system evolve and grow. So, New Zealand government currently has multiple teams across different government agencies and multiple teams across different private sector suppliers working with those agencies. Establishing and growing the design system has tested quite well so far. So, this year we brought in Jazz Huah, who has experienced in this space in the private sector, and she worked closely with government digital services in the UK, namely Tim Paul, who is head of interaction design there. In that work, we went out of that work and talked to different New Zealand government agencies, talked to the developer community, talked to the UX community to find out more about the needs and behaviours there, and all of that information, all that research came through to inform the work that was spun up earlier this year with Sprinload, and that's what brought us to this place and releasing an outfit design system in May this year. Very good. So, as Mark just said... Hi, my name is Mark Prickpatrick. I'm a lead product owner working for New Zealand government working at the Department of Internal Affairs. So, I'm going to talk to you briefly about the New Zealand government design system. Good. Okay. So, as Mark just said, and we now need to start the presentation mode again. This is all very interesting. Very good. Okay, now we have a bar. It's not so important. Good. Some hiccups here. Very good. So, as Mark just said, so we have the design system Alpha up and running, and we also have two people from Sprinload that actually tell us about the process and tell us what is in the system. So, this is Joe Gallick, the senior designer at Sprinload. I am the senior designer at Sprinload, and one of the projects I love working on the most is the New Zealand government design system. And I think one of the reasons I love working on it is because it's a very academic approach to design. So, normally when you're designing a website or something else or a digital tool, you're designing it for people to make money or a client who have particular needs or wants and business requirements and stakeholder management, whereas with the New Zealand government design system, it's really about keeping down into the essence of what makes a good select input. Like, how do we approach this? What is the accessibility and really kicking the tires on every single aspect of how a simple element can work and making sure that we're doing our best for all users from accessibility so that it's useful across all different types of government websites as well as just functioning well. Doing research for this project, we looked at lots of design systems all across the world, government design systems, commercial design systems, and then we take that research and we liaise with our team hero, front-end developers and designers, UXers and all different types of disciplines at Sprinload, and then we really sort of discuss the ins and outs of all the different parts of the design system and that component that we're working on. In order to get moving quickly with the design system so that teams could start building with it, we decided to focus on forms because that way there'd be a complete set of components that one could use and start using straight away. So with the New Zealand government design system, we want it to be as open as possible. So we've designed it not just for government websites, but for any developers or any digital teams to come along and take our design system and use it. Oh, sorry. So it's fully open source, so you can go to the website here and check it out. And we have Matt Holloway, he's the front-end director and definitely one of the driving forces behind this initiative. For the New Zealand government design system, we decided to start with developing components for forms. Forms are often some of the most challenging parts of user interfaces because they are such a difficult thing to get right when it comes to accessibility. And because they're the parts that users are actually interacting with, they're actually providing their information into that, it's crucial for these to be able to work for the citizens of the country. In the New Zealand government design system, there's a suite of form fields and other kinds of components and what we mean but this is select dropdowns, input type text and type password and all of these types of interactions that people have. Because of this, it means that you can put together these components like Lego blocks on your page and build a more complicated interface out of that. This means that you can actually focus more business value on the more interesting and the more bespoke technology that you want to actually put into your website. Over the years, when it comes to standardizing and providing reusable components for user interfaces on the web, people have used terms like style guide, pattern library, and the more modern term for this seems to be design system. And what this means is that it essentially is a pattern library with a lot of implementation advice. So it's not just the individual components, you know, the text boxes, the select dropdowns. It's saying like, if you were to put these things on a contact page, how should you organize these things? What kinds of UX patterns should you use when you're assembling all of these Lego blocks of components? The New Zealand government design system is up on GitHub. It's open source and you're welcome to integrate it into your projects and to actually to contribute back to us. If you'd like to open up a pull request, then we'll review the code and accept it and then it'll be in the next version. Good luck. Very good. Now, what is next with the New Zealand government design system? Alpha is out, you can have a look around. So as Mark said earlier, community engagement and feedback is key. People will be afraid when something like this hits, especially your vendor and supplier base won't be happy about every single aspect of this. So work begins to roll out the design system components across GUFT and Z, digital.guft.nz. These are two NZ GUFT products and they sit in the core of the digital transformation project and as well as other government agencies in 2020. There are also people to talk to. I will put up those slides on sector.nz after this talk. So, haha, what are we planning for sector? So sorry, a bit of a tension. So let's just repeat what is a component. So a component is the content, it's design, it's code, it's guidance, it's governments. Now guidance and governance are actually easy because people have already done our job. So what we need to do, we need to link back to these guidelines for people to explain how to do this within Drupal. Now, what does this mean for Drupal or sector? So let's just switch to the failure. It's really easy to find, it's just demo.sector.nz. So let's switch to the online demo of sector.nz. So that's your distribution, how it looks out of the box after an install. Now, this is a home page, but this is a bit boring. So let's go and delve in actually some really interesting bits. So as you can see here, you have a header, the header has a logo, it has sections, there is a input field, there are some blocks, there's a breadcrumb. Now, all of this is done by different parts within the system. There are menu labels, menu blocks, search API input fields, core Drupal displays in the breadcrums. Now, all of this is largely done by Siem. Sorry, Daniel is going to talk about this later. I want to forget about Siem for a second because you have this area and this area is quite long. This is your content writers writing content. They can do all the things. So if we go back and have a look into the alpha, and you get these instructions here, so we really started basics at typography. So if you look at this, I need to actually stay at the potent ha-ha-scroll, there's no auto-scrolling. So I'm not worried about design and fonts and all of these things and textiles. The design system delivers the design. I'm not worried about this, and Daniel is doing some magic. I actually start to get worried. I'm not worried about H1, H1 is a field. Daniel is totally going to sort this out. Now, from H2, we are actually inside the visivic. And you can do stuff, and you can do stuff, and you can do stuff. Now let's look at the smallest possible unit. Let's look at a paragraph. Ha-ha. So there's a class on a paragraph. Now your editors are not going to type this in, but they are going to use a visivic. This is not only a Drupal problem. And now Daniel is going to tell us something about this. Great. Thanks, Haka. Let me make sure I can drive the Mac. Oh, I can do this for you, Daniel. Sorry. Oh yeah, that'll be fine. Cool. So as Haka mentioned, using the New Zealand Government Design System means that just having a P tag is no longer enough. A P tag on its own isn't going to align with the New Design Systems Markup. So we needed a way to solve that. Oh, Daniel, just so I skipped a really important section. Don't worry about it. We go into your GitHub. The slides are way behind us at the moment. Oh, okay. That's all right. I'll put them here. Right, so the most obvious way to solve this problem is to use a visivic filter. The visivic filter will take the markup that the user's entered and it will process it into Design System Compatible Markup. So if we go into the Plugin Filter and into this PHP file, you can probably see where I've just taken the really base copy and paste from. But the important stuff is in the Process Function. So since this is a prototype, it's a really basic find and replace of an empty P tag and replacing it with the Design System Compatible P tag with its class. This means that your content editors can just keep entering their content as they always will, but the system will process it on the fly so it works for them. We want the content editors to just be able to do their job. So you can feel free to fork this or just watch it because more will come as the Design System moves further and further along. It's going to need a bit more smarts than just a basic find and replace. No, that is on render. That's a text filter. Yeah, yeah. Sorry, Danielle. So I just did something really bad to Danielle. I basically cut his talk in two because I forgot to get the elephants out of the room. So let's get the elephants out of the room first. The first elephant in the room, decoupled Drupal. So all of this doesn't have to be your problem, yeah? You can make this a frontend application problem. I don't want to take this away. I don't want to stick my head in the sand here. So our team has done this with Sektor. It's the bird of the year site this year. Was one on a decoupled Drupal with Skatsby, JS and ReactJS. We are not opposed. I'm not opposed to this. However, what we are trying to achieve here is we are trying to achieve less technical depth. We want to reduce our technical depth. This is all what Sektor is about. Danielle is going to talk a bit. Danielle is going to talk about this in a bit, yeah? We want to achieve this. Throwing more tools on this is not going to reduce our technical bit. Now, the bird of the year site is live for 12 months. Even Mike survived this. I'm not going to take this away. It is a possibility. Now, we also have two more elephants in Runaway. Two and a half. We have basically chosen Bootstrap in 2014. At 2014, I admit this, this was a very conservative choice. But we are all about the long-term plan. Now, we have made a big investment in this and it's a bit hard for us to basically just decouple from this idea. We have to do this. But the design system needs to do some work to actually enable us to get to this kind of divorce. Makes me uncomfortable. Okay. Now, another, so the second and a half elephant is actually Sektor's focus on site building and this placehood. So Sektor is built. You have seen Sektor is built to be pre-configured. You spin it up. It's ready to go. You need some design maybe if you don't want to use ours, which is very wire framing. You need some design, but it's ready to go. This means our displays are pre-configured. Our seam and our displays are like this. If you throw away your seam and our developers do this sometimes, there might be reasons for this, you lose half of the work that we have done. And for a normal website that just wants to spin up some sites that might not be the way to go. Good. Now, ha-ha, solutions. Basics topography. We already did this, so this is really good. So this is basically just a screen that explains how this works, what Daniel has done, and I hope Daniel now finds his way back. Sorry. So this is the perfect example of what I was talking about before. I've been able to just enter text the normal way as any content editor toward just typing straight into the WYSIWYG and then on render, using the same code that we saw before, it's given it the design system compatible class. It just saves everyone work. It means like our content editors don't always know how to attach classes to elements. They don't always know how to use the source tab and we don't really expect them to know that. We still see Word pasted in most of the time. We've done that. We've done that. Other solutions. So in sector, we already have a styles dropdown with H1, H2s or the basics. What we can just do is we can align our language. So heading L, heading M, heading S, these are all the exact same labels and language that's in the design system already. People can understand the design system and they can understand when they use the heading L, they know what it's going to look like. Plus those style dropdowns in Trooper let you already render the class onto it. So half of the work is done with those styles. So we need to collate this into a way we can actually deploy it and use it everywhere. So we need a pre-configured text format. Basic HTML gov would be our example one. Need to allow and limit the right HTML tags so the editors already have all the tools they need available to them. We need a pre-configured toolbar with the right buttons. The editors can just use it. They know what to do. They can just go. The style dropdown we talked about before. Where do we get templates to close the gaps and provide some of the more complex elements? Lists, images, the more complex things in the design system. And then the text filters we talked about before just to kind of close those gaps and work the magic and do the processing on the fly. The other thing we need, well one of the other things we need is CSS. The design system comes with the MPM design package. It has all the CSS and all the SAS built in. So with Sector we can just have an automated fetch of those style sheets. So when we publish the next version of Sector it's already going to have the latest CSS from the design system. Just when we build the production build of Sector. And then the last two go hand in hand quite well. Pre-processes and formultors in the theme. There may be times where it's best to not attach classes using twig. Covering the whole suite of blocks and menus and everything else that's in Drupal. We can just attach things with pre-processes and formultors. Just to keep things a bit cleaner and easier to see. And twig. By now we all know what twig is. We pushed for the inclusion of twig in the design system so that we could have Drupal compatibility with it. So our goal is to integrate the design system using twig into a Drupal theme for Sector. To implement this we'll create a twig file for each component in the design system. And we'll need to really evaluate how Drupal ready the twig is and what changes we need to make. This is just a really basic example. So this is the select.html.twig from Bartik. And all I've done is I've attached the design system classes G Select Block Select and G Select Block Label but besides that it's just the select.html.twig from Bartik. And you can see I ran this on a local side of mine and this top image here is Drupal when I've had the CSS and I've had the twig and then the bottom image is straight from the design system. They're identical, the prototype works. Contrib and Core. The good, the bad and the ugly. So Core and some of the really good modules like Contrib and Views which is Core now they use Drupal form and rendering APIs in a way that means we don't really have to do any work. When you render something with web form of views like a select it will just call that select.html.twig that's in your theme at the base level and it will use that to render your selects. So Contra modules or custom code that maybe isn't using the render API or is using hard coded markup like this bottom image here that's not going to follow the select.html.twig in the theme because it's just Drupal doesn't know to do that because it's hard coded. So there's things we have to do for that. You can do patches, you can do preprocesses or you can just fix your custom code to make it compatible. What others have done so the US what they've done they've got a Drupal theme published already I'm not sure if it's by the official people but they have a theme published and they have CSS, they have twig, they have form altars and they have preprocesses that's looking pretty familiar to me. So I chose to take heart in the fact that other people are doing exactly what we have planned for sector and it seems like they're seeing good results and then Australia. So the guys at GovCMS have published a Drupal theme already for the Australian design system and again when I dug around in it I saw CSS from the MPM package I saw twig, I saw form altars and I saw preprocesses. This is all lining up again with what we have for sector what the guys in the US done so people are solving these problems in the way that we plan to solve them it's all giving me a lot of confidence. So I'll pass back to Hyke here before we talk about the future. Very good, the undiscovered country. Now I didn't put any words on there because I don't want to commit too much. So in the short term what we are going to do as Daniel just said, SIEM is kind of done. Yes, we need to build a SIEM but to do this we basically just need some more work from the government design system to actually get us there. Now what can we do in the short term? From what we have seen so far neither has actually addressed the CK editor and the content, the experience for the content editor. There is a lot we can do with just concentrating on those. There's a bundle with the text filters pre-configured everything and because Drupal lets you do different text formats it can just sit between our HTML and our HTML restricted. It just sits in there and seeing the text filters are permission-based you basically can switch your system to use that. So definitely on to that. We are definitely on to integrating the components into Twig where we can. So we are doing that and as I said as soon as the design system has grown up and we have some confidence around layouts, headers, more markup we are definitely going to go there but as I said we are just committed to another system at the moment and we just need to discuss with the team where we are going. Very good. That was us. I skipped half of the slides so that's good. So some super essential reading here if you're interested in design systems have a look but this is now really enough about us. So do you have any questions? Do you want to throw something at us? So just the concept you had about processing and capturing basically unformatted markup and formatting it on the fly on the render does that mean that content like editors are still like you also showed that you've got WYSIWYG support like SDK editors got the components built in so if you use the styles it's going to put them in there but they're also like an intermediary space that's happening as well where they're still inputting things that don't have the markup and so you need to handle that meaning that what you see isn't really what you get in the editorial side of the equation. That is a really nice problem there. Yeah so what Josh is heading at is just imagine via like everybody who cares about editorial teams we basically have the most like closest preview in the WYSIWYG that you can get if the class isn't there the WYSIWYG stylesheet can't really help you so there is definitely some doubling up on the stylesheets before we have solved this specific problem so there will definitely be some you like the styles at the moment are on the p-tag yeah so there will be some double handling there also needs to be and I don't want to take this away there also needs to be some incredible cleverness here over there that actually allows you to because for example so you have a class on a lead that we might do via the style drop down now we don't give you a class on a paragraph just on the body text so Daniel needs to pick this up so if there's something there Daniel needs to keep it as is but if there isn't something there Daniel needs to figure out what he needs to do in which class to put on but there are incredible clever tools out it I mean it's the same process linked it uses to just make your internal references so much more intelligent so bear with us but we know it's not easy like model all yeah well I could basically cover everything I was going to say as well but the the wisdomic filter is kind of there as a last step so yep they can definitely use the style drop down and the more they use the style drop down it means the less work the filter has to do but you know you enter something with the style drop down then you don't think about it and you just start typing away you know that stuff potentially isn't going to have any of that stuff so the filter is just there really just to capture that last missing bit that hasn't been done right or has been done quickly just for the very reason any other questions yes thanks for the presentation my question is regarding the interactive components like that's where we more on you know something has a little bit of animation or you know some java script attached to it how do you guys handle that and and the and the design system you showed is that built on something like pattern lab or what sort of you know technology you guys have used to build the actual design system itself okay so first of all we haven't built the design system this is why we got all of these people to talk to us the design system was built by a company a design company called spring load and they have an incredible intelligent thing running there behind it and I wish somebody from spring load would be here I wish Matt would be here but I can tell you a bit and Daniel maybe can correct me so what they have built is called a meta template and a meta template basically just spills out all of these different codes and they have support for react and some really other cool tools and we might get support for Drupal and the tool looks like a pattern library but I think it's built on something from server strip so out of the box the meta template has like I can say that's got react view angular muster it's got heaps and Matt's kind of built it as a way that lets you build these plugins so that it can support whatever you need it to support basically but yeah but like I said we didn't build it we're just looking at ways that we can really implement it into our existing solutions Hi thanks I was just wondering about Maori language support is sector multilingual and is there much in the style guide that talks about handling multilingual no not yet no not yet so two totally different questions we expect because this was one of the reasons why New Zealand went its own way but at the moment they are leaning too close to the UK they haven't really addressed this yet however we have so this is the site that went live last week it's the ombudsman of New Zealand they are also visiting they have a mandate to actually keep people with disability safe in New Zealand now we need to be really realistic with Maori translations we can't translate all but all government departments are now really encouraged to do at least the minimum which is translation of menu labels and translation of headlines with sector this is basically you don't need to do anything you just need we also we already need to use menu attributes and this is the translation the data translation attribute from the menu label so you don't need to do anything it's just supported out of the box what you need to do is actually your designers get a big problem because you can't do horizontal navigation anymore so at the moment you get these stacked navigation and for the for the headlines it's really really super easy so in this case we just went in inside build and we gave them because there's already a subtitle field we gave them a translation title field and the translation title field it wraps the language tag around that specific output Daniel is also doing totally crazy things with translations for Totora you need to talk to him maybe offline yeah but yeah there's definitely translation support and we definitely try with everything we are doing we try to work with core with strupper with the really with the minimal input from ourselves we just try to be a bit more clever about using strupper all right thank you Haikey and Daniel can everyone join me in thanking them