AVA Branding Guidelines

Unified standards for product, marketing, and development teams.

Layout & Grids

AVA layout system is built on a flexible 12-column grid, ensuring consistent spacing, alignment, and structure across all screen sizes. This framework supports responsive design from desktop to mobile, allowing seamless content adaptation without sacrificing usability.

Website

Tablet

Mobile

Logo

SaaSGrid's logo embodies a convergence of chart lines seamlessly shaping the letter S, symbolizing the harmonious blend of grids and data.

Logo Mark

Full Logo

Please Don’t Do This

1. Don't angle it

2. Don't change the colour of our symbol

3. Don't add a drop shadow

4. Don't distort it

5. DO NOT add elements to the logo

6. Don't change the size of any elements

7. Don't outline it

8. Don't add a stroke

Colors

SaaSGrid’s color system uses a balanced primary and secondary palette to maintain visual consistency, brand recognition, and accessibility. Primary colors drive key actions and identity, while secondary tones support structure, variation, and depth—ensuring clarity, hierarchy, and a cohesive experience across all screens and user interactions.

Primary Colors

Name

HEX

#46D479

CMYK

66, 0, 43, 17

Emerald Green

RGB

70, 212, 121, 100%

HSL

140, 64, 55, 100%

Name

HEX

#46D479

CMYK

0, 0, 0, 0

White

RGB

255, 255, 255

HSL

0, 0, 0, 100%

Name

HEX

#46D479

CMYK

0, 5, 5, 92

Charcoal Black

RGB

21, 20, 20, 100%

HSL

0, 2, 8, 100%

Main Colors

Main Colors/Primary

Mode 1

#46d479

Mode 2

#46d479

Main Colors/Primary Hover

Mode 1

#249b4f

Mode 2

#249b4f

Main Colors/Primary Disabled

Mode 1

#86e3a8

Mode 2

#86e3a8

Main Colors/BG

Mode 1

#ffffff

Mode 2

#151414

Border

Border/Border Grey Primary

Mode 1

#a6a6a6

Mode 2

#a6a6a6

Border/border-grey-secondary

Mode 1

#bfbfbf

Mode 2

#bfbfbf

Border/border-grey-tertiary

Mode 1

#f2f2f2

Mode 2

#f2f2f2

Border/border-highlighted-primary

Mode 1

#46d479

Mode 2

#46d479

Text Colors

Text Colors/Text-primary

Mode 1

#0d0d0d

Mode 2

#f2f2f2

Text Colors/Text-secondary

Mode 1

#404040

Mode 2

#a6a6a6

Text Colors/Text-tertiary

Mode 1

#737373

Mode 2

#8c8c8c

Text Colors/text-disable

Mode 1

#8c8c8c

Mode 2

#737373

Text Colors/text-label

Mode 1

#bfbfbf

Mode 2

#262626

Typography

AVA typography system combines Neue Montreal and Inter Display to create a clear, modern, and accessible visual voice. Type styles are structured for consistency across headings, labels, and body text—ensuring seamless readability, strong hierarchy, and a clean interface across all platforms, screen sizes, and content types.

Sora

Sora is a geometric sans serif tuned for display, that is, large point sizes. It is an Open Source typeface to adorn the headlines and interfaces of Cal.com

Heading 1

Text size: 62px

Line height: 74px

Letter spacing: 0px

Heading 2

Text size: 48px

Line height: 56px

Letter spacing: -2px

Heading 3

Text size: 36px

Line height: 44px

Letter spacing: -2px

Heading 4

Text size: 30px

Line height: 38px

Letter spacing: 0px

Heading 5

Text size: 24px

Line height: 32px

Letter spacing: 0px

Body 1

Text size: 20px

Line height: 30px

Letter spacing: 0px

Body 2

Text size: 18px

Line height: 28px

Letter spacing: 0px

Body 3

Text size: 16px

Line height: 24px

Letter spacing: 0px

Body 4

Text size: 14px

Line height: 20px

Letter spacing: 0px

Body 5

Text size: 12px

Line height: 18px

Letter spacing: 0px

Buttons

AVA buttons are designed for clarity, accessibility, and ease of interaction. They follow a consistent hierarchy—primary, secondary, and ghost styles—with defined states for hover, focus, and disabled. Button sizes and spacing align with the grid system to ensure visual balance and intuitive user flow across interfaces.

Primary Buttons

Used for main actions, primary buttons draw attention with bold color, clear text, and strong visual prominence across interfaces. 

Button

Secondary Buttons

Secondary buttons support less prominent actions with subtle styling, offering clear alternatives without overpowering the primary call to action.

Button

Icons

Icons in SaaSGrid enhance usability, guide user actions, and support visual clarity. They follow a minimal, line-based style to align with the brand’s clean aesthetic. Used consistently across UI components, they improve scalability without adding visual noise or complexity.

Icons Library

Spacing

AVA spacious layout ensures information is presented clearly, helping healthcare staff focus on what matters. With consistent spacing between form elements, users experience minimal cognitive load, reducing errors and speeding up intake. Clean margins guide the eye intuitively through the interface.

Overall Spacing

02 px

04 px

06 px

08 px

12 px

16 px

18 px

24 px

32 px

40 px

44 px

56 px

64 px