Getting Started

Design system provides a comprehensive set of components, styles, and guidelines to help you build consistent and accessible user interfaces. This documentation will guide you through the system and help you understand how to use it effectively.

Installation

To get started with our design system, install the package using npm or yarn:

npm install @company/design-system

Setup

Import the CSS in your main layout file:

import '@company/design-system/styles.css';

Design Tokens

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values to ensure flexibility and consistency across all product experiences.

Colors

Our color system is designed to be accessible and consistent across all platforms.

Primary

bg-primary

Secondary

bg-secondary

Accent

bg-accent

Muted

bg-muted

Typography

Our typography system is designed to be readable and accessible across all devices.

Heading 1

text-4xl font-bold

Heading 2

text-3xl font-semibold

Heading 3

text-2xl font-semibold

Heading 4

text-xl font-semibold

Body text

text-base

Small text

text-sm

Spacing

Our spacing system is based on a 4px grid, providing consistency across all components.

4px (1 unit) - p-1, m-1

8px (2 units) - p-2, m-2

12px (3 units) - p-3, m-3

16px (4 units) - p-4, m-4

Shadows

Our shadow system provides depth and elevation to components.

Shadow

shadow

Shadow Medium

shadow-md

Shadow Large

shadow-lg

Components

Our component library provides a set of reusable UI elements that can be combined to build complex interfaces. Each component is designed to be accessible, responsive, and customizable.

Buttons

Buttons allow users to take actions and make choices with a single tap.

Cards

Cards are used to group related content and actions.

Card Title

Card Description

This is a sample card component from our design system. It can be used to display content in a contained format.

Forms

Form components are used to collect user input.

Message

I agree to the terms and conditions

Navigation components help users move through your application.

Layout

Our layout system provides a consistent way to structure your application. It includes containers, grids, and other layout components.

Container

The container component centers your content horizontally and adds padding.

<div className="container mx-auto px-4">
  {/* Your content */}
</div>

Grid

The grid system allows you to create responsive layouts.

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex

The flex system allows you to create flexible layouts.

<div className="flex flex-col md:flex-row gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Typography System

Our typography system provides a consistent way to style text across your application. It includes headings, paragraphs, and other text elements.

Headings

Use heading elements to create a clear hierarchy in your content.

Heading 1

text-4xl font-extrabold tracking-tight lg:text-5xl

Heading 2

text-3xl font-semibold tracking-tight

Heading 3

text-2xl font-semibold tracking-tight

Heading 4

text-xl font-semibold tracking-tight

Paragraphs

Use paragraph elements for body text.

This is a paragraph of text. The default paragraph style has a comfortable line height and margin.

leading-7

This is a muted paragraph, typically used for secondary information.

text-sm text-muted-foreground

Lists

Use list elements to group related items.

First item
Second item
Third item

list-disc pl-6 space-y-2

First item
Second item
Third item

list-decimal pl-6 space-y-2

Utilities

Our utility classes provide a way to apply common styles to elements without writing custom CSS.

Spacing

Use spacing utilities to add margin and padding to elements.

<!-- Margin -->
<div className="m-4">Margin on all sides</div>
<div className="mt-4">Margin top</div>
<div className="mr-4">Margin right</div>
<div className="mb-4">Margin bottom</div>
<div className="ml-4">Margin left</div>
<div className="mx-4">Margin horizontal</div>
<div className="my-4">Margin vertical</div>

<!-- Padding -->
<div className="p-4">Padding on all sides</div>
<div className="pt-4">Padding top</div>
<div className="pr-4">Padding right</div>
<div className="pb-4">Padding bottom</div>
<div className="pl-4">Padding left</div>
<div className="px-4">Padding horizontal</div>
<div className="py-4">Padding vertical</div>

Responsive

Use responsive utilities to apply styles at different screen sizes.

<div className="hidden md:block">
  Only visible on medium screens and above
</div>

<div className="block md:hidden">
  Only visible on small screens
</div>

<div className="text-sm md:text-base lg:text-lg">
  Text size changes based on screen size
</div>

<div className="flex flex-col md:flex-row">
  Stack on mobile, row on desktop
</div>

Accessibility

Use accessibility utilities to improve the accessibility of your application.

<!-- Screen reader only -->
<span className="sr-only">This text is only visible to screen readers</span>

<!-- Focus styles -->
<button className="focus:outline-none focus:ring-2 focus:ring-primary">
  Custom focus styles
</button>

<!-- Skip link -->
<a href="#main-content" className="sr-only focus:not-sr-only">
  Skip to main content
</a>