@spaced-out/ui-design-system

![Alt text](https://cdn.sensehq.com/genesis/hashed/static/images/usage.png) ![Version](https://img.shields.io/npm/v/@spaced-out/ui-design-system?style=for-the-badge&labelColor=271656&logo=npm&label=@spaced-out/ui-design-system&color=5c34cd) # Genesis Design System - [Intro](#intro) - [Usage](#usage) - [Installation](#installation) - [Setting Up Font Awesome](#setting-up-font-awesome) - [Setting Up Fonts](#setting-up-fonts) - [Component Usage](#component-usage) - [Using Components](#using-components) - [Setting Up Component Aliases](#setting-up-component-aliases) - [Using Genesis Design Tokens](#using-genesis-design-tokens) - [CSS Tokens](#css-tokens) - [JS Tokens](#js-tokens) - [Setting Up Design Token Aliases](#setting-up-design-token-aliases) - [Documentation](#documentation) - [Contributions](#contributions) - [Changelog](#changelog) - [Contributors ✨](#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](https://yarnpkg.com/): ```bash yarn add @spaced-out/ui-design-system ``` ### Setting Up Font Awesome Genesis uses [Font Awesome](https://fontawesome.com/search) 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. ```html <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. ```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 ```js 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` ```js 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](https://spaced-out.github.io/ui-design-system). #### Using Genesis Design Tokens Design tokens are exported as `.css` and `.js`. You can consume them easily by ##### CSS Tokens CSS use: ```css @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: ```js 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` ```js 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](https://spaced-out.github.io/ui-design-system) ## Contributions Check out our [**Contribution Guide**](https://spaced-out.github.io/ui-design-system/?path=/docs/contribution--docs) to setup and contribute to Genesis. ## Changelog Check out our [**Changelog here**](https://spaced-out.github.io/ui-design-system/?path=/docs/changelog--docs) ## Contributors <div style="overflow-x: auto">    <table style=" width: -webkit-fill-available; min-width: 800px; "> <tbody> <tr> <td align="center" valign="top" width="20%"><a href="https://github.com/superrover"><img src="https://avatars.githubusercontent.com/u/86281150?v=4?s=100" width="100px;" alt="Nishant Gaurav"/> Nishant Gaurav</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=superrover" title="Code">💻</a> <a href="#infra-superrover" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/Anant-Raj"><img src="https://avatars.githubusercontent.com/u/8904071?v=4?s=100" width="100px;" alt="Anant Raj"/> Anant Raj</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Anant-Raj" title="Code">💻</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/ashwinikemshetty"><img src="https://avatars.githubusercontent.com/u/12839599?v=4?s=100" width="100px;" alt="Ashwini Kemshetty"/> Ashwini Kemshetty</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=ashwinikemshetty" title="Code">💻</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/VivekJangid"><img src="https://avatars.githubusercontent.com/u/33223696?v=4?s=100" width="100px;" alt="Vivek Jangid"/> Vivek Jangid</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=VivekJangid" title="Code">💻</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/sharad-kushwah"><img src="https://avatars.githubusercontent.com/u/161806585?v=4?s=100" width="100px;" alt="Sharad Kushwah"/> Sharad Kushwah</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=sharad-kushwah" title="Code">💻</a></td> </tr> <tr> <td align="center" valign="top" width="20%"><a href="https://github.com/sanskar-s"><img src="https://avatars.githubusercontent.com/u/137482980?v=4?s=100" width="100px;" alt="Sanskar Saxena"/> Sanskar Saxena</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=sanskar-s" title="Code">💻</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/aditya-kaushal"><img src="https://avatars.githubusercontent.com/u/141118827?v=4?s=100" width="100px;" alt="aditya-kaushal"/> aditya-kaushal</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=aditya-kaushal" title="Code">💻</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/bhatiarush27"><img src="https://avatars.githubusercontent.com/u/161808754?v=4?s=100" width="100px;" alt="Arush Bhatia"/> Arush Bhatia</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=bhatiarush27" title="Code">💻</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/LakshayKumar-1"><img src="https://avatars.githubusercontent.com/u/183346574?v=4?s=100" width="100px;" alt="LakshayKumar-1"/> LakshayKumar-1</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=LakshayKumar-1" title="Code">💻</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/Swatantramishra1"><img src="https://avatars.githubusercontent.com/u/5427027?v=4?s=100" width="100px;" alt="Swatantra Mishra"/> Swatantra Mishra</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Swatantramishra1" title="Code">💻</a></td> </tr> <tr> <td align="center" valign="top" width="20%"><a href="https://github.com/VishalBarnawal"><img src="https://avatars.githubusercontent.com/u/113020105?v=4?s=100" width="100px;" alt="Vishal-sense"/> Vishal-sense</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=VishalBarnawal" title="Code">💻</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/vish-sah"><img src="https://avatars.githubusercontent.com/u/108925162?v=4?s=100" width="100px;" alt="Vishwanath Sah"/> Vishwanath Sah</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=vish-sah" title="Code">💻</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/pearel-sense"><img src="https://avatars.githubusercontent.com/u/113005498?v=4?s=100" width="100px;" alt="Pearel Nazareth"/> Pearel Nazareth</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=pearel-sense" title="Code">💻</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/deepak-rao-96"><img src="https://avatars.githubusercontent.com/u/185754227?v=4?s=100" width="100px;" alt="deepak-rao-96"/> deepak-rao-96</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=deepak-rao-96" title="Code">💻</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/darsh-mecwan-sense"><img src="https://avatars.githubusercontent.com/u/186684223?v=4?s=100" width="100px;" alt="Darsh Mecwan"/> Darsh Mecwan</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=darsh-mecwan-sense" title="Code">💻</a></td> </tr> <tr> <td align="center" valign="top" width="20%"><a href="https://github.com/diwakersurya"><img src="https://avatars.githubusercontent.com/u/7386665?v=4?s=100" width="100px;" alt="Diwaker Singh"/> Diwaker Singh</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=diwakersurya" title="Code">💻</a></td> <td align="center" valign="top" width="20%"><a href="https://github.com/keshavsensehq"><img src="https://avatars.githubusercontent.com/u/209447021?v=4?s=100" width="100px;" alt="keshavsensehq"/> keshavsensehq</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=keshavsensehq" title="Code">💻</a></td> </tr> </tbody> </table>    </div>