Design systems aren’t just for large corporations. Even small teams or individuals benefit from the practice of designing with intention, and a well-documented design system is a valuable resource. This is ours, and we’re glad to share it.
Principles
- Accessible. If it doesn’t work for someone, it’s not good for anyone.
- Plain. Prioritize content over decoration.
- Simple. Limit UI patterns to support predictability.
- Nice. Offer a clear and crisp presentation.
Type
Inter is an amazing typeface which aligns nicely with the Neatnik aesthetic. Type is set at 1.2em and a line height of 160%. The content width ensures that text is comfortable to read, with fewer than 20 words per line on average.
Layout
There is no greater simplicity than a web page with a clear, vertically-oriented, linear content progression. For times when a horizontal arrangement of elements is optimal, Flexbox is provides responsive support for two to five columns.
Color
A monochromatic palette preserves visual simplicity. Color can be used for accent or to supplement existing content, but never exclusively to convey meaning. Open Color provides a perfectly coordinated palette.
Icons
Font Awesome’s icons are the gold standard in clear and effective design. We use them liberally.
Messages
Various types of messages use a common structure supported with iconography.
Tables
Used for displays of data only. Responsive to any width.
| Mon | Tue | Wed | Thu | Fri | Sat | Sun | |
|---|---|---|---|---|---|---|---|
| Week 1 | 1.7% | 2.3% | 5.0% | 7.2% | 9.9% | 1.7% | 0.7% |
| Week 2 | 2.1% | 3.0% | 1.2% | 8.5% | 2.5% | 7.4% | 3.8% |
| Week 3 | 0.2% | 1.4% | 6.2% | 7.9% | 0.2% | 3.1% | 4.3% |
Forms
Accessible and consistent, engineered for ease of use.