Styleguide
Typography
Typescale
Montserrat
.text-title
Title
.text-title .emphasized
Title
.h1
Heading 1
.h1.emphasized
Heading 1
.h2
Heading 2
.h2.emphasized
Heading 2
.h3
Heading 3
.h3.emphasized
Heading 3
.h4
Heading 4
.h4.emphasized
Heading 4
.h5
Heading 5
.h5.emphasized
Heading 5
.h6
Heading 6
.h6.emphasized
Heading 6
.text-paragraph
Paragraph
.text-paragraph.emphasized
Paragraph
.text-action-1
Action 1
.text-action-1.emphasized
Action 1
.text-action-2
Action 2
.text-action-2.emphasized
Action 2
.text-action-2
Action 2
.text-action-2.emphasized
Action 2
.text-footnote
Footnote
.text-footnote.emphasized
Footnote
.text-caption
Caption
.text-caption.emphasized
Caption
.text-overline
Overline
.text-overline.emphasized
Overline
Colors
Primary
How to (Examples):
class: text-primary-500, bg-primary-500
sass: map_get($primary_colors, 500)
primary-50
#F5FAF7
$solid-colors: "primary", "50"
primary-100
#CAE3D4
$solid-colors: "primary", "100"
primary-200
#94C7AA
$solid-colors: "primary", "200"
primary-300
#63AB83
$solid-colors: "primary", "300"
primary-400
#32905B
$solid-colors: "primary", "400"
primary-500
#007734
$solid-colors: "primary", "500"
primary-600
#075A2B
$solid-colors: "primary", "600"
primary-700
#0B4223
$solid-colors: "primary", "700"
primary-800
#0C2D1B
$solid-colors: "primary", "800"
primary-900
#0B1B12
$solid-colors: "primary", "900"
primary-950
#09130D
$solid-colors: "primary", "950"
Secondary
How to (Examples):
class: text-secondary-500, bg-secondary-500
sass: map_get($secondary_colors, 500)
secondary-50
#F4FBF5
$solid-colors: "secondary", "50"
secondary-100
#CDEAD0
$solid-colors: "secondary", "100"
secondary-200
#A1D8A7
$solid-colors: "secondary", "200"
secondary-300
#76C680
$solid-colors: "secondary", "300"
secondary-400
#4CB558
$solid-colors: "secondary", "400"
secondary-500
#1FA22E
$solid-colors: "secondary", "500"
secondary-600
#227F2D
$solid-colors: "secondary", "600"
secondary-700
#215F28
$solid-colors: "secondary", "700"
secondary-800
#1D4221
$solid-colors: "secondary", "800"
secondary-900
#162818
$solid-colors: "secondary", "900"
secondary-950
#111C13
$solid-colors: "secondary", "950"
Agriculture
How to (Examples):
class: text-agriculture-500, bg-agriculture-500
sass: map_get($agriculture_colors, 500)
agriculture-50
#F4FBF5
$solid-colors: "agriculture", "50"
agriculture-100
#CDEAD0
$solid-colors: "agriculture", "100"
agriculture-200
#A1D8A7
$solid-colors: "agriculture", "200"
agriculture-300
#7FDE7F
$solid-colors: "agriculture", "300"
agriculture-400
#5BD75B
$solid-colors: "agriculture", "400"
agriculture-500
#38D038
$solid-colors: "agriculture", "500"
agriculture-600
#30B730
$solid-colors: "agriculture", "600"
agriculture-700
#279F27
$solid-colors: "agriculture", "700"
agriculture-800
#1F871F
$solid-colors: "agriculture", "800"
agriculture-900
#155715
$solid-colors: "agriculture", "900"
agriculture-950
#19211A
$solid-colors: "agriculture", "950"
Otr
How to (Examples):
class: text-otr-500, bg-otr-500
sass: map_get($otr_colors, 500)
otr-50
#F5F3EB
$solid-colors: "otr", "50"
otr-100
#EAE7D6
$solid-colors: "otr", "100"
otr-200
#D6CEAD
$solid-colors: "otr", "200"
otr-300
#C1B684
$solid-colors: "otr", "300"
otr-400
#AD9D5B
$solid-colors: "otr", "400"
otr-500
#988532
$solid-colors: "otr", "500"
otr-600
#796C30
$solid-colors: "otr", "600"
otr-700
#5B522B
$solid-colors: "otr", "700"
otr-800
#403B24
$solid-colors: "otr", "800"
otr-900
#28251A
$solid-colors: "otr", "900"
otr-950
#1C1B14
$solid-colors: "otr", "950"
Industrial
How to (Examples):
class: text-industrial-500, bg-industrial-500
sass: map_get($industrial_colors, 500)
industrial-50
#EFF0F1
$solid-colors: "industrial", "50"
industrial-100
#DEE1E2
$solid-colors: "industrial", "100"
industrial-200
#BDC2C6
$solid-colors: "industrial", "200"
industrial-300
#9DA4A9
$solid-colors: "industrial", "300"
industrial-400
#7C858D
$solid-colors: "industrial", "400"
industrial-500
#5B6770
$solid-colors: "industrial", "500"
industrial-600
#4D565C
$solid-colors: "industrial", "600"
industrial-700
#3F4448
$solid-colors: "industrial", "700"
industrial-800
#2F3235
$solid-colors: "industrial", "800"
industrial-900
#1F2122
$solid-colors: "industrial", "900"
industrial-950
#171819
$solid-colors: "industrial", "950"
Tbr
How to (Examples):
class: text-tbr-500, bg-tbr-500
sass: map_get($tbr_colors, 500)
tbr-50
#EFF0F1
$solid-colors: "tbr", "50"
tbr-100
#DEE1E2
$solid-colors: "tbr", "100"
tbr-200
#BDC2C6
$solid-colors: "tbr", "200"
tbr-300
#9DA4A9
$solid-colors: "tbr", "300"
tbr-400
#7C858D
$solid-colors: "tbr", "400"
tbr-500
#5B6770
$solid-colors: "tbr", "500"
tbr-600
#4D565C
$solid-colors: "tbr", "600"
tbr-700
#3F4448
$solid-colors: "tbr", "700"
tbr-800
#2F3235
$solid-colors: "tbr", "800"
tbr-900
#1F2122
$solid-colors: "tbr", "900"
tbr-950
#171819
$solid-colors: "tbr", "950"
Two wheeler
How to (Examples):
class: text-two-wheeler-500, bg-two-wheeler-500
sass: map_get($two_wheeler_colors, 500)
two wheeler-50
#F4FBF5
$solid-colors: "two-wheeler", "50"
two wheeler-100
#CDEAD0
$solid-colors: "two-wheeler", "100"
two wheeler-200
#A1D8A7
$solid-colors: "two-wheeler", "200"
two wheeler-300
#7FDE7F
$solid-colors: "two-wheeler", "300"
two wheeler-400
#5BD75B
$solid-colors: "two-wheeler", "400"
two wheeler-500
#38D038
$solid-colors: "two-wheeler", "500"
two wheeler-600
#30B730
$solid-colors: "two-wheeler", "600"
two wheeler-700
#279F27
$solid-colors: "two-wheeler", "700"
two wheeler-800
#1F871F
$solid-colors: "two-wheeler", "800"
two wheeler-900
#155715
$solid-colors: "two-wheeler", "900"
two wheeler-950
#19211A
$solid-colors: "two-wheeler", "950"
Passengers
How to (Examples):
class: text-passengers-500, bg-passengers-500
sass: map_get($passengers_colors, 500)
passengers-50
#F4FBF5
$solid-colors: "passengers", "50"
passengers-100
#CDEAD0
$solid-colors: "passengers", "100"
passengers-200
#A1D8A7
$solid-colors: "passengers", "200"
passengers-300
#7FDE7F
$solid-colors: "passengers", "300"
passengers-400
#5BD75B
$solid-colors: "passengers", "400"
passengers-500
#38D038
$solid-colors: "passengers", "500"
passengers-600
#30B730
$solid-colors: "passengers", "600"
passengers-700
#279F27
$solid-colors: "passengers", "700"
passengers-800
#1F871F
$solid-colors: "passengers", "800"
passengers-900
#155715
$solid-colors: "passengers", "900"
passengers-950
#19211A
$solid-colors: "passengers", "950"
Success
How to (Examples):
class: text-success-500, bg-success-500
sass: map_get($success_colors, 500)
success-50
#EAF8EA
$solid-colors: "success", "50"
success-100
#C6EFC6
$solid-colors: "success", "100"
success-200
#A2E7A2
$solid-colors: "success", "200"
success-300
#7FDE7F
$solid-colors: "success", "300"
success-400
#5BD75B
$solid-colors: "success", "400"
success-500
#38D038
$solid-colors: "success", "500"
success-600
#30B730
$solid-colors: "success", "600"
success-700
#279F27
$solid-colors: "success", "700"
success-800
#1F871F
$solid-colors: "success", "800"
success-900
#155715
$solid-colors: "success", "900"
success-950
#19211A
$solid-colors: "success", "950"
Info
How to (Examples):
class: text-info-500, bg-info-500
sass: map_get($info_colors, 500)
info-50
#E8F5FE
$solid-colors: "info", "50"
info-100
#D1EAFD
$solid-colors: "info", "100"
info-200
#A3D6FA
$solid-colors: "info", "200"
info-300
#74C1F8
$solid-colors: "info", "300"
info-400
#46ADF5
$solid-colors: "info", "400"
info-500
#1898F3
$solid-colors: "info", "500"
info-600
#197CC3
$solid-colors: "info", "600"
info-700
#206190
$solid-colors: "info", "700"
info-800
#204662
$solid-colors: "info", "800"
info-900
#1A2D3B
$solid-colors: "info", "900"
info-950
#152129
$solid-colors: "info", "950"
Danger
How to (Examples):
class: text-danger-500, bg-danger-500
sass: map_get($danger_colors, 500)
danger-50
#FEECEB
$solid-colors: "danger", "50"
danger-100
#FDD9D7
$solid-colors: "danger", "100"
danger-200
#FBB3AF
$solid-colors: "danger", "200"
danger-300
#F98E86
$solid-colors: "danger", "300"
danger-400
#F7685E
$solid-colors: "danger", "400"
danger-500
#F54236
$solid-colors: "danger", "500"
danger-600
#DE291C
$solid-colors: "danger", "600"
danger-700
#A42C23
$solid-colors: "danger", "700"
danger-800
#702924
$solid-colors: "danger", "800"
danger-900
#43201E
$solid-colors: "danger", "900"
danger-950
#2F1A18
$solid-colors: "danger", "950"
Warning
How to (Examples):
class: text-warning-500, bg-warning-500
sass: map_get($warning_colors, 500)
warning-50
#FFF9E6
$solid-colors: "warning", "50"
warning-100
#FFF2CD
$solid-colors: "warning", "100"
warning-200
#FFE59C
$solid-colors: "warning", "200"
warning-300
#FFD96A
$solid-colors: "warning", "300"
warning-400
#FFCC39
$solid-colors: "warning", "400"
warning-500
#FFBF07
$solid-colors: "warning", "500"
warning-600
#E6B800
$solid-colors: "warning", "600"
warning-700
#937419
$solid-colors: "warning", "700"
warning-800
#64521C
$solid-colors: "warning", "800"
warning-900
#3B3218
$solid-colors: "warning", "900"
warning-950
#292414
$solid-colors: "warning", "950"
Neutral colors
How to (Examples):
class: text-neutral-colors-500, bg-neutral-colors-500
sass: map_get($neutral_colors_colors, 500)
neutral colors-50
#FAFAFA
$solid-colors: "neutral-colors", "50"
neutral colors-100
#EBEBEB
$solid-colors: "neutral-colors", "100"
neutral colors-200
#D1D1D1
$solid-colors: "neutral-colors", "200"
neutral colors-300
#B5B5B5
$solid-colors: "neutral-colors", "300"
neutral colors-400
#999999
$solid-colors: "neutral-colors", "400"
neutral colors-500
#7D7D7D
$solid-colors: "neutral-colors", "500"
neutral colors-600
#616161
$solid-colors: "neutral-colors", "600"
neutral colors-700
#454545
$solid-colors: "neutral-colors", "700"
neutral colors-800
#2E2E2E
$solid-colors: "neutral-colors", "800"
neutral colors-900
#2E2E2E
$solid-colors: "neutral-colors", "900"
neutral colors-950
#0F0F0F
$solid-colors: "neutral-colors", "950"
Gray
How to (Examples):
class: text-gray-500, bg-gray-500
sass: $gray-500
gray-100
#f8f9fa
$grays: "100"
gray-200
#e9ecef
$grays: "200"
gray-300
#dee2e6
$grays: "300"
gray-400
#ced4da
$grays: "400"
gray-500
#adb5bd
$grays: "500"
gray-600
#6c757d
$grays: "600"
gray-700
#495057
$grays: "700"
gray-800
#343a40
$grays: "800"
gray-900
#212529
$grays: "900"
Neutrals (Black & White)
white
#FFFFFF
$white
black
#000000
$black
dark
#1F1F1F
$dark ($neutral-01)
Primary Opacity
How to (Examples):
class: text-primary-o-32, bg-primary-o-32
sass: map_get($primary_opacity, 32)
primary-o-100
rgba(0, 119, 52, 1)
$opacity-colors: "primary", "100"
primary-o-80
rgba(0, 119, 52, 0.8)
$opacity-colors: "primary", "80"
primary-o-64
rgba(0, 119, 52, 0.64)
$opacity-colors: "primary", "64"
primary-o-40
rgba(0, 119, 52, 0.4)
$opacity-colors: "primary", "40"
primary-o-32
rgba(0, 119, 52, 0.32)
$opacity-colors: "primary", "32"
primary-o-16
rgba(0, 119, 52, 0.16)
$opacity-colors: "primary", "16"
primary-o-8
rgba(0, 119, 52, 0.08)
$opacity-colors: "primary", "8"
primary-o-4
rgba(0, 119, 52, 0.04)
$opacity-colors: "primary", "4"
Black Opacity
How to (Examples):
class: text-black-o-32, bg-black-o-32
sass: map_get($black_opacity, 32)
black-o-100
rgba(0, 0, 0, 1)
$opacity-colors: "black", "100"
black-o-80
rgba(0, 0, 0, 0.8)
$opacity-colors: "black", "80"
black-o-64
rgba(0, 0, 0, 0.64)
$opacity-colors: "black", "64"
black-o-40
rgba(0, 0, 0, 0.4)
$opacity-colors: "black", "40"
black-o-32
rgba(0, 0, 0, 0.32)
$opacity-colors: "black", "32"
black-o-16
rgba(0, 0, 0, 0.16)
$opacity-colors: "black", "16"
black-o-8
rgba(0, 0, 0, 0.08)
$opacity-colors: "black", "8"
black-o-4
rgba(0, 0, 0, 0.04)
$opacity-colors: "black", "4"
Dark Opacity
How to (Examples):
class: text-dark-o-32, bg-dark-o-32
sass: map_get($dark_opacity, 32)
dark-o-100
rgba(31, 31, 31, 1)
$opacity-colors: "dark", "100"
dark-o-80
rgba(31, 31, 31, 0.8)
$opacity-colors: "dark", "80"
dark-o-64
rgba(31, 31, 31, 0.64)
$opacity-colors: "dark", "64"
dark-o-40
rgba(31, 31, 31, 0.4)
$opacity-colors: "dark", "40"
dark-o-32
rgba(31, 31, 31, 0.32)
$opacity-colors: "dark", "32"
dark-o-16
rgba(31, 31, 31, 0.16)
$opacity-colors: "dark", "16"
dark-o-8
rgba(31, 31, 31, 0.08)
$opacity-colors: "dark", "8"
dark-o-4
rgba(31, 31, 31, 0.04)
$opacity-colors: "dark", "4"
White Opacity
How to (Examples):
class: text-white-o-32, bg-white-o-32
sass: map_get($white_opacity, 32)
white-o-100
rgba(255, 255, 255, 1)
$opacity-colors: "white", "100"
white-o-80
rgba(255, 255, 255, 0.8)
$opacity-colors: "white", "80"
white-o-64
rgba(255, 255, 255, 0.64)
$opacity-colors: "white", "64"
white-o-40
rgba(255, 255, 255, 0.4)
$opacity-colors: "white", "40"
white-o-32
rgba(255, 255, 255, 0.32)
$opacity-colors: "white", "32"
white-o-16
rgba(255, 255, 255, 0.16)
$opacity-colors: "white", "16"
white-o-8
rgba(255, 255, 255, 0.08)
$opacity-colors: "white", "8"
white-o-4
rgba(255, 255, 255, 0.04)
$opacity-colors: "white", "4"
Backgrounds
Dark
$neutral-900
Medium
$neutral-700
Subtle
$neutral-50
Light
$white
Surfaces
Dark
$neutral-900
Medium
$neutral-700
Subtle
$neutral-50
Light
$white
Primary
$primary-50
Overlays
Dark gradient
How to (Examples):
class: bg-linear-dark-80
sass: @include linear-gradient("dark", 80);
dark-100
linear-gradient(180deg, rgba(26, 26, 26, 0.32) 0%, #1A1A1A 100%)
dark-80
linear-gradient(180deg, rgba(26, 26, 26, 0.16) 0%, rgba(26, 26, 26, 0.80) 100%)
dark-64
linear-gradient(180deg, rgba(26, 26, 26, 0.08) 0%, rgba(26, 26, 26, 0.64) 100%)
dark-40
linear-gradient(180deg, rgba(26, 26, 26, 0.08) 0%, rgba(26, 26, 26, 0.40) 100%)
dark-32
linear-gradient(180deg, rgba(26, 26, 26, 0.08) 0%, rgba(26, 26, 26, 0.32) 100%)
dark-16
linear-gradient(180deg, rgba(26, 26, 26, 0.04) 0%, rgba(26, 26, 26, 0.16) 100%)
dark-8
linear-gradient(180deg, rgba(26, 26, 26, 0.00) 0%, rgba(26, 26, 26, 0.08) 100%)
dark-4
linear-gradient(180deg, rgba(26, 26, 26, 0.00) 0%, rgba(26, 26, 26, 0.04) 100%)
Primary gradient
How to (Examples):
class: bg-linear-primary-80
sass: @include linear-gradient("primary", 80);
primary-100
linear-gradient(180deg, rgba(0, 119, 52, 0.32) 0%, #007734 100%)
primary-80
linear-gradient(180deg, rgba(0, 119, 52, 0.16) 0%, rgba(0, 119, 52, 0.80) 100%)
primary-64
linear-gradient(180deg, rgba(0, 119, 52, 0.08) 0%, rgba(0, 119, 52, 0.64) 100%)
primary-40
linear-gradient(180deg, rgba(0, 119, 52, 0.08) 0%, rgba(0, 119, 52, 0.40) 100%)
primary-32
linear-gradient(180deg, rgba(0, 119, 52, 0.08) 0%, rgba(0, 119, 52, 0.32) 100%)
primary-16
linear-gradient(180deg, rgba(0, 119, 52, 0.04) 0%, rgba(0, 119, 52, 0.16) 100%)
primary-8
linear-gradient(180deg, rgba(0, 119, 52, 0.00) 0%, rgba(0, 119, 52, 0.08) 100%)
primary-4
linear-gradient(180deg, rgba(0, 119, 52, 0.00) 0%, rgba(0, 119, 52, 0.04) 100%)
Secondary gradient
How to (Examples):
class: bg-linear-secondary-80
sass: @include linear-gradient("secondary", 80);
secondary-100
linear-gradient(180deg, rgba(31, 162, 46, 0.32) 0%, #1FA22E 100%)
secondary-80
linear-gradient(180deg, rgba(31, 162, 46, 0.16) 0%, rgba(31, 162, 46, 0.80) 100%)
secondary-64
linear-gradient(180deg, rgba(31, 162, 46, 0.08) 0%, rgba(31, 162, 46, 0.64) 100%)
secondary-40
linear-gradient(180deg, rgba(31, 162, 46, 0.08) 0%, rgba(31, 162, 46, 0.40) 100%)
secondary-32
linear-gradient(180deg, rgba(31, 162, 46, 0.08) 0%, rgba(31, 162, 46, 0.32) 100%)
secondary-16
linear-gradient(180deg, rgba(31, 162, 46, 0.04) 0%, rgba(31, 162, 46, 0.16) 100%)
secondary-8
linear-gradient(180deg, rgba(31, 162, 46, 0.00) 0%, rgba(31, 162, 46, 0.08) 100%)
secondary-4
linear-gradient(180deg, rgba(31, 162, 46, 0.00) 0%, rgba(31, 162, 46, 0.04) 100%)
Agriculture gradient
How to (Examples):
class: bg-linear-agriculture-80
sass: @include linear-gradient("agriculture", 80);
agriculture-100
linear-gradient(180deg, rgba(56, 208, 56, 0.32) 0%, #38D038 100%)
agriculture-80
linear-gradient(180deg, rgba(56, 208, 56, 0.16) 0%, rgba(56, 208, 56, 0.80) 100%)
agriculture-64
linear-gradient(180deg, rgba(56, 208, 56, 0.08) 0%, rgba(56, 208, 56, 0.64) 100%)
agriculture-40
linear-gradient(180deg, rgba(56, 208, 56, 0.08) 0%, rgba(56, 208, 56, 0.40) 100%)
agriculture-32
linear-gradient(180deg, rgba(56, 208, 56, 0.08) 0%, rgba(56, 208, 56, 0.32) 100%)
agriculture-16
linear-gradient(180deg, rgba(56, 208, 56, 0.04) 0%, rgba(56, 208, 56, 0.16) 100%)
agriculture-8
linear-gradient(180deg, rgba(56, 208, 56, 0.00) 0%, rgba(56, 208, 56, 0.08) 100%)
agriculture-4
linear-gradient(180deg, rgba(56, 208, 56, 0.00) 0%, rgba(56, 208, 56, 0.04) 100%)
Otr gradient
How to (Examples):
class: bg-linear-otr-80
sass: @include linear-gradient("otr", 80);
otr-100
linear-gradient(180deg, rgba(152, 133, 50, 0.32) 0%, #988532 100%)
otr-80
linear-gradient(180deg, rgba(152, 133, 50, 0.16) 0%, rgba(152, 133, 50, 0.80) 100%)
otr-64
linear-gradient(180deg, rgba(152, 133, 50, 0.08) 0%, rgba(152, 133, 50, 0.64) 100%)
otr-40
linear-gradient(180deg, rgba(152, 133, 50, 0.08) 0%, rgba(152, 133, 50, 0.40) 100%)
otr-32
linear-gradient(180deg, rgba(152, 133, 50, 0.08) 0%, rgba(152, 133, 50, 0.32) 100%)
otr-16
linear-gradient(180deg, rgba(152, 133, 50, 0.04) 0%, rgba(152, 133, 50, 0.16) 100%)
otr-8
linear-gradient(180deg, rgba(152, 133, 50, 0.00) 0%, rgba(152, 133, 50, 0.08) 100%)
otr-4
linear-gradient(180deg, rgba(152, 133, 50, 0.00) 0%, rgba(152, 133, 50, 0.04) 100%)
Industrial gradient
How to (Examples):
class: bg-linear-industrial-80
sass: @include linear-gradient("industrial", 80);
industrial-100
linear-gradient(180deg, rgba(91, 103, 112, 0.32) 0%, #5B6770 100%)
industrial-80
linear-gradient(180deg, rgba(91, 103, 112, 0.16) 0%, rgba(91, 103, 112, 0.80) 100%)
industrial-64
linear-gradient(180deg, rgba(91, 103, 112, 0.08) 0%, rgba(91, 103, 112, 0.64) 100%)
industrial-40
linear-gradient(180deg, rgba(91, 103, 112, 0.08) 0%, rgba(91, 103, 112, 0.40) 100%)
industrial-32
linear-gradient(180deg, rgba(91, 103, 112, 0.08) 0%, rgba(91, 103, 112, 0.32) 100%)
industrial-16
linear-gradient(180deg, rgba(91, 103, 112, 0.04) 0%, rgba(91, 103, 112, 0.16) 100%)
industrial-8
linear-gradient(180deg, rgba(91, 103, 112, 0.00) 0%, rgba(91, 103, 112, 0.08) 100%)
industrial-4
linear-gradient(180deg, rgba(91, 103, 112, 0.00) 0%, rgba(91, 103, 112, 0.04) 100%)
Tbr gradient
How to (Examples):
class: bg-linear-tbr-80
sass: @include linear-gradient("tbr", 80);
tbr-100
linear-gradient(180deg, rgba(91, 103, 112, 0.32) 0%, #5B6770 100%)
tbr-80
linear-gradient(180deg, rgba(91, 103, 112, 0.16) 0%, rgba(91, 103, 112, 0.80) 100%)
tbr-64
linear-gradient(180deg, rgba(91, 103, 112, 0.08) 0%, rgba(91, 103, 112, 0.64) 100%)
tbr-40
linear-gradient(180deg, rgba(91, 103, 112, 0.08) 0%, rgba(91, 103, 112, 0.40) 100%)
tbr-32
linear-gradient(180deg, rgba(91, 103, 112, 0.08) 0%, rgba(91, 103, 112, 0.32) 100%)
tbr-16
linear-gradient(180deg, rgba(91, 103, 112, 0.04) 0%, rgba(91, 103, 112, 0.16) 100%)
tbr-8
linear-gradient(180deg, rgba(91, 103, 112, 0.00) 0%, rgba(91, 103, 112, 0.08) 100%)
tbr-4
linear-gradient(180deg, rgba(91, 103, 112, 0.00) 0%, rgba(91, 103, 112, 0.04) 100%)
Two wheeler gradient
How to (Examples):
class: bg-linear-two-wheeler-80
sass: @include linear-gradient("two-wheeler", 80);
two wheeler-100
linear-gradient(180deg, rgba(56, 208, 56, 0.32) 0%, #38D038 100%)
two wheeler-80
linear-gradient(180deg, rgba(56, 208, 56, 0.16) 0%, rgba(56, 208, 56, 0.80) 100%)
two wheeler-64
linear-gradient(180deg, rgba(56, 208, 56, 0.08) 0%, rgba(56, 208, 56, 0.64) 100%)
two wheeler-40
linear-gradient(180deg, rgba(56, 208, 56, 0.08) 0%, rgba(56, 208, 56, 0.40) 100%)
two wheeler-32
linear-gradient(180deg, rgba(56, 208, 56, 0.08) 0%, rgba(56, 208, 56, 0.32) 100%)
two wheeler-16
linear-gradient(180deg, rgba(56, 208, 56, 0.04) 0%, rgba(56, 208, 56, 0.16) 100%)
two wheeler-8
linear-gradient(180deg, rgba(56, 208, 56, 0.00) 0%, rgba(56, 208, 56, 0.08) 100%)
two wheeler-4
linear-gradient(180deg, rgba(56, 208, 56, 0.00) 0%, rgba(56, 208, 56, 0.04) 100%)
Passengers gradient
How to (Examples):
class: bg-linear-passengers-80
sass: @include linear-gradient("passengers", 80);
passengers-100
linear-gradient(180deg, rgba(56, 208, 56, 0.32) 0%, #38D038 100%)
passengers-80
linear-gradient(180deg, rgba(56, 208, 56, 0.16) 0%, rgba(56, 208, 56, 0.80) 100%)
passengers-64
linear-gradient(180deg, rgba(56, 208, 56, 0.08) 0%, rgba(56, 208, 56, 0.64) 100%)
passengers-40
linear-gradient(180deg, rgba(56, 208, 56, 0.08) 0%, rgba(56, 208, 56, 0.40) 100%)
passengers-32
linear-gradient(180deg, rgba(56, 208, 56, 0.08) 0%, rgba(56, 208, 56, 0.32) 100%)
passengers-16
linear-gradient(180deg, rgba(56, 208, 56, 0.04) 0%, rgba(56, 208, 56, 0.16) 100%)
passengers-8
linear-gradient(180deg, rgba(56, 208, 56, 0.00) 0%, rgba(56, 208, 56, 0.08) 100%)
passengers-4
linear-gradient(180deg, rgba(56, 208, 56, 0.00) 0%, rgba(56, 208, 56, 0.04) 100%)
Flat Dark
Dark
dark-80
#343a40
dark-64
#495057
dark-40
#6c757d
dark-32
#adb5bd
dark-16
#ced4da
dark-8
#dee2e6
dark-4
#e9ecef
Small Buttons
Secondary btn
BTN onDark
BTN Blurred
Forms
Help Text
Error text!
Textarea/Select
Controls
Facebook
Select your area of interest and explore all BKT Tires social channels.