Neatnik

Design Language

Taking the time to create a design language cultivates discipline while enabling consistency in execution. 10/10 would definitely do again.

Principles

Layout

Vertically-inclined. Not afraid of 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

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. Definitely our pick for the one font that we’d choose to look at for the rest of my life if we were stranded on a desert island.

Need extra attention?

Section treatments like this can be used to pull the eye over to things that are especially important.

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