---
layout: base.njk
title: "Test IO Design System"
---

main.main-content.main-content-padding
  .d-flex.flex-column.justify-content-center.align-items-center
    img.ds-home-logo.mb-3.mt-5(src="/assets/images/logo-testio/testio_vertical_purpleteal_black.svg")
    p.max-w-paragraph The Test IO design system provides a set of components to help designers and developers build products and services more easily. Our custom Bootstrap variables file, component classes, and HTML snippets offer a starting point for development.
    a.pt-6(href='https://badge.fury.io/js/testio-designsystem')
      img(src='https://badge.fury.io/js/testio-designsystem.svg', alt='npm version', height='18')
    p.max-w-paragraph.mt-3.mb-heading To get started with using the styles provided by the design system, just download the current compiled CSS below and implement your components with the provided code. 
    a.btn.btn-block.btn-primary.max-w-paragraph(href="/static/app.compiled.css", target="_blank")
      .icon.icon-cloud-download.mr-icon-spacing
      | Download compiled CSS