Relume Library Style Guide

Version 1.2

Typography

HTML Headings
heading-H0

Title H0

All H1 Headings

Title H1

heading-H2

Title H2

All H2 Headings

Title H2

All H3 Headings

Title H3

All H4 Headings

Title H4

heading-H4

Title H4

All H5 Headings
Subtitle H5
All H6 Headings
Subtitle H6
heading-H7
Subtitle H7
Other HTML Tags
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links
All Links
All Block Quotes
Block Quote
All Unordered Lists

  • No bullet list

  • No bullet list

All Unordered Lists

  • No bullet list

  • No bullet list

All Ordered Lists

  1. No bullet list

  2. No bullet list

  3. No bullet list

Text Sizes
text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Weights
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-large (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)

Colors

Les principales couleurs utilisées - Background dégradé - Typo
Deep Blue
White
Haiti
Glossy Pinky 20%
Glossy Pinky
Free Speech Blue
Malibu
Turquoise Blue
Les couleurs secondaires utilisées en background
Glossy Pinky
Free Speech Blue
Malibu
Turquoise Blue
Le dégradé utilisé pour les interactions - Effet au survol
Glassy Gradient
Text Colors
text-color-black
text-color-black
text-color-white
text-color-white
Add pre-made Text Colors
Get access to pre-made Text Colors and paste them below.
View Text Colors
Click and paste Color Palette
Effects
Box Shadows
‍Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
Want to learn how to use shadow classes the Client-first way?
Watch Tutorial
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
UI Elements
Buttons
button
Button
button
is-button-small
Button
button-secondary
button-secondary
is-button-small
button-tertiary
button-tertiary
is-button-small
Button Tertiary
button-link
Button Link
To use on a dark background, simple use the add-on class is-alternate
button
is-alternate
Button
button
is-button-small
is-alternate
Button
button-secondary
is-alternate
Button Secondary
button-secondary
is-button-small
is-alternate
Button Secondary
button-tertiary
is-alternate
button-tertiary
is-button-small
is-alternate
Button Tertiary
button-link
is-alternate
Button Link
Buttons With Icons
button
with-icon
Button
Button
button
is-button-small
with-icon
Button
Button
button-secondary
with-icon
Button
Button
button-secondary
is-button-small
with-icon
Button
Button
button-tertiary
with-icon
Button
Button
button-tertiary
is-button-small
with-icon
Button
Button
button-link
with-icon
Button
Button
Form Elements
field-label
form-input
field-label
form-input
is-text-area
field-label
form-input
is-select-input
form-checkbox
form-checkbox-icon
form-checkbox-label
form-radio
form-radio-icon
form-radio-label
button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons (Image)

icon-xxsmall

icon-xsmall

icon-small

icon-medium

icon-large

icon-xlarge

icon-custom

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

icon-1x1-custom

Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.
Want to learn some tips on using HTML embeds for icons?
Watch Tutorial

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom

Images

image-wrapper-1:1

image-wrapper-4:3

image-wrapper-3:2

image-wrapper-16:9

Additional Classes from latest style guide update (v1.2)
Text Letter Spacings
text-letterspacing-xwide
A Lorem ipsum dolor sit amet
text-letterspacing-wide
A Lorem ipsum dolor sit amet
text-letterspacing-normal
A Lorem ipsum dolor sit amet
text-letterspacing-tight
A Lorem ipsum dolor sit amet
text-letterspacing-xtight
A Lorem ipsum dolor sit amet
Text Line Heights
text-lineheight-xtall
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-tall
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-short
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-xshort
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-none
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Color Samples
Used to create color swatches
Add pre-made Color Samples
Get access to pre-made Color Samples and paste them below.
View Color Samples
Click and paste Color Palette
Background Color
Add pre-made Background Colors
Get access to pre-made Color Palettes and paste them below.
View Background Colors
Click and paste Color Palette
Text Colors
Add pre-made Text Colors
Get access to pre-made Text Colors and paste them below.
View Text Colors
Click and paste Color Palette
Box Shadows
‍Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom