Theme Colors

.bg-primary

.bg-primary-dark-50

.bg-primary-dark-40

.bg-primary-dark-30

.bg-primary-dark-20

.bg-primary-dark-10

.bg-primary-90

.bg-primary-80

.bg-primary-70

.bg-primary-60

.bg-primary-50

.bg-primary-40

.bg-primary-30

.bg-primary-20

.bg-primary-10

.bg-primary-5

.bg-primary-3

Copy

                                            
                                                <div class="bg-primary">...</div>

.bg-secondary

.bg-secondary-dark-50

.bg-secondary-dark-40

.bg-secondary-dark-30

.bg-secondary-dark-20

.bg-secondary-dark-10

.bg-secondary-90

.bg-secondary-80

.bg-secondary-70

.bg-secondary-60

.bg-secondary-50

.bg-secondary-40

.bg-secondary-30

.bg-secondary-20

.bg-secondary-10

.bg-secondary-5

.bg-secondary-3

Copy

                                            
                                                <div class="bg-secondary">...</div>

.bg-tertiary

.bg-tertiary-dark-50

.bg-tertiary-dark-40

.bg-tertiary-dark-30

.bg-tertiary-dark-20

.bg-tertiary-dark-10

.bg-tertiary-90

.bg-tertiary-80

.bg-tertiary-70

.bg-tertiary-60

.bg-tertiary-50

.bg-tertiary-40

.bg-tertiary-30

.bg-tertiary-20

.bg-tertiary-10

.bg-tertiary-5

.bg-tertiary-3

Copy

                                            
                                                <div class="bg-tertiary">...</div>

.bg-info

.bg-info-dark-50

.bg-info-dark-40

.bg-info-dark-30

.bg-info-dark-20

.bg-info-dark-10

.bg-info-90

.bg-info-80

.bg-info-70

.bg-info-60

.bg-info-50

.bg-info-40

.bg-info-30

.bg-info-20

.bg-info-10

.bg-info-5

.bg-info-3

Copy

                                            
                                                <div class="bg-info">...</div>

.bg-success

.bg-success-dark-50

.bg-success-dark-40

.bg-success-dark-30

.bg-success-dark-20

.bg-success-dark-10

.bg-success-90

.bg-success-80

.bg-success-70

.bg-success-60

.bg-success-50

.bg-success-40

.bg-success-30

.bg-success-20

.bg-success-10

.bg-success-5

.bg-success-3

Copy

                                            
                                                <div class="bg-success">...</div>

.bg-warning

.bg-warning-dark-50

.bg-warning-dark-40

.bg-warning-dark-30

.bg-warning-dark-20

.bg-warning-dark-10

.bg-warning-90

.bg-warning-80

.bg-warning-70

.bg-warning-60

.bg-warning-50

.bg-warning-40

.bg-warning-30

.bg-warning-20

.bg-warning-10

.bg-warning-5

.bg-warning-3

Copy

                                            
                                                <div class="bg-warning">...</div>

.bg-danger

.bg-danger-dark-50

.bg-danger-dark-40

.bg-danger-dark-30

.bg-danger-dark-20

.bg-danger-dark-10

.bg-danger-90

.bg-danger-80

.bg-danger-70

.bg-danger-60

.bg-danger-50

.bg-danger-40

.bg-danger-30

.bg-danger-20

.bg-danger-10

.bg-danger-5

.bg-danger-3

Copy

                                            
                                                <div class="bg-danger">...</div>

.bg-default

.bg-default-dark-50

.bg-default-dark-40

.bg-default-dark-30

.bg-default-dark-20

.bg-default-dark-10

.bg-default-90

.bg-default-80

.bg-default-70

.bg-default-60

.bg-default-50

.bg-default-40

.bg-default-30

.bg-default-20

.bg-default-10

.bg-default-5

.bg-default-3

Copy

                                            
                                                <div class="bg-default">...</div>

.bg-neutral

.bg-neutral-dark-50

.bg-neutral-dark-40

.bg-neutral-dark-30

.bg-neutral-dark-20

.bg-neutral-dark-10

.bg-neutral-90

.bg-neutral-80

.bg-neutral-70

.bg-neutral-60

.bg-neutral-50

.bg-neutral-40

.bg-neutral-30

.bg-neutral-20

.bg-neutral-10

.bg-neutral-5

.bg-neutral-3

Copy

                                            
                                                <div class="bg-neutral">...</div>

.bg-dark

.bg-dark-90

.bg-dark-80

.bg-dark-70

.bg-dark-60

.bg-dark-50

.bg-dark-40

.bg-dark-30

.bg-dark-20

.bg-dark-10

.bg-dark-5

.bg-dark-3

Copy

                                            
                                                <div class="bg-dark">...</div>

.bg-light

.bg-light-90

.bg-light-80

.bg-light-70

