Style Guide

Samet-CPA-Logo

Primary Logo

samet2alt
sametlogo2alternate
smallsamet

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)

“ — ½ × © ™ ® & ”

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.

This view shows at 992+ pixels
This view shows at 992+ pixels
This view shows at 992+ pixels

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 view shows at 992+ pixels
This view shows at 992+ pixels
This view shows at 992+ pixels

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.

Sample Sidebar

October 2020
MTWTFSS
 1234
567891011
12131415161718
19202122232425
262728293031 

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.

View of 768 or less px
View of 768 or less px
View of 768 or less px

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.

Sample Sidebar

October 2020
MTWTFSS
 1234
567891011
12131415161718
19202122232425
262728293031