Implementing the Fiasco Design System

See GitHub README or CHANGELOG

WARNING: This is a rough 1st draft of a WIP Figma design system... YMMV

Reset

Our reset comes from the Tailwind Preflight and we specify a base text size, weight, and color:

show base styles

A background graphpaper grid image is available

show example
Colors

We define both generic and specific names for each color (e.g. primary vs plue).

We recommend using the generic names where possible. This allows us to change the underlying colors without having to search and replace across the entire code base.

light white
dark black
gray pluetral
primary plue
success fel
warn pika
danger pkfire
show example

We also have 3 colors with specific names that do not have a generic meaning (yet).

 ice
 kiwi
 jiggly
show example
Color Shades
show example
gray-50
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
primary-50
primary-100
primary-200
primary-300
primary-400
primary-500
primary-600
primary-700
primary-800
primary-900
success-50
success-100
success-200
success-300
success-400
success-500
success-600
success-700
success-800
success-900
warn-50
warn-100
warn-200
warn-300
warn-400
warn-500
warn-600
warn-700
warn-800
warn-900
danger-50
danger-100
danger-200
danger-300
danger-400
danger-500
danger-600
danger-700
danger-800
danger-900
Including our 3 additional colors that do not (yet) have generic names:
ice-50
ice-100
ice-200
ice-300
ice-400
ice-500
ice-600
ice-700
ice-800
ice-900
kiwi-50
kiwi-100
kiwi-200
kiwi-300
kiwi-400
kiwi-500
kiwi-600
kiwi-700
kiwi-800
kiwi-900
jiggly-50
jiggly-100
jiggly-200
jiggly-300
jiggly-400
jiggly-500
jiggly-600
jiggly-700
jiggly-800
jiggly-900
 Typography

We are using Instrument Sans.

show example

This is Large Text

This is Normal Text

This is Small Text

This is Tiny Text

show example

This is Bold (700)

This is Semi-Bold (600)

This is Medium (500) - (our default)

This is Normal (400)

 Typography - Headings
show example
D1
I used to be an adventurer like you. Then I took an arrow to the knee.
D2
I used to be an adventurer like you. Then I took an arrow to the knee.
D3
I used to be an adventurer like you. Then I took an arrow to the knee.
D4
I used to be an adventurer like you. Then I took an arrow to the knee.
H1

I used to be an adventurer like you. Then I took an arrow to the knee.

H2

I used to be an adventurer like you. Then I took an arrow to the knee.

H3

I used to be an adventurer like you. Then I took an arrow to the knee.

H4

I used to be an adventurer like you. Then I took an arrow to the knee.

H5
I used to be an adventurer like you. Then I took an arrow to the knee.
PL
I used to be an adventurer like you. Then I took an arrow to the knee.
H6
I used to be an adventurer like you. Then I took an arrow to the knee.
P

I used to be an adventurer like you. Then I took an arrow to the knee.

HS
I used to be an adventurer like you. Then I took an arrow to the knee.
PS
I used to be an adventurer like you. Then I took an arrow to the knee.
HT
I used to be an adventurer like you. Then I took an arrow to the knee.
PT
I used to be an adventurer like you. Then I took an arrow to the knee.
Spacing

Our spacing units are defined as multiples of 4px.

show example
0.5
2px
1
4px
1.5
6px
2
8px
2.5
10px
3
12px
3.5
14px
4
16px
5
20px
6
24px
7
28px
8
32px
9
36px
10
40px
12
48px
14
56px
16
64px
18
72px
20
80px
24
96px
28
112px
32
128px
36
144px
40
160px
44
176px
48
192px
52
208px
56
224px
60
240px
64
256px
72
288px
80
320px
88
352px
96
384px
128
512px
 Logos
show example
Logo Colors
show example
Logo Sizes
show example
Icons

We have 1500+ icons available to us via the iconoir library.

show example
...
Icon Colors
show example
Icon Sizes
show example
Links
show example
Primary Link Secondary Link Success Link Danger Link Warning Link
example Cards this is the rhs

This page is full of cards

show example
Tabs
show example
Build Play Share + Build Play Share +
Buttons
show example
Toggle Buttons
Inputs
show example
Form Submitted

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

our eyes are closed this field has icons choose an option
This checkbox is perfectly safe
This checkbox has an error!
Can't touch this
multi line textarea condolences to your family. ...hammer time
Modals
show example
Hello World Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Congratulations! Your thing was successfull. Jump! Are you sure you want to do this dangerous thing?
coming soon Loading Indicators coming soon Fiasco Hand Adornments Miscellaneous This is an inline code block... oooh.