Design System
Style Guide
01
Headings
Gallery Portfolio
Section Heading
Subsection Heading
Card Heading
02
Text Sizes
The quick brown fox jumps over the lazy dog. This sample shows how large text appears.
The quick brown fox jumps over the lazy dog. This sample shows how medium text appears.
The quick brown fox jumps over the lazy dog. This sample shows how regular text appears.
The quick brown fox jumps over the lazy dog. Used for secondary text and metadata.
The quick brown fox jumps over the lazy dog. Used for labels, taglines, and overlines.
03
Font Weights
Light / 300
Overused Grotesk
Normal / 400
Overused Grotesk
Medium / 500
Overused Grotesk
04
Rich Text
A Sample Rich Text Block
This is an example of how body text appears within a rich text element. The Gallery template uses Overused Grotesk at weight 400 for all body content, with generous 1.6 line-height for comfortable reading.
Secondary body text uses a lighter color to create hierarchy without weight changes. This is useful for descriptions, captions, and supporting content.
01
Brand Palette
White
#F4F4F2
Off White
#EAEAE8
Light Gray
#DBDBD9
Mid Gray
#B3B3B1
Gray
#8A8A88
Dark Gray
#5B5B59
Charcoal
#2C2C2A
Near Black
#1A1A18
Black
#111111
02
Semantic Mapping
Backgrounds
Primary
#F4F4F2
Secondary
#EAEAE8
Tertiary
#DBDBD9
Inverse
#1A1A18
Text
Primary
#1A1A18
Secondary
#8A8A88
Tertiary
#B3B3B1
Inverse
#F4F4F2
01
Spacing Scale
Tiny
0.25rem
XXSmall
0.5rem
XSmall
0.75rem
Small
1rem
Medium
1.5rem
Large
2.5rem
XLarge
4rem
XXLarge
5rem
Huge
6rem
XHuge
8rem
XXHuge
10rem
02
Containers
Container Large — 96rem
Container Medium — 72rem
