Neatnik

Neatnik Design Language

Our design language is simple and bold, chunky and friendly. Playful and clean. You get the idea.

Principles

Layout

Vertically-inclined, the scrollbar. For horizontally-arranged elements, CSS’s grid does the heavy lifting.

3/10
7/10
1/2
1/2
1/5
3/5
1/5

Color

“Why do two colors, put one next to the other, sing? Can one really explain this? no. Just as one can never learn how to paint.” — Pablo Picasso

Main

  • #333333 Primary text
  • #000000 Secondary text
  • #6A4C93 Purple accent
  • #eedd00 Yellow accent

Additional

  • #999999 Light gray
  • #eeeeee Lighter gray
  • #fafafa Lightest gray
  • #1982C4 Links

Notices & Alerts

  • #c41b25 Danger
  • #fc8500 Warning
  • #ffd53f Notice
  • #239b46 OK

Bubbles

Bubbles can make important things stand out.

Just like this.

And can be used for notices.

Like this.

Or even action confirmations.

And like this.

Icons

Font Awesome Pro icons are beautiful, especially the new dual-tone versions. Useful in conjunction with navigation or to support scanning where appropriate. Sometimes just used for fun, too.

Type

Inter is an amazing typeface which feels right at home here.

Aa Aa Aa Aa Aa Aa Aa Aa

Sphinx of black quartz, judge my vow.

Tables

Roomy and easy to read. Responsive. Used for displays of data only.

Mon Tue Wed Thu Fri Sat Sun
Week 1 1.7% 2.3% 5.0% 7.2% 9.9% 11.7% 0.7%
Week 2 2.1% 3.0% 1.2% 8.5% 12.5% 17.4% 3.8%
Week 3 0.2% 1.4% 6.2% 7.9% 10.2% 13.1% 4.3%

Forms

Accessible and consistent. Fun and inviting.

Starship Order

Next, select a color:

Finally, add options:

Log in
Regret

Are you sure you want to become the very thing you sought to destroy?

Share Your Story