Kennedy Typefaces
Big Caslon — headings & hero / Adobe Caslon Pro — body & UI
Hero
hero-1 — Big Caslon, 96px desktop / 64px mobile, LH 90%, LS 0, uppercase
New Arrivals
hero-2 — Big Caslon, 80px desktop / 56px mobile, LH 90%, LS 0, uppercase
New Arrivals
hero-3 — Big Caslon, 64px desktop / 40px mobile, LH 90%, LS 0, uppercase
New Arrivals
Headings
h1 — Big Caslon, 48px desktop / 32px mobile, LH 100%, LS 2%
Heading One
h2 — Big Caslon, 32px desktop / 24px mobile, LH 110%, LS 2%
Heading Two
h2--light (uppercase) — Big Caslon, 32px desktop / 24px mobile, LH 90%, LS 0
Heading Two Light
h3 — Big Caslon, 24px desktop / 18px mobile, LH 110%, LS 2%
Heading Three
h4 — Big Caslon, 16px, LH 100%, LS 6%
Heading Four
h5 — Big Caslon, 14px, LH 100%, LS 5%
Heading Five
h6 — Big Caslon, 12px, uppercase, LH 100%, LS 6%
Heading Six
Body — Adobe Caslon Pro
body (global) — Adobe Caslon Pro, 14px, LH 1.5
The quick brown fox jumps over the lazy dog. Kennedy was founded in 1976 and has continued to redefine its carefully edited collection.
body-large — 16px, LH 90%, LS 1%
The quick brown fox jumps over the lazy dog. Kennedy was founded in 1976.
body — 14px, LH 90%, LS 1%
The quick brown fox jumps over the lazy dog. Kennedy was founded in 1976.
body-small — 12px, LH 90%, LS 1%
The quick brown fox jumps over the lazy dog. Kennedy was founded in 1976.
caption — Adobe Caslon Pro, 10px, uppercase, LH 90%, LS 5%
Caption text example
label — Adobe Caslon Pro, 14px, bold, LH 90%, LS 2%
label-small — 12px, bold, LH 90%, LS 2%
Label Small
Headings (semantic)
Heading one
Heading two
Heading three
Heading four
Heading five
Heading six
Body text
body-large bold: Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
body-large light: Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
bold: Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
light: Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
body-small bold: Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
body-small light: Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
caption: Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
body-fixed-large bold: Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
body-fixed-small bold: Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Label small
Label large
Blockquote
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
The author of the quote
RTE
Heading One
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in.
Heading Two
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in.
Heading Three
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in.
Heading Four
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in.
Heading Five
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in.
Heading Six
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna liquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
- One
- Two
- Three
- Four
- One
- Two
- Three
- Four
Icons — Navigation
Icons — Payment Methods
Icons — Social
Buttons
Default Button
.btn
Icon Button
.btn
Secondary Button
.btn .btn--secondary
Small Button
.btn .btn--small
Block Button
.btn .btn--block
Text Button
.btn .btn--text
Tertiary Button
.btn .btn--tertiary
