Rara Design

Get Started as Developer

Hey Devs, our design system = fewer headaches, more time to squash bugs!

As a developer, maintaining design consistency amid evolving requirements is a challenge. Balancing designer input and shifting deadlines adds complexity. Understanding that our goal extends beyond UI creation to crafting enriching user experiences is crucial. Flexibility in our workflow is key, acknowledging the inevitability of project iterations and changes.

Given the dynamic nature of our requirements and our unique problem-solving approach, our software development process has its distinct characteristics. Particularly in the Frontend, where consistency may face challenges. However, we firmly believe in achieving consistency in both design and code. Hence, we've reimagined a comprehensive design system—crafted and developed from scratch.

Your responsibility lies in upholding our design consistency and adhering to our established methodologies. Months of effort have gone into curating our design system and UI framework—Rara Design System & npm Libraries.

Our tech stack incorporates Radix UI and Tailwind CSS. Proficiency in Tailwind CSS will aid in styling custom components when necessary. We've consciously avoided reinventing common components, leveraging the robust, unstyled component library Radix UI, which provides primitives that we style using Tailwind CSS.

We've published npm packages in npm repositories, requiring you to install necessary dependencies to kick-start your work. Post-installation, setting up a few files and configurations is necessary, recognizing the unique nature of each project. This ensures that each project's appearance and behavior align with its distinct needs. To accommodate customization, we've introduced the theme package within the system.

While RDS offers common components akin to other design systems, we've developed our own custom components tailored to address our specific challenges.

Let’s get started!

Step 1: Install following Packages.

pnpm install @raralabs/components

pnpm install @raralabs/theme

Step 2: Update tailwindcss.config.ts file.

To work properly you need to replace or create atailwindcss.config.ts file.

/** @type {import('tailwindcss').Config} */
              module.exports = {
                darkMode: ['class'],
                content: [
                  './node_modules/@raralabs/components/esm/lib/**/*.{js,ts,jsx,tsx,mdx}',
                  './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
                  './src/components/**/*.{js,ts,jsx,tsx,mdx}',
                  './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/features/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        transparent: 'transparent',
      },
    },
  },
  // eslint-disable-next-line global-require
  plugins: [require('tailwindcss-animate')],
  
  // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
  presets: [require('@raralabs/components').base],
};

Step 3: Custom Theme Colors

By default RDS offers default theme but if every project has custom theme so we’ve defined design tokens. You’ve have add following code and update color values in RGB format.

Designer must provide these tokens.

@tailwind base;
@tailwind components;
@tailwind utilities;
*,
*::after,
*::before {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@layer base {
  :root {
    --white: 255 255 255;
    --black: 0 0 0;
    --brand-primary: 96 52 168;
    --surface-background: 238 242 247;
    --surface-layout: 255 255 255;
    --surface-muted: 238 242 247;
    --surface-disabled: 223 229 236;
    --surface-highlight: 247 249 254;
    --interactive-primary: 96 52 168;
    --interactive-background: 240 239 246;
    --interactive-depressed: 53 47 80;
    --interactive-hover: 255 255 255;
    --warning-primary: 255 196 83;
    --warning-background: 255 245 234;
    --info-primary: 20 62 159;
    --info-background: 241 245 253;
    --icon-primary: 109 116 125;
    --icon-secondary: 203 208 214;
    --icon-disabled: 175 181 187;
    --icon-onColor: 255 255 255;

    --critical-primary: 216 44 13;
    --critical-background: 255 244 244;
    --critical-depressed: 143 74 61;
    --critical-hover: 255 255 255;
    --success-primary: 0 128 96;
    --success-background: 241 248 245;
    --text-primary: 52 60 70;
    --text-secondary: 99 105 114;
    --text-disabled: 145 151 159;
    --text-onColor: 255 255 255;
    --border-layout: 224 229 235;
    --border-element: 145 151 159;
    --border-ring: 136 127 179;
    --border-active: 96 52 168;
  }
  .dark {
    --white: 255 255 255;
    --black: 0 0 0;
    --brand-primary: 96 52 168;
    --surface-background: 238 242 247;
    --surface-layout: 255 255 255;
    --surface-muted: 238 242 247;
    --surface-disabled: 223 229 236;
    --surface-highlight: 247 249 254;
    --interactive-primary: 96 52 168;
    --interactive-background: 240 239 246;
    --interactive-depressed: 53 47 80;
    --interactive-hover: 255 255 255;
    --warning-primary: 255 196 83;
    --warning-background: 255 245 234;
    --info-primary: 20 62 159;
    --info-background: 241 245 253;
    --icon-primary: 109 116 125;
    --icon-secondary: 203 208 214;
    --icon-disabled: 175 181 187;
    --icon-onColor: 255 255 255;

    --critical-primary: 216 44 13;
    --critical-background: 255 244 244;
    --critical-depressed: 143 74 61;
    --critical-hover: 255 255 255;
    --success-primary: 0 128 96;
    --success-background: 241 248 245;
    --text-primary: 52 60 70;
    --text-secondary: 99 105 114;
    --text-disabled: 145 151 159;
    --text-onColor: 255 255 255;

    --border-layout: 224 229 235;
    --border-element: 145 151 159;
    --border-ring: 136 127 179;
    --border-active: 96 52 168;
  }
}

You're all set to utilize components from @raralabs/components. Further styling adjustments are easily achievable by adding a className to any div. Our design system offers various variant combinations, reducing the need for custom component additions. Designers generally won't introduce new components as a rule. However, if exceptions arise, you can collaborate with designers to build local components.

Designer

Backend