Skip to content

Basic Design System

Using tailwind we can very quickly construct a design system, an example of which is below. We can add custom colors, icons, fonts etc by customising the tailwind.config.js

Find out more

Branding

Here we have an example of a single logo SVG taken from the sprite, using classes to modify the text color with css alone, including dark mode modifiers.

Static Starter
Logo on light background
Static Starter
Logo on dark background

Extended Colors

As well as the default tailwind colors, we can also add our brand colors into the config and use them across multiple modifiers like .bg-color-name & .text-color-name

Primary
Secondary
Blood
Banana
Violet
Green

Typography

By default, Tailwind provides 10 font-size utilities. You change, add, or remove these by editing the theme.fontSize section of your Tailwind config.

Aa ui-serif ui-monospace ui-sans-serif
  • Thin
  • Extralight
  • Light
  • Normal
  • Medium
  • Semibold
  • Bold
  • Extrabold
  • Black
text-sm

The quick brown fox jumps over the lazy dog.

text-base

The quick brown fox jumps over the lazy dog.

text-lg

The quick brown fox jumps over the lazy dog.

text-xl

The quick brown fox jumps over the lazy dog.

text-2xl

The quick brown fox jumps over the lazy dog.

text-3xl

The quick brown fox jumps over the lazy dog.

text-4xl

The quick brown fox jumps over the lazy dog.

text-5xl

The quick brown fox jumps over the lazy dog.

text-6xl

The quick brown fox jumps over the lazy dog.

text-7xl

The quick brown fox jumps over the lazy dog.

text-8xl

The quick brown fox jumps over the lazy dog.

text-9xl

The quick brown fox jumps over the lazy dog.

Heading 1

The quick brown fox jumps over the lazy dog.

Heading 2

The quick brown fox jumps over the lazy dog.

Heading 3

The quick brown fox jumps over the lazy dog.

Heading 4

The quick brown fox jumps over the lazy dog.

Heading 5
The quick brown fox jumps over the lazy dog.
Heading 6
The quick brown fox jumps over the lazy dog.
Paragraph

The quick brown fox jumps over the lazy dog.

Other styles

Another thing I've done in the past is put a code tag inside of a link, like if I wanted to tell you about the tailwindcss/docs repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it.

Icons

We can apply plenty of modifiers to icons, including colors and size.

View the Icon sprite

.h-6

.h-8

.h-12

.h-12 .bg-violet

Buttons

Examples of defining all the above to create buttons.

Standard buttons
Standard buttons
Button group

Notifications & alerts

Examples of combining all of the above to create some basic notification and alert banners.

Success Notification

Successfully uploaded

Error Notification

Error: There was a problem

Light/Dark Notification

Notification text

Styled notification

Receive notifications

Notifications may include alerts, sounds, and badges.