UNGUESS Design System

Used by

• Unguess platform

Tech stack

Building components

• 🪴 Zendesk Garden as base design system
• ⚛️ React declarative component-centric UI
• 📚 Storybook for UI component development and auto-generated docs
• 👩‍🎤 Styled Components for component-scoped styling

Maintaining the system

• 📦 Yarn for package management
• 📦 NPM for distribution
• ✅ Chromatic to prevent UI bugs in components (by Storybook maintainers)

Why

The Unguess design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with Storybook's design patterns.

Install

yarn

Global Styles

Components within the design system assume that a set of global styles have been configured. Depending upon the needs of the application, this can be done several ways:

Option 1: Render the GlobalStyle component

Useful when you don't need any custom body styling in the application, typically this would be placed in a layout component that wraps all pages, or a top-level App component.

import { global } from '@storybook/design-system';
const { GlobalStyle } = global;

/* Render the global styles once per page */
<GlobalStyle />

Option 2: Use the bodyStyles to apply styling

Useful when you want build upon the shared global styling.

import { Global, css } from '@storybook/theming';
import { global } from '@storybook/design-system';
const { bodyStyles } = global;

const customGlobalStyle = css`
  body {
    ${bodyStyles}// Custom body styling for the app
  }
`;

const CustomGlobalStyle = () => <Global styles={customGlobalStyle} />;

/* Render the global styles once per page */
<CustomGlobalStyle />