Reference Source


Theme (light, dark, lightest, darkest)

The default Coral Spectrum styles cascade from coral--light, coral--lightest, coral--dark and coral--darkest theme, so that class must be specified at a higher level.

<body class="coral--light">
    <!-- light theme -->
    <div class="container"></div>
    <div class="coral--dark">
        <!-- dark theme -->

Large scale support

For mobile, Spectrum has a larger scale that enables larger tap targets on all controls. To enable it, the class coral--large must be specified at a higher level.

<body class="coral--light coral--large">
   <!-- light theme -->
   <!-- large scale -->

CSS utility classes

Coral Spectrum provides some CSS utility classes that can be applied to any DOM element.


Applies the clearfix hack.


Removes all the borders of an element.


Stops an element from scrolling.


Hides elements from visual browsers.


A closed hand cursor that indicates an item is current grabbed.


An open hand cursor to indicate that an item can be grabbed.


Floats the content to the left.


Floats the content to the right.


Adds the default padding on all sides.


Adds the default padding to left and right.


Adds the default padding to top and bottom.


Adds the default the margin on all sides.


Removes the padding on all sides.


Removes the padding on the left and right side.


Removes the padding on the top and bottom side.


Removes the margin on all sides.


Prevent text from wrapping, use an ellipsis to truncate.

u-coral-visibleXS | u-coral-hiddenXS

Extra small device.

u-coral-visibleS | u-coral-hiddenS

Small device.

u-coral-visibleM | u-coral-hiddenM

Medium device.

u-coral-visibleL | u-coral-hiddenL

Large device.

u-coral-visibleXL | u-coral-hiddenXL

Extra large device.

u-coral-visibleXXL | u-coral-hiddenXXL

Above extra large device.

Fonts via Typekit

Coral Spectrum uses Typekit to securely deliver the Adobe Clean corporate font.


It comes pre-configured with a kit that is limited to certain domains including :

If you are using Coral Spectrum on a server on a domain other than these, you will need to request and configure your own Typekit kit. Reach out to the Typekit team on

Using a Custom Kit with Coral Spectrum

Include your Typekit ID as a Coral Spectrum option e.g. :

<script src="js/coral.min.js" data-coral-typekit="TYPEKIT_ID"></script>

Font loading

Typekit typically relies on a .wf-loading selector to hide content and prevent the Flash Of Unstyled Text (FOUT) that is associated with web fonts.

.wf-loading {
  visibility: hidden;

That selector would work in conjunction with the function in the typekit.js JavaScript file to remove the selector from the DOM when Typekit has loaded. However, experience has shown that hiding content and blocking until Typekit loads can make the page or app unresponsive on initial load.

Coral Spectrum remains agnostic. Consumers must implement their own solution to avoid Flash Of Unstyled Text during font loading.