TubeSpanner Style Guide

Typography 

<div style="max-width:700px;">

    <h2 style="font-family:'Satoshi';font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#858B98;margin-bottom:1.5rem;border-bottom:1px solid #EAE2F4;padding-bottom:0.5rem;">Satoshi — UI &amp; Body Font</h2>

    <div style="margin-bottom:1.5rem;">
        <div style="font-family:'Satoshi';font-weight:300;font-size:2rem;color:#3E2155;"></div>
        <div style="font-size:0.75rem;color:#858B98;margin-top:0.25rem;">font-weight: 300 &nbsp;·&nbsp; Light</div>
        <div style="font-family:'Satoshi';font-weight:300;font-size:1rem;color:#858B98;margin-top:0.5rem;">The quick brown fox jumps over the lazy dog</div>
    </div>
    <div style="margin-bottom:1.5rem;">
        <div style="font-family:'Satoshi';font-weight:400;font-size:2rem;color:#3E2155;"></div>
        <div style="font-size:0.75rem;color:#858B98;margin-top:0.25rem;">font-weight: 400 &nbsp;·&nbsp; Regular</div>
        <div style="font-family:'Satoshi';font-weight:400;font-size:1rem;color:#858B98;margin-top:0.5rem;">The quick brown fox jumps over the lazy dog</div>
    </div>
    <div style="margin-bottom:1.5rem;">
        <div style="font-family:'Satoshi';font-weight:500;font-size:2rem;color:#3E2155;"></div>
        <div style="font-size:0.75rem;color:#858B98;margin-top:0.25rem;">font-weight: 500 &nbsp;·&nbsp; Medium</div>
        <div style="font-family:'Satoshi';font-weight:500;font-size:1rem;color:#858B98;margin-top:0.5rem;">The quick brown fox jumps over the lazy dog</div>
    </div>
    <div style="margin-bottom:1.5rem;">
        <div style="font-family:'Satoshi';font-weight:700;font-size:2rem;color:#3E2155;"></div>
        <div style="font-size:0.75rem;color:#858B98;margin-top:0.25rem;">font-weight: 700 &nbsp;·&nbsp; Bold</div>
        <div style="font-family:'Satoshi';font-weight:700;font-size:1rem;color:#858B98;margin-top:0.5rem;">The quick brown fox jumps over the lazy dog</div>
    </div>
    <div style="margin-bottom:1.5rem;">
        <div style="font-family:'Satoshi';font-weight:900;font-size:2rem;color:#3E2155;"></div>
        <div style="font-size:0.75rem;color:#858B98;margin-top:0.25rem;">font-weight: 900 &nbsp;·&nbsp; Black</div>
        <div style="font-family:'Satoshi';font-weight:900;font-size:1rem;color:#858B98;margin-top:0.5rem;">The quick brown fox jumps over the lazy dog</div>
    </div>

    <h2 style="font-family:'Satoshi';font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#858B98;margin:2.5rem 0 1.5rem;border-bottom:1px solid #EAE2F4;padding-bottom:0.5rem;">Marydale — Casual / Display Font</h2>

    <div style="margin-bottom:1.5rem;">
        <div style="font-family:'marydale';font-size:3rem;color:#712F79;">The quick brown fox</div>
        <div style="font-size:0.75rem;color:#858B98;margin-top:0.25rem;">font-family: 'marydale' &nbsp;·&nbsp; via Adobe Fonts (Typekit) &nbsp;·&nbsp; Used decoratively on the Portal</div>
    </div>

    <h2 style="font-family:'Satoshi';font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#858B98;margin:2.5rem 0 1.5rem;border-bottom:1px solid #EAE2F4;padding-bottom:0.5rem;">Type Scale</h2>

    <div style="display:flex;align-items:baseline;gap:1.5rem;margin-bottom:1rem;border-bottom:1px solid #f4f0f8;padding-bottom:1rem;">
        <div style="font-family:'Satoshi';font-size:2.5rem;color:#3E2155;min-width:300px;">Display heading</div>
        <div style="font-size:0.75rem;color:#858B98;white-space:nowrap;">2.5rem &nbsp;·&nbsp; Hero / page titles</div>
    </div>
    <div style="display:flex;align-items:baseline;gap:1.5rem;margin-bottom:1rem;border-bottom:1px solid #f4f0f8;padding-bottom:1rem;">
        <div style="font-family:'Satoshi';font-size:2rem;color:#3E2155;min-width:300px;">Heading 1</div>
        <div style="font-size:0.75rem;color:#858B98;white-space:nowrap;">2rem &nbsp;·&nbsp; h1</div>
    </div>
    <div style="display:flex;align-items:baseline;gap:1.5rem;margin-bottom:1rem;border-bottom:1px solid #f4f0f8;padding-bottom:1rem;">
        <div style="font-family:'Satoshi';font-size:1.5rem;color:#3E2155;min-width:300px;">Heading 2</div>
        <div style="font-size:0.75rem;color:#858B98;white-space:nowrap;">1.5rem &nbsp;·&nbsp; h2</div>
    </div>
    <div style="display:flex;align-items:baseline;gap:1.5rem;margin-bottom:1rem;border-bottom:1px solid #f4f0f8;padding-bottom:1rem;">
        <div style="font-family:'Satoshi';font-size:1.25rem;color:#3E2155;min-width:300px;">Heading 3</div>
        <div style="font-size:0.75rem;color:#858B98;white-space:nowrap;">1.25rem &nbsp;·&nbsp; h3</div>
    </div>
    <div style="display:flex;align-items:baseline;gap:1.5rem;margin-bottom:1rem;border-bottom:1px solid #f4f0f8;padding-bottom:1rem;">
        <div style="font-family:'Satoshi';font-size:1rem;color:#3E2155;min-width:300px;">Heading 4 / Body</div>
        <div style="font-size:0.75rem;color:#858B98;white-space:nowrap;">1rem &nbsp;·&nbsp; h4, p</div>
    </div>
    <div style="display:flex;align-items:baseline;gap:1.5rem;margin-bottom:1rem;border-bottom:1px solid #f4f0f8;padding-bottom:1rem;">
        <div style="font-family:'Satoshi';font-size:0.875rem;color:#3E2155;min-width:300px;">Small / Label</div>
        <div style="font-size:0.75rem;color:#858B98;white-space:nowrap;">0.875rem &nbsp;·&nbsp; small, label</div>
    </div>
    <div style="display:flex;align-items:baseline;gap:1.5rem;margin-bottom:1rem;border-bottom:1px solid #f4f0f8;padding-bottom:1rem;">
        <div style="font-family:'Satoshi';font-size:0.75rem;color:#3E2155;min-width:300px;">Caption / Meta</div>
        <div style="font-size:0.75rem;color:#858B98;white-space:nowrap;">0.75rem &nbsp;·&nbsp; caption, meta text</div>
    </div>

