a17t, noun (eyˈsevenˈteenˈtee) —

atomic design toolkit

Build beautiful, unique interfaces without reinventing the wheel. Let a17t provide the core building blocks, then customize with ease.

a17t code demo

Core interface elements.
No opinions about anything else.

Some CSS frameworks come prepackaged with all sorts of components that are convenient at first but quickly become limiting. Utility frameworks like Tailwind are awesome, but can be difficult start using on their own.

a17t tries to get the balance right. Instead of providing all-inclusive, opinionated components (like jumbotrons, navbars, and menus), a17t provides common single-class elements in a default (but easily customizable) style.


Live Example

If you don't currently have a job, select 'other.'

The correct answer is a17t!

Example code
<form class="card ~neutral !low">
  <div class="mb-4">
    <label class="label" for="toolkit">Current job</label>
    <div class="select ~neutral !low my-1 max-w-xs">
      <select>
        <option>Teacher</option>
        <option>Engineer</option>
        <option>Firefighter</option>
        <option>Other</option>
      </select>
    </div>
    <p class="support">If you don't currently have a job, select 'other.'</p>
  </div>
  <div>
    <label class="label" for="toolkit">Favorite toolkit</label>
    <input id="toolkit" type="text" class="input ~critical !normal my-1 max-w-xs  block" placeholder="At least 8 characters..."
      value="Not a17t">
    <p class="support ~critical">The correct answer is a17t!</p>
  </div>
</form>

Atomic & flexible

a17t provides core, single-class interface elements and empowers you to assemble them your way. And everything is easily customizable using CSS variables, so you'll never need to settle for “good enough.”

Logical & hierarchical

a17t encourages you to think in terms of intent and hierarchy by specifying elements in terms of tone and priority. As an added bonus, this makes refactoring and customization a breeze.

Lightweight & modern

a17t is built using PostCSS, CSS variables, and Tailwind CSS. That means it's reliable, customizable, and can integrate with any JS stack. Just import a small pure CSS file and you're good to go.

Pleasant & accessible

a17t is designed to make every interaction a delight. In addition to its semantic markup, a17t is full of subtle animations and accessibility features that make it pleasing for everyone to use.


Live Example

Senior Researcher

Dr. Katya Hattenagh

Katya studies the intersection of machine learning and differential topology.

Discrete Math Topology Neural Nets
Example code
<div class="card ~neutral !low md:flex max-w-lg">
  <div class="w-20 h-20 mx-auto mb-6 md:mr-6 flex-shrink-0">
    <img class="object-cover rounded-full" src="/assets/profile_image.png">
  </div>
  <div class="flex-grow text-center md:text-left">
    <p class="support">Senior Researcher</p>
    <h3 class="text-xl heading">Dr. Katya Hattenagh</h3>
    <p class="mt-2 mb-3">Katya studies the intersection of machine learning and differential topology.</p>
    <div>
      <span class="chip ~neutral mb-1">Discrete Math</span> <span class="chip ~neutral mb-1">Topology</span> <span
        class="chip ~neutral mb-1">Neural Nets</span>
    </div>
  </div>
</div>

Use tones to control color

There are six tones by default: neutral, positive, warning, critical, info, and urge. (Don't worry, these colors are all customizable.) Tones are specified using special class names that start with a tilde (e.g., ~positive). To make a light green chip, for example, use chip ~positive.

Use priorities to control prominence

There are three priorities — low, normal, and high. You can specify a priority by its class: an exclamation point followed by its name (e.g., !high or !low). Usually, priorities affect an elements' colors, but fallback to using elevation (communicated through drop shadow) when changing colors wouldn't look good.

Consider using with Tailwind

Because a17t only provides the core elements of your interface, like buttons and form inputs, you'll need a tool to stitch everything together. (a17t does not provide any grid utilities.) While you could do this using pure CSS, using a17t in conjunction with Tailwind makes for a very smooth and efficient development experience.


Live Example

Name Status Price
Landinator 9000 New Completed $300
Hammer Waiting $20
Computer Processing $500
Example code
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Landinator 9000 <span class="badge ~neutral">New</span></td>
      <td><span class="chip ~positive">Completed</span></td>
      <td>$300</td>
    </tr>
    <tr>
      <td>Hammer</td>
      <td><span class="chip ~urge">Waiting</span></td>
      <td>$20</td>
    </tr>
    <tr>
      <td>Computer</td>
      <td><span class="chip ~info">Processing</span></td>
      <td>$500</td>
    </tr>
  </tbody>
</table>

Thoughtful typography — a17t is optimized for legibility. From headings to body text to labels, a17t tries to follow typographic best practices to ensure consistent, readable interfaces.

No margins — While most a17t elements have some kind of internal spacing, none have any external margin by default. This is intentional: spacing is not one-size-fits-all, so not having any makes a17t more flexible.

CSS variables — Unlike libraries built using preprocessing tools like Sass, a17t relies on CSS variables for customization. That means you can tweak it dynamically on the page without using any build tools.

Effortlessly responsive — All of a17t's elements are designed to look great on any kind of device. So as long as you build your layout responsively, a17t will automatically follow suit without any extra effort.


Live Example

Just making sure!

To confirm you'd like to delete this repository, please enter its name below.

Delete Go Back
Example code
<div class="card ~neutral !low p-0 max-w-sm">
  <div class="p-4">
    <h2 class="mb-1 text-lg heading">Just making sure!</h2>
    <p class="mb-3 text-base support">To confirm you'd like to delete this repository, please enter its name below.</p>
    <input class="input" type="text" placeholder="milesmcc/a17t">
  </div>
  <section class="section ~critical p-4">
    <span class="button ~critical !high">Delete</span>
    <span class="button ~neutral bg-transparent">Go Back</span>
  </section>
</div>

Using NPM (recommended)

npm install a17t

Import a17t in your JavaScript using import 'a17t' or into your preprocessed CSS using @import 'a17t';. For more information about CSS-in-JS, see this guide. a17t's default export is simply its compiled CSS file, so you have no shortage of options to import it.

Optionally use a17t's Tailwind distribution in your JavaScript with import 'a17t/dist/tailwind.css' or in your CSS with @import 'a17t/dist/tailwind.css'. The benefit of using a17t's Tailwind CSS distribution is that it uses the same CSS variables as a17t. That way, if you change your color scheme (for example), your Tailwind classes will change as well. (Note that the color names for a17t's Tailwind distribution match other a17t's naming system—e.g., the class for light grey text is `text-neutral-300`.)

Using a CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/a17t.css">