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-example
.is-bg-black-grey-900
.is-bg-white
.is-bg-flow-pink
.is-bg-grey-900
.is-bg-grey-800
.is-bg-grey-700
.is-bg-grey-600
.is-bg-grey-500
.is-bg-grey-400
.is-bg-grey-300
.is-bg-grey-200
.is-bg-grey-100
.is-bg-grey-50
.is-bg-grey-10
.is-bg-purple-900-flow-aubergine
.is-bg-purple-800-flow-dark
.is-bg-purple-700-flow-basic
.is-bg-purple-600
.is-bg-purple-500
.is-bg-purple-400
.is-bg-purple-300
.is-bg-purple-200
.is-bg-purple-100
.is-bg-purple-50
.is-bg-purple-10
.is-bg-flow-lime
.is-bg-flow-lime-300
.is-bg-flow-lime-200

Colors - Text

ℹ️ Use Figma plugin and paste it
Into parent element .styleguide-colors_main-wrap
.is-text-example
Color swatch sample
.is-text-black-grey-900
Color swatch sample
.is-text-white
Color swatch sample
.is-text-flow-pink
Color swatch sample
.is-text-grey-900
Color swatch sample
.is-text-grey-800
Color swatch sample
.is-text-grey-700
Color swatch sample
.is-text-grey-600
Color swatch sample
.is-text-grey-500
Color swatch sample
.is-text-grey-400
Color swatch sample
.is-text-grey-300
Color swatch sample
.is-text-grey-200
Color swatch sample
.is-text-grey-100
Color swatch sample
.is-text-grey-50
Color swatch sample
.is-text-grey-10
Color swatch sample
.is-text-purple-900-flow-aubergine
Color swatch sample
.is-text-purple-800-flow-dark
Color swatch sample
.is-text-purple-700-flow-basic
Color swatch sample
.is-text-purple-600
Color swatch sample
.is-text-purple-500
Color swatch sample
.is-text-purple-400
Color swatch sample
.is-text-purple-300
Color swatch sample
.is-text-purple-200
Color swatch sample
.is-text-purple-100
Color swatch sample
.is-text-purple-50
Color swatch sample
.is-text-purple-10
Color swatch sample
.is-text-flow-lime
Color swatch sample
.is-text-flow-lime-300
Color swatch sample
.is-text-flow-lime-200
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

Buttons

Primary button
.primary-button

Primary action button

.flow-button
Flow button

Primary link button

.primary-button
.is-small

Small primary action button

.primary-button
.is-small

Small primary action button

Secondary button
.secondary-button

Primary action button

.secondary-button
Button

Primary link button

.secondary-button
.is-small
Button

Small primary link button

.secondary-button
.is-small
Button

Small primary link button

Navbar