Foundation tokens

Typography

Addo Sign uses a clear and confident typography system designed to make complex information easier to understand across marketing, documentation and digital experiences.

Font families

Our typefaces

Stack Sans Headline creates distinction and confidence, while Stack Sans Text provides clarity and readability in longer content.

Aa
Headings

Stack Sans Headline

--font-family-heading

Used for display text, headings and prominent short-form messages.

Aa
Body

Stack Sans Text

--font-family-body

Used for paragraphs, descriptions, navigation, buttons and supporting information.

Aa
Code

Monospace

--font-family-mono

Used for design tokens, code examples and technical references.

Type scale

Headings

Heading sizes use responsive values where appropriate. The font size scales smoothly between its minimum and maximum value.

Display --heading-display-size --heading-display-line-height --heading-display-letter-spacing 48–66px · 1.05
Think big. Make it simple.
Heading 1 --heading-1-size --heading-1-line-height 35–48px · 1.1
Digital signing made simple
Heading 2 --heading-2-size --heading-2-line-height 30–40px · 1.15
One platform. Every agreement.
Heading 3 --heading-3-size --heading-3-line-height 24–32px · 1.2
Faster and easier workflows
Heading 4 --heading-4-size --heading-4-line-height 20–24px · 1.25
Designed for modern organisations
Heading 5 --heading-5-size --heading-5-line-height 18–20px · 1.3
Secure digital agreements
Heading 6 --heading-6-size --heading-6-line-height 16px · 1.35
Supporting heading
Body styles

Reading hierarchy

Body styles create a clear hierarchy between introductions, standard content and supporting information.

Lead

Introductory text

--lead-size --lead-line-height 18–20px · 1.5

Make contracts, approvals and document processes simpler with one secure digital signing platform.

Body

Standard content

--body-size --body-line-height 17px · 1.6

Addo Sign helps organisations manage agreements and signing workflows more efficiently. Documents can be prepared, distributed, signed and stored through one connected process.

Body small

Supporting content

--body-small-size --body-small-line-height 15px · 1.5

Used for metadata, captions, supplementary descriptions, labels and other supporting information.

Font weights

Emphasis

Use weight intentionally to create hierarchy. Avoid using bold text extensively inside longer paragraphs.

Aa
Regular 400 --font-weight-regular
Aa
Medium 500 --font-weight-medium
Aa
Semibold 600 --font-weight-semibold
Aa
Bold 700 --font-weight-bold
Implementation

CSS example

CSS
h1,
.h1 {
  font-size: var(--heading-1-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--heading-1-line-height);
  letter-spacing: var(--heading-1-letter-spacing);
}

.lead {
  font-size: var(--lead-size);
  line-height: var(--lead-line-height);
}

.body-small {
  font-size: var(--body-small-size);
  line-height: var(--body-small-line-height);
}
Back to top ↑
Foundation tokens

Color palette

Addo Sign uses orange as the primary brand color, supported by blue, green, graphite, red and neutral colors.

Primary palette

Orange

Used for primary actions, highlights and important brand moments.

 
Orange 100--addo-orange-100#FFE0C2
 
Orange 200--addo-orange-200#FF9A4A
 
Orange 300--addo-orange-300#FF6418
 
Orange 400--addo-orange-400#C25412
 
Orange 500--addo-orange-500#8A3C0D
Supporting palette

Blue

 
Blue 100--addo-blue-100#DCEFF9
 
Blue 200--addo-blue-200#00A0E6
 
Blue 300--addo-blue-300#0085C2
 
Blue 400--addo-blue-400#00658F
 
Blue 500--addo-blue-500#003F5A
Supporting palette

Green

 
Green 100--addo-green-100#EDF7F1
 
Green 200--addo-green-200#BBDFC2
 
Green 300--addo-green-300#6EB984
 
Green 400--addo-green-400#3F8A58
 
Green 500--addo-green-500#285A39
Semantic palette

Red

 
Red 100--addo-red-100#FBECEC
 