</div>
 
<div style="max-width:700px;">

  <h2 style="font-family:'Satoshi';font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#858B98;margin-bottom:1.5rem;border-bottom:1px solid #EAE2F4;padding-bottom:0.5rem;">Satoshi — UI &amp; Body Font</h2>

  {{#each satoshi}}
  <div style="margin-bottom:1.5rem;">
    <div style="font-family:'Satoshi';font-weight:{{this.weight}};font-size:2rem;color:#3E2155;">{{this.label}}</div>
    <div style="font-size:0.75rem;color:#858B98;margin-top:0.25rem;">font-weight: {{this.weight}} &nbsp;·&nbsp; {{this.name}}</div>
    <div style="font-family:'Satoshi';font-weight:{{this.weight}};font-size:1rem;color:#858B98;margin-top:0.5rem;">The quick brown fox jumps over the lazy dog</div>
  </div>
  {{/each}}

  <h2 style="font-family:'Satoshi';font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#858B98;margin:2.5rem 0 1.5rem;border-bottom:1px solid #EAE2F4;padding-bottom:0.5rem;">Marydale — Casual / Display Font</h2>

  <div style="margin-bottom:1.5rem;">
    <div style="font-family:'marydale';font-size:3rem;color:#712F79;">The quick brown fox</div>
    <div style="font-size:0.75rem;color:#858B98;margin-top:0.25rem;">font-family: 'marydale' &nbsp;·&nbsp; via Adobe Fonts (Typekit) &nbsp;·&nbsp; Used decoratively on the Portal</div>
  </div>

  <h2 style="font-family:'Satoshi';font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#858B98;margin:2.5rem 0 1.5rem;border-bottom:1px solid #EAE2F4;padding-bottom:0.5rem;">Type Scale</h2>

  {{#each scale}}
  <div style="display:flex;align-items:baseline;gap:1.5rem;margin-bottom:1rem;border-bottom:1px solid #f4f0f8;padding-bottom:1rem;">
    <div style="font-family:'Satoshi';font-size:{{this.size}};color:#3E2155;min-width:300px;">{{this.label}}</div>
    <div style="font-size:0.75rem;color:#858B98;white-space:nowrap;">{{this.size}} &nbsp;·&nbsp; {{this.usage}}</div>
  </div>
  {{/each}}

</div>
 
{
  "satoshi": [
    {
      "name": "Light",
      "weight": 300
    },
    {
      "name": "Regular",
      "weight": 400
    },
    {
      "name": "Medium",
      "weight": 500
    },
    {
      "name": "Bold",
      "weight": 700
    },
    {
      "name": "Black",
      "weight": 900
    }
  ],
  "scale": [
    {
      "size": "2.5rem",
      "label": "Display heading",
      "usage": "Hero / page titles"
    },
    {
      "size": "2rem",
      "label": "Heading 1",
      "usage": "h1"
    },
    {
      "size": "1.5rem",
      "label": "Heading 2",
      "usage": "h2"
    },
    {
      "size": "1.25rem",
      "label": "Heading 3",
      "usage": "h3"
    },
    {
      "size": "1rem",
      "label": "Heading 4 / Body",
      "usage": "h4, p"
    },
    {
      "size": "0.875rem",
      "label": "Small / Label",
      "usage": "small, label"
    },
    {
      "size": "0.75rem",
      "label": "Caption / Meta",
      "usage": "caption, meta text"
    }
  ]
}

Two typefaces: Satoshi (self-hosted, all UI and body copy) and Marydale (Adobe Fonts via Typekit ian6ivn, decorative/casual use on the Portal). Marydale should not be used in the App.