PPP
ppp.tokyo.jp · 6 days ago
SaveUnofficial A style guide made by SiteStyleGuide from launchdarkly.com’s public web pages. Not affiliated with or endorsed by LaunchDarkly. The real site is launchdarkly.com ↗
Unofficial style guide
LaunchDarklystyle guide
LaunchDarkly’s website (launchdarkly.com) uses Sohne for its headings and body text. Its palette is led by Cornflower Blue (#7084FF), Royal Blue (#405BFF) and Light Green Yellow (#DDFF46), with #FFFFFF text on #191919. Captured from the live site on 27 October 2026.
- Website
- launchdarkly.com
- Typefaces
- Sohne, headingFont1, headingFont2
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 27 Oct 2026 · added by @sitestyleguide
https://launchdarkly.com/
Screenshot
launchdarkly.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
- Runtime Control for AI-Era Software | Feature Flags & AI Agent Control | LaunchDarkly
- ▲ 85 / 60 characters
- Meta description
- LaunchDarkly helps teams safely manage code and AI agents in production with feature flags, progressive delivery, automated rollback, and runtime control.
- ● 154 / 160 characters
- Site name
- LaunchDarkly
- og:title
- Runtime Control for AI-Era Software | Feature Flags & AI Agent Control | LaunchDarkly
- og:description
- LaunchDarkly helps teams safely manage code and AI agents in production with feature flags, progressive delivery, automated rollback, and runtime control.
- Language
- en-US
- Theme colour
- #FFF
In search results
LaunchDarklyhttps://launchdarkly.com/
Runtime Control for AI-Era Software | Feature Flags & AI Agen…
LaunchDarkly helps teams safely manage code and AI agents in production with feature flags, progressive delivery, automated rollback, and runtime control.
When shared
launchdarkly.com
Runtime Control for AI-Era Software | Feature Flags & AI Agent Control | LaunchDarkly
LaunchDarkly helps teams safely manage code and AI agents in production with feature flags, progressive deliv…
Logo & favicons
Found as: schema.org logo. PNG, 96 × 96.
Logo
On white
On black
On Cornflower Blue
Favicons
2 found-
-
96 px · PNG
icon
Runtime Control for AI-Era Software | Feature Flags & AI Agent Control | LaunchDarkly
Light browser tab
Runtime Control for AI-Era Software | Feature Flags & AI Agent Control | LaunchDarkly
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 (#FFFFFF) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 31.5%
- Near Black 26%
- Charcoal 8.5%
- Black 6.8%
- Cornflower Blue 5.5%
- Royal Blue 5.4%
- Light Green Yellow 4.8%
- Medium Orchid 2.3%
- Sky Blue 2.1%
- Deep Pink 1.8%
- Dark Orange 1.8%
- Yellow 1.3%
- Gold 0.6%
- Deep Green Yellow 0.6%
- Indian Red 0.6%
- Crimson 0.6%
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
- —
- On white
- —
Background, text, graphic · inline style on <div>, div.styles-module__wa_yaW__mainNavParent .styles-module__wa_yaW__bottomBanner .s
-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 90
- On text
- 17.58:1 AAA
- On white
- 17.58:1 AAA
Background, text, border · .styles-module__Q-Graa__customerStories .styles-module__Q-Graa__filterContainer , .styles-module__OKMFxa__container .styles-module__OKMFxa__card .styles-module__O
-
Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 84
- On text
- 14.74:1 AAA
- On white
- 14.74:1 AAA
Text, background, border · .styles-module__z7oeYG__darkTheme .styles-module__z7oeYG__arrows .styles-module_, .styles-module__ZyxBrq__hypothesisButton h4
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 21.00:1 AAA
- On white
- 21.00:1 AAA
Text, background, border · .styles-module__Uz89pW__layout .styles-module__Uz89pW__main .styles-module__Uz89, .styles-module__b5SZKG__list .styles-module__b5SZKG__listItem .styles-module__b5
Colours
Brand colours and accents, most used first-
Cornflower Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 56 48 0 0
- On text
- 3.26:1 AA large
- On white
- 3.26:1 AA large
Background, text, border · .styles-module__wHdT2G__hero h1, .styles-module__wHdT2G__titleContainer .styles-module__wHdT2G__forceH1 *
-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 75 64 0 0
- On text
- 5.05:1 AA
- On white
- 5.05:1 AA
Text, background, border · .button.secondary.alt, .styles-module__Iom0nW__card .styles-module__Iom0nW__cardHeading .styles-module_
-
Light Green Yellow
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 13 0 73 0
- On text
- 1.14:1 Fail
- On white
- 1.14:1 Fail
Background, text, border · .button-refresh-yellow, .styles-module__Iom0nW__card .styles-module__Iom0nW__cardHeading .styles-module_
-
Medium Orchid
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 27 64 0 13
- On text
- 4.44:1 AA large
- On white
- 4.44:1 AA large
Background, text, graphic · .styles-module__Iom0nW__card .styles-module__Iom0nW__cardHeading .styles-module_, .button.pink
-
Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 75 13 0 4
- On text
- 1.73:1 Fail
- On white
- 1.73:1 Fail
Background, text, graphic · .styles-module__Iom0nW__card .styles-module__Iom0nW__cardHeading .styles-module_, .styles-module__hA_O7G__color_cyan
-
Deep Pink
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 79 36 0
- On text
- 3.34:1 AA large
- On white
- 3.34:1 AA large
Text, background, graphic · .styles-module__Iom0nW__card .styles-module__Iom0nW__cardHeading .styles-module_, .styles-module__hA_O7G__color_pink
-
Dark Orange
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 38 84 0
- On text
- 2.08:1 Fail
- On white
- 2.08:1 Fail
Background, text, border · .button-refresh-orange, .styles-module__Iom0nW__card .styles-module__Iom0nW__cardHeading .styles-module_
-
Yellow
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 8 0 78 0
- On text
- 1.11:1 Fail
- On white
- 1.11:1 Fail
Background, text, graphic · .button.yellow, .styles-module__hA_O7G__color_yellow
-
Gold
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 18 73 7
- On text
- 1.68:1 Fail
- On white
- 1.68:1 Fail
Graphic, text, border · .styles-module__hA_O7G__color_sYellow, .styles-module__5zGs1G__color_sYellow
-
Deep Green Yellow
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 34 0 63 0
- On text
- 1.22:1 Fail
- On white
- 1.22:1 Fail
Graphic, text, background · .styles-module__hA_O7G__color_green, .styles-module__5zGs1G__color_green
-
Indian Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 78 58 0
- On text
- 3.48:1 AA large
- On white
- 3.48:1 AA large
Background · .button.pink, .styles-module__9uIOMq__newPill.styles-module__9uIOMq__mobileColor
-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 75 75 9
- On text
- 4.10:1 AA large
- On white
- 4.10:1 AA large
Text · .styles-module__Ap6VnW__error, .styles-module__5BmC9G__errorMsg
Gradients
-
linear-gradient(204deg,#fff 47%,#7084ff 130%)
-
linear-gradient(179deg,#405bff 1.06%,#7084ff 123.42%)
-
linear-gradient(180deg,#fff 0,rgba(255,255,255,0) 100%),#fff)
Dark mode
Switched on by the site-
White
#FFFFFF · --fg-default
-
Near Black
#191919 · --bg-default
-
Charcoal
#282828 · --bg-subtle
-
Light Grey
#D1D3D4 · --fg-muted
-
Grey
#939598 · --fg-subtle
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.
Sohne
Aa
400
Sohne
System font, or not loaded on this page · weights 400 · shown in a stand-in if you don’t have it
Aa
400
Aa
500
headingFont1
Self-hosted · weights 400, 500 · shown in a stand-in if you don’t have it
Aa
400
Aa
500
headingFont2
Self-hosted · weights 400, 500 · shown in a stand-in if you don’t have it
Aa
400
Aa
700
headingFont3
Self-hosted · weights 400, 500, 600, 700 · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
65px / 1.2
weight 500
LaunchDarkly
Heading 2
40px / 1.2
weight 500
Runtime Control for AI-Era Software | Feature F…
Heading 3
28px / 1.3
weight 500
Runtime Control for AI-Era Software | Feature F…
Heading 4
20px / 1.3
weight 500
Runtime Control for AI-Era Software | Feature F…
Heading 5
16px / 1.4
weight 500
Runtime Control for AI-Era Software | Feature F…
Heading 6
16px / 1.4
weight 500
Runtime Control for AI-Era Software | Feature F…
Body
16px / 1.5em
LaunchDarkly helps teams safely manage code and AI agents in production with feature flags, progressive delivery, automated rollback, and r…
Paragraph
12px / 1.4em
weight 500 · uppercase
LaunchDarkly helps teams safely manage code and AI agents in production with feature flags, progressive delivery, automated rollback, and r…
Button
18px
weight 500
Get started
Link
16px / 1.5
weight 400
Read more about LaunchDarkly
Sizes in use
Most common across the site- 40pxline 1.05 · 7 rules
- 32pxline 1.1 · 13 rules
- 24pxline 1.1 · 21 rules
- 20pxline 1.5 · 38 rules
- 18pxline 1.5 · 23 rules
- 16pxline 150% · 54 rules
- 14pxline 1.5 · 26 rules
- 12pxline 1 · 57 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
.button-refresh-yellow · #DDFF46 · radius 12px
Link
Read our latest news today.
a · #7084FF
Corner radius
- 24px · 39×
- 12px · 35×
- 16px · 26×
- 8px · 24×
- 50% · 13×
Shadows
- 0 6px 11px rgba(33,33,33,.11)
- 0 3px 12px 2px rgba(0,0,0,.1)
- 0 6px 20px rgba(0,0,0,.25)
- 0 0 0 2px rgba(221,255,70,.35)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
499
768
769
1024
1025
1099
1100
1340
On a scale of 0 to 1440 px.
Content widths (max-width)
1140 px
1100 px
800 px
640 px
500 px
320 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 85 characters. Google usually cuts titles near 60, so the end may not show in results.
- ▲ 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 LaunchDarkly use?
- LaunchDarkly’s website uses four typefaces: Sohne (headings and body text), a system font; headingFont1, self-hosted; headingFont2, self-hosted; headingFont3, self-hosted.
- What are LaunchDarkly’s brand colours?
- The main colours on launchdarkly.com are Cornflower Blue (#7084FF), Royal Blue (#405BFF), Light Green Yellow (#DDFF46), Medium Orchid (#A34FDE), Sky Blue (#3DD6F5) and Deep Pink (#FF35A2).
- What colour is LaunchDarkly’s text and background?
- Body text is #FFFFFF on a #191919 background.
- Where is LaunchDarkly’s logo from?
- The logo shown in this guide was found on launchdarkly.com’s homepage. For official logo files and usage rules, check LaunchDarkly’s own brand or press page.
- Is this LaunchDarkly’s official style guide?
- No. SiteStyleGuide made it from launchdarkly.com’s public web pages on 27 October 2026, and isn’t affiliated with LaunchDarkly. 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
launchdarkly-com-tokens.css
/* launchdarkly.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/launchdarkly.com) */
:root {
/* Colours */
--text: #FFFFFF;
--background: #191919;
--colour-white: #FFFFFF;
--colour-near-black: #191919;
--colour-charcoal: #282828;
--colour-black: #000000;
--colour-cornflower-blue: #7084FF;
--colour-royal-blue: #405BFF;
--colour-light-green-yellow: #DDFF46;
--colour-medium-orchid: #A34FDE;
--colour-sky-blue: #3DD6F5;
--colour-deep-pink: #FF35A2;
--colour-dark-orange: #FF9D29;
--colour-yellow: #EBFF38;
--colour-gold: #EEC340;
--colour-deep-green-yellow: #A9FF5E;
--colour-indian-red: #FF386B;
--colour-crimson: #E83B3B;
--gradient-1: linear-gradient(204deg,#fff 47%,#7084ff 130%);
--gradient-2: linear-gradient(179deg,#405bff 1.06%,#7084ff 123.42%);
--gradient-3: linear-gradient(180deg,#fff 0,rgba(255,255,255,0) 100%),#fff);
/* Typefaces */
--font-other: 'Sohne';
/* Type scale */
--text-h1: 65px;
--leading-h1: 1.2;
--text-h2: 40px;
--leading-h2: 1.2;
--text-h3: 28px;
--leading-h3: 1.3;
--text-h4: 20px;
--leading-h4: 1.3;
--text-h5: 16px;
--leading-h5: 1.4;
--text-h6: 16px;
--leading-h6: 1.4;
--text-body: 16px;
--leading-body: 1.5em;
--text-p: 12px;
--leading-p: 1.4em;
--text-button: 18px;
--text-a: 16px;
--leading-a: 1.5;
/* Shape */
--radius-1: 24px;
--radius-2: 12px;
--radius-3: 16px;
--radius-4: 8px;
--radius-5: 50%;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 499px;
--breakpoint-2: 768px;
--breakpoint-3: 769px;
--breakpoint-4: 1024px;
--breakpoint-5: 1025px;
--breakpoint-6: 1099px;
--breakpoint-7: 1100px;
--breakpoint-8: 1340px;
--max-width-1: 1140px;
--max-width-2: 1100px;
--max-width-3: 800px;
--max-width-4: 640px;
--max-width-5: 500px;
--max-width-6: 320px;
}
{
"site": "launchdarkly.com",
"source": "https://sitestyleguide.com/launchdarkly.com",
"text": "#FFFFFF",
"background": "#191919",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Near Black",
"hex": "#191919",
"rgb": [
25,
25,
25
]
},
{
"name": "Charcoal",
"hex": "#282828",
"rgb": [
40,
40,
40
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Cornflower Blue",
"hex": "#7084FF",
"rgb": [
112,
132,
255
]
},
{
"name": "Royal Blue",
"hex": "#405BFF",
"rgb": [
64,
91,
255
]
},
{
"name": "Light Green Yellow",
"hex": "#DDFF46",
"rgb": [
221,
255,
70
]
},
{
"name": "Medium Orchid",
"hex": "#A34FDE",
"rgb": [
163,
79,
222
]
},
{
"name": "Sky Blue",
"hex": "#3DD6F5",
"rgb": [
61,
214,
245
]
},
{
"name": "Deep Pink",
"hex": "#FF35A2",
"rgb": [
255,
53,
162
]
},
{
"name": "Dark Orange",
"hex": "#FF9D29",
"rgb": [
255,
157,
41
]
},
{
"name": "Yellow",
"hex": "#EBFF38",
"rgb": [
235,
255,
56
]
},
{
"name": "Gold",
"hex": "#EEC340",
"rgb": [
238,
195,
64
]
},
{
"name": "Deep Green Yellow",
"hex": "#A9FF5E",
"rgb": [
169,
255,
94
]
},
{
"name": "Indian Red",
"hex": "#FF386B",
"rgb": [
255,
56,
107
]
},
{
"name": "Crimson",
"hex": "#E83B3B",
"rgb": [
232,
59,
59
]
}
],
"fonts": [
{
"name": "Sohne",
"stack": "Sohne",
"weights": [
400
],
"source": "System font, or not loaded on this page"
},
{
"name": "headingFont1",
"stack": "headingFont1, headingFont1 Fallback",
"weights": [
400,
500
],
"source": "Self-hosted"
},
{
"name": "headingFont2",
"stack": "headingFont2, headingFont2 Fallback",
"weights": [
400,
500
],
"source": "Self-hosted"
},
{
"name": "headingFont3",
"stack": "headingFont3, headingFont3 Fallback",
"weights": [
400,
500,
600,
700
],
"source": "Self-hosted"
},
{
"name": "bodyFont",
"stack": "bodyFont, bodyFont Fallback",
"weights": [
400,
500
],
"source": "Self-hosted"
},
{
"name": "monoFont",
"stack": "monoFont, monoFont Fallback",
"weights": [
400
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run launchdarkly.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/launchdarkly.com" title="LaunchDarkly 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 LaunchDarkly’s
Captured from launchdarkly.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by LaunchDarkly; this guide describes the public website for reference.