Red 200--addo-red-200#F2B7B7
 
Red 300--addo-red-300#D95C5C
 
Red 400--addo-red-400#B33F3F
 
Red 500--addo-red-500#7A2424
Neutral dark palette

Graphite

 
Graphite 100--addo-graphite-100#2D2F32
 
Graphite 200--addo-graphite-200#1F2022
 
Graphite 300--addo-graphite-300#18191B
Neutral palette

Neutrals

 
White--addo-white#FFFFFF
 
Grey--addo-grey#DFDFDF
Back to top ↑
Component

Buttons

Buttons are used to communicate actions and guide users through the Addo Sign experience. Use the primary button for the most important action and supporting variants for secondary choices.

Variants

Button styles

Choose a variant based on the importance of the action and the background on which the button is placed.

Get started
Primary

Filled orange

.in-btn
.in-btn--filled-dark

Used for the primary action on a page or within a component.

Get started
Inverse

Filled light

.in-btn
.in-btn--filled

Used on dark or colored surfaces where a light action is needed.

Get started
Secondary

Outlined dark

.in-btn
.in-btn--outlined-dark

Used for secondary actions that should remain visible without competing with the primary button.

Sizes

Button scale

The medium button is the default size used by existing HubSpot theme components. Small and large sizes may be used in custom modules.

Modifiers

Layout and icons

Modifier classes can be combined with button variants and sizes without changing their visual hierarchy.

Get started
Width

Full width

.in-btn--full

Expands the button to fill the available width of its container.

Get started
Icon

Arrow right

.in-btn--arrow

Adds a responsive arrow icon that follows the selected button size.

Explore the platform
Combined

Full width with arrow

.in-btn--full
.in-btn--arrow

Suitable for cards, navigation panels and prominent content links.

Implementation

HTML example

HTML
<a
  href="#"
  class="in-btn in-btn--filled-dark in-btn--large in-btn--arrow"
>
  <span class="in-btn__text">Get started</span>
</a>
Back to top ↑
Component

Pills

Pills are compact labels used to group, categorise or highlight short pieces of information.

Usage

Basic pills

Keep pill labels short and descriptive. Multiple pills can be grouped together and will automatically wrap when space is limited.

Digital signing BankID MitID API e-Boks
Default

Grouped labels

.addo-pills .addo-pill

The container controls spacing and wrapping while each pill controls its own appearance.

Variants

Color variants

Color variants can be used to create visual distinction or communicate different types of information. Use color intentionally and consistently.

Default Orange Blue Green Red Dark
Variants

Color options

.addo-pill .addo-pill--orange .addo-pill--blue .addo-pill--green .addo-pill--red .addo-pill--dark

The default pill is neutral. Use a color modifier when additional emphasis or semantic meaning is needed.

Composition

Single and grouped

A pill can be used independently or together with related labels.

Digital signing

Pill

.addo-pill

The individual component contains the label styling, padding and rounded shape.

API Webhooks Templates

Pill group

.addo-pills

The wrapper handles spacing and wrapping between multiple pills.

Guidance

Choosing a color

Color should support the meaning of a pill rather than be used only for decoration.

Category
Neutral

Default

Use for general categories, metadata and information that does not require additional emphasis.

Featured Information
Emphasis

Brand and information

Orange can be used for brand emphasis, while blue works well for informational or supporting labels.

Active Important
Semantic

Status and meaning

Green can communicate positive or active states, while red should be reserved for warnings, errors or information requiring attention.

Implementation

HTML example

HTML
<div class="addo-pills">
  <span class="addo-pill">Default</span>
  <span class="addo-pill addo-pill--orange">Featured</span>
  <span class="addo-pill addo-pill--blue">Information</span>
  <span class="addo-pill addo-pill--green">Active</span>
  <span class="addo-pill addo-pill--red">Important</span>
  <span class="addo-pill addo-pill--dark">Enterprise</span>
</div>
Back to top ↑