Page: Design Systems

<section class="page ">
    <div class="page--inner">
        <h1 class="page--headline" data-aos="fade-down" data-aos-duration="1000">
            All your ducks in a row: design systems
        </h1>
        <div class="page--content" data-aos="fade-down" data-aos-duration="1000">
            <p class="page--lead">If our professional paths have crossed at some point in the past years, you know about my passion for design systems and Atomic Design. Fractal has been one of my tools lately, and the one I used to <em>make this site:</em> <a href="https://ds.brianstefan.dk"
                    title="brianstefan.dk made using Fractal" class="link--external" target="_blank">ds.brianstefan.dk</a></p>
            <p class="page--lead">While I was at Novicell, I wrote a <a href="https://www.novicell.dk/blog/designsystemer-ux-og-frontend-kode-paa-lager/" title="Read my blog post about design systems" class="link--external" target="_blank">blog post</a> (in Danish) about how
                we worked with Atomic Design and Fractal.</p>
            <p class="page--lead">Apart from being a collection of guides, standards and reusable components, a design system is also a great tool for collaboration and communication. Furthermore it can help create better user experiences, testing and more. <a href="#contact"
                    title="Let&#x27;s talk about design systems!" class="link">Let&#x27;s talk about design systems!</a></p>
        </div>
        <div class="page--action" data-aos="fade-down" data-aos-duration="1000">
            <a href="#work/1" class="button--secondary button--left">Back</a> <a href="#work/3" class="button--primary button--right">User Experience</a></div>
        <div class="page--image" data-aos="fade-up" data-aos-duration="1000">
            <img src="../../assets/images/design-systems.png" alt="" />
        </div>

    </div>
</section>