SiteStyleGuide

Unofficial A style guide made by SiteStyleGuide from coolorange.com’s public web pages. Not affiliated with or endorsed by ERP Integration. The real site is coolorange.com ↗

ERP Integration logo

Unofficial style guide

ERP Integrationstyle guide

ERP Integration’s website (coolorange.com) sets its headings in Montserrat and its body text in DM Sans. Its palette is led by Orange (#FF9900), Steel Blue (#337AB7) and Royal Blue (#49617B), with #333333 text on #FFFFFF. Captured from the live site on 24 October 2026.

Website
coolorange.com
Typefaces
Montserrat, DM Sans, Nunito Sans
Palette
4 neutrals, 12 colours, 3 gradients
Captured
24 Oct 2026 · added by @mrventure
Save Add to collection Share Report
https://www.coolorange.com/ Screenshot
Screenshot of the coolorange.com homepage on a desktop screen
Screenshot of coolorange.com on a 1440 px desktop screen, 24 Oct 2026.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title
COOLORANGE: Autodesk Vault Automation | ERP Integration
● 55 / 60 characters
Meta description
COOLORANGE is a provider of software tools and plug-ins for Autodesk Vault PDM Software to load data into Vault, workflow automation and connect to an ERP system.
▲ 162 / 160 characters
og:title
COOLORANGE: Autodesk Vault Automation | ERP Integration
og:description
COOLORANGE is a provider of software tools and plug-ins for Autodesk Vault PDM Software to load data into Vault, workflow automation and connect to an ERP system.
Language
en

In search results

ERP Integrationhttps://www.coolorange.com/

COOLORANGE: Autodesk Vault Automation | ERP Integration

COOLORANGE is a provider of software tools and plug-ins for Autodesk Vault PDM Software to load data into Vault, workflow automation and connect to an ERP system.

When shared

No og:image, so no picture

coolorange.com

COOLORANGE: Autodesk Vault Automation | ERP Integration

COOLORANGE is a provider of software tools and plug-ins for Autodesk Vault PDM Software to load data into Vau…

Back to top ↑

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#333333) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used
  • White 40.4%
  • Orange 16.3%
  • Black 8.9%
  • Near Black 7.6%
  • Off White 5.2%
  • Steel Blue 4.4%
  • Royal Blue 3%
  • Deep Midnight Blue 2.3%
  • Light Midnight Blue 2.1%
  • Sky Blue 1.4%
  • Dark Olive Green 1.4%
  • Dark Golden Rod 1.4%
  • Brown 1.4%
  • Sandy Brown 1.4%
  • Corn Silk 1.3%
  • Honey Dew 1.3%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

  • White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 0
    On text
    12.63:1 AAA
    On white
    —

    Text, background, border · body, inline style on <span>

  • Black

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 100
    On text
    1.66:1 Fail
    On white
    21.00:1 AAA

    Text, background, border · inline style on <span>, body

  • Near Black

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 7 89
    On text
    1.34:1 Fail
    On white
    16.88:1 AAA

    Text, background, graphic · inline style on <span>, .navbar-inverse

  • Off White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 13
    On text
    9.30:1 AAA
    On white
    1.36:1 Fail

    Border, background · .nav .nav-divider, .navbar-default .navbar-toggle:focus

Colours

Brand colours and accents, most used first

  • Orange

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 40 100 0
    On text
    5.90:1 AA
    On white
    2.14:1 Fail

    Text, background, border · inline style on <span>, inline style on <h3>

  • Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    72 33 0 28
    On text
    2.77:1 Fail
    On white
    4.56:1 AA

    Text, background, border · .panel-primary>.panel-heading, .btn-primary

  • Royal Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    41 21 0 52
    On text
    1.97:1 Fail
    On white
    6.40:1 AA

    Text, border, background · #widget_1752048501405.icon-with-text, #module_1752048749200.icon-with-text

  • Deep Midnight Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    64 48 0 78
    On text
    1.32:1 Fail
    On white
    16.63:1 AAA

    Text, background, graphic · header.header__landing, .top-navigation .navigation-primary .submenu.level-1 > li > a ~ label.menu-arrow

  • Light Midnight Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    45 23 0 75
    On text
    1.03:1 Fail
    On white
    13.06:1 AAA

    Text · h1, form input:not([type=radio]):not([type=checkbox]):not([type=submit])

  • Sky Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    59 14 0 13
    On text
    6.04:1 AA
    On white
    2.09:1 Fail

    Background, text, border · .btn-info, .btn-info .badge

  • Dark Olive Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    49 0 48 54
    On text
    2.32:1 Fail
    On white
    5.45:1 AA

    Text, background, border · .panel-success>.panel-heading .badge, .panel-success>.panel-heading

  • Dark Golden Rod

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 21 57 46
    On text
    2.61:1 Fail
    On white
    4.85:1 AA

    Text, background, border · .panel-warning>.panel-heading .badge, .panel-warning>.panel-heading

  • Brown

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 60 61 34
    On text
    2.16:1 Fail
    On white
    5.85:1 AA

    Text, background, border · .panel-danger>.panel-heading .badge, .panel-danger>.panel-heading

  • Sandy Brown

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 34 73 6
    On text
    5.86:1 AA
    On white
    2.16:1 Fail

    Background, border, text · .cta_link, .cta_link:hover

  • Corn Silk

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 2 10 1
    On text
    11.84:1 AAA
    On white
    1.07:1 Fail

    Background, text · .panel-warning>.panel-heading, .panel-warning>.panel-heading .badge

  • Honey Dew

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    7 0 10 6
    On text
    10.58:1 AAA
    On white
    1.19:1 Fail

    Background, text · .panel-success>.panel-heading, .panel-success>.panel-heading .badge

Gradients

  • linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)

  • linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1))

  • linear-gradient(rgba(252, 147, 38, 1), rgba(252, 147, 38, 1))

Back to top ↑

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Montserrat

Aa 100 Aa 900

Montserrat

Self-hosted · weights 100, 200, 300, 400, 500, 600, 700, 800, 900 · headings · shown in a stand-in if you don’t have it

Aa 400 Aa 700

DM Sans

Google Fonts · weights 400, 500, 700 · headings, body

Aa 400 Aa 800

Nunito Sans

Self-hosted · weights 400, 700, 800 · body · shown in a stand-in if you don’t have it

Aa 400

Helvetica Neue

System font, or not loaded on this page · weights 400 · body · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS · root 10 px
Heading 1 36px / 1.1 weight 500 · none · DM Sans

ERP Integration

Heading 2 30px / 1.1 weight 500 · none · DM Sans

COOLORANGE: Autodesk Vault Automation | ERP Int…

Heading 3 24px / 1.1 weight 500 · none · DM Sans

COOLORANGE: Autodesk Vault Automation | ERP Int…

Heading 4 18px / 1.1 weight 500 · none · DM Sans

COOLORANGE: Autodesk Vault Automation | ERP Int…

Heading 5 14px / 1.1 weight 500 · none · Montserrat

COOLORANGE: Autodesk Vault Automation | ERP Int…

Heading 6 12px / 1.1 weight 500 · uppercase · Montserrat

COOLORANGE: Autodesk Vault Automation | ERP Int…

Body 14px / 1.42857143 weight 400 · none · Helvetica Neue

COOLORANGE is a provider of software tools and plug-ins for Autodesk Vault PDM Software to load data into Vault, workflow automation and co…

Paragraph 16px Nunito Sans

COOLORANGE is a provider of software tools and plug-ins for Autodesk Vault PDM Software to load data into Vault, workflow automation and co…

Small 85%

COOLORANGE is a provider of software tools and plug-ins for Autodesk Vault PDM Software to load data into Vault, workflow automation and co…

Button 100% / 1.15 none

Get started

Link 12px / 1.42857143 weight 400 · uppercase · Nunito Sans

Read more about ERP Integration

Sizes in use

Most common across the site
  • 24pxline 1.19 · 6 rules
  • 20pxline 1.2 · 7 rules
  • 18pxline 1.3333333 · 12 rules
  • 16pxline 1.83 · 16 rules
  • 14pxline 1.42857143 · 24 rules
  • 13pxline 1.4 · 8 rules
  • 12pxline 1.5 · 18 rules
  • 10px4 rules

Back to top ↑

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

.cta_link · #F09F41 · radius 2px

Link

Read our latest news today.

a · #FF9900

Corner radius

  • 4px · 22×
  • 6px · 14×
  • 3px · 13×
  • 50% · 9×
  • 5px · 7×
  • 2px · 3×

Shadows

  • 0 2px 9px 0 rgba(0,0,0,0.2)
  • 0 2px 35px 0 rgba(0, 0, 0, 0.6)
  • 0 2px 5px 0 rgba(29, 29, 29, 0.1)
  • 0 2px 35px 0 rgba(0, 0, 0, 0.05)

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

767
768
991
992
1024
1025
1199
1200

On a scale of 0 to 1440 px.

Content widths (max-width)

1300 px
1130 px
1120 px
1000 px
912 px
550 px

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

  • ● FineThe title is 55 characters, short enough to show in full in search results.
  • ▲ CheckThe description is 162 characters. Search results usually show about 160.
  • ▲ CheckThere is no og:image, so links shared on social media show no picture.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does ERP Integration use?
ERP Integration’s website uses three typefaces: Montserrat (headings), self-hosted; DM Sans (body text), google Fonts; Nunito Sans, self-hosted.
What are ERP Integration’s brand colours?
The main colours on coolorange.com are Orange (#FF9900), Steel Blue (#337AB7), Royal Blue (#49617B), Deep Midnight Blue (#141D38), Light Midnight Blue (#243241) and Sky Blue (#5BC0DE).
What colour is ERP Integration’s text and background?
Body text is #333333 on a #FFFFFF background.
Where is ERP Integration’s logo from?
The logo shown in this guide was found on coolorange.com’s homepage. For official logo files and usage rules, check ERP Integration’s own brand or press page.
Is this ERP Integration’s official style guide?
No. SiteStyleGuide made it from coolorange.com’s public web pages on 24 October 2026, and isn’t affiliated with ERP Integration. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

coolorange-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* coolorange.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/coolorange.com) */
:root {
  /* Colours */
  --text: #333333;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-near-black: #1D1D1B;
  --colour-off-white: #DDDDDD;
  --colour-orange: #FF9900;
  --colour-steel-blue: #337AB7;
  --colour-royal-blue: #49617B;
  --colour-deep-midnight-blue: #141D38;
  --colour-light-midnight-blue: #243241;
  --colour-sky-blue: #5BC0DE;
  --colour-dark-olive-green: #3C763D;
  --colour-dark-golden-rod: #8A6D3B;
  --colour-brown: #A94442;
  --colour-sandy-brown: #F09F41;
  --colour-corn-silk: #FCF8E3;
  --colour-honey-dew: #DFF0D8;
  --gradient-1: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  --gradient-2: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
  --gradient-3: linear-gradient(rgba(252, 147, 38, 1), rgba(252, 147, 38, 1));

  /* Typefaces */
  --font-headings: 'Montserrat';
  --font-body: 'DM Sans', sans-serif;

  /* Type scale */
  --text-h1: 36px;
  --leading-h1: 1.1;
  --text-h2: 30px;
  --leading-h2: 1.1;
  --text-h3: 24px;
  --leading-h3: 1.1;
  --text-h4: 18px;
  --leading-h4: 1.1;
  --text-h5: 14px;
  --leading-h5: 1.1;
  --text-h6: 12px;
  --leading-h6: 1.1;
  --text-body: 14px;
  --leading-body: 1.42857143;
  --text-p: 16px;
  --text-small: 85%;
  --text-button: 100%;
  --leading-button: 1.15;
  --text-a: 12px;
  --leading-a: 1.42857143;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 3px;
  --radius-4: 50%;
  --radius-5: 5px;
  --radius-6: 2px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 767px;
  --breakpoint-2: 768px;
  --breakpoint-3: 991px;
  --breakpoint-4: 992px;
  --breakpoint-5: 1024px;
  --breakpoint-6: 1025px;
  --breakpoint-7: 1199px;
  --breakpoint-8: 1200px;
  --max-width-1: 1300px;
  --max-width-2: 1130px;
  --max-width-3: 1120px;
  --max-width-4: 1000px;
  --max-width-5: 912px;
  --max-width-6: 550px;
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run coolorange.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

View our style guide on SiteStyleGuide 
<a href="https://sitestyleguide.com/coolorange.com" title="ERP Integration style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Also set in Montserrat

Other websites using Montserrat as their main typeface

Similar colours

Websites whose lead colour is closest to ERP Integration’s

Captured from coolorange.com on 24 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by ERP Integration; this guide describes the public website for reference.