12 CSS Code Blocks 11 / 12
Minimalist Light Mode / Editorial Theme
A bright Stripe-style docs aesthetic — crisp <code>#f8fafc</code> background, white panel, elegant Fraunces headings, and gentle indigo / green / orange syntax accents tuned for daylight readability.
Best forproduct docs, API reference sites, marketing pages targeting designers who want the page to feel calm, and any audience reading on bright screens during the day.
The code
<section class="ccb-lgt" aria-label="Minimalist light mode editorial code block demo">
<div class="ccb-lgt__wrap">
<div class="ccb-lgt__block">
<div class="ccb-lgt__head">
<span class="ccb-lgt__name">checkout.js</span>
<span class="ccb-lgt__lang">JavaScript</span>
</div>
<pre class="ccb-lgt__pre"><code><span class="ccb-lgt__c">// create a payment session</span>
<span class="ccb-lgt__k">const</span> session = <span class="ccb-lgt__k">await</span> stripe.checkout.sessions.<span class="ccb-lgt__f">create</span>({
mode: <span class="ccb-lgt__s">'payment'</span>,
line_items: [{ price: <span class="ccb-lgt__s">'price_1Nx'</span>, quantity: <span class="ccb-lgt__n">1</span> }],
success_url: <span class="ccb-lgt__s">'https://codefronts.com/done'</span>,
});</code></pre>
</div>
</div>
</section> <section class="ccb-lgt" aria-label="Minimalist light mode editorial code block demo">
<div class="ccb-lgt__wrap">
<div class="ccb-lgt__block">
<div class="ccb-lgt__head">
<span class="ccb-lgt__name">checkout.js</span>
<span class="ccb-lgt__lang">JavaScript</span>
</div>
<pre class="ccb-lgt__pre"><code><span class="ccb-lgt__c">// create a payment session</span>
<span class="ccb-lgt__k">const</span> session = <span class="ccb-lgt__k">await</span> stripe.checkout.sessions.<span class="ccb-lgt__f">create</span>({
mode: <span class="ccb-lgt__s">'payment'</span>,
line_items: [{ price: <span class="ccb-lgt__s">'price_1Nx'</span>, quantity: <span class="ccb-lgt__n">1</span> }],
success_url: <span class="ccb-lgt__s">'https://codefronts.com/done'</span>,
});</code></pre>
</div>
</div>
</section>/* ─── 11 Minimalist Light Mode / Editorial Theme ──────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Fraunces:opsz,[email protected],400;9..144,600;9..144,800&display=swap');
.ccb-lgt {
--ccb-lgt-paper: #f8fafc;
--ccb-lgt-panel: #ffffff;
--ccb-lgt-ink: #1f2933;
--ccb-lgt-muted: #697586;
--ccb-lgt-line: #e7ecf2;
--ccb-lgt-accent: #635bff;
--ccb-lgt-green: #0a7c5a;
--ccb-lgt-orange: #c2410c;
width: 100%;
min-height: 320px;
background: var(--ccb-lgt-paper);
color: var(--ccb-lgt-ink);
font-family: 'Fraunces', Georgia, serif;
display: flex; align-items: center; justify-content: center;
padding: 36px 22px;
box-sizing: border-box;
}
.ccb-lgt *, .ccb-lgt *::before, .ccb-lgt *::after { box-sizing: border-box; }
.ccb-lgt__wrap { width: 100%; max-width: 600px; }
.ccb-lgt__block {
background: var(--ccb-lgt-panel);
border: 1px solid var(--ccb-lgt-line);
border-radius: 14px; overflow: hidden;
box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -16px rgba(16,24,40,.18);
}
.ccb-lgt__head {
display: flex; align-items: center; gap: 10px;
padding: 13px 18px;
border-bottom: 1px solid var(--ccb-lgt-line);
background: #fcfdfe;
}
.ccb-lgt__name { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ccb-lgt-muted); font-weight: 500; }
.ccb-lgt__lang {
margin-left: auto;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; color: var(--ccb-lgt-accent);
background: #eef0ff;
padding: 3px 10px; border-radius: 6px; font-weight: 600;
}
.ccb-lgt__pre {
margin: 0; padding: 20px 20px 24px;
font-family: 'IBM Plex Mono', monospace;
font-size: 13px; line-height: 1.8;
color: #334155; overflow-x: auto;
}
.ccb-lgt__k { color: var(--ccb-lgt-accent); }
.ccb-lgt__f { color: #0b69c7; }
.ccb-lgt__s { color: var(--ccb-lgt-green); }
.ccb-lgt__n { color: var(--ccb-lgt-orange); }
.ccb-lgt__c { color: #9aa5b1; font-style: italic; }
.ccb-lgt__pre::-webkit-scrollbar { height: 8px; }
.ccb-lgt__pre::-webkit-scrollbar-thumb { background: #dde3ea; border-radius: 8px; } /* ─── 11 Minimalist Light Mode / Editorial Theme ──────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Fraunces:opsz,[email protected],400;9..144,600;9..144,800&display=swap');
.ccb-lgt {
--ccb-lgt-paper: #f8fafc;
--ccb-lgt-panel: #ffffff;
--ccb-lgt-ink: #1f2933;
--ccb-lgt-muted: #697586;
--ccb-lgt-line: #e7ecf2;
--ccb-lgt-accent: #635bff;
--ccb-lgt-green: #0a7c5a;
--ccb-lgt-orange: #c2410c;
width: 100%;
min-height: 320px;
background: var(--ccb-lgt-paper);
color: var(--ccb-lgt-ink);
font-family: 'Fraunces', Georgia, serif;
display: flex; align-items: center; justify-content: center;
padding: 36px 22px;
box-sizing: border-box;
}
.ccb-lgt *, .ccb-lgt *::before, .ccb-lgt *::after { box-sizing: border-box; }
.ccb-lgt__wrap { width: 100%; max-width: 600px; }
.ccb-lgt__block {
background: var(--ccb-lgt-panel);
border: 1px solid var(--ccb-lgt-line);
border-radius: 14px; overflow: hidden;
box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -16px rgba(16,24,40,.18);
}
.ccb-lgt__head {
display: flex; align-items: center; gap: 10px;
padding: 13px 18px;
border-bottom: 1px solid var(--ccb-lgt-line);
background: #fcfdfe;
}
.ccb-lgt__name { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ccb-lgt-muted); font-weight: 500; }
.ccb-lgt__lang {
margin-left: auto;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; color: var(--ccb-lgt-accent);
background: #eef0ff;
padding: 3px 10px; border-radius: 6px; font-weight: 600;
}
.ccb-lgt__pre {
margin: 0; padding: 20px 20px 24px;
font-family: 'IBM Plex Mono', monospace;
font-size: 13px; line-height: 1.8;
color: #334155; overflow-x: auto;
}
.ccb-lgt__k { color: var(--ccb-lgt-accent); }
.ccb-lgt__f { color: #0b69c7; }
.ccb-lgt__s { color: var(--ccb-lgt-green); }
.ccb-lgt__n { color: var(--ccb-lgt-orange); }
.ccb-lgt__c { color: #9aa5b1; font-style: italic; }
.ccb-lgt__pre::-webkit-scrollbar { height: 8px; }
.ccb-lgt__pre::-webkit-scrollbar-thumb { background: #dde3ea; border-radius: 8px; }More from 12 CSS Code Blocks
Glow-Effect & Neon Tech Code BlockGlassmorphism Code TerminalInline Code Snippet Pill StylingNeumorphic Embedded Code BoxSplit-Pane Code + Live Preview ContainerExpandable / Collapsible Code WrapperCode Block with Copy to Clipboard ButtonMinimalist Dark Mode Code BoxMac-Style Window ContainerCode Container with Line Numbers and Filename HeaderHorizontal Scroll & Word-Wrap Handling (Mobile Responsive)
View the full collection →