Website Styleguide


We continue to strive for appealing and inviting visual style for our audience and here are a few style patterns we often use across our websites to represent our product and services.


Graphic shapes on light solid backdrop

Graphic shapes on light gradient backdrop

Use of rounded corner for modern look


Vector style to feature product and service

Handdrawn style for more casual content


While we’re generally open to using various colors, they need to be coherent with our branding and offer clear contrast and separation. To achieve that, we often refer to L (lightness) value of HSL color model as it helps with choosing colors from a perspective of tonal quality.


Darker colors are used on text for legibility. In inverted design scenario where we have a dark backgrop, white is used on text instead.

  • HEX#000000
  • RGB0, 0, 0
  • HSL0, 0, 0
  • HEX#13324B
  • RGB19, 50, 70
  • HSL207, 60, 18
  • HEX#263744
  • RGB38, 55, 68
  • HSL206, 28, 21


Bright, saturated colors are used on highliting elements such as buttons, links and signature shapes.

  • HEX#1042F1
  • RGB16, 66, 241
  • HSL227, 89, 50
  • HEX#60E5B5
  • RGB96, 229, 181
  • HSL158, 72, 64
  • RGB255, 143, 190
  • HSL335, 108, 78
  • HEX#79DFFF
  • RGB121, 223, 255
  • HSL227, 89, 50
  • HEX#FFE27C
  • RGB255, 226, 124
  • HSL47, 100, 74
  • HEX#EAA777
  • RGB234, 167, 119
  • HSL25, 73, 69


Light tinted colors are often used on backdrop surface. Darker colors can also be used in dark theme settings.

  • HEX#E8F2F7
  • RGB232, 242, 247
  • HSL200, 48, 94
  • HEX#E1F2F6
  • RGB225, 242, 246
  • HSL191, 54, 92
  • RGB206, 228, 237
  • HSL197, 46, 87
  • RGB207 ,241, 255
  • HSL197, 100, 91
  • RGB204, 234, 255
  • HSL205, 100, 90
  • RGB186, 253, 245
  • HSL173, 94, 86
  • HEX#F1EDE9
  • RGB231, 221, 252
  • HSL0226, 87, 91
  • RGB212, 221, 252
  • HSL226, 87, 91
  • HEX#0B3361
  • RGB231, 221, 252
  • HSL226, 87, 91


Inter is the primary typeface for our websites. To accommodate for our viewers with different eyesight conditions, we make sure to set up font style works across different browsers, and different mobile devices.

Grow Your Recurring Revenue

  • 60px (+) · Bold
  • Hero Tagline

Grow Your Recurring Revenue

  • 48px · Bold
  • Tagline

Grow Your Recurring Revenue

  • 38px · Bold
  • Heading

Grow Your Recurring Revenue

  • 30px · Bold
  • Subheading

Experience the features of the Subscription Analytics Platform that will transform your business.

  • 20px · Normal
  • Lead Paragraph

Real-time Monthly Recurring Revenue updates ensure you’re always working with the latest data. Track New Business MRR, Expansion, Contraction, Churn, and Reactivation.

  • 15px · Normal
  • Paragraph


Along with the typographic scale, correct formatting is required to achieve great design. The thoughtful use of text formatting which includes alignment, capitalization, and spacing creates a great first impression, and improves readability.

Left alignment

The left alignment of the text is default as it’s easier on the eyes in most settings.

Center alignment

Sometimes we deliberately want to draw our audience to stay in the center of a page. In such settings, we choose center alignment. Center alignment can be a great choice with a small body of text with minimal surroundings.


Generous spacing is often needed to set clear visual hierarchy. Padding and margin are the two key components for spacing and here are some good examples of what we consider a good use of spacing.


Buttons are a vital element in creating a productive user experience. Buttons allow users to take actions, and make choices. They should be easily findable and identifiable while clearly indicating the action. We typically categorize these buttons as primary and secondary action on our marketing websites.


The primary action on a page needs to have a stronger visual weight and display a distinct contrast from its surroundings. It should be the visually dominant button. Colors on these primary buttons can vary by their respective theme.


Secondary actions should carry the weaker visual attraction. Reducing the visual prominence in the secondary action help set clear visual dominance along with the primary action.


A pairing example of the primary and the secondary action.

An example of a singular primary action button.


Icons are the visual expression of a brand and product. They communicate the core idea in a simple, bold, and friendly way. While each icon is visually distinct, all icons should be unified through execution.


Taxonomy icons need to communicate the characteristics of a category in a direct and succinct manner with a clear form and shape. We use a set of outlined icons that are also treated with rounded corners to convey modern and inviting visual.


Contextual icons can be more playful, experimental, and abstract in various style as long as it captures the concept of an idea. The icons can be outlined or filled but the style must stay consistent across the set.