@septeo/react-design

A comprehensive React design system based on the Septeo Design System (DSS) Figma files.

Installation

npm install @septeo/react-design

Usage

import { Button, Input, Card } from '@septeo/react-design';
import '@septeo/react-design/dist/index.css';

function App() {
  return (
    <div>
      <Card title="Welcome">
        <p>This is a simple example using the Septeo Design System components.</p>
        <Input label="Email" placeholder="Enter your email" />
        <Button>Submit</Button>
      </Card>
    </div>
  );
}

Components

The design system follows atomic design principles and includes:

Atoms

• Button: Primary UI component for user interaction
• Input: Text input component
• Checkbox: Boolean input component
• Radio: Single selection component

Molecules

• FormField: Wrapper for form elements with labels and helper text
• Card: Container for displaying content in a box

Organisms

• Form: Component for grouping form fields
• FormSection: Component for grouping related form fields

Design Tokens

The design system includes the following design tokens:

Colors

• Blues: Primary brand colors
• Oranges/Reds: Accent colors
• Teals/Greens: Secondary colors
• Reds: Alert/Error colors
• Yellows/Oranges: Warning colors
• Purples: Accent colors
• Grays: Neutral colors

Typography

• Font Families: Inter (UI) and Poppins (Headings)
• Font Sizes: From 10px to 56px
• Font Weights: Regular (400), Medium (500), Semibold (600), Bold (700)

Spacing

• Grid Margins: 16px (S), 24px (M), 32px (L)
• Grid Gutters: 12px (S), 16px (M), 20px (L)

Breakpoints

• Small (S): 0-679px
• Medium (M): 680-1099px
• Large (L): >1100px

Development

To run the Storybook documentation locally:

npm run storybook

To build the package:

npm run build

License

MIT