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: #778b92;
    /* Mozilla Firefox 4 to 18 */
    opacity: 1;
}

:-ms-input-placeholder {
    color: #778b92;
    /* Internet Explorer 10-11 */
}

::-moz-placeholder {
    color: #778b92;
    /* Mozilla Firefox 19+ */
    opacity: 1;
}

::-webkit-input-placeholder {
    color: #778b92;
    /* WebKit, Blink, Edge */
}

.search-query {
    border: 1px solid #6B919E;
}

.nav-push-item.active {
    background-color: #26596A;
}

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

.nav-aside-item.active > a, 
.nav-aside-item.active.active-last > a {
    background-color: #6B919E;
    border-color: white;
    color: white;
}