Getting Started

Sentro was created to provide a simple scaffolding for creating design systems in SCSS with design tokens as its main foundation. To understand the decisions made in the creation of Sentro, it's important to understand the philosophy behind it.

Freely architected

Sentro is designed to be flexible and adaptable to any design system. While it does have its own set of recommended and forced conventions, it doesn't enforce a specific design system architecture, but rather provides a set of tools to help you build your design system the way you want it to be.

Small API

Sentro mainly revolves around two core modules: tokens and keys. These are the heart of what Sentro does best. (See examples below).

Token-driven

Sentro is fundamentally a design token creation and management system for design systems. While compared to before it has evolved into a semi-complete robust design system creation toolkit, design tokens remain at the heart of Sentro's operations.

Token integrity

All tokens created and queried are validated before they get to production. Sentro has built-in validators for all modules. This ensures that no one accidentally uses a token that is non-existent or devoid from the specification.

Naming

It is important to have naming consistency for design tokens that govern both the design and engineering aspects of the design system. The disjunction between designers calling a token color.primary.400 and developers calling it color-green-400 causes a language divide between both teams. This can lead to confusion between terminologies, and might lead to implementing the wrong specifications. Sentro enables you to have naming consistency down to the separator, so designers and engineers can now both speak the same language.

Made with CSS Custom Properties

CSS custom properties are more than just variables in CSS. They are a powerful tool that can be used in creating an API for your design system. Sentro uses CSS custom properties under the hood to generate the design tokens that you can use in your projects. Any token or key defined with Sentro can be used just by using regular CSS.

// main.scss - Your main entrypoint for your design system.
 
:root {
  @include sentro.token-config((
    color: (
      accent: (
        100: #ffcdcd,
        200: #ff9999,
        // ...
      ),
    ),
  ));
}
 
.sdc-component {
  color: sentro.key-create('component-ink', 'color-accent-200');
}

/* Output */
 
:root {
  ---sdc-theme-color-accent-100: #ffcdcd;
  ---sdc-theme-color-accent-200: #ff9999;
}
 
.sdc-component {
  color: var(--sdc-component-ink, var(--sdc-theme-color-accent-200));
}

Since we're generating CSS custom properties, you can use these to create component variants, themes, and an intuitive API for your engineers to consume. Here's an example of how you can easily create variants for your components:

.sdc-component {
  width: sentro.key-create('component-width', fit-content);
  color: sentro.key-create('component-ink', 'color-accent-200');
 
  &.is-fullwidth {
    @include sentro.key-bind('component-width', 100%);
  }
}

/* Output */
 
.sdc-component {
  width: var(--sdc-component-width, fit-content);
  color: var(--sdc-component-ink, var(--sdc-theme-color-accent-200));
}
 
.sdc-component.is-fullwidth {
  --sdc-component-width: 100%;
}

Portable Configurations

Data from one Sentro project can be easily shared with another Sentro project. Sentro achieves this by using standard SCSS maps and lists to store your token data. Sharing your design tokens with another project is as simple as doing this:

// _my-company-tokens.scss
 
$tokens: (
  color: (
    accent: (
      100: #ffcdcd,
      200: #ff9999,
      // ...
    ),
  ),
  // ...
);

// main.scss - Your main entrypoint for your design system.
 
@use 'node_modules/@matteusan/sentro' with (
  $prefix: 'sdc',
  $context: 'theme',
);
@use 'my-company-tokens';
 
:root {
  @include sentro.token-config($map: my-company-tokens.$tokens);
}
 
.sdc-component {
  color: sentro.key-create('component-ink', 'color-accent-200');
}

Framework Agnostic

To maximize the usability of your design system, Sentro is built in SCSS. This means that everything that Sentro builds, can be imported as a CSS file into any project.