Typography

Clawscale sets text in Inter and code in JetBrains Mono, on a 13px base size for dense screens.

Usage#

import { Code, H1, H2, H3, H4, H5, H6, Pre, Text } from "@clawscale/react";

Fonts#

@clawscale/react/fonts.css loads Inter and JetBrains Mono as variable fonts, and IBM Plex Sans and IBM Plex Mono for the Ledger theme. Browsers download only the fonts a page uses. Import it once, next to styles.css.

import "@clawscale/react/fonts.css";

Without it, text falls back to the system fonts in each stack. To use your own fonts, set --cs-font-sans and --cs-font-mono.

Type scale#

Eight sizes, from xs to 4xl. Body text uses md.

Token	Value	Preview
`--cs-font-size-xs`	11px	Rows 12,480
`--cs-font-size-sm`	12px	Rows 12,480
`--cs-font-size-md`	13px	Rows 12,480
`--cs-font-size-lg`	15px	Rows 12,480
`--cs-font-size-xl`	18px	Rows 12,480
`--cs-font-size-2xl`	22px	Rows 12,480
`--cs-font-size-3xl`	28px	Rows 12,480
`--cs-font-size-4xl`	36px	Rows 12,480

Use the tokens in your own CSS. Weights and line heights are tokens too, listed in Tokens.

.panel-title {
  font-size: var(--cs-font-size-lg);
  font-weight: var(--cs-font-weight-semibold);
  line-height: var(--cs-line-height-tight);
}

Headings#

H1 to H6 render headings with Clawscale sizes and weights.

Fleet overview

Regions

us-east-1

Ingest pipelines

orders-daily

Last 24 hours

core/typography/headings.tsx

import { H1, H2, H3, H4, H5, H6 } from "@clawscale/react";

export default function TypographyHeadings() {
  return (
    <div>
      <H1>Fleet overview</H1>
      <H2>Regions</H2>
      <H3>us-east-1</H3>
      <H4>Ingest pipelines</H4>
      <H5>orders-daily</H5>
      <H6>Last 24 hours</H6>
    </div>
  );
}

Running text#

Wrap long-form HTML in Classes.RUNNING_TEXT. It styles nested paragraphs, lists, code and block quotes, so plain markup needs no components.

Raw events stay in events_raw for 30 days before the nightly rollup.

Hourly rollups keep 13 months of history.
Deleted tenants are purged within 72 hours.

Restores from cold storage take up to 4 hours.

core/typography/running-text.tsx

import { Classes } from "@clawscale/react";

export default function TypographyRunningText() {
  return (
    <div className={Classes.RUNNING_TEXT}>
      <p>
        Raw events stay in <code>events_raw</code> for 30 days before the nightly rollup.
      </p>
      <ul>
        <li>Hourly rollups keep 13 months of history.</li>
        <li>Deleted tenants are purged within 72 hours.</li>
      </ul>
      <blockquote>Restores from cold storage take up to 4 hours.</blockquote>
    </div>
  );
}

Tabular numbers#

Inter draws digits with different widths by default. Add the cs-numeric class (ClawscaleClasses.NUMERIC) to give every digit the same width, so numbers line up in columns. The Table component, date pickers and slider labels already use tabular numbers.

Default

1,111.11 ms

8,808.80 ms

4,141.71 ms

9,090.09 ms

cs-numeric

1,111.11 ms

8,808.80 ms

4,141.71 ms

9,090.09 ms

core/typography/numeric.tsx

import { Classes, ClawscaleClasses } from "@clawscale/react";

const latencies = ["1,111.11", "8,808.80", "4,141.71", "9,090.09"];

export default function TypographyNumeric() {
  return (
    <div style={{ display: "flex", gap: 48, textAlign: "right" }}>
      <div>
        <div className={Classes.TEXT_MUTED}>Default</div>
        {latencies.map((value) => (
          <div key={value}>{value} ms</div>
        ))}
      </div>
      <div className={ClawscaleClasses.NUMERIC}>
        <div className={Classes.TEXT_MUTED}>cs-numeric</div>
        {latencies.map((value) => (
          <div key={value}>{value} ms</div>
        ))}
      </div>
    </div>
  );
}

Code#

Code renders inline code. Pre renders a preformatted block. Both use --cs-font-mono.

Raise max_workers to drain the queue faster.

pipeline: orders-daily
schedule: "0 2 * * *"
max_workers: 12

core/typography/code.tsx

import { Code, Pre } from "@clawscale/react";

export default function TypographyCode() {
  return (
    <>
      <p>
        Raise <Code>max_workers</Code> to drain the queue faster.
      </p>
      <Pre>{`pipeline: orders-daily
schedule: "0 2 * * *"
max_workers: 12`}</Pre>
    </>
  );
}

Text#

Text with ellipsize cuts overflowing text to one line and ends it with an ellipsis. When the text overflows, it also sets title to the full text. Text lists its props.

s3://analytics-prod/exports/orders/2026/09/27/part-00017-of-00064.snappy.parquet

core/typography/ellipsize.tsx

import { Text } from "@clawscale/react";

const path = "s3://analytics-prod/exports/orders/2026/09/27/part-00017-of-00064.snappy.parquet";

export default function TypographyEllipsize() {
  return (
    <div style={{ width: 280 }}>
      <Text ellipsize>{path}</Text>
    </div>
  );
}