Design System
A comprehensive guide to the visual language of the studio, including colors, typography, spacing, and grid systems.
Colors
System PaletteStudio (Primary)
50
#ececf9
100
#dcdcf4
200
#b6b6e7
300
#9494dc
400
#7171d0
500
#4f4fc5
600
#3838aa
700
#2a2a7f
800
#1c1c54
900
#0e0e2a
950
#080817
Brick Red (Accent)
50
#FDECEA
100
#FAD4D0
200
#F4A9A1
300
#EE7E71
400
#E85342
500
#E22812
600
#B5200E
700
#A52A2A
800
#5B1007
900
#2E0803
CMYK (Brand)
Cyan
#00AEEF
Magenta
#EC008C
Yellow
#FFF200
Black
#000000
Typography
Display
40px - 68px
40px - 68px
The quick brown fox jumps over the lazy dog.
Heading 1
32px - 54px
32px - 54px
The quick brown fox jumps over the lazy dog.
Heading 2
28px - 42px
28px - 42px
The quick brown fox jumps over the lazy dog.
Heading 3
24px - 32px
24px - 32px
The quick brown fox jumps over the lazy dog.
Heading 4
18px - 20px
18px - 20px
The quick brown fox jumps over the lazy dog.
Body
16.8px
16.8px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Caption
12px
12px
Figure 1.1: Detailed view of the component structure and hierarchy.
Micro
10px
10px
BETA VERSION 1.0
Spacing
01 (0.125rem)
02 (0.25rem)
03 (0.5rem)
04 (0.75rem)
05 (1rem)
06 (1.5rem)
07 (2rem)
08 (2.5rem)
09 (3rem)
10 (4rem)
11 (5rem)
12 (6rem)
13 (10rem)
Grid System
Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
2 Cols (Default) / 3 Cols (MD) / 2 Cols (LG)
2 Cols (Default) / 3 Cols (MD) / 4 Cols (LG)