Rara Design

Rara Labs

Rara Labs is a boutique software development company started by technology and business enthusiasts. We create data driven solutions for startups and businesses. We specialise in Fintech, Data Processing Pipelines and ERP.

Brand Principles

We create mindful applications. The business objective and end-user experience is always at the fore-front of our decision making. We understand technology as a tool and not an end-goal in itself.

Brand Guide

When creating any documents, content or products under Rara Labs, please be mindful of the brand. You can view Rara Labs Brand Guide in [Link]

Logo and Variations

You can download the full logo variations here.

Logo Variations Available:

- Primary Brand Logo (PNG, SVG)
- Secondary Brand Logo (PNG, SVG)
- Logos with Background (JPG)
- Favicon
- Social Media Profile Picture
- App Icon

Use the logo appropriately.

Brand Colors

Rara Labs color palette consists of vibrant primary colors. The overall selection of the colors and usage should reflect vibrancy and friendliness.

Cerise

#EE3A65

RGB (238, 58,101)

Mikado Yellow

#FFC53E

RGB (255, 197, 62)

Robin Egg Blue

#5AC4BE

RGB (90, 196, 190)

Azul

#1A6CAA

RGB (26, 108, 170)

As a general rule, do not use more than two brand colors in a poster, design, presentation page, etc.
4 brand colors are to be used tastefully alongside neutral colors
Please refer to brand guide to use recommended color combinations

Design Tokens

Following design tokens can be used for RDS Custom Theming.

@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: 238 58 101;
                    --brand-secondary: 26 108 170;
                
                    --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;
                
                    --text-primary: 52 60 70;
                    --text-secondary: 99 105 114;
                    --text-disabled: 145 151 159;
                    --text-onColor: 255 255 255;
                
                    --icon-secondary: 203 208 214;
                    --icon-disabled: 175 181 187;
                    --icon-onColor: 255 255 255;
                
                    --border-layout: 224 229 235;
                    --border-element: 145 151 159;
                    --border-ring: 136 127 179;
                    --border-active: 96 52 168;
                
                    --interactive-primary: 26 108 170;
                    --interactive-background: 228 241 251;
                    --interactive-depressed: 16 66 104;
                    --interactive-hover: 17 90 146;
                
                    --critical-primary: 238 58 101;
                    --critical-background: 253 236 240;
                    --critical-depressed: 137 27 53;
                    --critical-hover: 193 42 78;
                   
                    --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;
                
                    --success-primary: 57 166 160;
                    --success-background: 90 196 190;
                   
                  }
                  .dark {
                        --white: 255 255 255;
                    --black: 0 0 0;
                
                    --brand-primary: 238 58 101;
                    --brand-secondary: 26 108 170;
                
                    --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;
                
                    --text-primary: 52 60 70;
                    --text-secondary: 99 105 114;
                    --text-disabled: 145 151 159;
                    --text-onColor: 255 255 255;
                
                    --icon-secondary: 203 208 214;
                    --icon-disabled: 175 181 187;
                    --icon-onColor: 255 255 255;
                
                    --border-layout: 224 229 235;
                    --border-element: 145 151 159;
                    --border-ring: 136 127 179;
                    --border-active: 96 52 168;
                
                    --interactive-primary: 26 108 170;
                    --interactive-background: 228 241 251;
                    --interactive-depressed: 16 66 104;
                    --interactive-hover: 17 90 146;
                
                    --critical-primary: 238 58 101;
                    --critical-background: 253 236 240;
                    --critical-depressed: 137 27 53;
                    --critical-hover: 193 42 78;
                   
                    --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;
                
                    --success-primary: 57 166 160;
                    --success-background: 90 196 190;
                  }
                }

Typography

Primary / Header Font

Outfit

Secondary / Body Font

Inter

Brand Image

Developer

Myra