Free CSS template · Studio
Bublue Studio
A calm studio portfolio in cool blues, built to let case studies breathe.
A modern 2026 rebuild of a long-running CSS Crème template: responsive, accessible, and framework-free. Preview it below, then copy the starter.
We make
bold work.
bold work.
Brand
Web
Motion
Design tokens
bg#0A1A2F
surface#102740
primary#3B82F6
accent#22D3EE
muted#8AA0BC
text#E8F1FB
Install the theme
Building with shadcn/ui? This template's color system is published as a real theme — light and dark, OKLCH tokens, contrast checked. One command drops it into your project.
npx shadcn@latest add https://csscreme.com/r/t/bublue_studio.json globals.css — CSS variables
:root {
--background: oklch(98.8% 0.001 286.4);
--foreground: oklch(25.7% 0.022 254.2);
--card: oklch(97.2% 0.003 247.9);
--card-foreground: oklch(25.7% 0.022 254.2);
--popover: oklch(97.2% 0.003 247.9);
--popover-foreground: oklch(25.7% 0.022 254.2);
--primary: oklch(62.3% 0.188 259.8);
--primary-foreground: oklch(15.2% 0.009 285.3);
--secondary: oklch(97.8% 0.003 228.8);
--secondary-foreground: oklch(25.7% 0.022 254.2);
--muted: oklch(97.8% 0.003 228.8);
--muted-foreground: oklch(53.5% 0.018 254.0);
--accent: oklch(79.7% 0.134 211.5);
--accent-foreground: oklch(15.2% 0.009 285.3);
--destructive: oklch(62.6% 0.193 23.0);
--destructive-foreground: oklch(15.2% 0.009 285.3);
--border: oklch(83.8% 0.006 255.5);
--input: oklch(83.8% 0.006 255.5);
--ring: oklch(62.3% 0.188 259.8);
--chart-1: oklch(62.3% 0.188 259.8);
--chart-2: oklch(79.7% 0.134 211.5);
--chart-3: oklch(54.0% 0.255 287.7);
--chart-4: oklch(88.3% 0.142 189.9);
--chart-5: oklch(70.8% 0.147 239.8);
--sidebar: oklch(98.2% 0.002 247.8);
--sidebar-foreground: oklch(25.7% 0.022 254.2);
--sidebar-primary: oklch(62.3% 0.188 259.8);
--sidebar-primary-foreground: oklch(15.2% 0.009 285.3);
--sidebar-accent: oklch(97.8% 0.003 228.8);
--sidebar-accent-foreground: oklch(25.7% 0.022 254.2);
--sidebar-border: oklch(83.8% 0.006 255.5);
--sidebar-ring: oklch(62.3% 0.188 259.8);
--radius: 12px;
--shadow-2xs: 0 1px 2px 0px rgb(28 36 46 / 0.05);
--shadow-xs: 0 1px 3px 0px rgb(28 36 46 / 0.06);
--shadow-sm: 0 1px 3px 0px rgb(28 36 46 / 0.08), 0 1px 2px -1px rgb(28 36 46 / 0.08);
--shadow-md: 0 4px 6px -1px rgb(28 36 46 / 0.09), 0 2px 4px -2px rgb(28 36 46 / 0.09);
--shadow-lg: 0 10px 15px -3px rgb(28 36 46 / 0.1), 0 4px 6px -4px rgb(28 36 46 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(28 36 46 / 0.12), 0 8px 10px -6px rgb(28 36 46 / 0.12);
--shadow-2xl: 0 25px 50px -12px rgb(28 36 46 / 0.22);
}
.dark {
--background: oklch(21.6% 0.047 256.0);
--foreground: oklch(95.4% 0.017 250.8);
--card: oklch(26.8% 0.055 252.3);
--card-foreground: oklch(95.4% 0.017 250.8);
--popover: oklch(26.8% 0.055 252.3);
--popover-foreground: oklch(95.4% 0.017 250.8);
--primary: oklch(62.3% 0.188 259.8);
--primary-foreground: oklch(15.2% 0.009 285.3);
--secondary: oklch(24.9% 0.053 254.2);
--secondary-foreground: oklch(95.4% 0.017 250.8);
--muted: oklch(24.9% 0.053 254.2);
--muted-foreground: oklch(69.8% 0.048 254.6);
--accent: oklch(79.7% 0.134 211.5);
--accent-foreground: oklch(15.2% 0.009 285.3);
--destructive: oklch(62.6% 0.193 23.0);
--destructive-foreground: oklch(15.2% 0.009 285.3);
--border: oklch(36.6% 0.045 253.9);
--input: oklch(36.6% 0.045 253.9);
--ring: oklch(62.3% 0.188 259.8);
--chart-1: oklch(62.3% 0.188 259.8);
--chart-2: oklch(79.7% 0.134 211.5);
--chart-3: oklch(54.0% 0.255 287.7);
--chart-4: oklch(88.3% 0.142 189.9);
--chart-5: oklch(70.8% 0.147 239.8);
--sidebar: oklch(24.4% 0.051 253.4);
--sidebar-foreground: oklch(95.4% 0.017 250.8);
--sidebar-primary: oklch(62.3% 0.188 259.8);
--sidebar-primary-foreground: oklch(15.2% 0.009 285.3);
--sidebar-accent: oklch(24.9% 0.053 254.2);
--sidebar-accent-foreground: oklch(95.4% 0.017 250.8);
--sidebar-border: oklch(36.6% 0.045 253.9);
--sidebar-ring: oklch(62.3% 0.188 259.8);
--shadow-2xs: 0 1px 2px 0px rgb(232 241 251 / 0.16);
--shadow-xs: 0 1px 3px 0px rgb(232 241 251 / 0.18);
--shadow-sm: 0 1px 3px 0px rgb(232 241 251 / 0.22), 0 1px 2px -1px rgb(232 241 251 / 0.22);
--shadow-md: 0 4px 6px -1px rgb(232 241 251 / 0.26), 0 2px 4px -2px rgb(232 241 251 / 0.26);
--shadow-lg: 0 10px 15px -3px rgb(232 241 251 / 0.3), 0 4px 6px -4px rgb(232 241 251 / 0.3);
--shadow-xl: 0 20px 25px -5px rgb(232 241 251 / 0.34), 0 8px 10px -6px rgb(232 241 251 / 0.34);
--shadow-2xl: 0 25px 50px -12px rgb(232 241 251 / 0.45);
}Grab the starter
A complete, responsive single-file page themed to this template. Copy it into an
index.html and open it. That's the whole setup.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bublue Studio</title>
<style>
:root {
--bg: #0A1A2F; --surface: #102740; --primary: #3B82F6;
--accent: #22D3EE; --text: #E8F1FB; --muted: #8AA0BC;
}
* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 Inter, system-ui, sans-serif; background: var(--bg); color: var(--text); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 80px 24px; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; }
p { margin: 18px 0 0; color: var(--muted); font-size: 1.15rem; max-width: 52ch; }
.btn { display: inline-block; margin-top: 28px; padding: 13px 26px; border-radius: 12px;
background: var(--primary); color: #fff; text-decoration: none; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
border-radius: 16px; padding: 24px; }
</style>
</head>
<body>
<main class="wrap">
<h1>Bublue Studio</h1>
<p>A calm studio portfolio in cool blues, built to let case studies breathe.</p>
<a class="btn" href="#">Get started</a>
<div class="grid">
<div class="card">One</div><div class="card">Two</div><div class="card">Three</div>
</div>
</main>
</body>
</html>About the Bublue Studio template
Bublue Studio began as one of CSS Crème's most-linked free templates. We rebuilt it from scratch for 2026: modern, responsive CSS with no framework to untangle, custom properties for every color so a rebrand takes minutes, and markup that stays readable months later. The preview above is the real layout; the starter is the real code.
Want to push it further? Pull a different palette, round the corners in the border-radius tool, or see the system decoded in a breakdown.
More creative templates: Creative Media, Bat Design, Spider Design.