Added to Cart
chair-wishlist

Qty: 1

Go to Cart

Add-ons and services available for some purchases in cart

Protect your Purchase

White Glove Installation

Haul Away

Spacing

Space Amounts

The following space amounts are the most commonly used measurements in the UI using the 8pt soft grid.

Used frequently Used sometimes Used sparingly
Token Name Pixels Rem (# x 16) Example
0 0px 0rem
1 1px 0.0625rem
2 2px 0.125rem
4 4px 0.25rem
6 6px 0.375rem
8 8px 0.5rem
10 10px 0.625rem
12 12px 0.75rem
14 14px 0.875rem
16 16px 1rem
20 20px 1.25rem
24 24px 1.5rem
32 32px 2rem
40 40px 2.5rem
48 48px 3rem
56 56px 3.5rem
64 64px 4rem
72 72px 4.5rem
80 80px 5rem
88 88px 5.5rem
96 96px 6rem
112 112px 7rem
128 128px 8rem
144 144px 9rem
160 160px 10rem

Grid

Fluid Layout Grid Setup
To set up a fluid-width grid, we use fixed numeric values for gutters and auto-calculated values (in %) for columns
A fluid grid has fluid-width columns, fixed gutters and fixed side margins. The fluid grid has a flexible content width that goes edge to edge as per the screen size.
In a fluid grid, columns either grow or shrink to adapt to the available space.
Columns
Columns are the imaginary vertical blocks and are used to align the content. We define column widths in percentages (%).
Gap(Gutters, Column Gap)
Column gaps or gutters are the spaces between the columns. Gutters help to separate the content. We define gutter widths as fixed values.
Margin(Side Margin)
Margins are the space between content and the edges of the screen. We define side margin widths as fixed values that decide the minimum breathing space across every screen size.
Flexible Margin
Flexible margins occupy the remaining space left after composing a grid with columns, gutters, and side margins. The flexible margins change as per different screen sizes.
Typography

In the Typography section, there is a choice of Text Styles suitable for both Desktop and Mobile Design, as well as styles perfectly suited for Inputs and Buttons.

All of the available Typography options in this section also have their Line Height set so they perfectly align to a 4pt Baseline Grid, enabling consistency throughout the Conn’s Design System. The Typography choices are available on Google Fonts.

Example
PRE HEADLINE
8pt

Headline Lorem Ipsum Dolor set Amet Consectetur id Nisi

16pt

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id orci ut nisi laoreet lobortis. Nullam magna dolor, convallis ac euismod a, suscipit quis risus. Pellentesque vulputate lorem in lorem ullamcorper varius ut id mauris. Maecenas a sagittis ligula.

Quisque ante ipsum, tincidunt ut nibh sed, mattis aliquet augue. Pellentesque
vulputate lorem in lorem ullamcorper varius ut id mauris.

16pt
Nunc id orci ut nisi laoreet lobortis.
16pt
  • Nullam magna dolor
  • Convallis ac euismod a
  • Suscipit quis risus
  • Pellentesque vulputate lorem
  • In lorem ullamcorper
16pt

Text link style

Font 1 - Serif (Base)

Lora
.font-semibold
font-weight: 600

abcedfghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

.font-regular
font-weight: 400

abcedfghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

Font 2 - Sans Serif (Secondary)

Open Sans
.font-bold
font-weight:700

abcedfghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

.font-semibold
font-weight:600

abcedfghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

.font-regular
font-weight:400

abcedfghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

Headlines - Base (Serif)
.font-regular
.font-semibold
headline-xl
h1 page titles
font-size: 40px; line-height: 48px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
font-size: 40px; line-height: 48px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
headline-lg
h2 page titles
font-size: 32px; line-height: 40px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
font-size: 32px; line-height: 40px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
headline-md
h3
font-size: 24px; line-height: 32px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
font-size: 24px; line-height: 32px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
headline-sm
h4
font-size: 18px; line-height: 24px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
font-size: 18px; line-height: 24px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
headline-xs
h5
font-size: 16px; line-height: 24px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
font-size: 16px; line-height: 24px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
headline-xxs
h6
font-size: 14px; line-height: 16px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
font-size: 14px; line-height: 16px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
Headlines - Secondary (Sans-Serif)
.font-regular
.font-semibold
headline-xl
h1 page titles
font-size: 40px; line-height: 48px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
font-size: 40px; line-height: 48px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
headline-lg
h2 page titles
font-size: 32px; line-height: 40px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
font-size: 32px; line-height: 40px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
headline-md
h3
font-size: 24px; line-height: 32px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
font-size: 24px; line-height: 32px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
headline-sm
h4
font-size: 18px; line-height: 24px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
font-size: 18px; line-height: 24px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
headline-xs
h5
font-size: 16px; line-height: 24px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
font-size: 16px; line-height: 24px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
headline-xxs
h6
font-size: 14px; line-height: 16px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
font-size: 14px; line-height: 16px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
Text - Body, Paragraph
.font-regular
.font-semibold
text-xl
Paragraph Subheadline
font-size: 24px; line-height: 32px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
font-size: 24px; line-height: 32px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
text-lg
Long-form content (body)
font-size: 18px; line-height: 32px;
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
font-size: 18px; line-height: 32px;
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
text-md
subheadline
font-size: 16px; line-height: 24px;
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
font-size: 16px; line-height: 24px;
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
text-sm
font-size: 14px; line-height: 20px;
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
font-size: 14px; line-height: 20px;
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
text-xs
disclaimer text
font-size: 12px; line-height: 16px;
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
font-size: 12px; line-height: 16px;
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
text-xxs
utility nav links footer copyright
font-size: 10px; line-height: 14px;
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
font-size: 10px; line-height: 14px;
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
Buttons, Links, Labels, Specialty
 font-regularfont-semiboldfont-bold
button-lg
-.text-lg .font-semibold-
button-md
- .text-md .font-semibold-
button-sm
-.text-sm .font-semibold-
p-link
font-size: 16px; line-height: 24px;
Sed ut perspiciatis unde omnis iste natus error sit

:hover
Sed ut perspiciatis unde omnis iste natus error sit

font-size: 16px; line-height: 24px;
Sed ut perspiciatis unde omnis iste natus error sit

:hover
Sed ut perspiciatis unde omnis iste natus error sit
-
font-size: 16px; line-height: 24px;
Sed ut perspiciatis unde omnis iste natus error sit

:hover
Sed ut perspiciatis unde omnis iste natus error sit

font-size: 16px; line-height: 24px;
Sed ut perspiciatis unde omnis iste natus error sit

:hover
Sed ut perspiciatis unde omnis iste natus error sit
p-link-sm
font-size: 14px; line-height: 20px;
Sed ut perspiciatis unde omnis iste natus error sit

:hover
Sed ut perspiciatis unde omnis iste natus error sit

font-size: 14px; line-height: 20px;
Sed ut perspiciatis unde omnis iste natus error sit

:hover
Sed ut perspiciatis unde omnis iste natus error sit
-
font-size: 14px; line-height: 20px;
Sed ut perspiciatis unde omnis iste natus error sit

:hover
Sed ut perspiciatis unde omnis iste natus error sit

font-size: 14px; line-height: 20px;
Sed ut perspiciatis unde omnis iste natus error sit

:hover
Sed ut perspiciatis unde omnis iste natus error sit
p-link-xs
font-size: 12px; line-height: 18px;
Sed ut perspiciatis unde omnis iste natus error sit

:hover
Sed ut perspiciatis unde omnis iste natus error sit

font-size: 12px; line-height: 18px;
Sed ut perspiciatis unde omnis iste natus error sit

:hover
Sed ut perspiciatis unde omnis iste natus error sit
-
font-size: 12px; line-height: 18px;
Sed ut perspiciatis unde omnis iste natus error sit

:hover
Sed ut perspiciatis unde omnis iste natus error sit

font-size: 12px; line-height: 18px;
Sed ut perspiciatis unde omnis iste natus error sit

:hover
Sed ut perspiciatis unde omnis iste natus error sit
label-lg
- -
font-size: 18px; line-height: 20px;
Sed ut perspiciatis unde omnis iste natus error sit
label-md
- -
font-size: 16px; line-height: 20px;
Sed ut perspiciatis unde omnis iste natus error sit
label-sm
- -
font-size: 14px; line-height: 16px;
Sed ut perspiciatis unde omnis iste natus error sit
all-caps-title-sm
-
-
font-size: 14px; line-height: 16px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
all-caps-title-xs
-
-
font-size: 12px; line-height: 16px;
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.

Effects

Opacity

Black

To be used on light backgrounds

Aa
black 90%
Aa
black 80%
Aa
black 70%
Aa
black 60%
Aa
balck 50%
Aa
black 40%
Aa
black 30%
Aa
black 20%
Aa
black 10%
Aa
black 5%
Aa
black 1%

White

To be used on dark backgrounds

Aa
white 90%
Aa
white 80%
Aa
white 70%
Aa
white 60%
Aa
white 50%
Aa
white 40%
Aa
white 30%
Aa
white 20%
Aa
white 10%
Aa
white 5%
Aa
white 1%

Gradients

Black

Aa
top-dark
Aa
bottom-dark
Aa
left-dark
Aa
right-dark
Aa
top-left-dark
Aa
top-right-dark
Aa
bottom-left-dark
Aa
bottom-right-dark

White

Aa
top-light
Aa
bottom-light
Aa
gradient-left-light
Aa
right-light
Aa
top-left-light
Aa
top-right-light
Aa
bottom-left-light
Aa
bottom-right-light

Box-Shadow

level-1

level-4

level-8

level-16
    Should be used for:
  • backgrounds for modules, cards, tooltip hover
    Should be used for:
  • backgrounds for dropdowns, interior left nav & filters, in-line alerts
    Should be used for:
  • backgrounds for global header (on scroll), tooltip, content switcher
    Should be used for:
  • backgrounds for button hover state, Desktop droor, Marketing Photos

level-24

level4-up
    Should be used for:
  • backgrounds for modals, alert banners, alert toasts
    Should be used for:
  • horizontal sticky elements (sticky ATC button, etc.)

Box-Shadow Styles

error glow

active form

Border

.border-1

.border-2

.border-4
    1px - Orientation: Inside
    Should be used for:
  • form fields, cards, buttons, boarders, dividers, lines, check box, radio button, link, and so on
    2px - Orientation: Inside
    4px - Orientation: Outside
  • Should be used for Focus state

Border Styles

.notify-border aka focus
Icons Utility & Pictograms

Utility (<24px)

- fill: hover state

Sourced from: https://remixicon.com/

Pictograms (>32px)

- fill: hover state

Custom, hand-made icons
icon_class_name 16px 24px 32px 48px 64px
add_box
alert
apple
arrow_carrot_down
arrow_carrot_up
arrow_carrot_down_s
arrow_carrot_up_s
arrow_circle_left
arrow_circle_right
arrow_down
arrow_left
arrow_right
arrow_up
arrow_return
arrow_tail_down
arrow_tail_left
arrow_tail_right
arrow_tail_up
arrow_tail_right_up
arrow_tail_left_up
article
asterisk
bank
bank_card
bank_card_2
base_station
bill
box
calendar
car
cart
chat
chat_double
chat_representative
chat_rounded
chat_rounded_smile_2
chat_rounded_smile_3
chat_sharp_1
chat_sharp_add
chat_sharp_typing
checkbox_blank
checkbox_selected
checkmark
checkmark_circle
close
close_circle
coin_diamond
coin_hand
cursor
device_cellphone
device_computer
device_smartphone
device_tablet
device_tv
diamond
dollar_circle
edit
emotion
emotion_happy
emotion_normal
emotion_unhappy
error_warning
external_link
eye_hide
eye_show
facebook
file_history
file_upload
filter
find_replace
flag
folder
google
hand_heart
haulaway
heart
home
image
image_add
info
instagram
layout
layout_grid
layout_masonry
lightning
link
list_check
lock
magic_wand
mail
mail_add
map_pin
map_pin_add
media_circle_play
media_circle_stop
media_skip_back
media_skip_forward
media_volume_mute
media_volume_up
menu
minus
minus_circle
money_dollar_box
money_dollar_coins
money_dollar_currency
money_dollar_exchange
more_dots
number_0
number_1
number_2
number_3
number_4
number_5
number_6
number_7
number_8
number_9
paypal
pencil_ruler
phone
pinterest
plus
plus_circle
price-tag
printer
question
radio_button_selected
robot
search
search_heart
settings
settings_gear
share
shield_lock
shield_secure_payment
shield_star
shopping_bag
sidebar
star
star_half
star_smile
store
store_2
thumbs_up
time
trash
truck_delivery
truck_delivery_next_day
twitter
upload
user_abstract
user_admin
user_contacts
user_follow
user_group
user_profile
user_search
wallet
wechat
youtube