.bg-light-60

.bg-light-50

.bg-light-40

.bg-light-30

.bg-light-20

.bg-light-10

.bg-light-5

.bg-light-3

Copy

                                            
                                                <div class="bg-light">...</div>

.bc-primary

.bc-primary-dark-50

.bc-primary-dark-40

.bc-primary-dark-30

.bc-primary-dark-20

.bc-primary-dark-10

.bc-primary-90

.bc-primary-80

.bc-primary-70

.bc-primary-60

.bc-primary-50

.bc-primary-40

.bc-primary-30

.bc-primary-20

.bc-primary-10

.bc-primary-5

.bc-primary-3

Copy

                                            
                                                <div class="bc-primary">...</p>

.bc-secondary

.bc-secondary-dark-50

.bc-secondary-dark-40

.bc-secondary-dark-30

.bc-secondary-dark-20

.bc-secondary-dark-10

.bc-secondary-90

.bc-secondary-80

.bc-secondary-70

.bc-secondary-60

.bc-secondary-50

.bc-secondary-40

.bc-secondary-30

.bc-secondary-20

.bc-secondary-10

.bc-secondary-5

.bc-secondary-3

Copy

                                            
                                                <div class="bc-secondary">...</p>

.bc-tertiary

.bc-tertiary-dark-50

.bc-tertiary-dark-40

.bc-tertiary-dark-30

.bc-tertiary-dark-20

.bc-tertiary-dark-10

.bc-tertiary-90

.bc-tertiary-80

.bc-tertiary-70

.bc-tertiary-60

.bc-tertiary-50

.bc-tertiary-40

.bc-tertiary-30

.bc-tertiary-20

.bc-tertiary-10

.bc-tertiary-5

.bc-tertiary-3

Copy

                                            
                                                <div class="bc-tertiary">...</p>

.bc-info

.bc-info-dark-50

.bc-info-dark-40

.bc-info-dark-30

.bc-info-dark-20

.bc-info-dark-10

.bc-info-90

.bc-info-80

.bc-info-70

.bc-info-60

.bc-info-50

.bc-info-40

.bc-info-30

.bc-info-20

.bc-info-10

.bc-info-5

.bc-info-3

Copy

                                            
                                                <div class="bc-info">...</p>

.bc-success

.bc-success-dark-50

.bc-success-dark-40

.bc-success-dark-30

.bc-success-dark-20

.bc-success-dark-10

.bc-success-90

.bc-success-80

.bc-success-70

.bc-success-60

.bc-success-50

.bc-success-40

.bc-success-30

.bc-success-20

.bc-success-10

.bc-success-5

.bc-success-3

Copy

                                            
                                                <div class="bc-success">...</p>

.bc-warning

.bc-warning-dark-50

.bc-warning-dark-40

.bc-warning-dark-30

.bc-warning-dark-20

.bc-warning-dark-10

.bc-warning-90

.bc-warning-80

.bc-warning-70

.bc-warning-60

.bc-warning-50

.bc-warning-40

.bc-warning-30

.bc-warning-20

.bc-warning-10

.bc-warning-5

.bc-warning-3

Copy

                                            
                                                <div class="bc-warning">...</p>

.bc-danger

.bc-danger-dark-50

.bc-danger-dark-40

.bc-danger-dark-30

.bc-danger-dark-20

.bc-danger-dark-10

.bc-danger-90

.bc-danger-80

.bc-danger-70

.bc-danger-60

.bc-danger-50

.bc-danger-40

.bc-danger-30

.bc-danger-20

.bc-danger-10

.bc-danger-5

.bc-danger-3

Copy

                                            
                                                <div class="bc-danger">...</p>

.bc-default

.bc-default-dark-50

.bc-default-dark-40

.bc-default-dark-30

.bc-default-dark-20

.bc-default-dark-10

.bc-default-90

.bc-default-80

.bc-default-70

.bc-default-60

.bc-default-50

.bc-default-40

.bc-default-30

.bc-default-20

.bc-default-10

.bc-default-5

.bc-default-3

Copy

                                            
                                                <div class="bc-default">...</p>

.bc-neutral

.bc-neutral-dark-50

.bc-neutral-dark-40

.bc-neutral-dark-30

.bc-neutral-dark-20

.bc-neutral-dark-10

.bc-neutral-90

.bc-neutral-80

.bc-neutral-70

.bc-neutral-60

.bc-neutral-50

.bc-neutral-40

.bc-neutral-30

.bc-neutral-20

.bc-neutral-10

.bc-neutral-5

.bc-neutral-3

Copy

                                            
                                                <div class="bc-neutral">...</p>

.bc-dark

.bc-dark-90

.bc-dark-80

.bc-dark-70

.bc-dark-60

.bc-dark-50

.bc-dark-40

.bc-dark-30

.bc-dark-20

