Mothman Museum
Design System v1.0
Color Palettes
// Mothman Red
// TNT Green
// Twilight Purple
// Bunker Gray
// Semantic Success
// Semantic Warning
// Semantic Error
Typography
// Font Families
Oswald
Headings / UI
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
IBM Plex Sans
Body Copy
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Special Elite
Lore / Classified
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
// Font Scale
XS - The quick brown fox jumps over the lazy dog.
SM - The quick brown fox jumps over the lazy dog.
Base - The quick brown fox jumps over the lazy dog.
LG - The quick brown fox jumps over the lazy dog.
XL - The quick brown fox jumps over the lazy dog.
2XL - The quick brown fox jumps over the lazy dog.
3XL - The quick brown fox jumps over the lazy dog.
4XL - The quick brown fox jumps over the lazy dog.
5XL - The quick brown fox jumps over the lazy dog.
6XL - The quick brown fox jumps over the lazy dog.
7XL - The quick brown fox jumps over the lazy dog.
// Font Weights
Extra Light - The quick brown fox jumps over the lazy dog.
Extra Light Italic - The quick brown fox jumps over the lazy dog.
Light - The quick brown fox jumps over the lazy dog.
Light Italic - The quick brown fox jumps over the lazy dog.
Normal - The quick brown fox jumps over the lazy dog.
Normal Italic - The quick brown fox jumps over the lazy dog.
Medium - The quick brown fox jumps over the lazy dog.
Medium Italic - The quick brown fox jumps over the lazy dog.
Semi Bold - The quick brown fox jumps over the lazy dog.
Semi Bold Italic - The quick brown fox jumps over the lazy dog.
Bold - The quick brown fox jumps over the lazy dog.
Bold Italic - The quick brown fox jumps over the lazy dog.
Extra Bold - The quick brown fox jumps over the lazy dog.
Extra Bold Italic - The quick brown fox jumps over the lazy dog.
// Line Heights
Tight
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Snug
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Normal
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Relaxed
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Loose
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
// Letter Spacing
Tight
The quick brown fox jumps over the lazy dog.
Normal
The quick brown fox jumps over the lazy dog.
Wide
The quick brown fox jumps over the lazy dog.
Wider
The quick brown fox jumps over the lazy dog.
Widest
The quick brown fox jumps over the lazy dog.
Spacing & Borders
// Spacing Scale
px:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
// Border Widths
0px
2px
4px
8px
Gradients
Mothman Light
Mothman Base
Mothman Dark
Twilight Light
Twilight Base
Twilight Dark
TNT Light
TNT Base
TNT Dark
Components
// Buttons
icon:
sm:
md:
lg: