Skip to content
menu-toggle
menu-close
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 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);
}

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

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

Checkmarks

  • Kontrakter tager for lang tid
  • Kunder venter på underskrifter
  • Der bruges for meget tid på opfølgning
  • Dokumenter sendes frem og tilbage på mail
  • Godkendelser bliver en flaskehals
  • I ønsker at digitalisere arbejdsgange

Checkmarks

  • Kontrakter tager for lang tid
  • Kunder venter på underskrifter
  • Der bruges for meget tid på opfølgning
  • Dokumenter sendes frem og tilbage på mail
  • Godkendelser bliver en flaskehals
  • I ønsker at digitalisere arbejdsgange

Checkmarks

  • Kontrakter tager for lang tid
  • Kunder venter på underskrifter
  • Der bruges for meget tid på opfølgning
  • Dokumenter sendes frem og tilbage på mail
  • Godkendelser bliver en flaskehals
  • I ønsker at digitalisere arbejdsgange
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
Component tokens

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>