13 / 05 / 2024
v.2.0.0

Web System

Colors - Background

ℹ️ Use Figma plugin and paste it
Into parent element .styleguide-colors_main-wrap
.is-bg-coral-100
.is-bg-coral-700
.is-bg-coral-900
.is-bg-light-blue-100
.is-bg-light-blue-200
.is-bg-mid-blue-400
.is-bg-mid-blue-500
.is-bg-mid-blue-600
.is-bg-dark-blue-700
.is-bg-dark-blue-800
.is-bg-dark-blue-900
.is-bg-white
.is-bg-light-gray-100
.is-bg-light-gray-200
.is-bg-light-gray-300
.is-bg-dark-gray-600
.is-bg-dark-gray-900
.is-bg-black

Colors - Text

ℹ️ Use Figma plugin and paste it
Into parent element .styleguide-colors_main-wrap
.is-text-coral-100
Color swatch sample
.is-text-coral-700
Color swatch sample
.is-text-coral-900
Color swatch sample
.is-text-light-blue-100
Color swatch sample
.is-text-light-blue-200
Color swatch sample
.is-text-mid-blue-400
Color swatch sample
.is-text-mid-blue-500
Color swatch sample
.is-text-mid-blue-600
Color swatch sample
.is-text-dark-blue-700
Color swatch sample
.is-text-dark-blue-800
Color swatch sample
.is-text-dark-blue-900
Color swatch sample
.is-text-white
Color swatch sample
.is-text-light-gray-100
Color swatch sample
.is-text-light-gray-200
Color swatch sample
.is-text-light-gray-300
Color swatch sample
.is-text-dark-gray-600
Color swatch sample
.is-text-dark-gray-900
Color swatch sample
.is-text-black
Color swatch sample

Stroke

.is-dark-stroke
.is-light-stroke

Typography

.is-h-l

or

h1
Heading Large

<h1>

.is-h-m

or

h2
Heading Medium

<h2>

.is-h-s

or

h3
Heading Small

<h3>

.is-t-l

or

h4
Title Large

<h4>

.is-t-m

or

h5
Title Medium
<h5>
.is-t-s

or

h6
Title Small
<h6>
.is-b-l
Body Large
.is-emphasis
Body Large Emphasis
.is-b-m

or

p
Body Medium

<p>

.is-emphasis
Body Medium Emphasis
.is-b-s
Body Small
.is-emphasis
Body Small Emphasis
.is-caption
Caption
is-h-l-alternate

or

h1
Heading Large
.is-h-m-alternate

or

h2
Heading Medium
.is-h-s-alternate

or

h3
Heading Small
.is-t-m-alternate

or

h5
Title Medium
.is-b-m-alternate

or

p
Body Medium

Buttons

Primary button
.primary-button
Watch Video

Primary action button

.primary-button
Watch Video

Primary action button

Secondary button
.secondary-button
Request a Demo

Primary action button

.secondary-button
Request a Demo

Primary action button

.secondary-button
Request a Demo

Primary action button

Navbar

Footer

This is some text inside of a div block.