ds.css is pure css, though this example page was built with the help of Tailwind. It does rely on some svgs, totaling around 3.3mb in size.

See the project's GitHub to get started, and use this page to see what's included with ds.css!

When resizing, some gradients may break. A single-column pixel error that occurs on some of the DS's dithered gradients is also included here.
Colors
16 themed colors are available. 
bg-ds-theme-slate
bg-ds-theme-maroon
bg-ds-theme-red
bg-ds-theme-pink
bg-ds-theme-orange
bg-ds-theme-yellow
bg-ds-theme-neonyellow
bg-ds-theme-lime
bg-ds-theme-green
bg-ds-theme-teal
bg-ds-theme-turquoise
bg-ds-theme-blue
bg-ds-theme-navy
bg-ds-theme-darkpurple
bg-ds-theme-magenta
bg-ds-theme-fuschia
Buttons
Buttons have 3 widths, and can be colored. 
<button></button>
<button class="button-lg"></button>
<button class="button-square">X</button>
Input

Inputs can have optional bumpers before and after them! 

<label>
  <span>label</span>
  <div class="input-wrapper">
  <div class="input-before"></div>
    <input type="text" />
  <div class="input-after"></div>
  </div>
</label>
Radio

Radio buttons need a color to appear selected. This example uses a css grid for its layout. 

<fieldset>
  <legend>Select an option</legend>
  <div class="radio-button">
    <input id="radio1" type="radio" name="option" class="bg-ds-theme-fuschia" />
    <label for="radio1">Piece of Cipher</label>
  </div>
  <div class="radio-button">
    <input id="radio2" type="radio" name="option" class="bg-ds-theme-fuschia" />
    <label for="radio2">Chaining Intention</label>
  </div>
  <div class="radio-button">
    <input id="radio3" type="radio" name="option" class="bg-ds-theme-fuschia" />
    <label for="radio3">0259 in my room</label>
  </div>
  <div class="radio-button">
    <input id="radio4" type="radio" name="option" class="bg-ds-theme-fuschia" />
    <label for="radio4">Fantasia Nr.2</label>
  </div>
</fieldset>
Select an option
Grids

Grids should be provided with a width/height if they're empty. 

<div class="ds-grid"></div>
<div class="ds-grid-lg"></div>
Borders

Borders can also appear colored! 

<div class="bar bg-ds-theme-slate"></div>
<div class="bar-lg bg-ds-theme-green"></div>
<div class="bar-lg-reverse bg-ds-theme-darkpurple"></div>
Alert

There is a loading animation available that can be used in alerts. 

<div class="alert">
  <div class="loading-container">
    <div class="loading-1"></div>
    <div class="loading-2"></div>
    <div class="loading-3"></div>
    <div class="loading-4"></div>
    <div class="loading-5"></div>
    <div class="loading-6"></div>
    <div class="loading-7"></div>
    <div class="loading-8"></div>
    <div class="loading-9"></div>
  </div>
  <span>Looking for software available for download...</span>
  <div class="loading-container">
    <div class="loading-1"></div>
    <div class="loading-2"></div>
    <div class="loading-3"></div>
    <div class="loading-4"></div>
    <div class="loading-5"></div>
    <div class="loading-6"></div>
    <div class="loading-7"></div>
    <div class="loading-8"></div>
    <div class="loading-9"></div>
  </div>
</div>
Looking for software available for download...
Info / Header Box
<div class="info">
  <div class="info-square">image</div>
  <div class="info-container">
    <div class="info-label">Settings</div>
    <div class="info-text">
      Change system settings here. Select the setting you'd like to change.
    </div>
  </div>
</div>
image
Settings
Change system settings here. Select the setting you'd like to change.
Pictochat
<div class="pictochat-window">
  <div class="pictochat-message">A message..</div>
  <div class="pictochat-status">Now leaving..</div>
</div>
A message..
Now leaving..