Style Guide
Logo
Primary Logo
Alternate
Inverted colors
Favicon
Colors
Tuscan Tan
USE: Primary
HEX: #A37F5A
RGB: 163 / 127 / 90
CMYK: 0 / .2 / .4 / .3
#A37F5A
shade
tint
pastel
Ming Blue
USE: Primary
HEX: #356080
RGB: 53 / 96 / 128
CMYK: .5 / .2 / 0/ .4
#356080
shade
tint
pastel
Raisin Black
USE: Text
HEX: #252323
RGB: 37 / 35 / 35
CMYK: 0 / 0 / 0/ .8
#252323
shade
tint
pastel
Slate Gray
USE: Alternate
HEX: #393E41
RGB: 57 / 62 / 65
CMYK: .1 / 0 / 0/ .7
#393E41
shade
tint
pastel
Isabelline White
USE: Background
HEX: #F5F1ED
RGB: 245 / 241 / 237
CMYK: 0 / 0 / 0/ 0
#F5F1ED
shade
tint
pastel
Snow White
USE: Background
HEX: #FAFAFA
RGB: 250 / 250 / 250
CMYK: 0 / 0 / 0/ 0
#FAFAFA
shade
tint
pastel
This is a sample block of text.
This is a sample block of text.
This is a sample block of text.
This is a sample block of text.
This is a sample block of text.
This is a sample block of text.
This is a sample block of text.
This is a sample block of text.
Tuscan Tan
#A37F5A, #72593F, #BEA58B
Ming Blue
#356080, #25435A, #718FA6
Raisin Black
#252323, #1A1919, #666565
Typefaces
Heading
Typeface: Samet Head
Styles: Book (400)
Bold (700)
Aa Samet Head
Body
Typeface: Samet Text
Styles: Book (400)
Black (800)
Aa Samet Text
Typography
Heading 1
Typeface: Samet Head
Styles: Bold (700)
Size: 2.5 em
Line height: 1.0 em
Letter space: 0
The quick brown fox jumps over the lazy dog.
Heading 2
Typeface: Samet Head
Styles: Bold (700)
Size: 1.7 em
Line height: 1.0 em
Letter space: 0
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Heading 3
Typeface: Samet Head
Styles: Bold (700)
Size: 1.5 em
Line height: 1.0 em
Letter space: 0
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Paragraph
Typeface: Samet Text
Styles: Book (400)
Size: 14 px
Line height: 1.5 em
Letter space: 0
Indent space: 1em
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.
Captions
Typeface: Samet Text
Styles: Book (400)
Size: 12 px
Line height: 1.5 em
Letter space: 0.05 em
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. The quick brown fox jumps over the lazy dog.
Blockquote
Typeface: Samet Text
Styles: Book Italic (400)
Size: 14 px
Line height: 1.5 em
Letter space: 0
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.
Special symbols
Typeface: Samet Text
Styles: Book (400)
Black (800)
“ — ½ × © ™ ® & ”
Styling
Icon Graphics
Standard icons
Color: Ming Blue
Hover color: Snow White
Background: Tuscan Tan
Responsiveness
This is the view of the page on a desktop computer
Samet text is THE font face we'll be using for any body text. In the opening word of the opening paragraph of blog posts, we will be using the big drop cap letter.
The default font size is 14px & scales proportionally according to breakpoints of the browser window.
Samet text is THE font face we'll be using for any body text, list items, navigation items, buttons, captions, and more. The default line height is 1.5, with a paragraph margin of 1.
The default font size is 14px & scales proportionally according to size of the browser window. Hyperlinks will be shown as such.
This is a subheader
10px margin below subheaders, and 20px margin above them. The default line height is 1.5, with a paragraph margin of 1. No more than 3 lines of text per body paragraph.
In addition, the ideal number of characters per line is 66 —however, anywhere from 45 to 75 characters is also plausible. Paragraph spacing is 1em.
The default font size is 14px & scales proportionally according to size of the browser window. Hyperlinks will be shown as such.
This is the view of the page on a mobile device
This is Samet Text.
Mobile headers line height shrinks to 1 em. Samet text is THE font face we'll be using for any body text, list items, navigation items, buttons, captions, and more.
The default line height is 1.5, with a paragraph margin of 1.
The default font size is 14px & scales proportionally according to breakpoints of the browser window.
This is Samet Text.
Samet text is THE font face we'll be using for any body text, list items, navigation items, buttons, captions, and more. The default line height is 1.5, with a paragraph margin of 1.
The default font size is 14px & scales proportionally according to breakpoints of the browser window.