Style Guide
A living reference of the design tokens configured in Theme Options.
Typography
Body Text
The quick brown fox jumps over the lazy dog. This paragraph demonstrates the default body typography settings including font family, size, weight, line height, and letter spacing as configured in Theme Options.
Font: "MonaSans", sans-serif · Size: 18px · Weight: 500 · Line Height: 1.5
Heading 1 — The quick brown fox jumps over the lazy dog
Font: Cambria, Cochin, Georgia, Times, "Times New Roman", serif · Size: 52px · Weight: 700 · Line Height: 1.2 · Spacing: -0.025em · Color: #201e1f
Heading 2 — The quick brown fox jumps over the lazy dog
Font: Cambria, Cochin, Georgia, Times, "Times New Roman", serif · Size: 50px · Weight: 600 · Line Height: 1.2 · Spacing: -0.02em · Color: #201e1f
Heading 3 — The quick brown fox jumps over the lazy dog
Font: Cambria, Cochin, Georgia, Times, "Times New Roman", serif · Size: 42px · Weight: 700 · Line Height: 1.2 · Spacing: -0.015em · Color: #40516b
Heading 4 — The quick brown fox jumps over the lazy dog
Font: Cambria, Cochin, Georgia, Times, "Times New Roman", serif · Size: 36px · Weight: 600 · Line Height: 1.2 · Spacing: -0.01em · Color: #40516b
Heading 5 — The quick brown fox jumps over the lazy dog
Font: Cambria, Cochin, Georgia, Times, "Times New Roman", serif · Size: 32px · Weight: 600 · Line Height: 1.2 · Spacing: 0em · Color: #40516b
Heading 6 — The quick brown fox jumps over the lazy dog
Font: "MonaSansBold", sans-serif · Size: 20px · Weight: 400 · Line Height: 1.2 · Spacing: 0em · Color: #201e1f
Inline Elements
This is bold / strong text within a paragraph.
This is small text within a paragraph.
This is a hyperlink within a paragraph.
This is span text within a paragraph.
Hero Typography
Hero Heading — The quick brown fox
Font: "MonaSans", sans-serif · Size: 16px · Weight: 600
Color Palette
Primary
#525252
#201e1f
#1c171a
Secondary
#5dadd0
#287ca0
#154d65
Tertiary
#86665f
#4f3833
#201513
Accent
#f8f1d3
#f2e39f
#eed259
Neutral
#dde7ee
#edf3f7
#b6d0e2
Links
#40516b
#40516b
Background
#ffffff
Buttons
Global — Padding: 6px / 20px · Radius: 10px · Font Size: 17px · Weight: 700
Lists
Unordered List
- First item in the list
- Second item with more text to show wrapping behavior
- Third item in the list
- Fourth item for good measure
Style: disc · Position: outside · Padding Left: 1.5rem
Ordered List
- First item in the list
- Second item with more text to show wrapping behavior
- Third item in the list
- Fourth item for good measure
Style: decimal · Position: outside · Padding Left: 1.5rem
Form Elements
Padding: 0.5rem / 0.75rem · Radius: 0.375rem · Border: 1px #d1d5db · Focus: #1e40af
Layout
1200px
768px
1.5rem