Theme
Outkit Theme
Theming with Outkit is based on the Styled System Theme Specification
Colors
Black & White
Black
#000
White
#fff
Success
success 50
#EFFFE2
success 100
#D5F5B8
success 200
#BAE096
success 300
#A7D47B
success 400
#97CC64
success 500
#75B931
success 600
#649E2A
success 700
#538323
success 800
#42681C
success 900
#2A5203
Warning
warning 50
#FFF5E4
warning 100
#FFE8C3
warning 200
#FFDCA1
warning 300
#FFCF80
warning 400
#FFCA73
warning 500
#FFB63D
warning 600
#E3A236
warning 700
#C78D2F
warning 800
#8F6622
warning 900
#785315
Error
error 50
#FDF7F7
error 100
#F9DFDF
error 200
#F4BFC0
error 300
#F19292
error 400
#E15F5F
error 500
#D13D3D
error 600
#B12A2A
error 700
#9C2525
error 800
#8A1C1C
error 900
#6D0305
Info
info 50
#E7F1FF
info 100
#D5E4F9
info 200
#ABC9F3
info 300
#81AEED
info 400
#5793E7
info 500
#2D78E1
info 600
#1B60C0
info 700
#1855A9
info 800
#123E7D
info 900
#0B2850
Primary
primary 50
#E7F1FF
primary 100
#D5E4F9
primary 200
#ABC9F3
primary 300
#81AEED
primary 400
#5793E7
primary 500
#2D78E1
primary 600
#1B60C0
primary 700
#1855A9
primary 800
#123E7D
primary 900
#0B2850
Secondary
secondary 50
#EFFFE2
secondary 100
#D5F5B8
secondary 200
#BAE096
secondary 300
#A7D47B
secondary 400
#97CC64
secondary 500
#75B931
secondary 600
#649E2A
secondary 700
#538323
secondary 800
#42681C
secondary 900
#2A5203
Typgraphy
Heading
Text
Spacing
The space key allows you to customize the global spacing and sizing scale for your project. By default these spacing
value can be referenced by the padding, margin, and top, left, right, bottom styles.
By default, Outkit includes a comprehensive numeric spacing scale inspired by Tailwind CSS. The values are proportional,
so 1 spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers.
Mental model: If you need a spacing of
40px, divide it by4. That'll give you10. Then use it in your component.
| Name | Space (in rem) | Pixels | |
|---|---|---|---|
| 0 | 0 | 0px | |
| px | 1px | 1px | |
| 1 | 0.25rem | 4px | |
| 2 | 0.5rem | 8px | |
| 3 | 0.75rem | 12px | |
| 4 | 1rem | 16px | |
| 5 | 1.25rem | 20px | |
| 6 | 1.5rem | 24px | |
| 8 | 2rem | 32px | |
| 10 | 2.5rem | 40px | |
| 12 | 3rem | 48px | |
| 16 | 4rem | 64px | |
| 20 | 5rem | 80px | |
| 24 | 6rem | 96px | |
| 32 | 8rem | 128px | |
| 40 | 10rem | 160px | |
| 48 | 12rem | 192px | |
| 56 | 14rem | 224px | |
| 64 | 16rem | 256px |