The highlight reel of user research

A new set of tools for researchers who require a remote first approach. Made for and by us all.

with integrations that matter.

+ More Soon

Typography

Class: Title-80px
Font-size: 80px
Color: color-dark
Line-height: 88px

Heading 1

Class: H1-40px
Font-size: 40px
Color: color-dark
Line-height: 48px

Heading 2

Class: H2-32px
Font-size: 32px
Color: color-dark
Line-height: 40px

Heading 3

Class: H3-28px
Font-size: 28px
Color: color-dark
Line-height: 32px

Heading 4

Class: H4-24px
Font-size: 24px
Color: color-dark
Line-height:
32px
Heading 5
Class: H5-20px
Font-size: 20px
Color: color-dark
Line-height: 24px
Heading 6
Class: H6-16px
Font-size: 16px
Color: color-dark
Line-height: 24px
Heading 7
Class: H7-14px
Font-size: 14px
Color: color-dark
Line-height: 16px

This is a paragraph element. We have some placeholder text here to show what a paragraph looks like.

Class: paragraph-16px
Weight: Light
Font-size: 16px
Color: color-dark
Line-height: 24px
This is a text link
Class: text-link
Font-size: 16px
Color: color-dark
Line-height: 24px
Button / LargeButton / SmallButton / SmallStart trial
Class: button
Font-size: 16px
Line-height: 16px
Padding top and bottom: 20px
Padding left and right: 40px
Letter spacing: .3px
Button / Large / SecondaryButton / Secondary / Small
Class: button
Combo class: secondary
Font-size: 16px
Line-height: 16px
Padding top and bottom: 20px
Padding left and right: 40px
Letter spacing: .3px
Button / OutlineButton / Outline / small
Class: button
Combo class: outline
Font-size: 16px
Line-height: 16px
Background: Transparent
Border: 2px, solid
Border color: ##6200ee
Padding top and bottom: 20px
Padding left and right: 40px
Letter spacing: .3px

Colors

Class: primary-color
Color: #6200ee
Class: secondary-color
Color: #e8f5fd
Class: color-dark
Color: #030135
Class: color-white
Color: #030135

Extra styles

Here we are defining extra styles like the max-width of our container element, our padding for each breakpoint, and the border radius which we're utilizing.

Keeping these styles consistent in your design is an easy way to keep your site looking professional and responsive across break points. As you define the styles on each breakpoint, update the values below.

Containers on desktop

Class: container
Max-width: 1200px
Padding top and bottom: 140px
Padding left and right: 40px

Containers on tablet

Class: container
Max-width: 100%
Padding top and bottom: 140px
Padding left and right: 40px

Containers on mobile landscape and portrait

Class: container
Max-width: 100%
Padding top and bottom: 60px
Padding left and right: 20px

Border radius used on elements

Border radius: 4px