HEx Design System!

Create memorable User Interfaces

Get Started


Current version: -.-.- | Usage | Development | License | Contributing


The HEx design systems provides you powerful tools to create memorable User Interfaces (UI) for your projects. Focused on design and accesibility, HEx defines a set of guidelines, tools and a pattern lib to help you during the UI development journey.

From design to implementation, in this design system you will find everything you need.

Design tokens

Basic entities that stores visual attributes like colors, shadows and timing


Customize the HEx framework and make it unique for your site


Basic CSS styling library. Give color to your UI with a single file


A set of components that could be reused to build any UI



To start adding the HEx to your site you just need to paste this code in the head tag:

<link rel="stylesheet" media="screen" href="//unpkg.com/@bitnami/hex/dist/hex.min.css">
<script src="//unpkg.com/@bitnami/hex-js/dist/hex.min.js">

Mixins and variables

The fast way to use this library is adding the compiled files from the CDN. However, it also includes useful mixins, functions and variables that you can reuse in your code.

HEx is distributed through npm. To add HEx to your project, just run the following code:

npm install --save @bitnami/hex

Then, you need to import your code in your project. Remember that SASS is required.

@import '~@bitnami/hex/lib';

That's all. Check our documentation to find more information about:


The HEx design system is released under the Apache-2.0 license.

Copyright © 2018 BitRock Inc. (DBA Bitnami). The Bitnami names, logos and all product names are trademarks of BitRock Inc.