Landing · Foundations

Fonts

A landing Foundations-usage page for type: the marketing register of the shared type scale — Plus Jakarta Sans for body (matching the live site) and Nunito (--aha-font-display) reserved for Display and H1 only, each row bound to the DS size, weight, line-height and family tokens. H2/H3 stay on the body face by design (a two-tier headline treatment); the live site uses one face everywhere, so this is a deliberate DS-wins delta, not an oversight. Not a second type source; the same --aha-* tokens the product design system ships. Sizes h1-h6 (48/40/32/24/20/18) match the live site's own --_typography scale token-for-token.

◆ generated from landing/fonts.json — do not edit by hand

Preview

Role	Size
display1	64px
display2	56px
h1	48px
h2	40px
h3	32px
h4	24px
h5 / xl	20px
h6	18px
body (default)	14px
bodyLG (l)	16px
bodySM (sm)	12px

Paste-and-run HTML

Framework-free — copy the whole block into any page (Webflow, WordPress, a static site). It binds only to the shared --aha-* tokens, so load the token layer once on the page first and the block inherits the AhaSlides brand automatically.

fonts.html

<style>
.aha-type{
  font-family:var(--aha-font-product);
  color:var(--aha-text-default);
  display:flex;
  flex-direction:column;
  gap:var(--aha-space-16);
}
.aha-type>*{margin:0}
.aha-type__display{
  font-family:var(--aha-font-display);
  font-size:clamp(var(--aha-size-h1),6vw,var(--aha-size-display1));
  line-height:var(--aha-line-height-tight);
  font-weight:var(--aha-weight-semibold);
  letter-spacing:var(--aha-letter-spacing-headlines);
}
.aha-type__h1{
  font-family:var(--aha-font-display);
  font-size:var(--aha-size-h1);
  line-height:var(--aha-line-height-tight);
  font-weight:var(--aha-weight-semibold);
}
.aha-type__h2{font-size:var(--aha-size-h2);line-height:var(--aha-line-height-heading);font-weight:var(--aha-weight-semibold)}
.aha-type__h3{font-size:var(--aha-size-h3);line-height:var(--aha-line-height-heading);font-weight:var(--aha-weight-semibold)}
.aha-type__lead{font-size:var(--aha-size-xl);line-height:var(--aha-line-height-body);color:var(--aha-text-secondary);max-width:52ch}
.aha-type__body{font-size:var(--aha-size-l);line-height:var(--aha-line-height-body);color:var(--aha-text-secondary);max-width:60ch}
.aha-type__small{font-size:var(--aha-size-sm);line-height:var(--aha-line-height-body);color:var(--aha-text-tertiary);letter-spacing:var(--aha-letter-spacing-subtext)}
</style>
<div class="aha-type">
  <p class="aha-type__display">Display &mdash; Nunito</p>
  <h1 class="aha-type__h1">Heading 1 &mdash; make the promise big</h1>
  <h2 class="aha-type__h2">Heading 2 &mdash; a section headline</h2>
  <h3 class="aha-type__h3">Heading 3 &mdash; a card or sub-section</h3>
  <p class="aha-type__lead">Lead &mdash; a short, confident sentence that sets up the section below it.</p>
  <p class="aha-type__body">Body &mdash; the workhorse size for landing copy. The quick brown fox jumps over the lazy dog while three million presenters run their rooms with AhaSlides.</p>
  <p class="aha-type__small">Small &mdash; captions, trust lines and fine print.</p>
</div>

Load the tokens once

Add this to your page <head> before the block — it defines every --aha-* custom property the block reads:

head

<link rel="stylesheet" href="https://ahaslides-product.github.io/ahaslides-design/variables.css">