Blk Design System

Blk Design System is a free, responsive Bootstrap 4 UI kit from Creative Tim, built for creating dark-styled websites and web apps.

What is Blk Design System?

Blk Design System is a free UI kit built on Bootstrap 4, offered by Creative Tim. It includes over 70 reusable elements and 3 pre-built example pages (Landing, Profile, and Register). The kit outputs a black/dark-themed website, using a 12-column grid system with bold colors, custom typography, and clear photography. It comes as HTML/CSS/JS files, with SCSS source files for customization, and runs on any static host.

Key Features

• Over 70 elements — More than 70 components, such as cards, forms, navigation, and alerts, all styled for dark backgrounds.
• Bootstrap 4 based — Built on top of Bootstrap 4, so new projects start quickly and existing Bootstrap 4 projects can import the styles.
• 3 example pages — Includes Landing Page, Profile Page, and Register Page, plus the main live preview page.
• Gulp build tool — Comes with a gulpfile.js for compiling SCSS to CSS; use gulp compile-scss for one-off builds or gulp watch for live recompilation.
• Customizable SCSS variables — Branding colors are defined in assets/scss/blk-design-system/custom/_variables.scss and can be changed with HEX values.
• Nucleo icons — Includes nucleo-icons.css and font files for icon support.
• One-click deploy to Genezio — The repository includes a deploy button that pushes the template to Genezio directly.
• Browser support — Officially supports the last two versions of Chrome, Firefox, Edge, and Safari.

Who is it for?

• Web developers — Build a dark-themed marketing site by editing the included HTML and SCSS instead of starting from scratch.
• UI/UX designers — Use the documentation and component library as a reference for creating consistent dark interfaces.
• Startup founders — Ship a landing page or registration flow quickly by customizing one of the three example pages.
• Bootstrap users — Developers already on Bootstrap 4 can overlay Blk's styles to restyle an existing project.

What can you do with Blk Design System?

• Launch a landing page: Customize the Landing Page template to promote a product or app with a dark, bold visual style.
• Create a registration flow: Use the Register Page example to set up sign-up forms with the kit's styled input fields and buttons.
• Build a profile page: Adapt the Profile Page example for user accounts, portfolios, or team member pages.
• Design a full site: Combine the elements and the 12-column grid to compose new pages beyond the three included examples.

How does Blk Design System work?

Setup requires Node.js and Gulp. After downloading the zip, run npm install in the source folder, then edit _variables.scss to change brand colors. Use gulp compile-scss or gulp watch to process the SCSS, and gulp default to open the dashboard (home) page.

Pricing

Blk Design System is free to download and is released under the MIT license.

FAQ

Is Blk Design System free?

Yes, it is a free Bootstrap 4 UI kit from Creative Tim, released under the MIT license, so you can use it in personal and commercial projects.

What Bootstrap version does Blk Design System use?

It is built on Bootstrap 4. Most elements have been redesigned, but any unused element falls back to the Bootstrap default styling.

What example pages are included?

The kit includes three example pages: Landing Page, Profile Page, and Register Page, plus the main live preview page.

How do I change the colors?

Edit the branding colors in assets/scss/blk-design-system/custom/_variables.scss, using HEX values or the predefined variables, then recompile with Gulp.

Does Blk Design System require Node.js?

Yes, Node.js and Gulp are required if you want to customize the SCSS source files and use the included gulpfile.js. If you just need static HTML/CSS, you can use the compiled assets directly.