.bc-dark-10

.bc-dark-5

.bc-dark-3

Copy

                                            
                                                <div class="bc-dark">...</p>

.bc-light

.bc-light-90

.bc-light-80

.bc-light-70

.bc-light-60

.bc-light-50

.bc-light-40

.bc-light-30

.bc-light-20

.bc-light-10

.bc-light-5

.bc-light-3

Copy

                                            
                                                <div class="bc-light">...</p>

.text-primary

.text-primary-dark-50

.text-primary-dark-40

.text-primary-dark-30

.text-primary-dark-20

.text-primary-dark-10

.text-primary-90

.text-primary-80

.text-primary-70

.text-primary-60

.text-primary-50

.text-primary-40

.text-primary-30

.text-primary-20

.text-primary-10

.text-primary-5

.text-primary-3

Copy

                                            
                                                <p class="text-primary">...</p>

.text-secondary

.text-secondary-dark-50

.text-secondary-dark-40

.text-secondary-dark-30

.text-secondary-dark-20

.text-secondary-dark-10

.text-secondary-90

.text-secondary-80

.text-secondary-70

.text-secondary-60

.text-secondary-50

.text-secondary-40

.text-secondary-30

.text-secondary-20

.text-secondary-10

.text-secondary-5

.text-secondary-3

Copy

                                            
                                                <p class="text-secondary">...</p>

.text-tertiary

.text-tertiary-dark-50

.text-tertiary-dark-40

.text-tertiary-dark-30

.text-tertiary-dark-20

.text-tertiary-dark-10

.text-tertiary-90

.text-tertiary-80

.text-tertiary-70

.text-tertiary-60

.text-tertiary-50

.text-tertiary-40

.text-tertiary-30

.text-tertiary-20

.text-tertiary-10

.text-tertiary-5

.text-tertiary-3

Copy

                                            
                                                <p class="text-tertiary">...</p>

.text-info

.text-info-dark-50

.text-info-dark-40

.text-info-dark-30

.text-info-dark-20

.text-info-dark-10

.text-info-90

.text-info-80

.text-info-70

.text-info-60

.text-info-50

.text-info-40

.text-info-30

.text-info-20

.text-info-10

.text-info-5

.text-info-3

Copy

                                            
                                                <p class="text-info">...</p>

.text-success

.text-success-dark-50

.text-success-dark-40

.text-success-dark-30

.text-success-dark-20

.text-success-dark-10

.text-success-90

.text-success-80

.text-success-70

.text-success-60

.text-success-50

.text-success-40

.text-success-30

.text-success-20

.text-success-10

.text-success-5

.text-success-3

Copy

                                            
                                                <p class="text-success">...</p>

.text-warning

.text-warning-dark-50

.text-warning-dark-40

.text-warning-dark-30

.text-warning-dark-20

.text-warning-dark-10

.text-warning-90

.text-warning-80

.text-warning-70

.text-warning-60

.text-warning-50

.text-warning-40

.text-warning-30

.text-warning-20

.text-warning-10

.text-warning-5

.text-warning-3

Copy

                                            
                                                <p class="text-warning">...</p>

.text-danger

.text-danger-dark-50

.text-danger-dark-40

.text-danger-dark-30

.text-danger-dark-20

.text-danger-dark-10

.text-danger-90

.text-danger-80

.text-danger-70

.text-danger-60

.text-danger-50

.text-danger-40

.text-danger-30

.text-danger-20

.text-danger-10

.text-danger-5

.text-danger-3

Copy

                                            
                                                <p class="text-danger">...</p>

.text-default

.text-default-dark-50

.text-default-dark-40

.text-default-dark-30

.text-default-dark-20

.text-default-dark-10

.text-default-90

.text-default-80

.text-default-70

.text-default-60

.text-default-50

.text-default-40

.text-default-30

.text-default-20

.text-default-10

.text-default-5

.text-default-3

Copy

                                            
                                                <p class="text-default">...</p>

.text-neutral

.text-neutral-dark-50

.text-neutral-dark-40

.text-neutral-dark-30

.text-neutral-dark-20

.text-neutral-dark-10

.text-neutral-90

.text-neutral-80

.text-neutral-70

.text-neutral-60

.text-neutral-50

.text-neutral-40

.text-neutral-30

.text-neutral-20

.text-neutral-10

.text-neutral-5

.text-neutral-3

Copy

                                            
                                                <p class="text-neutral">...</p>

.text-dark

.text-dark-90

.text-dark-80

.text-dark-70

.text-dark-60

.text-dark-50

.text-dark-40

.text-dark-30

.text-dark-20

.text-dark-10

.text-dark-5

.text-dark-3

Copy

                                            
                                                <p class="text-dark">...</p>

.text-light

.text-light-90

.text-light-80

.text-light-70

.text-light-60

.text-light-50

