Modulz Design System

An open–source collection of styles, components, patterns, resources & more.

Pill Button

Button

Invisible Button

Icon Checkbox

Link

This is a paragraph of text with a default link plonked in the middle to show how a default link inherits the style properties of its parent.

Avatar

MD
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
CT
DB
MH
MS
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick
Michael Dick

Status

8
248
2k+

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

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.

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

Slider

0%
100%

Progress Bar

25%
Uploading 1 / 10 75%

Form controls

Table

Name Role Country
Michael Dick
Colm Tuite
Designer Romania
Michael Dick
Olimpia Vintan
Designer Romania
Michael Dick
Colm Tuite
Designer Ireland
Name Role Country
Michael Dick
Colm Tuite
Designer Romania
Michael Dick
Olimpia Vintan
Designer Romania
Michael Dick
Colm Tuite
Designer Ireland

Card

Michael Dick

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.10%