@orca-so/design-system NPM

Orca Design System

This is some short description.

This repository contains proprietary fonts that should be removed before open-sourcing this repo.

What is the Orca Design System?

Two styles of components are available: Base and Pro. Base friendly and inviting. Pro is more serious and business-like.

Using the Orca Design System

Including the Orca Design System in your project is easy. Simply add the following to your project's package.json file:

npm i @orca-so/design-system

yarn add @orca-so/design-system

Add our tailwind configuration to your tailwind config file:

module.exports = {
  content: [
    // ...
    "./node_modules/@orca-so/design-system/dist/**/*.{html,ts,tsx,js,jsx}"
  ],
  presets: [
    require('@orca-so/design-system/dist/tailwind.config.js')
  ],
  // ...
}

Add the SuisseIntl font to your project (optional):

@layer base {
  @font-face {
    font-family: "SuisseIntl";
    font-weight: 400;
    src: url("path/to/SuisseIntl-Regular-WebS.woff") format("woff");
  }
  @font-face {
    font-family: "SuisseIntl";
    font-weight: 500;
    src: url("path/to/SuisseIntl-Medium-WebS.woff") format("woff");
  }
  @font-face {
    font-family: "SuisseIntl";
    font-weight: 600;
    src: url("path/to/SuisseIntl-SemiBold-WebS.woff") format("woff");
  }
  @font-face {
    font-family: "SuisseIntlMono";
    font-weight: 400;
    src: url("path/to/SuisseIntlMono-Regular-WebS.woff") format("woff");
  }
}

Then, you can import the components you need:

import { Button, Colors, Icon } from '@orca-so/design-system';
const Component = () => (
  <div style={{ backgroundColor: Colors.Manta }} className="bg-manta">
    <Button>Click Me</Button>
    <Icon name="orca" />
  </div>
);

This library supports tree-shaking, so you can import only the components you need.