Rara Design

Sumo Ledger

SumoLedger is an API-first ledger-engine for business applications. It can transform the business-events produced by business applications into proper accounting entries.

Ledger

A ledger is a system that records accounts and flow of value(please read value and money synonymously) between them. SumoLedger runs on a ledger system that is immutable, supports multi-currency maintains transactional consistency through double-entry accounting and supports a transactional state-machine.

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

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

Vermillion

#EF4136

RGB (239, 65,54)

Anti-Flash White

#F1F2F2

RGB (241, 242, 242)

Onyx

#414042

RGB (65, 64, 64)

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-primary1: 239 65 54;
                    --brand-primary2: 241 242 242;
                    --brand-primary3: 65 64 64
                
                    --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

Cal Sans

Secondary / Body Font

SF Pro Display

RaraLabs

Typography