Documentation

Colors

cylindo

cylindo-background

rgba(var(--background), 1)

cylindo-foreground

var(--foreground)

cylindo-secondary-text

var(--secondary-text)

integrations

integrations-bar-bg

var(--integrations-bar-bg)

accordion

accordion-row-hover

var(--accordion-row-background-hover)

accordion-row-border

var(--accordion-row-border)

cards

cards-background-color

var(--cards-background)

cards-text-color

var(--thumbs-card-text)

cards-title-color

var(--cards-text-color)

pricing

pricing-main-text

var(--pricing-main-text)

pricing-tooltip-icon

var(--pricing-tooltip-icon)

pricing-dropdown-select-border

var(--pricing-dropdown-select-border)

pricing-dropdown-select-bg

var(--pricing-dropdown-select-bg)

pricing-dropdown-select-text

var(--pricing-dropdown-select-text)

pricing-dropdown-select-bg-disabled

var(--pricing-dropdown-select-bg-disabled)

pricing-dropdown-select-text-disabled

var(--pricing-dropdown-select-text-disabled)

pricing-dropdown-option-text

var(--pricing-dropdown-option-text)

pricing-lcs-upsell-text

var(--pricing-lcs-upsell-text)

pricing-lcs-border

var(--pricing-lcs-border)

pricing-lcs-text

var(--pricing-lcs-text)

pricing-lcs-text-disabled

var(--pricing-lcs-text-disabled)

pricing-sic-text

var(--pricing-sic-text)

pricing-sic-description-text

var(--pricing-sic-description-text)

pricing-simple-ic-text

var(--pricing-simple-ic-text)

pricing-simple-ic-header-text

var(--pricing-simple-ic-header-text)

pricing-simple-ic-btn-text

var(--pricing-simple-ic-btn-text)

pricing-aoc-text

var(--pricing-aoc-text)

pricing-tabs-border

var(--pricing-tabs-border)

pricing-tabs-tab-text

var(--pricing-tabs-tab-text)

pricing-tabs-tab-bg

var(--pricing-tabs-tab-bg)

pricing-tabs-tab-bg-hover

var(--pricing-tabs-tab-bg-hover)

pricing-tabs-tab-border-hover

var(--pricing-tabs-tab-border-hover)

pricing-tabs-active-tab-text

var(--pricing-tabs-active-tab-text)

pricing-tabs-active-tab-bg

var(--pricing-tabs-active-tab-bg)

pricing-tabs-active-tab-border

var(--pricing-tabs-active-tab-border)

pricing-cf-trigger-text

var(--pricing-cf-trigger-text)

pricing-cf-card-border

var(--pricing-cf-card-border)

pricing-ac-sub-title-text

var(--pricing-ac-sub-title-text)

pricing-ac-price-description-text

var(--pricing-ac-price-description-text)

pricing-mc-light-bg

var(--pricing-mc-disabled-light-bg)

pricing-mc-dark-bg

var(--pricing-mc-disabled-dark-bg)

pricing-bc-separator-bg

var(--pricing-bc-separator-bg)

white

white-10

#FFFFFF10

white-45

#FFFFFF45

white-60

#FFFFFF60

white-70

#FFFFFF70

white-80

#FFFFFF80

white-90

#FFFFFF90

white-100

#FFFFFF

white-DEFAULT

#FFFFFF

mono

mono-1

#1C1C1C

mono-2

#272727

mono-3

#3B3B3B

mono-4

#525252

mono-5

#828282

mono-6

#ABABAB

mono-7

#DBDBDB

mono-8

#EDEDED

mono-9

#F6F6F6

utility

utility-cl4

#0DB5FF

utility-bd

#364951

utility-c3

#E1161C

utility-c4

#E74549

utility-cr3

#F3712B

utility-v3

#77B22A

utility-t1

#008C97

utility-t2

#00B0BD

utility-b05

#000e1a

utility-bg2

#27272f

utility-bg9

#f6f6fa

utility-bg45

#696974

utility-bn5

#0090ff

utility-dbg

#001C3C

utility-dpg

#230032

utility-dbrg

#291600

utility-drg

#2F0000

utility-lgf

#7E8A7E99

utility-dgf

#7e8a7e2e

utility-dbf

#1c1c22

utility-dbt

#0E1D3E

utility-dbb

#19272b

utility-bt

#00A1E8A6

utility-or

#ff7800

utility-gf

#78c34a

utility-gt

#4caf4f

utility-gp

#5dbf2c

utility-rp

#cc3332

utility-ccc

#ccc

utility-lgb

#f1f5f9

vr

vr-1

#072261

vr-2

#00358C

vr-3

#2857AF

vr-4

#3E72C1

vr-5

#6591C7

vr-6

#B2C5DE

vr-7

#E5ECF4

co

co-1

#401967

co-2

#401967

co-3

#714AB5

co-4

#8365BA

co-5

#A78DD4

co-6

#DACAF0

co-7

#EFECF4

cy

cy-1

#006971

cy-2

#008C97

cy-3

#00B0BD

cy-4

#4CC8D1

cy-5

#80D8DE

cy-6

#B2E7EB

cy-7

#E5F7F8

s

s-1

#631755

s-2

#85216B

s-3

#9E3988

s-4

#B1609F

s-5

#C588B7

s-6

#E2C3DB

s-7

#F5EBF3

c

c-1

#850305

c-2

#B5161C

c-3

#B5161C

c-4

#E74549

c-5

#FF8284

c-6

#F6B9BB

c-7

#FFE8E8

cr

cr-1

#B12300

cr-2

#DA5300

cr-3

#F3712B

cr-4

#FF8E4E

cr-5

#FFAA7A

cr-6

#FFD4BD

cr-7

#FFD4BD

p

p-1

#C76800

p-2

#ED9300

p-3

#F3B830

p-4

#FFCE4F

p-5

#FFDA80

p-6

#FFEAB5

p-7

#FFF8E6

v

v-1

#3D7800

v-2

#589800

v-3

#77B22A

v-4

#90BF57

v-5

#ACCF81

v-6

#D5E7C0

v-7

#F1F7EA

pl

pl-1

#125D58

pl-2

#127773

pl-3

#12988B

pl-4

#3BA9A1

pl-5

#6CBFB9

pl-6

#B6DFDC

pl-7

#EDFAF9

cl

cl-1

#085982

cl-2

#1681BD

cl-3

#17A2DF

cl-4

#0DB5FF

cl-5

#74D3FC

cl-6

#BAECFF

cl-7

#EBF8FF

en

en-1

#B44600

en-2

#E67800

en-3

#F7941D

en-4

#F8A948

en-5

#F9B869

en-6

#FCD4A5

en-7

#FEF3E6

blueGray

blueGray-1

#1c1c22

blueGray-2

#27272f

blueGray-3

#3b3b43

blueGray-4

#52525a

blueGray-5

#828290

blueGray-6

#ababb6

blueGray-7

#dbdbe0

blueGray-8

#ededf1

blueGray-9

#f6f6fa

blueGray-45

#696974

blueGray-75

#e3e3e7

blueGray-85

#f2f2f7

blueGray-95

#fafafc

Buttons

Small

Primary action Secondary action Text link

Regular

Primary action Secondary action Text link

Large

Primary action Secondary action Text link

Themes

Example title (theme-light)

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat maiores mollitia quia earum reprehenderit quod ex, quae doloremque quis nulla distinctio alias pariatur sapiente corporis cum? Itaque totam officiis illo.

Primary action Secondary action Text link

Example title (theme-dark)

Primary action Secondary action Text link