Font styling (#8764)

* Font styling * Additional adjustments * Adjust * Node headers & Table numbers * Adjust * mono size adjust * Adjust upwards for headers * Explicit label vars * header font-weight * .sub font-weight * Adjust block headers * Remove rx--updated
2023-01-11 20:09:13 +02:00 · 2023-01-11 20:09:13 +02:00 · 9647a68b4a
commit 9647a68b4a
parent 817bade6d4
74 changed files with 231 additions and 255 deletions
--- a/packages/apps/public/index.html
+++ b/packages/apps/public/index.html
@ -8,17 +8,35 @@
    <title><%= htmlWebpackPlugin.options.PAGE_TITLE %></title>
    <script type="text/javascript" src="env-config.js"></script>
    <style>
+      /*
+        1.125 (8:9) factor (https://www.modularscale.com/?1&rem&1.067, https://type-scale.com/) -
+
+        1.424rem
+        1.266rem
+        1.125rem
+        1rem
+        0.889rem
+        0.79rem
+      */
      :root {
-        --font-mono: 0.9em Consolas, monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace;
+        --font-mono: 0.889em Consolas, monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace;
        --font-sans: 1em "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-        --font-size-label: 0.75rem;
-        --font-size-medium: 0.925rem; /* 0.935 * 0.935 = 0.875 */
-        --font-size-small: 0.875rem;
-        --font-size-tiny: 0.71428571rem;
+        --font-percent-small: 88.9%;
+        --font-percent-tiny: 79.0%;
+        --font-size-base: 1rem;
+        --font-size-h1: 1.424rem;
+        --font-size-h2: 1.266rem;
+        --font-size-h3: 1.125rem;
+        --font-size-small: 0.889rem;
+        --font-size-tiny: 0.79rem;
        --font-weight-bold: 700;
+        --font-weight-header: 300;
        --font-weight-light: 200;
        --font-weight-normal: 400;
-        --text-transform-label: uppercase;
+        --font-size-label: 0.79rem;
+        --font-weight-label: 400;
+        --text-transform-label: lowercase;
+        --opacity-light: 0.6;
        --width-full: 1750px;
        --width-half: 875px;
        --bg-menu-hover: rgba(255, 255, 255, 0.2);
@ -38,12 +56,13 @@
        --border-input: rgba(234, 236, 238, .15);
        --border-table: #343536;
        --border-tabs: #343536;
-        --color-checkbox: rgba(78, 78, 78, 0.66);
+        /* --color-checkbox: rgba(78, 78, 78, 0.66); */
        --color-error: rgba(255, 83, 83, 0.8);
-        --color-label: rgba(244, 242, 240, 0.45);
-        --color-summary: rgba(244, 242, 240, 0.75);
-        --color-table-foot: rgba(254, 240, 240, 0.66);
-        --color-table-head: rgba(254, 240, 240, 0.66);
+        /* --color-header: rgba(244, 242, 240, 0.8); */
+        /* --color-label: rgba(244, 242, 240, 0.45); */
+        /* --color-summary: rgba(244, 242, 240, 0.75); */
+        /* --color-table-foot: rgba(254, 240, 240, 0.66); */
+        /* --color-table-head: rgba(254, 240, 240, 0.8); */
        --color-text: rgba(244, 242, 240, 0.8);
      }

@ -61,13 +80,14 @@
        --border-input: rgba(34, 36, 38, .15);
        --border-table: #efedeb; /* #f1efed; */
        --border-tabs: #f1efed;
-        --color-checkbox: rgba(34, 36, 38, 0.15);
+        /* --color-checkbox: rgba(34, 36, 38, 0.15); */
        --color-error: rgba(139, 0, 0);
-        --color-label: rgba(78, 78, 78, 0.66);
-        --color-summary: rgba(0, 0, 0, 0.6);
-        --color-table-foot: rgba(78, 78, 78, 0.66);
-        --color-table-head: rgba(78, 78, 78, 0.66);
-        --color-text: #4e4e4e;
+        /* --color-header: rgba(78, 78, 78, 0.8); */
+        /* --color-label: rgba(78, 78, 78, 0.66); */
+        /* --color-summary: rgba(78, 78, 78, 0.66); */
+        /* --color-table-foot: rgba(78, 78, 78, 0.66); */
+        /* --color-table-head: rgba(78, 78, 78, 0.8); */
+        --color-text: rgba(78, 78, 78, 0.8); /* 1 */
      }
    </style>
  </head>
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@ -55,6 +55,12 @@ export default React.memo(styled(Apps)`
  flex-direction: column;
  min-height: 100vh;

+  .--digits {
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    white-space: nowrap;
+  }
+
  .--hidden {
    display: none;
  }
--- a/packages/apps/src/Endpoints/Network.tsx
+++ b/packages/apps/src/Endpoints/Network.tsx
@ -90,7 +90,7 @@ export default React.memo(styled(NetworkDisplay)`
  position: relative;

  &.isUnreachable {
-    opacity: 0.6;
+    opacity: var(--opacity-light);
  }

  &.isSelected,
@ -114,7 +114,7 @@ export default React.memo(styled(NetworkDisplay)`

    .endpointValue {
      .endpointExtra {
-        font-size: 0.75rem;
+        font-size: var(--font-size-small);
        opacity: 0.8;
      }
    }
--- a/packages/apps/src/Menu/ChainInfo.tsx
+++ b/packages/apps/src/Menu/ChainInfo.tsx
@ -88,25 +88,21 @@ export default React.memo(styled(ChainInfo)`

    .info {
      flex: 1;
+      font-size: var(--font-size-tiny);
+      line-height: 1.2;
      padding-right: 0.5rem;
      text-align: right;

      .chain {
+        font-size: var(--font-size-small);
        max-width: 16rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

-      .chain, .bestNumber {
-        font-size: var(--font-size-small);
-        line-height: 1.2;
-      }
-
      .runtimeVersion {
-          font-size: 0.75rem;
-          line-height: 1.2;
-          letter-spacing: -0.01em;
+        letter-spacing: -0.01em;
      }
    }
  }
--- a/packages/apps/src/Menu/Grouping.tsx
+++ b/packages/apps/src/Menu/Grouping.tsx
@ -59,8 +59,8 @@ export default React.memo(styled(Grouping)`
  .groupHdr {
    border-radius: 0.25rem;
    padding: 0.857rem 1.375rem;
-    font-size: var(--font-size-medium);
-    font-weight: 400;
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-normal);
    line-height: 1.214rem;

    > .ui--Icon {
@ -70,7 +70,7 @@ export default React.memo(styled(Grouping)`

  &.isActive .groupHdr {
    background-color: var(--bg-tabs);
-    font-weight: 400;
+    font-weight: var(--font-weight-normal);
    margin-bottom: 0;
  }

--- a/packages/apps/src/Menu/Item.tsx
+++ b/packages/apps/src/Menu/Item.tsx
@ -53,7 +53,7 @@ export default React.memo(styled(Item)`
  white-space: nowrap;

  &.topLevel {
-    font-weight: 400;
+    font-weight: var(--font-weight-normal);
    line-height: 1.214rem;
    border-radius: 0.15rem;

@ -65,7 +65,7 @@ export default React.memo(styled(Item)`

    &.isActive.highlight--color-contrast {
      font-size: 1.15rem;
-      font-weight: 400;
+      font-weight: var(--font-weight-normal);
      color: var(--color-text);

      a {
@ -100,8 +100,8 @@ export default React.memo(styled(Item)`
    display: block;
    padding: 0.5rem 1.15rem 0.57rem;
    text-decoration: none;
-    font-weight: 400;
-    font-size: var(--font-size-medium);
+    font-weight: var(--font-weight-normal);
+    font-size: var(--font-size-small);
    line-height: 1.5rem;
  }

--- a/packages/apps/src/Menu/NodeInfo.tsx
+++ b/packages/apps/src/Menu/NodeInfo.tsx
@ -20,7 +20,7 @@ function NodeInfo ({ className = '' }: Props): React.ReactElement<Props> {
  return (
    <div className={`${className} media--1400 highlight--color-contrast ui--NodeInfo`}>
      {isApiReady && (
-        <div>
+        <div className='node'>
          <NodeName />&nbsp;
          <NodeVersion label='v' />
        </div>
@ -33,11 +33,15 @@ function NodeInfo ({ className = '' }: Props): React.ReactElement<Props> {

 export default React.memo(styled(NodeInfo)`
  background: transparent;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-tiny);
  line-height: 1.2;
  padding: 0 0 0 1rem;
  text-align: right;

+  .node {
+    font-size: var(--font-size-small);
+  }
+
  > div {
    margin-bottom: -0.125em;

--- a/packages/page-accounts/src/Sidebar/Balances.tsx
+++ b/packages/page-accounts/src/Sidebar/Balances.tsx
@ -48,7 +48,7 @@ export default React.memo(styled(Balances)`
      }

      .ui--Expander-content .ui--FormatBalance-value {
-        font-size: 0.93rem;
+        font-size: var(--font-size-small);
      }
    }
  }
--- a/packages/page-accounts/src/Sidebar/Sidebar.tsx
+++ b/packages/page-accounts/src/Sidebar/Sidebar.tsx
@ -124,7 +124,7 @@ export default React.memo(styled(FullSidebar)`
  .ui--AddressMenu-index {
    font: var(--font-mono);
    text-align: left;
-    font-size: 0.857rem;
+    font-size: var(--font-size-small);
  }

  .ui--AddressMenu-addr {
@ -138,7 +138,7 @@ export default React.memo(styled(FullSidebar)`
  .ui--AddressMenu-index {
    font: var(--font-mono);
    text-align: left;
-    font-size: 0.857rem;
+    font-size: var(--font-size-small);
  }

  .ui--AddressMenu-copyaaddr {
@ -154,7 +154,7 @@ export default React.memo(styled(FullSidebar)`
    flex-direction: row;

    label {
-      font-size: 0.857rem;
+      font-size: var(--font-size-small);
      margin-right: 0.4rem;
      text-transform: capitalize;
    }
@ -200,7 +200,7 @@ export default React.memo(styled(FullSidebar)`
  .ui--AddressMenu-multisig {
    .ui--AddressMenu-identityTable,
    .ui--AddressMenu-multisigTable {
-      font-size: 0.93rem;
+      font-size: var(--font-size-small);
      margin-top: 0.6rem;

      .tr {
@ -215,7 +215,7 @@ export default React.memo(styled(FullSidebar)`
          font-weight: var(--font-weight-normal);
          text-align: left;
          flex-basis: 25%;
-          font-size: var(--font-size-label);
+          font-size: var(--font-size-tiny);

          &.top {
            align-self: flex-start;
@ -236,7 +236,7 @@ export default React.memo(styled(FullSidebar)`
      }

      .subs-number {
-        font-size: 1rem;
+        font-size: var(--font-size-base);
        margin-bottom: 0.714rem;
      }
    }
--- a/packages/page-accounts/src/Vanity/index.tsx
+++ b/packages/page-accounts/src/Vanity/index.tsx
@ -179,7 +179,7 @@ function VanityApp ({ className = '', onStatusChange }: Props): React.ReactEleme
          count: keyCount,
          elapsed: (elapsed / 1000).toFixed(2)
        }
-      }), 'start'],
+      }), 'start --digits'],
      [t('secret'), 'start'],
      []
    ],
--- a/packages/page-bounties/src/Bounties.tsx
+++ b/packages/page-bounties/src/Bounties.tsx
@ -74,7 +74,7 @@ export default React.memo(styled(Bounties)`
  }

  .via-identity .name {
-    font-size: 1rem;
+    font-size: var(--font-size-base);
    line-height: 1.7rem;
    text-transform: initial;
    filter: initial;
--- a/packages/page-bounties/src/Bounty.tsx
+++ b/packages/page-bounties/src/Bounty.tsx
@ -214,7 +214,7 @@ export default React.memo(styled(Bounty)`

  & .inline-balance {
    width: 50%;
-    font-size: 1rem;
+    font-size: var(--font-size-base);
    line-height: normal;
  }

@ -255,7 +255,7 @@ export default React.memo(styled(Bounty)`
  }

  .block-to-time {
-    font-size: 0.7rem;
+    font-size: var(--font-size-tiny);
    line-height: 1.5rem;
    color: var(--color-label);
  }
--- a/packages/page-bounties/src/BountyInfos/VotingLink.tsx
+++ b/packages/page-bounties/src/BountyInfos/VotingLink.tsx
@ -25,6 +25,6 @@ function VotingLink ({ className }: Props): React.ReactElement<Props> {

 export default React.memo(styled(VotingLink)`
  line-height: 0.85rem;
-  font-size: 0.7rem;
+  font-size: var(--font-size-tiny);
  text-decoration: underline;
 `);
--- a/packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx
+++ b/packages/page-bounties/src/BountyNextActionInfo/BountyInfo.tsx
@ -34,8 +34,7 @@ function BountyInfo ({ className = '', description, type = 'info' }: Props): Rea
 export default React.memo(styled(BountyInfo)(({ theme }: ThemeProps) => `
  display: flex;
  align-items: center;
-  font-weight: 500;
-  font-size: 0.857rem;
+  font-size: var(--font-size-small);
  line-height: 1.5rem;

  .info-icon{
@ -46,8 +45,8 @@ export default React.memo(styled(BountyInfo)(({ theme }: ThemeProps) => `
  }

  .description {
-    font-weight: 400;
-    var(--font-size-label)
+    font-weight: var(--font-weight-normal);
+    var(font-size: var(--font-size-tiny);)
    line-height: 0.864rem;
    color: var(--color-label);
    word-wrap: break-word;
--- a/packages/page-bounties/src/Description.tsx
+++ b/packages/page-bounties/src/Description.tsx
@ -23,7 +23,7 @@ function Description ({ className = '', dataTestId = '', description }: Props):

 export default React.memo(styled(Description)`
  margin-top: 0.28rem;
-  font-size: 0.7rem;
+  font-size: var(--font-size-tiny);
  line-height: 0.85rem;
  color: var(--color-label);
 `);
--- a/packages/page-bounties/src/VotersColumn.tsx
+++ b/packages/page-bounties/src/VotersColumn.tsx
@ -72,8 +72,8 @@ export default React.memo(styled(VotersColumn)`

  .vote-numbers-label {
    margin-left: 0.75rem;
-    font-weight: bold;
-    font-size: 0.7rem;
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-tiny);
    line-height: 0.85rem;
    text-transform: uppercase;
    color: var(--color-label);
--- a/packages/page-calendar/src/DayHour.tsx
+++ b/packages/page-calendar/src/DayHour.tsx
@ -78,7 +78,7 @@ export default React.memo(styled(DayHour)`
    font-weight: var(--font-weight-normal);
    line-height: 1;
    min-width: 5.5rem;
-    opacity: 0.6;
+    opacity: var(--opacity-light);
    padding: 0.5rem 1rem;
    text-align: right;
    text-transform: uppercase;
--- a/packages/page-calendar/src/Month.tsx
+++ b/packages/page-calendar/src/Month.tsx
@ -109,7 +109,7 @@ export default React.memo(styled(Month)`

    .dayOfWeek {
      > * {
-        font-size: 0.7em;
+        font-size: var(--font-size-tiny);
        font-weight: var(--font-weight-normal);
        letter-spacing: 0.1em;
        text-align: center;
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@ -90,12 +90,12 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi
      <Card isError>
        <div className={className}>
          {t<string>('We found a pre-claim with this Polkadot address. However, attesting requires signing with this account. To continue with attesting, please add this account as an owned account first.')}
-          <h3>
+          <h2>
            <FormatBalance
              label={t<string>('Account balance:')}
              value={claimValue}
            />
-          </h3>
+          </h2>
        </div>
      </Card>
    );
@ -108,12 +108,12 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi
          kind={statementKind}
          systemChain={systemChain}
        />
-        <h3>
+        <h2>
          <FormatBalance
            label={t<string>('Account balance:')}
            value={claimValue}
          />
-        </h3>
+        </h2>
        <Button.Group>
          <TxButton
            accountId={accountId}
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@ -86,7 +86,7 @@ function Claim ({ accountId, className = '', ethereumAddress, ethereumSignature,
    >
      <div className={className}>
        {t<string>('Your Ethereum account')}
-        <h3>{addrToChecksum(ethereumAddress.toString())}</h3>
+        <h2>{addrToChecksum(ethereumAddress.toString())}</h2>
        {hasClaim
          ? (
            <>
@ -136,7 +136,7 @@ h2 {
  margin: 0.5rem 0 2rem;
  font-family: monospace;
  font-size: 2.5rem;
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
 }
 `;

--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@ -200,11 +200,11 @@ function ClaimsApp ({ basePath }: Props): React.ReactElement<Props> {
      <Columar>
        <Columar.Column>
          <Card withBottomMargin>
-            <h3>{t<string>('1. Select your {{chain}} account', {
+            <h2>{t<string>('1. Select your {{chain}} account', {
              replace: {
                chain: systemChain
              }
-            })}</h3>
+            })}</h2>
            <InputAddress
              defaultValue={accountId}
              help={t<string>('The account you want to claim to.')}
@ -231,7 +231,7 @@ function ClaimsApp ({ basePath }: Props): React.ReactElement<Props> {
            // to be able to know the statement kind so that the users can sign it
            (step >= Step.ETHAddress && !isPreclaimed && !isOldClaimProcess) && (
              <Card withBottomMargin>
-                <h3>{t<string>('2. Enter the ETH address from the sale.')}</h3>
+                <h2>{t<string>('2. Enter the ETH address from the sale.')}</h2>
                <Input
                  autoFocus
                  className='full'
@ -254,7 +254,7 @@ function ClaimsApp ({ basePath }: Props): React.ReactElement<Props> {
            )}
          {(step >= Step.Sign && !isPreclaimed) && (
            <Card>
-              <h3>{t<string>('{{step}}. Sign with your ETH address', { replace: { step: isOldClaimProcess ? '2' : '3' } })}</h3>
+              <h2>{t<string>('{{step}}. Sign with your ETH address', { replace: { step: isOldClaimProcess ? '2' : '3' } })}</h2>
              {!isOldClaimProcess && (
                <Statement
                  kind={statementKind}
--- a/packages/page-contracts/src/shared/MessageSignature.tsx
+++ b/packages/page-contracts/src/shared/MessageSignature.tsx
@ -86,7 +86,7 @@ export default React.memo(styled(MessageSignature)`
  .ui--MessageSignature-mutates {
    color: #ff8600;
    margin-left: 0.5rem;
-    opacity: 0.6;
+    opacity: var(--opacity-light);
  }

  .ui--MessageSignature-name {
--- a/packages/page-explorer/src/BlockHeader.tsx
+++ b/packages/page-explorer/src/BlockHeader.tsx
@ -6,7 +6,7 @@ import type { HeaderExtended } from '@polkadot/api-derive/types';
 import React from 'react';
 import { Link } from 'react-router-dom';

-import { AddressSmall, Digits } from '@polkadot/react-components';
+import { AddressSmall } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';

 interface Props {
@ -23,7 +23,7 @@ function BlockHeader ({ value }: Props): React.ReactElement<Props> | null {
  return (
    <tr>
      <td className='number'>
-        <h2><Link to={`/explorer/query/${hashHex}`}><Digits value={formatNumber(value.number)} /></Link></h2>
+        <Link to={`/explorer/query/${hashHex}`}><span className='--digits'>#{formatNumber(value.number)}</span></Link>
      </td>
      <td className='all hash overflow'>{hashHex}</td>
      <td className='address'>
--- a/packages/page-explorer/src/BlockInfo/ByHash.tsx
+++ b/packages/page-explorer/src/BlockInfo/ByHash.tsx
@ -104,7 +104,7 @@ function BlockByHash ({ className = '', error, value }: Props): React.ReactEleme
  const header = useMemo<[React.ReactNode?, string?, number?][]>(
    () => getHeader
      ? [
-        [formatNumber(getHeader.number.unwrap()), 'start', 1],
+        [formatNumber(getHeader.number.unwrap()), 'start --digits', 1],
        [t('hash'), 'start'],
        [t('parent'), 'start'],
        [t('extrinsics'), 'start media--1300'],
--- a/packages/page-explorer/src/BlockInfo/Extrinsic.tsx
+++ b/packages/page-explorer/src/BlockInfo/Extrinsic.tsx
@ -186,15 +186,15 @@ export default React.memo(styled(ExtrinsicDisplay)`
  }

  .explorer--BlockByHash-nonce {
-    font-size: 0.75rem;
+    font-size: var(--font-size-small);
    margin-left: 2.25rem;
    margin-top: -0.5rem;
-    opacity: 0.6;
+    opacity: var(--opacity-light);
    text-align: left;
  }

  .explorer--BlockByHash-unsigned {
-    opacity: 0.6;
+    opacity: var(--opacity-light);
    font-weight: var(--font-weight-normal);
  }

--- a/packages/page-explorer/src/Forks.tsx
+++ b/packages/page-explorer/src/Forks.tsx
@ -423,7 +423,7 @@ export default React.memo(styled(Forks)`
        }

        .parent {
-          font-size: 0.75rem;
+          font-size: var(--font-size-small);
          line-height: 0.75rem;
          max-width: 4.5rem;
        }
--- a/packages/page-explorer/src/Latency/index.tsx
+++ b/packages/page-explorer/src/Latency/index.tsx
@ -87,8 +87,8 @@ function getPoints (details: Detail[], timeAvg: number): ChartInfo {
  };
 }

-function formatTime (time: number, divisor = 1000): string {
-  return `${(time / divisor).toFixed(3)}s`;
+function formatTime (time: number, divisor = 1000): React.ReactNode {
+  return <span className='--digits'>{`${(time / divisor).toFixed(3)}`}<span className='postfix'> s</span></span>;
 }

 function Latency ({ className }: Props): React.ReactElement<Props> {
@ -110,7 +110,7 @@ function Latency ({ className }: Props): React.ReactElement<Props> {
  );

  const isLoaded = details.length > 2;
-  const EMPTY_TIME = <span className='--tmp'>0.000s</span>;
+  const EMPTY_TIME = <span className='--tmp --digits'>0.000 s</span>;

  return (
    <div className={className}>
@ -195,4 +195,10 @@ export default React.memo(styled(Latency)`
  .container+.container {
    margin-top: 1rem;
  }
+
+  span.--digits {
+    .postfix {
+      font-size: var(--font-percent-tiny);
+    }
+  }
 `);
--- a/packages/page-referenda/src/Referenda/Referendum.tsx
+++ b/packages/page-referenda/src/Referenda/Referendum.tsx
@ -484,10 +484,9 @@ function Referendum (props: Props): React.ReactElement<Props> {
 export default React.memo(styled(Referendum)`
  .chartColumn {
    h1 {
-      font-size: 1.25rem;
      margin-bottom: 0;
      margin-top: 1rem;
-      text-align: center;
+      padding-left: 3rem;
    }
  }

--- a/packages/page-referenda/src/Referenda/Submit.tsx
+++ b/packages/page-referenda/src/Referenda/Submit.tsx
@ -350,7 +350,7 @@ export default React.memo(styled(Submit)`
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-normal);
      margin-top: 0.125rem;
-      opacity: 0.6;
+      opacity: var(--opacity-light);
    }
  }

--- a/packages/page-staking/src/Targets/Summary.tsx
+++ b/packages/page-staking/src/Targets/Summary.tsx
@ -6,6 +6,7 @@ import type { Balance } from '@polkadot/types/interfaces';
 import type { BN } from '@polkadot/util';

 import React, { useMemo } from 'react';
+import styled from 'styled-components';

 import { CardSummary, SummaryBox } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
@ -16,6 +17,7 @@ import { useTranslation } from '../translate';

 interface Props {
  avgStaked?: BN;
+  className?: string;
  lastEra?: BN;
  lowStaked?: BN;
  minNominated?: BN;
@ -48,7 +50,7 @@ function getProgressInfo (value?: BN, total?: BN): ProgressInfo {
  };
 }

-function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBond, stakedReturn, totalIssuance, totalStaked }: Props): React.ReactElement<Props> {
+function Summary ({ avgStaked, className, lastEra, lowStaked, minNominated, minNominatorBond, stakedReturn, totalIssuance, totalStaked }: Props): React.ReactElement<Props> {
  const { t } = useTranslation();
  const { api } = useApi();
  const lastReward = useCall<BN>(lastEra && api.query.staking.erasValidatorReward, [lastEra], OPT_REWARD);
@ -63,8 +65,10 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon
    [avgStaked, lowStaked]
  );

+  const percent = <span className='percent'>%</span>;
+
  return (
-    <SummaryBox>
+    <SummaryBox className={className}>
      <section className='media--800'>
        <CardSummary
          label={t<string>('total staked')}
@ -81,9 +85,9 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon
        <CardSummary label={t<string>('returns')}>
          {totalIssuance && (stakedReturn > 0)
            ? Number.isFinite(stakedReturn)
-              ? <>{stakedReturn.toFixed(1)}%</>
+              ? <>{stakedReturn.toFixed(1)}{percent}</>
              : '-.-%'
-            : <span className='--tmp'>0.0%</span>
+            : <span className='--tmp'>0.0{percent}</span>
          }
        </CardSummary>
      </section>
@ -146,4 +150,8 @@ function Summary ({ avgStaked, lastEra, lowStaked, minNominated, minNominatorBon
  );
 }

-export default React.memo(Summary);
+export default React.memo(styled(Summary)`
+  .percent {
+    font-size: var(--font-percent-tiny);
+  }
+`);
--- a/packages/page-staking/src/Validators/Summary.tsx
+++ b/packages/page-staking/src/Validators/Summary.tsx
@ -23,6 +23,8 @@ interface Props {
 function Summary ({ className = '', stakingOverview, targets: { counterForNominators, inflation: { idealStake, inflation, stakedFraction }, nominators, waitingIds } }: Props): React.ReactElement<Props> {
  const { t } = useTranslation();

+  const percent = <span className='percent'>%</span>;
+
  return (
    <SummaryBox className={className}>
      <section>
@ -68,7 +70,7 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina
            className='media--1400'
            label={t<string>('ideal staked')}
          >
-            <>{(idealStake * 100).toFixed(1)}%</>
+            <>{(idealStake * 100).toFixed(1)}{percent}</>
          </CardSummary>
        )}
        {(stakedFraction > 0) && (
@ -76,7 +78,7 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina
            className='media--1300'
            label={t<string>('staked')}
          >
-            <>{(stakedFraction * 100).toFixed(1)}%</>
+            <>{(stakedFraction * 100).toFixed(1)}{percent}</>
          </CardSummary>
        )}
        {(inflation > 0) && Number.isFinite(inflation) && (
@ -84,7 +86,7 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina
            className='media--1200'
            label={t<string>('inflation')}
          >
-            <>{inflation.toFixed(1)}%</>
+            <>{inflation.toFixed(1)}{percent}</>
          </CardSummary>
        )}
      </section>
@ -108,4 +110,8 @@ export default React.memo(styled(Summary)`
      margin-left: -1.5rem;
    }
  }
+
+  .percent {
+    font-size: var(--font-percent-tiny);
+  }
 `);
--- a/packages/page-staking/src/index.tsx
+++ b/packages/page-staking/src/index.tsx
@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0

 import type { DeriveStakingOverview } from '@polkadot/api-derive/types';
-import type { AppProps as Props, ThemeProps } from '@polkadot/react-components/types';
+import type { AppProps as Props } from '@polkadot/react-components/types';
 import type { ElectionStatus, ParaValidatorIndex, ValidatorId } from '@polkadot/types/interfaces';
 import type { BN } from '@polkadot/util';

@ -220,7 +220,7 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
  );
 }

-export default React.memo(styled(StakingApp)(({ theme }: ThemeProps) => `
+export default React.memo(styled(StakingApp)`
  .staking--Chart {
    margin-top: 1.5rem;

@ -248,16 +248,6 @@ export default React.memo(styled(StakingApp)(({ theme }: ThemeProps) => `
  .ui--Expander.stakeOver {
    .ui--Expander-summary {
      color: var(--color-error);
-
-    ${theme.theme === 'dark'
-    ? `font-weight: bold;
-      .ui--FormatBalance-value {
-
-        > .ui--FormatBalance-postfix {
-          opacity: 1;
-        }
-      }`
-    : ''};
    }
  }

@ -269,11 +259,11 @@ export default React.memo(styled(StakingApp)(({ theme }: ThemeProps) => `
    .greyAnim-${n} {
      animation: greyAnim${n} 2s;
    }
+
    @keyframes greyAnim${n} {
      0% { background: #a6a6a6; }
      50% { background: darkorange; }
      100% { background: #a6a6a6; }
    }
-  `).join('')
-}
-`));
+  `).join('')}
+`);
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@ -250,7 +250,7 @@ export default React.memo(styled(AccountName)`

      &.isAddress {
        font: var(--font-mono);
-        opacity: 0.6;
+        opacity: var(--opacity-light);
        text-transform: none;
      }

@ -260,8 +260,8 @@ export default React.memo(styled(AccountName)`
      }

      .sub {
-        font-size: 0.75rem;
-        opacity: 0.75;
+        font-size: var(--font-size-tiny);
+        opacity: var(--opacity-light);
      }
    }
  }
--- a/packages/react-components/src/AddressMini.tsx
+++ b/packages/react-components/src/AddressMini.tsx
@ -151,7 +151,7 @@ export default React.memo(styled(AddressMini)`
    .ui--Balance,
    .ui--Bonded,
    .ui--LockedVote {
-      font-size: 0.75rem;
+      font-size: var(--font-size-tiny);
      margin-left: 2.25rem;
      margin-top: -0.5rem;
      text-align: left;
@ -179,7 +179,7 @@ export default React.memo(styled(AddressMini)`
  }

  .ui--AddressMini-summary {
-    font-size: 0.75rem;
+    font-size: var(--font-size-small);
    line-height: 1.2;
    margin-left: 2.25rem;
    margin-top: -0.2rem;
--- a/packages/react-components/src/AddressRow.tsx
+++ b/packages/react-components/src/AddressRow.tsx
@ -107,6 +107,6 @@ export default React.memo(styled(AddressRow)`
  }

  .ui--AddressRow-placeholder {
-    opacity: 0.6;
+    opacity: var(--opacity-light);
  }
 `);
--- a/packages/react-components/src/AddressSmall.tsx
+++ b/packages/react-components/src/AddressSmall.tsx
@ -80,8 +80,11 @@ export default React.memo(styled(AddressSmall)`
    position: relative;
    vertical-align: middle;

+    .parentName, .shortAddress {
+      font-size: var(--font-size-tiny);
+    }
+
    .parentName {
-      font-size: 0.75rem;
      left: 0;
      position: absolute;
      top: -0.80rem;
@ -90,7 +93,6 @@ export default React.memo(styled(AddressSmall)`
    .shortAddress {
      bottom: -0.95rem;
      color: #8B8B8B;
-      font-size: 0.75rem;
      left: 0;
      position: absolute;
    }
--- a/packages/react-components/src/AddressToggle.tsx
+++ b/packages/react-components/src/AddressToggle.tsx
@ -71,7 +71,7 @@ export default React.memo(styled(AddressToggle)`

  .ui--AddressToggle-address {
    filter: grayscale(100%);
-    opacity: 0.6;
+    opacity: var(--opacity-light);
  }

  &:hover {
--- a/packages/react-components/src/AvatarItem.tsx
+++ b/packages/react-components/src/AvatarItem.tsx
@ -49,12 +49,12 @@ export default React.memo(styled(AvatarItem)`
  .ui--AvatarItem-details {
    .ui--AvatarItem-title {
      font-weight: 600;
-      font-size: 1rem;
+      font-size: var(--font-size-base);
    }

    .ui--AvatarItem-subtitle {
      font-weight: var(--font-weight-normal);
-      font-size: 1rem;
+      font-size: var(--font-size-base);
    }
  }

--- a/packages/react-components/src/Badge.tsx
+++ b/packages/react-components/src/Badge.tsx
@ -82,7 +82,7 @@ export default React.memo(styled(Badge)`
  box-sizing: border-box;
  color: #eeedec;
  display: inline-block;
-  font-size: 12px;
+  font-size: var(--font-size-tiny);
  height: 20px;
  line-height: 20px;
  margin-right: 0.43rem;
--- a/packages/react-components/src/CardSummary.tsx
+++ b/packages/react-components/src/CardSummary.tsx
@ -123,12 +123,16 @@ export default React.memo(styled(CardSummary)`
  }

  > .ui--Labelled {
-    font-size: 1.75rem;
-    font-weight: var(--font-weight-light);
+    font-size: var(--font-size-h1);
+    font-weight: var(--font-weight-header);
    position: relative;
    line-height: 1;
    text-align: right;

+    > .ui--Labelled-content {
+      color: var(--color-header);
+    }
+
    > * {
      margin: 0.25rem 0;

@ -142,7 +146,7 @@ export default React.memo(styled(CardSummary)`
    }

    .isSecondary {
-      font-size: 1rem;
+      font-size: var(--font-size-base);
      font-weight: var(--font-weight-normal);

      .timer {
--- a/packages/react-components/src/Digits.tsx
+++ b/packages/react-components/src/Digits.tsx
@ -1,46 +0,0 @@
-// Copyright 2017-2023 @polkadot/apps authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import React from 'react';
-import styled from 'styled-components';
-
-interface Props {
-  className?: string;
-  value: string;
-}
-
-function Digits ({ className = '', value }: Props): React.ReactElement<Props> {
-  return (
-    <div className={className}>
-      {value.split(',').map((parts, index) => (
-        <div
-          className='group'
-          key={index}
-        >
-          {index !== 0 ? ',' : ''}
-          {parts.split('').map((d, index) => (
-            <div
-              className='digit'
-              key={index}
-            >{d}</div>
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export default React.memo(styled(Digits)`
-  display: inline-block;
-  white-space: nowrap;
-
-  .group {
-    display: inline-block;
-
-    .digit {
-      display: inline-block;
-      text-align: center;
-      width: 1ch;
-    }
-  }
-`);
--- a/packages/react-components/src/Dropdown.tsx
+++ b/packages/react-components/src/Dropdown.tsx
@ -145,7 +145,7 @@ const Dropdown = React.memo(styled(BaseDropdown)`
      width: 32px;

      &.opaque {
-        opacity: 0.6;
+        opacity: var(--opacity-light);
      }
    }

--- a/packages/react-components/src/Expander.tsx
+++ b/packages/react-components/src/Expander.tsx
@ -192,7 +192,7 @@ export default React.memo(styled(Expander)`

      .ui--Expander-summary-header-sub {
        font-size: var(--font-size-small);
-        opacity: 0.6;
+        opacity: var(--opacity-light);
      }
    }

--- a/packages/react-components/src/Flag.tsx
+++ b/packages/react-components/src/Flag.tsx
@ -28,7 +28,7 @@ function Flag ({ className = '', color, label }: FlagProps): React.ReactElement<
 export default React.memo(styled(Flag)`
  border-radius: 0 0.25rem 0.25rem 0;
  padding: 0.5833em 1.25em 0.5833em 1.5em;
-  font-size: 0.78571429rem;
+  font-size: var(--font-size-tiny);
  line-height: 1;
  color: #fff !important;

--- a/packages/react-components/src/InputAddress/KeyPair.tsx
+++ b/packages/react-components/src/InputAddress/KeyPair.tsx
@ -51,7 +51,7 @@ export default React.memo(styled(KeyPair)`
    font: var(--font-mono);
    font-size: var(--font-size-small);
    margin-left: 1rem;
-    opacity: 0.6;
+    opacity: var(--opacity-light);
    overflow: hidden;
    text-align: right;
  }
--- a/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx
+++ b/packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx
@ -63,7 +63,7 @@ export default React.memo(styled(LinkedWrapper)`
  .ui--DropdownLinked-Item-text {
    flex: 1;
    font-size: var(--font-size-small);
-    opacity: 0.6;
+    opacity: var(--opacity-light);
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
--- a/packages/react-components/src/InputFile.tsx
+++ b/packages/react-components/src/InputFile.tsx
@ -138,7 +138,7 @@ export default React.memo(styled(InputFile)`
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 0.28571429rem;
-  font-size: 1rem;
+  font-size: var(--font-size-base);
  margin: 0.25rem 0;
  padding: 0.67857143em 1em;
  width: 100% !important;
--- a/packages/react-components/src/InputTags.tsx
+++ b/packages/react-components/src/InputTags.tsx
@ -89,7 +89,7 @@ export default React.memo(styled(InputTags)`
    box-shadow: none;
    color: #fff;
    display: inline-block;
-    font-size: 0.857rem;
+    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
    line-height: 1.143rem;
    margin: 0.125rem 0.125rem;
--- a/packages/react-components/src/Inset.tsx
+++ b/packages/react-components/src/Inset.tsx
@ -45,7 +45,7 @@ function Inset ({ children, className = '', header, href, isCollapsible, isError
          className='header'
          onClick={toggleCollapsed}
        >
-          <h3>{header}</h3>
+          <h2>{header}</h2>
          <Icon
            className={isCollapsed ? 'collapsed' : ''}
            icon='angle-up'
--- a/packages/react-components/src/Labelled.tsx
+++ b/packages/react-components/src/Labelled.tsx
@ -110,7 +110,7 @@ export default React.memo(styled(Labelled)`
      .labelExtra {
        color: var(--color-label);
        font-size: var(--font-size-label);
-        font-weight: var(--font-weight-normal);
+        font-weight: var(--font-weight-label);
        right: 1.75rem;
        text-align: right;
        text-transform: var(--text-transform-label);
--- a/packages/react-components/src/Menu/Header.tsx
+++ b/packages/react-components/src/Menu/Header.tsx
@ -16,8 +16,7 @@ function Header ({ children, className }: HeaderProps): React.ReactElement {

 export default React.memo(styled(Header)`
  color: var(--color-label);
-  font-size: var(--font-size-label);
+  font-size: var(--font-size-tiny);
  line-height: 0.857rem;
  margin-bottom: 0.3rem;
-  text-transform: var(--text-transform-label);
 `);
--- a/packages/react-components/src/ParentAccount.tsx
+++ b/packages/react-components/src/ParentAccount.tsx
@ -34,11 +34,11 @@ function ParentAccount ({ address, className }: ParentAccountProps): React.React
 export default React.memo(styled(ParentAccount)`
  align-items: center;
  color: #8B8B8B;
-  font-size: 0.75rem;
+  var(--font-size-small);
  display: flex;

  & .parent-icon {
-    font-size: 0.625rem;
+    font-size: var(--font-size-percent-small);
    margin-right: 0.3rem;
    margin-left: 0.15rem;
  }
--- a/packages/react-components/src/PasswordStrength.tsx
+++ b/packages/react-components/src/PasswordStrength.tsx
@ -55,7 +55,7 @@ export default React.memo(styled(PasswordStrength)`
  align-items: center;
  margin-top: 0.5rem;
  margin-left: 2rem;
-  font-size: 1rem;
+  font-size: var(--font-size-base);
  text-transform: uppercase;
  color: var(--color-label);

--- a/packages/react-components/src/Progress.tsx
+++ b/packages/react-components/src/Progress.tsx
@ -73,12 +73,14 @@ function Progress ({ className = '', isBlurred, isDisabled, total, value }: Prop
  );
 }

+const SIZE = '3.5rem';
+
 export default React.memo(styled(Progress)`
  border-radius: 100%;
  clip-path: circle(50%);
-  height: 4rem;
+  height: ${SIZE};
  position: relative;
-  width: 4rem;
+  width: ${SIZE};

  &.isDisabled {
    filter: grayscale(100%);
--- a/packages/react-components/src/Row.tsx
+++ b/packages/react-components/src/Row.tsx
@ -14,7 +14,7 @@ export const styles = `
  text-align: left;

  &.isDisabled {
-    opacity: 0.6;
+    opacity: var(--opacity-light);

    .ui--IdentityIcon  {
      filter: grayscale(100%);
@ -33,7 +33,7 @@ export const styles = `
    .ui--Row-accountId,
    .ui--Row-icon {
      filter: grayscale(100);
-      opacity: 0.6;
+      opacity: var(--opacity-light);
    }
  }

@ -130,7 +130,7 @@ export const styles = `
        border-radius: .5em;
        border-style: dashed;
        color: grey;
-        font-size: x-small;
+        font-size: var(--font-size-tiny);
        padding: .1em 0.3em 0.1em 0.3em;
        margin-top: .2em;
      }
--- a/packages/react-components/src/Spinner.tsx
+++ b/packages/react-components/src/Spinner.tsx
@ -63,7 +63,7 @@ export default React.memo(styled(Spinner)`
  .text {
    color: inherit !important;
    margin: 0.25rem auto 1.5rem auto;
-    opacity: 0.6;
+    opacity: var(--opacity-light);

    div+div {
      margin-top: 0.25rem;
--- a/packages/react-components/src/Table/Column/Id.tsx
+++ b/packages/react-components/src/Table/Column/Id.tsx
@ -11,14 +11,14 @@ import { formatNumber } from '@polkadot/util';
 function Id ({ className = '', value }: Props): React.ReactElement<Props> {
  return (
    <td className={`ui--Table-Column-Id ${className}`}>
-      <h1>{formatNumber(value)}</h1>
+      <h2 className='--digits'>{formatNumber(value)}</h2>
    </td>
  );
 }

 // We want 5.5ch (which should be ok-ish for 5 decimals, i.e. 99,999), however
-// we wrap the display in an h1 with text at 1.75rem, so multiply it out
-const WIDTH = `${(5.5 * 1.75).toFixed(3)}ch`;
+// we wrap the display in an h2 with max size text at ~1.3rem, so multiply it out
+const WIDTH = `${(5.5 * 1.3).toFixed(3)}ch`;

 export default React.memo(styled(Id)`
  && {
--- a/packages/react-components/src/Table/Head.tsx
+++ b/packages/react-components/src/Table/Head.tsx
@ -60,17 +60,15 @@ export default React.memo(styled(Head)`
    vertical-align: middle;
    white-space: nowrap;

-    h1, h2 {
-      font-size: 1.75rem;
-    }
-
    h1 {
      display: table-cell;
      vertical-align: middle;

      .sub {
        display: inline-block;
-        font-size: 1rem;
+        font-size: var(--font-size-base);
+        font-weight: var(--font-weight-normal);
+        opacity: var(--opacity-light);
        padding-left: 1.5rem;
        text-overflow: ellipsis;
        vertical-align: middle;
--- a/packages/react-components/src/Table/Table.tsx
+++ b/packages/react-components/src/Table/Table.tsx
@ -199,7 +199,7 @@ export default React.memo(styled(Table)`
      }

      div.empty {
-        opacity: 0.6;
+        opacity: var(--opacity-light);
        padding: 0.25rem;
      }

@ -309,6 +309,7 @@ export default React.memo(styled(Table)`
      }

      &.number {
+        font-variant-numeric: tabular-nums;
        text-align: right;
      }

--- a/packages/react-components/src/Tabs/CurrentSection.tsx
+++ b/packages/react-components/src/Tabs/CurrentSection.tsx
@ -24,8 +24,8 @@ function CurrentSection ({ className = '', icon, text }: Props): React.ReactElem

 export default React.memo(styled(CurrentSection)`
  margin: 0 2.5rem 0 1.5rem;
-  font-weight: 400;
-  font-size: 1rem;
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-base);
  line-height: 1.57rem;
  min-width: max-content;
  height: 100%;
--- a/packages/react-components/src/Tabs/Tab.tsx
+++ b/packages/react-components/src/Tabs/Tab.tsx
@ -51,7 +51,7 @@ export default React.memo(styled(Tab)`
  align-items: center;
  display: flex;
  color: #8B8B8B;
-  font-size: var(--font-size-medium);
+  font-size: var(--font-size-small);
  height: 100%;
  padding: 0 1.5rem;
  position: relative;
@ -77,7 +77,7 @@ export default React.memo(styled(Tab)`

  &.tabLinkActive {
    color: var(--color-text) !important;
-    font-weight: 400;
+    font-weight: var(--font-weight-normal);

    &:hover {
      cursor: default;
--- a/packages/react-components/src/Tag.tsx
+++ b/packages/react-components/src/Tag.tsx
@ -45,7 +45,7 @@ export default React.memo(styled(Tag)`
  border-radius: 0.25rem;
  color: #fff;
  display: inline-block;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-tiny);
  font-weight: var(--font-weight-normal);
  line-height: 1rem;
  margin: 0 0.125rem;
--- a/packages/react-components/src/Tooltip.tsx
+++ b/packages/react-components/src/Tooltip.tsx
@ -101,7 +101,7 @@ export default React.memo(styled(Tooltip)`
  .faded {
    margin-top: 0;
    opacity: 0.75 !important;
-    font-size: 0.85em !important;
+    font-size: var(--font-size-tiny) !important;

    .faded {
      font-size: 1em !important;
--- a/packages/react-components/src/index.tsx
+++ b/packages/react-components/src/index.tsx
@ -30,7 +30,6 @@ export { default as Columar } from './Columar';
 export { default as ConvictionDropdown } from './ConvictionDropdown';
 export { default as CopyButton } from './CopyButton';
 export { default as CryptoType } from './CryptoType';
-export { default as Digits } from './Digits';
 export { default as Dropdown } from './Dropdown';
 export { default as EditButton } from './EditButton';
 export { default as Editor } from './Editor';
--- a/packages/react-components/src/styles/components.ts
+++ b/packages/react-components/src/styles/components.ts
@ -46,7 +46,7 @@ export default (_theme: ThemeDef): string => `

  button.ui--Button {
    font: var(--font-sans);
-    font-size: var(--font-size-medium);
+    font-size: var(--font-size-small);
  }

  .editable {
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@ -8,7 +8,6 @@ import { createGlobalStyle } from 'styled-components';
 import cssComponents from './components';
 import cssForm from './form';
 import cssMedia from './media';
-import cssRx from './rx';
 import cssSemantic from './semantic';
 import cssTheme from './theme';

@ -362,6 +361,7 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
    background: var(--bg-page);
    color: var(--color-text);
    font: var(--font-sans);
+    font-weight: var(--font-weight-normal);
    height: 100%;
  }

@ -387,7 +387,7 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
    &.error,
    &.warning {
      border-left-width: 0.25rem;
-      font-size: var(--font-size-medium);
+      font-size: var(--font-size-small);
      line-height: 1.5;
      margin-left: 2.25rem;
      padding: 0.75rem 1rem;
@ -487,24 +487,15 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
  }

  h1, h2, h3, h4, h5 {
-    color: var(--color-summary);
+    color: var(--color-header);
    font: var(--font-sans);
-    font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-header);
    margin-bottom: 0.25rem;
  }

-  h5 {
-    color: var(--color-label);
-    font-style: normal;
-    font-weight: var(--font-weight-normal);
-    font-size: var(--font-size-label);
-    line-height: 1rem;
-    text-transform: var(--text-transform-label);
-    margin-bottom: 0.25rem;
-  }

  h1 {
-    font-size: 1.75rem;
+    font-size: var(--font-size-h1);
    text-transform: lowercase;

    em {
@ -514,7 +505,11 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
  }

  h2 {
-    font-size: 1.71428571rem;
+    font-size: var(--font-size-h2);
+  }
+
+  h3 {
+    font-size: var(--font-size-h3);
  }

  header {
@ -532,16 +527,25 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr

  label {
    box-sizing: border-box;
-    color: var(--color-label);
    display: block;
    font: var(--font-sans);
+  }
+
+  // we treat h5 and label as equivalents
+  label, h5 {
+    color: var(--color-label);
    font-size: var(--font-size-label);
-    font-weight: var(--font-weight-normal);
+    font-style: normal;
+    font-weight: var(--font-weight-label);
    line-height: 1rem;
    text-transform: var(--text-transform-label);
    vertical-align: middle;
  }

+  button {
+    font-weight: var(--font-weight-normal);
+  }
+
  main {
    > section {
      margin-bottom: 2em;
@ -553,6 +557,5 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
  ${cssTheme}
  ${cssForm}
  ${cssMedia}
-  ${cssRx}
  ${cssComponents(theme)}
 `);
--- a/packages/react-components/src/styles/rx.ts
+++ b/packages/react-components/src/styles/rx.ts
@ -1,9 +0,0 @@
-// Copyright 2017-2023 @polkadot/react-components authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-export default `
-  .rx--updated {
-    background: #ffffe0 !important;
-    transition: all 0.7s ease-out;
-  }
-`;
--- a/packages/react-components/src/styles/semantic.ts
+++ b/packages/react-components/src/styles/semantic.ts
@ -27,7 +27,7 @@ export default (_theme: ThemeDef): string => `
    border-color: var(--border-input);
    color: var(--color-text);
    font: var(--font-sans);
-    font-size: 1rem;
+    font-size: var(--font-size-base);

    &:focus {
      background: var(--bg-input);
--- a/packages/react-params/src/Holder.tsx
+++ b/packages/react-params/src/Holder.tsx
@ -45,8 +45,6 @@ export default React.memo(styled(Holder)`
  .ui--Param-composite .ui--row .ui--InputAddressSimple {
    & > .ui--Labelled > label {
      text-transform: none !important;
-      font: var(--font-mono);
-      font-size: var(--font-size-label);
    }
  }

@ -69,7 +67,7 @@ export default React.memo(styled(Holder)`

  .ui--Param-text {
    display: inline-block;
-    font-size: 1rem;
+    font-size: var(--font-size-base);
    line-height: 1.714rem;
    overflow: hidden;
    text-overflow: ellipsis;
--- a/packages/react-query/src/BestFinalized.tsx
+++ b/packages/react-query/src/BestFinalized.tsx
@ -5,7 +5,6 @@ import type { BlockNumber } from '@polkadot/types/interfaces';

 import React from 'react';

-import { Digits } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';

@ -22,7 +21,7 @@ function BestFinalized ({ children, className = '', label }: Props): React.React
  return (
    <div className={`${className} ${bestNumberFinalized ? '' : '--tmp'}`}>
      {label || ''}{
-        <Digits value={formatNumber(bestNumberFinalized || 1234)} />
+        <span className='--digits'>{formatNumber(bestNumberFinalized || 1234)}</span>
      }{children}
    </div>
  );
--- a/packages/react-query/src/BestNumber.tsx
+++ b/packages/react-query/src/BestNumber.tsx
@ -5,7 +5,6 @@ import type { BlockNumber } from '@polkadot/types/interfaces';

 import React from 'react';

-import { Digits } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';

@ -24,7 +23,7 @@ function BestNumber ({ children, className = '', isFinalized, label, withPound }
  return (
    <div className={`${className} ${bestNumber ? '' : '--tmp'}`}>
      {label || ''}{withPound && '#'}{
-        <Digits value={formatNumber(bestNumber || 1234)} />
+        <span className='--digits'>{formatNumber(bestNumber || 1234)}</span>
      }{children}
    </div>
  );
--- a/packages/react-query/src/BlockToTime.tsx
+++ b/packages/react-query/src/BlockToTime.tsx
@ -47,7 +47,6 @@ export default React.memo(styled(BlockToTime)`
  }

  span.timeUnits {
-    // this is not var(--font-size-small) since we want em
-    font-size: 0.875em;
+    font-size: var(--font-percent-tiny);
  }
 `);
--- a/packages/react-query/src/Elapsed.tsx
+++ b/packages/react-query/src/Elapsed.tsx
@ -34,16 +34,10 @@ function tick (): void {

 function formatValue (value: number, type = 's', withDecimal = false): React.ReactNode {
  const [pre, post] = value.toFixed(1).split('.');
-  const before = pre.split('').map((d, index) => (
-    <div
-      className='digit'
-      key={index}
-    >{d}</div>
-  ));

  return withDecimal
-    ? <>{before}.<div className='digit'>{post}</div> {type}</>
-    : <>{before} {type}</>;
+    ? <>{pre}.{post} <span className='timeUnit'>{type}</span></>
+    : <>{pre} <span className='timeUnit'>{type}</span></>;
 }

 function getDisplayValue (now = 0, value: BN | Date | number = 0): React.ReactNode {
@ -82,15 +76,16 @@ function Elapsed ({ children, className = '', value }: Props): React.ReactElemen
  }, []);

  return (
-    <div className={`ui--Elapsed ${className}`}>
+    <div className={`ui--Elapsed ${className} --digits`}>
      {getDisplayValue(now, value)}{children}
    </div>
  );
 }

 export default React.memo(styled(Elapsed)`
-  .digit {
-    display: inline-block;
-    width: 1ch;
+  white-space: nowrap;
+
+  .timeUnit {
+    font-size: var(--font-percent-tiny);
  }
 `);
--- a/packages/react-query/src/FormatBalance.tsx
+++ b/packages/react-query/src/FormatBalance.tsx
@ -88,7 +88,7 @@ function FormatBalance ({ children, className = '', format, formatIndex, isShort
    <div className={`ui--FormatBalance ${className}`}>
      {label ? <>{label}&nbsp;</> : ''}
      <span
-        className='ui--FormatBalance-value'
+        className='ui--FormatBalance-value --digits'
        data-testid='balance-summary'
      >{
          valueFormatted
@ -122,7 +122,7 @@ export default React.memo(styled(FormatBalance)`
  }

  .ui--FormatBalance-unit {
-    font-size: 0.825em;
+    font-size: var(--font-percent-tiny);
    text-transform: uppercase;
  }

@ -130,8 +130,7 @@ export default React.memo(styled(FormatBalance)`
    text-align: right;

    > .ui--FormatBalance-postfix {
-      font-weight: var(--font-weight-light);
-      opacity: 0.75;
+      font-weight: lighter;
      vertical-align: baseline;
    }
  }