IMCO
Work With Us

Design library

UI elements and components

A working reference for the reusable interface patterns used across IMCO. Each entry shows the class contract, sizing, and live examples.

SectionsButtons · Colors

Component · 01

Buttons

Button size is controlled by one base class and optional size modifiers. The default size is medium and does not need a modifier.

Small

Compact actions

Use for dense toolbars, filters, and secondary controls where vertical space is tight.

.imco-button .imco-button--sm

Medium · Default

Standard actions

Use for most page-level actions. This is the default button size and should be the first choice.

.imco-button

Large

Primary moments

Use when an action needs extra presence, such as hero CTAs or important conversion paths.

.imco-button .imco-button--lg

Button colors

Filled and outline variants

Add one color modifier to the base button. Add .imco-button--outline for the outline version of the same color.

White.imco-button--white
Black.imco-button--black
Gold.imco-button--gold
Copper.imco-button--copper
Sandstone.imco-button--sandstone
Midnight.imco-button--midnight
Danger.imco-button--danger
Warning.imco-button--warning
Success.imco-button--success
Info.imco-button--info
Light.imco-button--light
Dark.imco-button--dark

Foundation · 01

Colors

The complete palette. Every token is exposed as a CSS custom property — usevar(--color-…) in styles. Each family ships a base value with tint, shade, and contrast pairings, plus a full 50–950 ramp.

Base

Neutrals

The two fixed reference values used for pure white and near-black.

White--color-white#ffffff
Black--color-black#1d1d1d

Family

Copper

Base--color-copper#cc7d51
Tint--color-copper-tint#dc9b78
Shade--color-copper-shade#a75d36
Contrast--color-copper-contrast#ffffff
50--color-copper-50#fcf5f1
100--color-copper-100#f7e5dc
200--color-copper-200#edc5b2
300--color-copper-300#e1a082
400--color-copper-400#d68b63
500--color-copper-500#cc7d51
600--color-copper-600#b9683f
700--color-copper-700#995331
800--color-copper-800#7a4228
900--color-copper-900#613522
950--color-copper-950#351a0f

Family

Sandstone

Base--color-sandstone#d5b59d
Tint--color-sandstone-tint#e0c7b4
Shade--color-sandstone-shade#b58b6c
Contrast--color-sandstone-contrast#1e1e1e
50--color-sandstone-50#fbf8f5
100--color-sandstone-100#f6eee8
200--color-sandstone-200#ecdccc
300--color-sandstone-300#dfc3ad
400--color-sandstone-400#d5b59d
500--color-sandstone-500#c89e7f
600--color-sandstone-600#b58362
700--color-sandstone-700#98694f
800--color-sandstone-800#7c5645
900--color-sandstone-900#66483b
950--color-sandstone-950#36231d

Family

Gold

Base--color-gold#c89a45
Tint--color-gold-tint#dfbd73
Shade--color-gold-shade#9f6f25
Contrast--color-gold-contrast#1e1e1e
50--color-gold-50#fcf8ed
100--color-gold-100#f8edcf
200--color-gold-200#efd99b
300--color-gold-300#e4bf63
400--color-gold-400#d5a847
500--color-gold-500#c89a45
600--color-gold-600#ad7a2f
700--color-gold-700#8c5e26
800--color-gold-800#724c23
900--color-gold-900#5e4021
950--color-gold-950#34210f

Family

Midnight

Base--color-midnight#18253f
Tint--color-midnight-tint#273a61
Shade--color-midnight-shade#101a2d
Contrast--color-midnight-contrast#ffffff
50--color-midnight-50#f1f4f8
100--color-midnight-100#dce4ef
200--color-midnight-200#bdcbe0
300--color-midnight-300#91a7ca
400--color-midnight-400#657faf
500--color-midnight-500#465f95
600--color-midnight-600#344978
700--color-midnight-700#293a61
800--color-midnight-800#222f50
900--color-midnight-900#18253f
950--color-midnight-950#0b1221

Family

Danger

Base--color-danger#b94f42
Tint--color-danger-tint#d47768
Shade--color-danger-shade#8f352d
Contrast--color-danger-contrast#ffffff
50--color-danger-50#fcf3f0
100--color-danger-100#f7dfd9
200--color-danger-200#edbeb3
300--color-danger-300#df9586
400--color-danger-400#d16f5e
500--color-danger-500#b94f42
600--color-danger-600#9d4037
700--color-danger-700#81362f
800--color-danger-800#6b302b
900--color-danger-900#592b28
950--color-danger-950#331413

Family

Warning

Base--color-warning#bd9060
Tint--color-warning-tint#d4ad7e
Shade--color-warning-shade#946943
Contrast--color-warning-contrast#1d1d1d
50--color-warning-50#fbf7f2
100--color-warning-100#f5eadf
200--color-warning-200#ead4bd
300--color-warning-300#dbb58c
400--color-warning-400#cb9b6d
500--color-warning-500#bd9060
600--color-warning-600#a67852
700--color-warning-700#8a6045
800--color-warning-800#704f3c
900--color-warning-900#5c4234
950--color-warning-950#322119

Family

Success

Base--color-success#6f8057
Tint--color-success-tint#93a277
Shade--color-success-shade#53643f
Contrast--color-success-contrast#ffffff
50--color-success-50#f5f7f0
100--color-success-100#e8eddc
200--color-success-200#d1dcba
300--color-success-300#b4c58f
400--color-success-400#93a66b
500--color-success-500#6f8057
600--color-success-600#5c6b49
700--color-success-700#4a573d
800--color-success-800#3d4934
900--color-success-900#343f2e
950--color-success-950#1c2318

Family

Info

Base--color-info#465f95
Tint--color-info-tint#657faf
Shade--color-info-shade#293a61
Contrast--color-info-contrast#ffffff
50--color-info-50#f1f4f8
100--color-info-100#dce4ef
200--color-info-200#bdcbe0
300--color-info-300#91a7ca
400--color-info-400#657faf
500--color-info-500#465f95
600--color-info-600#344978
700--color-info-700#293a61
800--color-info-800#222f50
900--color-info-900#18253f
950--color-info-950#0b1221

Family

Light

Base--color-light#9c887b
50--color-light-50#fbf8f5
100--color-light-100#f4eee8
200--color-light-200#e8dbce
300--color-light-300#d6c2b1
400--color-light-400#bba695
500--color-light-500#9c887b
600--color-light-600#77695f
700--color-light-700#574e48
800--color-light-800#3b3633
900--color-light-900#292725
950--color-light-950#1d1c1b

Family

Dark

Base--color-dark#121212
50--color-dark-50#181716
100--color-dark-100#161514
200--color-dark-200#141313
300--color-dark-300#121212
400--color-dark-400#101010
500--color-dark-500#0d0d0d
600--color-dark-600#0a0a0a
700--color-dark-700#070707
800--color-dark-800#040404
900--color-dark-900#020202
950--color-dark-950#000000