Usage

Typography is not a component you import: type is written as Tailwind utilities and spark classnames on semantic HTML elements. Two spark text color classnames ship with the spark-ui styles:

• text-gray is the primary text color (--neutral-a12).
• text-gray-light is the secondary, muted text color (--neutral-a11).

function MeterSection() {
  return (
    <section>
      <h3 className="text-base font-bold text-gray">Meter readings</h3>
      <p className="text-sm text-gray-light">Last submitted on 2 July 2026</p>
    </section>
  )
}

These are the same classnames the end-customer portal writes in its blocks, so anything built with them sits visually next to the portal's own blocks. All text-* sizes are multiplied by the theme's [data-scaling] knob, so type follows the portal's zoom setting; a hardcoded pixel size opts out of that.

Pick heading elements for document structure, not for looks: the size comes from the classes, so a visually small heading can still be the correct level.

For a view title with back navigation and actions, use Page Header instead of hand-rolling the h1 row.

Examples

h1

The main title of a page or drawer. One per view.

h2

Larger group headings: chart headers, month labels.

h3

The near-universal block header in the portal.

h4

Sub-grouping inside a block, for example a labelled value cluster.

p

text-sm text-gray is the workhorse body size; use text-base text-gray for primary content rows. Add leading-5 when a row pairs with a value column, and truncate for single-line rows that can overflow.

blockquote

Quoted or excerpted text, for example a note from support.

table

Header cells repeat the h3 recipe; numeric columns are right-aligned with tabular-nums so digits line up.

list

Lists inside body copy use marker utilities plus the body text recipe.

Inline code

Technical identifiers inside a sentence. text-[0.85em] sizes the code relative to the surrounding text instead of a fixed step.

Lead

The intro line under a page title.

Large

Standalone emphasized text, one step above body.

Small

Helper text and footnotes below inputs, charts, and value rows.

Muted

Secondary lines next to primary content: contact details, timestamps, tooltip labels. Muting is done with text-gray-light, never with opacity-*.

Values

Numbers that update or align in columns always get tabular-nums, so digits keep a fixed width. Large metrics render the unit as a separate text-sm font-bold span; value columns are right-aligned with text-right.

Error

Validation and failure messages use text-error; text-error-light is the softer variant for secondary error lines.

API Reference

The type scale, by element and role.

text-gray, text-gray-light, text-error, and border-gray are spark-ui utilities, not Tailwind's built-in palettes. If they have no effect, the app is missing the @epilot/spark-ui/styles import.

Weights in use are font-bold (headings, values), font-semibold, font-medium, and font-normal. Sizes above text-3xl are not part of the scale.

Accessibility

• Pick heading levels for document structure, not size: one h1 per view, no skipped levels. A visually small heading can still be an h2.
• Don't put meaning in color alone. A consumption delta in text-success-light also needs the direction in the text ("12% less than May"), and an error message needs wording that says it failed, not just the red.
• tabular-nums only changes glyph widths; screen readers read the number unchanged.
• Muted text (text-gray-light, --neutral-a11) keeps sufficient contrast on both light and dark appearances; don't de-emphasize text with opacity-*, which can drop below contrast minimums.