Colors that stick. A simple opensource accessible color system from @s9a
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig
LICENSE.md
README.md
demo.css
index.html
package-lock.json
package.json
tape.css
test.js

README.md

tape

colors that stick. @latest npm install @s9a/tape

<link rel="stylesheet" href="...tape.css">

tape.css

palette

  • .tape-white black on white
  • .tape-yellow black on yellow
  • .tape-pink black on pink
  • .tape-blue black on blue
  • .tape-green black on green
  • .tape-black parent on black
  • .tape-black.tape-white white on black
  • .tape-black.tape-yellow yellow on black
  • .tape-black.tape-pink pink on black
  • .tape-black.tape-blue blue on black
  • .tape-black.tape-green green on black

behavior

composable mods. Remember to style interactive elements with visual affordance. Link underline etc.

  • .tape-clean Override coloring within
  • .tape-unclean Override .tape-clean on specific element
  • .tape-flat Transparentize borders within
  • .tape-unflat Override .tape-flat on specific element

examples

tape page

<html class="tape-white">

tape anywhere

<aside class="tape-yellow">
  <em>So</em> fresh!
</aside>

cool quote

<blockquote class="tape-blue">
  I said empty your mind.
  Be formless.
  Shapeless.
  Like tape.
  Now you put tape onto walls, it becomes the walls.
  You put tape onto floors, it becomes the floors.
  You put it in you, it becomes yours.
  Now tape can flow or it can shred.
  Be tape my friend.
</blockquote>

black link

<a class="tape-black" href="https://s9a.github.io/tape/">tape</a>
<aside class="tape-pink">
  Stick 4ever.
  Apply <a class="tape-black" href="https://s9a.github.io/tape/">tape</a>
</aside>

pink link

<a class="tape-pink" href="https://s9a.github.io/tape/">tape</a>
<aside class="tape-pink tape-clean">
  Stick 4ever.
  Apply <a href="https://s9a.github.io/tape/">tape</a>
</aside>
<aside class="tape-pink">
  Stick 4ever.
  Apply <a class="tape-clean" href="https://s9a.github.io/tape/">tape</a>
</aside>

primary action

<fieldset class="tape-white">
  <button class="tape-black">Save</button>
  <button>Cancel</button>
</fieldset>
<fieldset class="tape-flat tape-white">
  <button class="tape-unflat tape-black">Save</button>
  <button class="tape-unflat">Cancel</button>
</fieldset>

creative tone

<fieldset class="tape-yellow">
  <label>
    <b>Create name</b>
    <input class="tape-white">
    <strong>Imagine :)</strong>
  </label>
</fieldset>

denial tone

<fieldset class="tape-pink">
  <label>
    <b>Create name</b>
    <input class="tape-white">
    <strong>Taken :(</strong>
  </label>
</fieldset>

success tone

<fieldset class="tape-green">
  <label>
    <b>Create name</b>
    <input class="tape-white">
    <strong>Yes =)</strong>
  </label>
</fieldset>

tape online. :D