How simple visual treatments can improve usability – Case: Harp

Before:

After:

Try it out yourself in Google Chrome:

1. Get the Stylebot Chrome extension
2. Go to harpjs.com/docs/
3. Open Stylebot and click the "Edit CSS" button
4. Paste in the following CSS and click Save:

/***********************************************************
   Go to harpjs.com/docs/
   Then try paste this CSS into Stylebot Chrome extension: 
***********************************************************/

:-moz-placeholder {
    color: oklch(0.6233 0.0254 220.93);
    /* Mozilla Firefox 4 to 18 */
    opacity: 1;
}

:-ms-input-placeholder {
    color: oklch(0.6233 0.0254 220.93);
    /* Internet Explorer 10-11 */
}

::-moz-placeholder {
    color: oklch(0.6233 0.0254 220.93);
    /* Mozilla Firefox 19+ */
    opacity: 1;
}

::-webkit-input-placeholder {
    color: oklch(0.6233 0.0254 220.93);
    /* WebKit, Blink, Edge */
}

.search-query {
    border: 1px solid oklch(0.6331 0.0463 220.99);
}

.nav-push-item.active {
    background-color: oklch(0.4367 0.0609 222.79);
}

.nav-aside-item a {
    padding: 5px inherit;
}

.nav-aside-item.active > a, 
.nav-aside-item.active.active-last > a {
    background-color: oklch(0.6331 0.0463 220.99);
    border-color: oklch(1 0 0);
    color: oklch(1 0 0);
}