Neatnik Design Language
Taking the time to create a design language cultivates discipline while enabling consistency in execution. 10/10 would definitely do again.
- Plain. Emphasize content, deprioritize frills.
- Simple. Fewer UI patterns means increased predictability.
- Nice. Just because something is plain and simple doesn’t mean it can’t look pleasant.
Vertically-inclined. Not afraid of the scrollbar. For horizontally-arranged elements, CSS’s grid does the heavy lifting.
“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
- #333333 Primary text
- #000000 Secondary text
- #6A4C93 Purple accent
- #eedd00 Yellow accent
- #999999 Light gray
- #eeeeee Lighter gray
- #fafafa Lightest gray
- #1982C4 Links
Notices & Alerts
- #c41b25 Danger
- #fc8500 Warning
- #ffd53f Notice
- #239b46 OK
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.
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.
Roomy and easy to read. Responsive. Used for displays of data only.
Accessible and consistent. Fun and inviting.