Free CSS template · Agency

Bat Design

A dark, electric agency layout with neon accents for studios that like their work loud.

A modern 2026 rebuild of a long-running CSS Crème template: responsive, accessible, and framework-free. Preview it below, then copy the starter.

batdesign.example.com

We make
bold work.

Brand

Web

Motion

Design tokens

bg#0C0A14

surface#181226

primary#8B5CF6

accent#22D3EE

muted#9E96B5

text#F2EEFF

Type Space Grotesk · browse palettes →

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/bat_design.json

globals.css — CSS variables

:root {
  --background: oklch(98.8% 0.000 89.9);
  --foreground: oklch(23.1% 0.049 292.7);
  --card: oklch(97.1% 0.003 308.4);
  --card-foreground: oklch(23.1% 0.049 292.7);
  --popover: oklch(97.1% 0.003 308.4);
  --popover-foreground: oklch(23.1% 0.049 292.7);
  --primary: oklch(60.6% 0.219 292.7);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(97.7% 0.002 325.6);
  --secondary-foreground: oklch(23.1% 0.049 292.7);
  --muted: oklch(97.7% 0.002 325.6);
  --muted-foreground: oklch(52.8% 0.019 297.2);
  --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.5% 0.006 297.7);
  --input: oklch(83.5% 0.006 297.7);
  --ring: oklch(60.6% 0.219 292.7);
  --radius: 12px;
}

.dark {
  --background: oklch(15.3% 0.021 292.9);
  --foreground: oklch(95.7% 0.023 296.7);
  --card: oklch(20.1% 0.040 296.5);
  --card-foreground: oklch(95.7% 0.023 296.7);
  --popover: oklch(20.1% 0.040 296.5);
  --popover-foreground: oklch(95.7% 0.023 296.7);
  --primary: oklch(60.6% 0.219 292.7);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(18.4% 0.035 296.4);
  --secondary-foreground: oklch(95.7% 0.023 296.7);
  --muted: oklch(18.4% 0.035 296.4);
  --muted-foreground: oklch(69.0% 0.046 297.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(32.4% 0.028 296.2);
  --input: oklch(32.4% 0.028 296.2);
  --ring: oklch(60.6% 0.219 292.7);
}

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>Bat Design</title>
  <style>
    :root {
      --bg: #0C0A14; --surface: #181226; --primary: #8B5CF6;
      --accent: #22D3EE; --text: #F2EEFF; --muted: #9E96B5;
    }
    * { box-sizing: border-box; margin: 0; }
    body { font: 16px/1.6 Space Grotesk, 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>Bat Design</h1>
    <p>A dark, electric agency layout with neon accents for studios that like their work loud.</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 Bat Design template

Bat Design 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, Bublue Studio, Spider Design.