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:#6b6880;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:#6b6880;margin-top:0.25rem;">font-weight: 300 &nbsp;·&nbsp; Light</div>
        <div style="font-family:'Satoshi';font-weight:300;font-size:1rem;color:#6b6880;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:#6b6880;margin-top:0.25rem;">font-weight: 400 &nbsp;·&nbsp; Regular</div>
        <div style="font-family:'Satoshi';font-weight:400;font-size:1rem;color:#6b6880;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:#6b6880;margin-top:0.25rem;">font-weight: 500 &nbsp;·&nbsp; Medium</div>
        <div style="font-family:'Satoshi';font-weight:500;font-size:1rem;color:#6b6880;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:#6b6880;margin-top:0.25rem;">font-weight: 700 &nbsp;·&nbsp; Bold</div>
        <div style="font-family:'Satoshi';font-weight:700;font-size:1rem;color:#6b6880;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;"> <span style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#6d648f;vertical-align:middle;">(display face, --font-display)</span></div>
        <div style="font-size:0.75rem;color:#6b6880;margin-top:0.25rem;">font-weight: 900 &nbsp;·&nbsp; Black</div>
        <div style="font-family:'Satoshi';font-weight:900;font-size:1rem;color:#6b6880;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:#6b6880;margin:2.5rem 0 1.5rem;border-bottom:1px solid #EAE2F4;padding-bottom:0.5rem;">Comedik (Decorative Accent Font)</h2>

    <div style="margin-bottom:1.5rem;">
        <div style="font-family:'Comedik';font-size:3rem;color:#672c72;">The quick brown fox</div>
        <div style="font-size:0.75rem;color:#6b6880;margin-top:0.25rem;">font-family: 'Comedik' &nbsp;·&nbsp; self-hosted &nbsp;·&nbsp; --font-decorative &nbsp;·&nbsp; cleared for both Portal and App</div>
        <div style="font-size:0.75rem;color:#6d648f;margin-top:0.5rem;max-width:520px;">Decorative moments only (celebrations, empty-state accents, hero flourishes). Never UI labels or body text; Satoshi covers those. Replaces Marydale, which was documented but never actually loaded on either surface.</div>
    </div>

    <h2 style="font-family:'Satoshi';font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#6b6880;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:#6b6880;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:#6b6880;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:#6b6880;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:#6b6880;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:#6b6880;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:#6b6880;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:#6b6880;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:#6b6880;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}}{{#if this.display}} <span style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#6d648f;vertical-align:middle;">(display face, --font-display)</span>{{/if}}</div>
    <div style="font-size:0.75rem;color:#6b6880;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:#6b6880;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:#6b6880;margin:2.5rem 0 1.5rem;border-bottom:1px solid #EAE2F4;padding-bottom:0.5rem;">Comedik (Decorative Accent Font)</h2>

  <div style="margin-bottom:1.5rem;">
    <div style="font-family:'Comedik';font-size:3rem;color:#672c72;">The quick brown fox</div>
    <div style="font-size:0.75rem;color:#6b6880;margin-top:0.25rem;">font-family: 'Comedik' &nbsp;·&nbsp; self-hosted &nbsp;·&nbsp; --font-decorative &nbsp;·&nbsp; cleared for both Portal and App</div>
    <div style="font-size:0.75rem;color:#6d648f;margin-top:0.5rem;max-width:520px;">Decorative moments only (celebrations, empty-state accents, hero flourishes). Never UI labels or body text; Satoshi covers those. Replaces Marydale, which was documented but never actually loaded on either surface.</div>
  </div>

  <h2 style="font-family:'Satoshi';font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#6b6880;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:#6b6880;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,
      "display": true
    }
  ],
  "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 Comedik (self-hosted, decorative accent, see below). There is no third typeface for titles: the display face is Satoshi at weight 900 (--font-display), not a separate font.

Marydale is retired. It was documented here as the Portal decorative font but was never actually loaded anywhere live, the font actually in service was Comedik. Any reference to Marydale elsewhere is stale and should be repainted to Comedik.