.text-light-40

.text-light-30

.text-light-20

.text-light-10

.text-light-5

.text-light-3

Copy

                                            
                                                <p class="text-light">...</p>

.fill-primary

.fill-primary-dark-50

.fill-primary-dark-40

.fill-primary-dark-30

.fill-primary-dark-20

.fill-primary-dark-10

.fill-primary-90

.fill-primary-80

.fill-primary-70

.fill-primary-60

.fill-primary-50

.fill-primary-40

.fill-primary-30

.fill-primary-20

.fill-primary-10

.fill-primary-5

.fill-primary-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-primary" /></svg>

.fill-secondary

.fill-secondary-dark-50

.fill-secondary-dark-40

.fill-secondary-dark-30

.fill-secondary-dark-20

.fill-secondary-dark-10

.fill-secondary-90

.fill-secondary-80

.fill-secondary-70

.fill-secondary-60

.fill-secondary-50

.fill-secondary-40

.fill-secondary-30

.fill-secondary-20

.fill-secondary-10

.fill-secondary-5

.fill-secondary-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-secondary" /></svg>

.fill-tertiary

.fill-tertiary-dark-50

.fill-tertiary-dark-40

.fill-tertiary-dark-30

.fill-tertiary-dark-20

.fill-tertiary-dark-10

.fill-tertiary-90

.fill-tertiary-80

.fill-tertiary-70

.fill-tertiary-60

.fill-tertiary-50

.fill-tertiary-40

.fill-tertiary-30

.fill-tertiary-20

.fill-tertiary-10

.fill-tertiary-5

.fill-tertiary-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-tertiary" /></svg>

.fill-info

.fill-info-dark-50

.fill-info-dark-40

.fill-info-dark-30

.fill-info-dark-20

.fill-info-dark-10

.fill-info-90

.fill-info-80

.fill-info-70

.fill-info-60

.fill-info-50

.fill-info-40

.fill-info-30

.fill-info-20

.fill-info-10

.fill-info-5

.fill-info-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-info" /></svg>

.fill-success

.fill-success-dark-50

.fill-success-dark-40

.fill-success-dark-30

.fill-success-dark-20

.fill-success-dark-10

.fill-success-90

.fill-success-80

.fill-success-70

.fill-success-60

.fill-success-50

.fill-success-40

.fill-success-30

.fill-success-20

.fill-success-10

.fill-success-5

.fill-success-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-success" /></svg>

.fill-warning

.fill-warning-dark-50

.fill-warning-dark-40

.fill-warning-dark-30

.fill-warning-dark-20

.fill-warning-dark-10

.fill-warning-90

.fill-warning-80

.fill-warning-70

.fill-warning-60

.fill-warning-50

.fill-warning-40

.fill-warning-30

.fill-warning-20

.fill-warning-10

.fill-warning-5

.fill-warning-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-warning" /></svg>

.fill-danger

.fill-danger-dark-50

.fill-danger-dark-40

.fill-danger-dark-30

.fill-danger-dark-20

.fill-danger-dark-10

.fill-danger-90

.fill-danger-80

.fill-danger-70

.fill-danger-60

.fill-danger-50

.fill-danger-40

.fill-danger-30

.fill-danger-20

.fill-danger-10

.fill-danger-5

.fill-danger-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-danger" /></svg>

.fill-default

.fill-default-dark-50

.fill-default-dark-40

.fill-default-dark-30

.fill-default-dark-20

.fill-default-dark-10

.fill-default-90

.fill-default-80

.fill-default-70

.fill-default-60

.fill-default-50

.fill-default-40

.fill-default-30

.fill-default-20

.fill-default-10

.fill-default-5

.fill-default-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-default" /></svg>

.fill-neutral

.fill-neutral-dark-50

.fill-neutral-dark-40

.fill-neutral-dark-30

.fill-neutral-dark-20

.fill-neutral-dark-10

.fill-neutral-90

.fill-neutral-80

.fill-neutral-70

.fill-neutral-60

.fill-neutral-50

.fill-neutral-40

.fill-neutral-30

.fill-neutral-20

.fill-neutral-10

.fill-neutral-5

.fill-neutral-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-neutral" /></svg>

.fill-dark

.fill-dark-90

.fill-dark-80

.fill-dark-70

.fill-dark-60

.fill-dark-50

.fill-dark-40

.fill-dark-30

.fill-dark-20

.fill-dark-10

.fill-dark-5

.fill-dark-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-dark" /></svg>

.fill-light

.fill-light-90

.fill-light-80

.fill-light-70

.fill-light-60

.fill-light-50

.fill-light-40

.fill-light-30

.fill-light-20

.fill-light-10

.fill-light-5

.fill-light-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-light" /></svg>

Example: Background Colors

Example: Border Colors

Example: Text Colors

Example: Fill Colors