cnrtl.fr
cnrtl.fr · 5 days ago
SaveUnofficial A style guide made by SiteStyleGuide from ironcladapp.com’s public web pages. Not affiliated with or endorsed by Ironclad. The real site is ironcladapp.com ↗
Unofficial style guide
Ironcladstyle guide
Ironclad’s website (ironcladapp.com) sets its headings in SangBleu Kingdom and its body text in Moderat. Its palette is led by Medium Sea Green (#00CA88), Light Sea Green (#308970) and Slate Blue (#7E56A0), with #1C212B text on #F2F1EE. Captured from the live site on 23 October 2026.
- Website
- ironcladapp.com
- Typefaces
- SangBleu Kingdom, Moderat Mono, Moderat
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 23 Oct 2026 · added by @sitestyleguide
https://ironcladapp.com/
Screenshot
ironcladapp.com
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Ironclad: AI Contract Lifecycle Management Software
- ● 51 / 60 characters
- Meta description
- Design and deploy any type of contract in minutes. Instantly surface insights from legal agreements; manage risk. Get a custom demo.
- ● 132 / 160 characters
- Site name
- Ironclad
- og:title
- Ironclad: AI Contract Lifecycle Management Software
- og:description
- Design and deploy any type of contract in minutes. Instantly surface insights from legal agreements; manage risk. Get a custom demo.
- Language
- en-US
In search results
Ironcladhttps://ironcladapp.com/
Ironclad: AI Contract Lifecycle Management Software
Design and deploy any type of contract in minutes. Instantly surface insights from legal agreements; manage risk. Get a custom demo.
When shared
ironcladapp.com
Ironclad: AI Contract Lifecycle Management Software
Design and deploy any type of contract in minutes. Instantly surface insights from legal agreements; manage r…
Logo & favicons
Found as: schema.org logo. SVG, 159 × 30.
Logo
On white
On black
On Medium Sea Green
Favicons
1 found-
33 px · PNG
icon
Ironclad: AI Contract Lifecycle Management Software
Light browser tab
Ironclad: AI Contract Lifecycle Management Software
Dark browser tab
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 (#1C212B) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- Cool Near Black 43.2%
- Off White 25.1%
- White 9.2%
- Medium Sea Green 7.4%
- Light Sea Green 6.9%
- Warm Off White 4.1%
- Slate Blue 1.6%
- Tan 0.9%
- Tomato 0.3%
- Steel Blue 0.2%
- Royal Blue 0.2%
- Dark Sea Green 0.2%
- Light Coral 0.2%
- Corn Silk 0.1%
- Saddle Brown 0.1%
- Deep Sea Green 0.1%
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-
Cool Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 35 23 0 83
- On text
- —
- On white
- 16.13:1 AAA
Text, background, border · header>.e-div--header-wrapper>.e-div #mega-menu-wrap-main-menu #mega-menu-main-m, .e-stn--short-form-with-media.e-stn--light-background .e-col--bottom-column>div:
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 2 5
- On text
- 14.28:1 AAA
- On white
- 1.13:1 Fail
Text, background, border · body, header>.e-div--header-wrapper>.e-div #mega-menu-wrap-main-menu #mega-menu-main-m
-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 16.13:1 AAA
- On white
- —
Background, text, border · header>.e-div--header-wrapper>.e-div #mega-menu-wrap-main-menu #mega-menu-main-m, body
-
Warm Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 2 4 9
- On text
- 12.86:1 AAA
- On white
- 1.25:1 Fail
Background, border, text · header>.e-div--header-wrapper>.e-div #mega-menu-wrap-main-menu #mega-menu-main-m, .e-stn--author-tag-landing .facetwp-pager .facetwp-page
Colours
Brand colours and accents, most used first-
Medium Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 33 21
- On text
- 7.53:1 AAA
- On white
- 2.14:1 Fail
Text, background, border · .e-demo--sidepop__content .e-col--bottom-column>div:has(>form.mktoForm) form.mkt, .e-stn--short-form-with-media .e-col--bottom-column>div:has(>form.mktoForm) form
-
Light Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 65 0 18 46
- On text
- 3.79:1 AA large
- On white
- 4.25:1 AA large
Background, text, border · header>.e-div--header-wrapper>.e-div #mega-menu-wrap-main-menu #mega-menu-main-m, header>.e-div--header-wrapper #mega-menu-wrap-main-menu #mega-menu-main-menu>.me
-
Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 21 46 0 37
- On text
- 2.86:1 Fail
- On white
- 5.64:1 AA
Text, background · header>.e-div--header-wrapper>.e-div #mega-menu-wrap-main-menu #mega-menu-main-m, .e-div--cta-with-form.e-div--purple-over-btn form div.mktoButtonRow .mktoButtonW
-
Tan
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 12 26 13
- On text
- 9.47:1 AAA
- On white
- 1.70:1 Fail
Background, text · header>.e-div--header-wrapper>.e-div #mega-menu-wrap-main-menu #mega-menu-main-m, .e-stn--history-slider .history-slider-wrapper .history-slider-titles .swiper-wr
-
Tomato
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 59 75 5
- On text
- 5.09:1 AA
- On white
- 3.17:1 AA large
Text, background · --bs-orange, .e-demo--sidepop__content .e-col--bottom-column>div form.mktoForm .mktoFormRow .
-
Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 52 0 0
- On text
- 4.02:1 AA large
- On white
- 4.02:1 AA large
Background, text, border · --swiper-theme-color, .swiper-pagination-bullet-active
-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 95 57 0 1
- On text
- 3.58:1 AA large
- On white
- 4.50:1 AA
Text, graphic · a, --bs-link-color
-
Dark Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 36 0 17 28
- On text
- 6.90:1 AA
- On white
- 2.34:1 Fail
Used · --bs-success-text-emphasis, --bs-form-valid-color
-
Light Coral
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 43 39 8
- On text
- 6.38:1 AA
- On white
- 2.53:1 Fail
Used · --bs-danger-text-emphasis, --bs-form-invalid-color
-
Corn Silk
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 5 20 0
- On text
- 14.56:1 AAA
- On white
- 1.11:1 Fail
Background · --bs-warning-bg-subtle, --bs-highlight-bg
-
Saddle Brown
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 25 97 60
- On text
- 2.02:1 Fail
- On white
- 7.99:1 AAA
Text · --bs-warning-text-emphasis, --bs-highlight-bg
-
Deep Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 81 0 38 47
- On text
- 3.56:1 AA large
- On white
- 4.53:1 AA
Used · --bs-form-valid-color, --bs-form-valid-border-color
Gradients
-
linear-gradient(246deg, rgba(0, 0, 0, 0) 38.82%, #000 89.91%)
-
linear-gradient(179deg, #e9e5df 0%, rgba(233, 229, 223, 0) 100%)
-
linear-gradient(top, #fff 60px, #f2f1ee 60px)
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.
SangBleu Kingdom
Aa
400
SangBleu Kingdom
Self-hosted · weights 400 · headings · shown in a stand-in if you don’t have it
Aa
300
Aa
500
Moderat Mono
Self-hosted · weights 300, 500 · headings · shown in a stand-in if you don’t have it
Aa
300
Aa
900
Moderat
Self-hosted · weights 300, 400, 500, 700, 900 · buttons, headings, body · shown in a stand-in if you don’t have it
Aa
500
Integral CF
Self-hosted · weights 500 · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
48px / 1.2
weight 500
Ironclad
Heading 2
36px / 1.2
weight 500
Ironclad: AI Contract Lifecycle Management Soft…
Heading 3
28px / 1.2
weight 400
Ironclad: AI Contract Lifecycle Management Soft…
Heading 4
24px / 1.2
weight 400
Ironclad: AI Contract Lifecycle Management Soft…
Heading 5
20px / 1.4
weight 400
Ironclad: AI Contract Lifecycle Management Soft…
Heading 6
18px / 1.4
weight 400
Ironclad: AI Contract Lifecycle Management Soft…
Body
1rem · 16 px / 1.6
weight 400 · Moderat
Design and deploy any type of contract in minutes. Instantly surface insights from legal agreements; manage risk. Get a custom demo.
Paragraph
.875rem · 14 px / 1.6
weight 400 · Moderat Mono
Design and deploy any type of contract in minutes. Instantly surface insights from legal agreements; manage risk. Get a custom demo.
Small
0.875em · 14 px
Design and deploy any type of contract in minutes. Instantly surface insights from legal agreements; manage risk. Get a custom demo.
Button
15px
none · Moderat
Get started
Link
0 · 0 px / 1.2
weight 500 · uppercase · Moderat Mono
Read more about Ironclad
Sizes in use
Most common across the site- 36pxline 1.2 · 97 rules
- 32pxline 1.2 · 190 rules
- 28pxline 1.2 · 52 rules
- 20pxline 1.4 · 88 rules
- 18pxline 1.4 · 222 rules
- 16pxline 1.2 · 357 rules
- 14pxline 1.2 · 377 rules
- 12pxline 1.4 · 70 rules
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
.e-lgs--dlt .e-lgs__btn button · #1C212B
Link
Read our latest news today.
a · #0D6EFD
Corner radius
- 20px · 238×
- 50px · 218×
- 10px · 196×
- 50% · 142×
- 5px · 60×
- 80px · 26×
Shadows
- 0 10px 50px 0 rgba(28,33,43,.2)
- 0 4px 20px 0 rgba(0,0,0,.05)
- 0 6px 15px -8px rgba(28,39,46,.25)
- 0 5px 20px 0 rgba(0,0,0,.1)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
576
640
768
992
1024
1199
1200
1400
On a scale of 0 to 1440 px.
Content widths (max-width)
1440 px
1280 px
1200 px
1100 px
796 px
620 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 51 characters, short enough to show in full in search results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Ironclad use?
- Ironclad’s website uses four typefaces: SangBleu Kingdom (headings), self-hosted; Moderat Mono, self-hosted; Moderat (body text), self-hosted; Integral CF, self-hosted.
- What are Ironclad’s brand colours?
- The main colours on ironcladapp.com are Medium Sea Green (#00CA88), Light Sea Green (#308970), Slate Blue (#7E56A0), Tan (#DDC2A4), Tomato (#F1643C) and Steel Blue (#007AFF).
- What colour is Ironclad’s text and background?
- Body text is #1C212B on a #F2F1EE background.
- Where is Ironclad’s logo from?
- The logo shown in this guide was found on ironcladapp.com’s homepage. For official logo files and usage rules, check Ironclad’s own brand or press page.
- Is this Ironclad’s official style guide?
- No. SiteStyleGuide made it from ironcladapp.com’s public web pages on 23 October 2026, and isn’t affiliated with Ironclad. Members can refresh a guide after 90 days to pick up changes.
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
ironcladapp-com-tokens.css
/* ironcladapp.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/ironcladapp.com) */
:root {
/* Colours */
--text: #1C212B;
--background: #F2F1EE;
--colour-cool-near-black: #1C212B;
--colour-off-white: #F2F1EE;
--colour-white: #FFFFFF;
--colour-warm-off-white: #E9E5DF;
--colour-medium-sea-green: #00CA88;
--colour-light-sea-green: #308970;
--colour-slate-blue: #7E56A0;
--colour-tan: #DDC2A4;
--colour-tomato: #F1643C;
--colour-steel-blue: #007AFF;
--colour-royal-blue: #0D6EFD;
--colour-dark-sea-green: #75B798;
--colour-light-coral: #EA868F;
--colour-corn-silk: #FFF3CD;
--colour-saddle-brown: #664D03;
--colour-deep-sea-green: #198754;
--gradient-1: linear-gradient(246deg, rgba(0, 0, 0, 0) 38.82%, #000 89.91%);
--gradient-2: linear-gradient(179deg, #e9e5df 0%, rgba(233, 229, 223, 0) 100%);
--gradient-3: linear-gradient(top, #fff 60px, #f2f1ee 60px);
/* Typefaces */
--font-headings: 'SangBleu Kingdom', serif;
--font-buttons: 'Moderat', sans-serif;
--font-body: 'Moderat', sans-serif;
--font-other: 'Integral CF', sans-serif;
/* Type scale */
--text-h1: 48px;
--leading-h1: 1.2;
--text-h2: 36px;
--leading-h2: 1.2;
--text-h3: 28px;
--leading-h3: 1.2;
--text-h4: 24px;
--leading-h4: 1.2;
--text-h5: 20px;
--leading-h5: 1.4;
--text-h6: 18px;
--leading-h6: 1.4;
--text-body: 1rem;
--leading-body: 1.6;
--text-p: .875rem;
--leading-p: 1.6;
--text-small: 0.875em;
--text-button: 15px;
--text-a: 0;
--leading-a: 1.2;
/* Shape */
--radius-1: 20px;
--radius-2: 50px;
--radius-3: 10px;
--radius-4: 50%;
--radius-5: 5px;
--radius-6: 80px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 576px;
--breakpoint-2: 640px;
--breakpoint-3: 768px;
--breakpoint-4: 992px;
--breakpoint-5: 1024px;
--breakpoint-6: 1199px;
--breakpoint-7: 1200px;
--breakpoint-8: 1400px;
--max-width-1: 1440px;
--max-width-2: 1280px;
--max-width-3: 1200px;
--max-width-4: 1100px;
--max-width-5: 796px;
--max-width-6: 620px;
}
{
"site": "ironcladapp.com",
"source": "https://sitestyleguide.com/ironcladapp.com",
"text": "#1C212B",
"background": "#F2F1EE",
"colours": [
{
"name": "Cool Near Black",
"hex": "#1C212B",
"rgb": [
28,
33,
43
]
},
{
"name": "Off White",
"hex": "#F2F1EE",
"rgb": [
242,
241,
238
]
},
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Warm Off White",
"hex": "#E9E5DF",
"rgb": [
233,
229,
223
]
},
{
"name": "Medium Sea Green",
"hex": "#00CA88",
"rgb": [
0,
202,
136
]
},
{
"name": "Light Sea Green",
"hex": "#308970",
"rgb": [
48,
137,
112
]
},
{
"name": "Slate Blue",
"hex": "#7E56A0",
"rgb": [
126,
86,
160
]
},
{
"name": "Tan",
"hex": "#DDC2A4",
"rgb": [
221,
194,
164
]
},
{
"name": "Tomato",
"hex": "#F1643C",
"rgb": [
241,
100,
60
]
},
{
"name": "Steel Blue",
"hex": "#007AFF",
"rgb": [
0,
122,
255
]
},
{
"name": "Royal Blue",
"hex": "#0D6EFD",
"rgb": [
13,
110,
253
]
},
{
"name": "Dark Sea Green",
"hex": "#75B798",
"rgb": [
117,
183,
152
]
},
{
"name": "Light Coral",
"hex": "#EA868F",
"rgb": [
234,
134,
143
]
},
{
"name": "Corn Silk",
"hex": "#FFF3CD",
"rgb": [
255,
243,
205
]
},
{
"name": "Saddle Brown",
"hex": "#664D03",
"rgb": [
102,
77,
3
]
},
{
"name": "Deep Sea Green",
"hex": "#198754",
"rgb": [
25,
135,
84
]
}
],
"fonts": [
{
"name": "SangBleu Kingdom",
"stack": "\"SangBleu Kingdom\", serif",
"weights": [
400
],
"source": "Self-hosted"
},
{
"name": "Moderat Mono",
"stack": "\"Moderat Mono\", sans-serif",
"weights": [
300,
500
],
"source": "Self-hosted"
},
{
"name": "Moderat",
"stack": "\"Moderat\", sans-serif",
"weights": [
300,
400,
500,
700,
900
],
"source": "Self-hosted"
},
{
"name": "Integral CF",
"stack": "\"Integral CF\", sans-serif",
"weights": [
500
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run ironcladapp.com?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/ironcladapp.com" title="Ironclad style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Similar colours
Websites whose lead colour is closest to Ironclad’s
Captured from ironcladapp.com on 23 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Ironclad; this guide describes the public website for reference.