Styleguide

Documentation and examples for CoreUI Base styles, including colors, typography, and more.

Color pallete

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in scss/_bootstrap-variables.scss file.

Primary Color
HEX:#20a8d8
RGB:#20a8d8
CMYK:#20a8d8
CSS:--primary
Secondary Color
HEX: #a4b7c1
Success Color
HEX: #4dbd74
Danger Color
HEX: #f86c6b
Warning Color
HEX: #ffc107
Info Color
HEX: #63c2de
Light Color
HEX: #f0f3f5
Dark Color
HEX: #29363d

Grays

An expansive set of gray variables and a Sass map in scss/_bootstrap-variables.scss for consistent shades of gray across your project.

Gray 100 Color
HEX: #f0f3f
Gray 200 Color
HEX: #c2cfd6
Gray 300 Color
HEX: #a4b7c1
Gray 400 Color
HEX: #869fac
Gray 500 Color
HEX: #678898
Gray 600 Color
HEX: #536c79
Gray 700 Color
HEX: #3e515b
Gray 800 Color
HEX: #29363d
Gray 900 Color
HEX: #151b1e

Typography

Typography is used to create clear hierarchies, useful organizations, and purposeful alignments that guide users through the product and experience. It is the core structure of any well designed interface.

Heading 1
AaBbCcDd
Font size:2.1875rem
Font weight:500
Line height:1.2
Heading 2
AaBbCcDd
Font size:1.75rem
Font weight:500
Line height:1.2
Heading 3
AaBbCcDd
Font size:1.53125rem
Font weight:500
Line height:1.2
Heading 4
AaBbCcDd
Font size:1.3125rem
Font weight:500
Line height:1.2
Heading 5
AaBbCcDd
Font size:1.09375rem
Font weight:500
Line height:1.2
Heading 6
AaBbCcDd
Font size:0.875rem
Font weight:500
Line height:1.2