How it works

From framework to production, in four layers

Each layer builds on the last — start with the CSS framework, add the design system, grab the blocks you need, or jump straight to a starter kit.

1

A CSS Framework Built for Speed

Webpixels CSS extends Bootstrap with a modern utility layer, design tokens, and opinionated defaults — so you spend less time configuring and more time building.

50+
Custom utilities
0
Build step required
@import '@webpixels/css';
// That's it. Start building.
<div class="card card-elevated p-6">
<h3 class="ls-tight">Ready to ship</h3>
</div>
2

A Design System That Scales

Colors, typography, spacing, and component patterns — all documented and consistent. Use our tokens as-is or extend them to match your brand in minutes.

Design Tokens
--x-primary: #335CFF;
--x-font-sans: 'Inter', sans-serif;
--x-spacing-base: 1rem;
3

500+ UI Blocks, Ready to Ship

Production-ready components for every section of your app or marketing site. Headers, heroes, pricing, dashboards, auth screens — copy, paste, customize.

500+
UI blocks
80+
Full pages
Header
Hero
Pricing
Features
CTA
Footer
4

Starter Kits for Every Stack

Pre-configured project foundations with auth, routing, layouts, and UI blocks already wired in. Pick your stack and start shipping features from day one.

Laravel + React + Inertia
Full-stack SaaS starter with auth, billing, and dashboard
HTML + Bootstrap
Static site starter with all UI blocks pre-loaded
Marketing Kit
Landing pages, blog, and conversion-optimized templates