Skip to main content

Getting started

Tangram is the Design System of RD Station products. Here you will find the fundamental principles, interface patterns and our detailed components, from the concepts to their applications. The goal of this DS is to empower teams so they can quickly create consistent, high-quality experiences.

Installation​

To use tangram-components in your project, you need to run the command below using Yarn:

yarn add @resultadosdigitais/tangram-components

Typography​

caution

You need to load the default font Nunito Sans in your project.

To add the default Tangram typography, paste the following code into the <head> of your HTML:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;0,800;1,400;1,700;1,800&display=swap" rel="stylesheet" />

Or using @import in your style:

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;0,800;1,400;1,700;1,800&display=swap');

Using Tangram​

note

You can import Tangram components using one of the two ways below:

// ESM
import { Button, Text } from '@resultadosdigitais/tangram-components';
// or CommonJS
const { Button, Text } = require('@resultadosdigitais/tangram-components');

Once Tangram is installed as a dependency in your project, you need to set the theme at the root of your application using the Theme and the Reset components:

import { Theme, Reset } from '@resultadosdigitais/tangram-components';

function App() {
  return (
    <Theme value={Theme.kinds.lina}>
      <Reset />
      {/* Define the rest of your app here */}
    </Theme>
  )
}

With the theme applied you can use the components in your code like this:

import { Card, Text, ButtonGroup, Button } from '@resultadosdigitais/tangram-components';

function MyFancyComponent() {
  return (
    <Card>
      <Text token={Text.tokens.TEXT_XL_BOLD}>
        Welcome
      </Text>
      <ButtonGroup>
        <Button>Get Started</Button>
        <Button kind={Button.kinds.secondary}>How it works</Button>
      </ButtonGroup>
    </Card>
  )
}

With everything right you will see this result:

Welcome to Tangram

Let's code!

Feedback​