HOME - Sentro

Token-driven architecture

Sentro is made with design tokens in mind. It allows you to define your design tokens in a structured way and use them in your stylesheets. This makes it easier to enforce consistency and make changes across your design system. So that creating and managing design tokens is a breeze.

main.scss

:root {
  @include sentro.token-config(
    $primary: (
      200: #454545,
      400: #343434,
      600: #232323,
      ink: #ffffff
    )
  );
}

.component {
  background: sentro.key-create('component-bg', 'primary-600');
  color: sentro.key-create('component-text', 'primary-ink');
  
  @include sentro.breakpoint-create('medium') {
    @include sentro.key-bind('component-bg', 'primary-600');
  }
}

Great power at a smaller footprint

By design it is lightweight and has no dependencies. So you can drop it in the project and start using it right away while still having headroom for the bulk of your design system implementation.

The (almost) complete toolkit

Sentro provides you with the foundations that you need in order to start building your design system. It includes tools to create and manage design tokens that govern multiple layers, error handling, breakpoints, component helpers, and more. The rest is up to whatever your design system dictates you to do.

Loved by teams ♥

Sentro is trusted by companies' design and engineering teams to build design systems for their products.

Sentro

Build and scale token-driven design systems.

Token-driven architecture

Great power at a smaller footprint

33.1kb

The (almost) complete toolkit

Loved by teams ♥