@spaced-out/ui-design-system v0.3.42

Genesis Design System

• Intro
• Usage
  • Installation
  • Setting Up Font Awesome
  • Setting Up Fonts
  • Component Usage
    • Using Components
    • Setting Up Component Aliases
    • Using Genesis Design Tokens
      • CSS Tokens
      • JS Tokens
    • Setting Up Design Token Aliases
• Documentation
• Contributions
• Changelog
• Contributors ✨

Intro

Genesis is the foundational design system at Sense. It serves as the single source of truth for our product UI crafted to ensure visual consistency, engineering efficiency, and design cohesion across the entire platform.

Genesis is a systematic collection of reusable UI components, design tokens, utilities, and principles. It’s purpose-built to ensure every part of the Sense product ecosystem speaks the same design and interaction language. Whether you're building candidate workflows, recruiter dashboards, or internal analytics tools, Genesis provides the building blocks to do so with speed and reliability.

Usage

Follow the below mentioned guide for installation and usage instructions

Installation

To install @spaced-out/ui-design-system in your project, you will need to run the following command using yarn:

yarn add @spaced-out/ui-design-system

Setting Up Font Awesome

Genesis uses Font Awesome to serve icon fonts. To add this font in your project you need to load this font. The recommended way to do it is by adding the following in your main app entry.

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.sensehq.com/genesis/hashed/static/fontawesome/css/all.min.css"
/>

Setting Up Fonts

By default Genesis uses 'Centra No 2' font. To add this font in your project you need to load this font. The recommended way to do it is by adding the following in your global css.

@font-face {
  font-family: 'Centra No 2';
  src: url('https://cdn.sensehq.com/type/CentraNo2-Book.woff2') format('woff2'),
    url('https://cdn.sensehq.com/type/CentraNo2-Book.woff') format('woff');
  font-weight: 300 400;
  font-style: normal;
  font-display: auto;
}

@font-face {
  font-family: 'Centra No 2';
  src: url('https://cdn.sensehq.com/type/CentraNo2-BookItalic.woff2') format('woff2'),
    url('https://cdn.sensehq.com/type/CentraNo2-BookItalic.woff') format('woff');
  font-weight: 300 400;
  font-style: italic;
  font-display: auto;
}

@font-face {
  font-family: 'Centra No 2';
  src: url('https://cdn.sensehq.com/type/CentraNo2-Medium.woff2') format('woff2'),
    url('https://cdn.sensehq.com/type/CentraNo2-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: auto;
}

Component Usage

Usage of the component (after the library installed as a dependency in project) will be:

Using Components

import React from 'react';

// There are multiple ways of importing a component

import {Button} from '@spaced-out/ui-design-system/lib/components/Button';

/** We also export all components | hooks | styles | utils | types from a common
 * index file located at @spaced-out/ui-design-system/lib.
 *
 * For multiple imports this can be used
 */

import {
  Button,
  BodyMedium,
  TEXT_COLORS,
  Toast,
  Dropdown,
} from '@spaced-out/ui-design-system/lib';

const App = () => (
  <div className={css.container}>
    <Button>Hello world</Button>
    <BodyMedium color={TEXT_COLORS.neutral}>Some text</BodyMedium>
  </div>
);

export default App;

Setting Up Component Aliases

You can also set up aliases in your build tool to further simplify imports if you want. eg. This webpack config set up an alias for @spaced-out/ui-design-system/lib to ui-design-system

const {MODE, DEVELOPMENT, RESOLVE_MODULES_DIRS} = require('./constants');

exports.default = {
  mode: MODE,

  devtool: DEVELOPMENT ? 'eval-cheap-module-source-map' : 'source-map',

  resolve: {
    symlinks: false,
    modules: RESOLVE_MODULES_DIRS,
    alias: {
      common: 'src/styles/common.css',
      designSystem2021: 'src/styles/design-system-2021.css',
      sentry: '@sentry/browser',
      'react-router': '@spaced-out/react-router',
      sculpt: '@spaced-out/sculpt',
      'ui-design-system': '@spaced-out/ui-design-system/lib',
    },
  },
};

For more information about each component, check out Storybook.

Using Genesis Design Tokens

Design tokens are exported as .css and .js. You can consume them easily by

CSS Tokens

CSS use:

@value (size2) from '@spaced-out/ui-design-system/lib/styles/variables/_size.css';

/* We also export all style variable(design tokens) and common classes from a common index
file located at @spaced-out/ui-design-system/lib/styles/index.css */

/* For @value from Multiple css files use this */

@value (
  colorFillPrimary,
  colorTextSecondary,
  colorTextDisabled,
  spaceXXSmall,
  spaceNone,
  spaceSmall,
  spaceXSmall,
  size34,
  sizeFluid,
  size40
  ) from '@spaced-out/ui-design-system/lib/styles/index.css';

.example-container {
  height: size2;
  composes: motionEaseInEaseOut from '@spaced-out/ui-design-system/lib/styles/index.css';
}

JS Tokens

JS use:

import {size2} from '@spaced-out/ui-design-system/lib/styles/variables/_size.js';

/* We also export all style variable(design tokens) from a common index
file located at @spaced-out/ui-design-system/lib */

/* For multiple design token impoets use this */

import {
  sizeFluid,
  size2,
  spaceNone,
  colorTextNeutral,
  borderRadiusSmall,
} from '@spaced-out/ui-design-system/lib';

Setting Up Design Token Aliases

You can also set up aliases in your build tool to further simplify imports if you want. eg. This webpack config set up an alias for @spaced-out/ui-design-system/lib/styles/index.css to uiDesignSystem

const {MODE, DEVELOPMENT, RESOLVE_MODULES_DIRS} = require('./constants');

exports.default = {
  mode: MODE,

  devtool: DEVELOPMENT ? 'eval-cheap-module-source-map' : 'source-map',

  resolve: {
    symlinks: false,
    modules: RESOLVE_MODULES_DIRS,
    alias: {
      common: 'src/styles/common.css',
      designSystem2021: 'src/styles/design-system-2021.css',
      uiDesignSystem: '@spaced-out/ui-design-system/lib/styles/index.css',
      sentry: '@sentry/browser',
      'react-router': '@spaced-out/react-router',
      sculpt: '@spaced-out/sculpt',
      'ui-design-system': '@spaced-out/ui-design-system/lib',
    },
  },
};

Documentation

• Storybook

Contributions

Check out our Contribution Guide to setup and contribute to Genesis.

Changelog

Check out our Changelog here

Contributors