The kitchen sink

A showcase of Modulz open–source design system.

Pill Button

Button

Avatar

CT
CT
DB
MH
MS

Status indicator

Label

Default
Default
Yellow
Lime
Green
Teal
Blue
Indigo
Violet
Purple
Pink
Red
Orange
Amber
Design Programming Design tools HTML5 CSS3 JavaScript

Badge

Neutral
648
Neutral
Primary
Positive
Intermediary
Negative
Bronze
Gold
Follows you
HD
Open
Pending
Rejected
Live

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

This is 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 fuck, 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 know ya'll don't give a fuck you just want your shit to look good so 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.

Lime
Green
Teal
Blue
Indigo
Violet
Purple
Pink
Red
Orange
Amber
Yellow

Tabs

Tab one
Tab two
Tab three
Tab one
Tab two
New
Tab three
Tab one
Tab two
Tab three
Tab one
Tab two
Tab three

Slider

0%
100%

Progress Bar

25%
Uploading 1 / 10 75%

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

Colm Tuite

August 1, 2017

If you have any feedback at all, I'd absolutely love if you reached out on Twitter, Github or email.

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?

If you want to try it without docs, please tweet at me and I'll hook you up.

The plan is to release a beta around mid August with v1 shipping in late September.

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?