Website Styleguide

Design

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

Graphic shapes on light solid backdrop

Graphic shapes on light gradient backdrop

Use of rounded corner for modern look

Illustration

Vector style to feature product and service

Handdrawn style for more casual content

Color

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.

Text

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

Highlighter

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
  • HEX#FF8FBE
  • 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

Backdrop

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
  • HEX#CEE4ED
  • RGB206, 228, 237
  • HSL197, 46, 87
  • HEX#CFF1FF
  • RGB207 ,241, 255
  • HSL197, 100, 91
  • HEX#CCEAFF
  • RGB204, 234, 255
  • HSL205, 100, 90
  • HEX#BAFDF5
  • RGB186, 253, 245
  • HSL173, 94, 86
  • HEX#F1EDE9
  • RGB231, 221, 252
  • HSL0226, 87, 91
  • HEX#D4DDFC
  • RGB212, 221, 252
  • HSL226, 87, 91
  • HEX#0B3361
  • RGB231, 221, 252
  • HSL226, 87, 91

Typography

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

Formatting

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.

Spacing

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.

Button

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.

Primary

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

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.

Usage

A pairing example of the primary and the secondary action.

An example of a singular primary action button.

Icon

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

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

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.