The kitchen sink
A showcase of Modulz open–source design system.
Pill Button
Button
Avatar
Status indicator
Label
Badge
This title big AF
This is a really long sub heading so you can resize your browser to test the leading like a weirdo.
This is a primary title
This is a sub heading
Sub heading on top
This is a primary title
I am a small heading
This is a really long set of random words in no particular order chosen for the sole purpose of creating a really long paragraph that might resemble the type of longform text found in blog posts.
Pink sub heading
This is a primary title
Have you ever tried to set typography on the web to an extremely high standard? Holy shit. It is the hardest part of UI architecture by far.
We need container queries and line-height-step immediately because those are objectively good ideas.
This is a large heading
This text is centered (on large screens), obviously. In terms of readability, center-justified text is a pretty bad idea in general but I just wanted to let you know that it's possible.
This is a small heading
This is the type of small paragraph text which you can commonly find on marketing sites for detailing features or benefits.
For a lot of people, this shit is just straight up illegible but I suppose it has its uses. Perhaps you could bury a scam in the fine print with this font.
You can use this for input hints, though it's possible that some people won't be able to read even a few words of this.
Tabs
Dropdown
Slider
Progress Bar
Form controls
Table
| Name | Role | Country |
|---|---|---|
| Colm Tuite | Designer | Romania |
| Olimpia Vintan | Designer | Romania |
| Colm Tuite | Designer | Ireland |
| Name | Role | Country |
|---|---|---|
| Colm Tuite | Designer | Romania |
| Olimpia Vintan | Designer | Romania |
| Colm Tuite | Designer | Ireland |
Card
Visits by country
17k
| Country | Rate |
|---|---|
| USA | 6.3% |
| Denmark | 12.2% |
| Germany | 2.9% |
| Italy | 64.1% |
Frequently asked questions
Why?
This design system has evolved over the past few years through my work. As it reached a certain stage of maturity, I figured it wouldn't be too much extra work to package it up so other people could use it.
I was wrong. Very wrong. But it's too late to turn back now.
How is Modulz different?
Modulz tries to focus on a few differentiating factors:
- A high standard of visual design in keeping with modern trends.
- Comprehensive docs which illustrate not just how to implement each component, but how to use them in a variety of practical situations.
- Consistent, rhythmic scales dictate every style used throughout Modulz.
- A modular component library. Install only what you need.
When will Modulz be released?
You can play around with Modulz right now but it's in very early beta and not yet ready for production use.
The plan is to release an official in December with v1 shipping in early 2018.
Can I contribute?
Please do! Modulz is on Github, so feel free to play around and open a PR or issue.
Soon, I'll compile a list of issues, tasks and ideas to help provide some direction.
Want to follow progress?