Savvy Savers
savvysavers.com.au · set in Open Sans
Save1Unofficial A style guide made by SiteStyleGuide from lecabcom.fr’s public web pages. Not affiliated with or endorsed by lecabcom. The real site is lecabcom.fr ↗
Unofficial style guide
lecabcomstyle guide
lecabcom’s website (lecabcom.fr) uses Open Sans for its headings and body text. Its palette is led by Crimson (#FF1053), Royal Blue (#3452FF) and Light Sky Blue (#2AC4EA), with #000000 text on #F9F9F9. Captured from the live site on 26 October 2026.
- Website
- lecabcom.fr
- Typefaces
- Open Sans, Roboto, Nunito
- Palette
- 4 neutrals, 8 colours, 3 gradients
- Captured
- 26 Oct 2026 · added by @sitestyleguide
https://www.lecabcom.fr/
Screenshot
lecabcom.fr
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Agence Digitale Créative Et Audacieuse - LECABCOM
- ● 49 / 60 characters
- Meta description
- Travailler avec nous, c’est s’assurer un niveau d’expertise élevé dans un cadre budgétaire maîtrisé, sans frais de structure superflus. C’est faire appel à une compétence précise en réponse à un problème précis et ce durant toute la vie d’un projet, en toute flexibilité.
- ▲ 271 / 160 characters
- Site name
- lecabcom
- og:title
- Agence Digitale Créative Et Audacieuse - LECABCOM
- og:description
- Travailler avec nous, c’est s’assurer un niveau d’expertise élevé dans un cadre budgétaire maîtrisé, sans frais de structure superflus. C’est faire appel à une compétence précise en réponse à un problème précis et ce durant toute la vie d’un projet, en toute flexibilité.
- Language
- fr-FR
In search results
lecabcomhttps://www.lecabcom.fr/
Agence Digitale Créative Et Audacieuse - LECABCOM
Travailler avec nous, c’est s’assurer un niveau d’expertise élevé dans un cadre budgétaire maîtrisé, sans frais de structure superflus. C’est faire appel à une c…
When shared
No og:image, so no picture
lecabcom.fr
Agence Digitale Créative Et Audacieuse - LECABCOM
Travailler avec nous, c’est s’assurer un niveau d’expertise élevé dans un cadre budgétaire maîtrisé, sans fra…
Logo & favicons
Found as: image linked to the homepage. PNG, 650 × 200.
Logo
On white
On black
On Crimson
Favicons
1 found-
64 px · PNG
icon
Agence Digitale Créative Et Audacieuse - LECABCOM
Light browser tab
Agence Digitale Créative Et Audacieuse - LECABCOM
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 (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 46.5%
- Black 22.5%
- Crimson 5.9%
- Charcoal 5.2%
- Royal Blue 5%
- Off White 4.1%
- Light Sky Blue 3.7%
- Sky Blue 3.5%
- Red 2.5%
- Sky Blue 0.5%
- Deep Sky Blue 0.4%
- Light Pink 0.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
- 21.00:1 AAA
- On white
- —
Text, background, border · body, .container-wrap[data-nav-pos="after_project_2"] .bottom_controls .next-project h
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- —
- On white
- 21.00:1 AAA
Background, text, border · #search-results .result .title a, #sidebar h4
-
Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 80
- On text
- 1.66:1 Fail
- On white
- 12.63:1 AAA
Background, text, border · input[type=submit], .pricing-table[data-style="flat-alternative"] .pricing-column.extra-color-3:befo
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 13
- On text
- 15.46:1 AAA
- On white
- 1.36:1 Fail
Border, background, text · .single .heading-title, #respond h3 .cancel-comment-reply
Colours
Brand colours and accents, most used first-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 94 67 0
- On text
- 5.45:1 AA
- On white
- 3.85:1 AA large
Background, text, border · body.material .nectar-button.regular.m-extra-color-gradient-1, #top nav > ul > .button_solid_color_2 > a:before
-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 80 68 0 0
- On text
- 3.80:1 AA large
- On white
- 5.53:1 AA
Background, border, text · #search-results .result .title a, #footer-outer[data-link-hover="underline"][data-custom-color="false"] #footer-wi
-
Light Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 82 16 0 8
- On text
- 10.18:1 AAA
- On white
- 2.06:1 Fail
Background, text, border · body.material .nectar-button.regular.m-extra-color-gradient-2, .pricing-table[data-style="flat-alternative"] .pricing-column.extra-color-2:befo
-
Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 80 16 0 0
- On text
- 12.20:1 AAA
- On white
- 1.72:1 Fail
Background, text · body.material .nectar-button.regular.m-extra-color-gradient-2, .divider-small-border[data-color="extra-color-gradient-2"]
-
Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 86 86 0
- On text
- 5.52:1 AA
- On white
- 3.81:1 AA large
Background · body.material .nectar-button.regular.m-extra-color-gradient-1, .widget .nectar_widget[class*="nectar_blog_posts_"][data-style="hover-featured-i
-
Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 63 24 0 4
- On text
- 9.98:1 AAA
- On white
- 2.10:1 Fail
Background, text, border · .swiper-slide .button.solid_color_2 a, .sharing-default-minimal .nectar-social .twitter-share i
-
Deep Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 67 25 0 13
- On text
- 7.88:1 AAA
- On white
- 2.67:1 Fail
Background · .swiper-slide .button.solid_color_2 a:before
-
Light Pink
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 27 31 0
- On text
- 12.89:1 AAA
- On white
- 1.63:1 Fail
Text · #top nav .sf-menu .sfHover > a
Gradients
-
linear-gradient(to right, #3452ff 0%, #3452ff 100%)
-
linear-gradient(to bottom right, #ff1053, #ff2323)
-
linear-gradient(to bottom right, #32d6ff, #2AC4EA)
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.
Open Sans
Aa
300
Aa
700
Open Sans
Google Fonts · weights 300, 400, 600, 700 · headings, body, buttons
Aa
100
Aa
900
Roboto
Google Fonts · weights 100, 300, 400, 500, 600, 700, 900 · headings, buttons, body
Aa
300
Aa
700
Nunito
Google Fonts · weights 300, 700 · headings
Aa
300
Dosis
Google Fonts · weights 300 · headings
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
110px / 118px
weight 300 · capitalize · Nunito
lecabcom
Heading 2
48px / 62px
weight 300 · capitalize · Nunito
Agence Digitale Créative Et Audacieuse - LECABC…
Heading 3
30px / 40px
weight 300 · capitalize · Nunito
Agence Digitale Créative Et Audacieuse - LECABC…
Heading 4
20px / 34px
weight 300 · none · Nunito
Agence Digitale Créative Et Audacieuse - LECABC…
Heading 5
16px / 25px
weight 700 · capitalize · Roboto
Agence Digitale Créative Et Audacieuse - LECABC…
Heading 6
18px / 26px
weight 300 · uppercase · Dosis
Agence Digitale Créative Et Audacieuse - LECABC…
Body
16px / 30px
weight 400 · Roboto
Travailler avec nous, c’est s’assurer un niveau d’expertise élevé dans un cadre budgétaire maîtrisé, sans frais de structure superflus. C’e…
Paragraph
100%
Travailler avec nous, c’est s’assurer un niveau d’expertise élevé dans un cadre budgétaire maîtrisé, sans frais de structure superflus. C’e…
Small
100%
Travailler avec nous, c’est s’assurer un niveau d’expertise élevé dans un cadre budgétaire maîtrisé, sans frais de structure superflus. C’e…
Button
15px / 1
weight 600 · none · icomoon
Get started
Link
100%
Read more about lecabcom
Sizes in use
Most common across the site- 24pxline 39px · 10 rules
- 20pxline 20px · 20 rules
- 18pxline 32px · 23 rules
- 16pxline 22px · 37 rules
- 15pxline 1.6 · 9 rules
- 14pxline 14px · 54 rules
- 12pxline 20px · 52 rules
- 11pxline 14px · 13 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
input[type=submit] · #333333 · radius 2px
Link
Read our latest news today.
a · #3555FF
Corner radius
- 100px · 21×
- 50% · 18×
- 2px · 16×
- 5px · 15×
- 4px · 12×
- 200px · 10×
Shadows
- 0 1px 2px rgba(0,0,0,0.2)
- 0 19px 35px rgba(0,0,0,0.11)
- 0 7px 15px rgba(0,0,0,0.2)
- 0 1px 1px rgba(0,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
470
480
690
691
999
1000
1300
1600
On a scale of 0 to 1600 px.
Content widths (max-width)
1425 px
1000 px
900 px
600 px
420 px
300 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 49 characters, short enough to show in full in search results.
- ▲ CheckThe description is 271 characters. Search results usually show about 160.
- ▲ CheckThere is no og:image, so links shared on social media show no picture.
- ▲ CheckThe favicon is dark on a see-through background, so it nearly disappears on dark browser tabs.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does lecabcom use?
- lecabcom’s website uses four typefaces: Open Sans (headings and body text), google Fonts; Roboto, google Fonts; Nunito, google Fonts; Dosis, google Fonts.
- What are lecabcom’s brand colours?
- The main colours on lecabcom.fr are Crimson (#FF1053), Royal Blue (#3452FF), Light Sky Blue (#2AC4EA), Sky Blue (#32D6FF), Red (#FF2323) and Sky Blue (#5CBCF6).
- What colour is lecabcom’s text and background?
- Body text is #000000 on a #F9F9F9 background.
- Where is lecabcom’s logo from?
- The logo shown in this guide was found on lecabcom.fr’s homepage. For official logo files and usage rules, check lecabcom’s own brand or press page.
- Is this lecabcom’s official style guide?
- No. SiteStyleGuide made it from lecabcom.fr’s public web pages on 26 October 2026, and isn’t affiliated with lecabcom. 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
lecabcom-fr-tokens.css
/* lecabcom.fr design tokens, from SiteStyleGuide (https://sitestyleguide.com/lecabcom.fr) */
:root {
/* Colours */
--text: #000000;
--background: #F9F9F9;
--colour-white: #FFFFFF;
--colour-black: #000000;
--colour-charcoal: #333333;
--colour-off-white: #DDDDDD;
--colour-crimson: #FF1053;
--colour-royal-blue: #3452FF;
--colour-light-sky-blue: #2AC4EA;
--colour-sky-blue: #32D6FF;
--colour-red: #FF2323;
--colour-sky-blue-2: #5CBCF6;
--colour-deep-sky-blue: #49A7DF;
--colour-light-pink: #FFBAAF;
--gradient-1: linear-gradient(to right, #3452ff 0%, #3452ff 100%);
--gradient-2: linear-gradient(to bottom right, #ff1053, #ff2323);
--gradient-3: linear-gradient(to bottom right, #32d6ff, #2AC4EA);
/* Typefaces */
--font-headings: 'Open Sans';
--font-body: 'Open Sans';
--font-buttons: 'Open Sans';
--font-other: 'linecons';
/* Type scale */
--text-h1: 110px;
--leading-h1: 118px;
--text-h2: 48px;
--leading-h2: 62px;
--text-h3: 30px;
--leading-h3: 40px;
--text-h4: 20px;
--leading-h4: 34px;
--text-h5: 16px;
--leading-h5: 25px;
--text-h6: 18px;
--leading-h6: 26px;
--text-body: 16px;
--leading-body: 30px;
--text-p: 100%;
--text-small: 100%;
--text-button: 15px;
--leading-button: 1;
--text-a: 100%;
/* Shape */
--radius-1: 100px;
--radius-2: 50%;
--radius-3: 2px;
--radius-4: 5px;
--radius-5: 4px;
--radius-6: 200px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 470px;
--breakpoint-2: 480px;
--breakpoint-3: 690px;
--breakpoint-4: 691px;
--breakpoint-5: 999px;
--breakpoint-6: 1000px;
--breakpoint-7: 1300px;
--breakpoint-8: 1600px;
--max-width-1: 1425px;
--max-width-2: 1000px;
--max-width-3: 900px;
--max-width-4: 600px;
--max-width-5: 420px;
--max-width-6: 300px;
}
{
"site": "lecabcom.fr",
"source": "https://sitestyleguide.com/lecabcom.fr",
"text": "#000000",
"background": "#F9F9F9",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Charcoal",
"hex": "#333333",
"rgb": [
51,
51,
51
]
},
{
"name": "Off White",
"hex": "#DDDDDD",
"rgb": [
221,
221,
221
]
},
{
"name": "Crimson",
"hex": "#FF1053",
"rgb": [
255,
16,
83
]
},
{
"name": "Royal Blue",
"hex": "#3452FF",
"rgb": [
52,
82,
255
]
},
{
"name": "Light Sky Blue",
"hex": "#2AC4EA",
"rgb": [
42,
196,
234
]
},
{
"name": "Sky Blue",
"hex": "#32D6FF",
"rgb": [
50,
214,
255
]
},
{
"name": "Red",
"hex": "#FF2323",
"rgb": [
255,
35,
35
]
},
{
"name": "Sky Blue",
"hex": "#5CBCF6",
"rgb": [
92,
188,
246
]
},
{
"name": "Deep Sky Blue",
"hex": "#49A7DF",
"rgb": [
73,
167,
223
]
},
{
"name": "Light Pink",
"hex": "#FFBAAF",
"rgb": [
255,
186,
175
]
}
],
"fonts": [
{
"name": "Open Sans",
"stack": "'Open Sans'",
"weights": [
300,
400,
600,
700
],
"source": "Google Fonts"
},
{
"name": "Roboto",
"stack": "Roboto",
"weights": [
100,
300,
400,
500,
600,
700,
900
],
"source": "Google Fonts"
},
{
"name": "Nunito",
"stack": "Nunito",
"weights": [
300,
700
],
"source": "Google Fonts"
},
{
"name": "Dosis",
"stack": "Dosis",
"weights": [
300
],
"source": "Google Fonts"
},
{
"name": "linecons",
"stack": "linecons",
"weights": [
400
],
"source": "Self-hosted"
},
{
"name": "steadysets",
"stack": "steadysets",
"weights": [
400
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run lecabcom.fr?
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/lecabcom.fr" title="lecabcom style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Also set in Open Sans
Other websites using Open Sans as their main typeface
Similar colours
Websites whose lead colour is closest to lecabcom’s
Gymglish
gymglish.com · 5 days ago
Save
El Español
elespanol.com · 5 days ago
Save
RedLight
redlight.dev · 6 days ago
Save
Polygon.com
polygon.com · 5 days ago
Save
Captured from lecabcom.fr on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by lecabcom; this guide describes the public website for reference.