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.

Components Buttons

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