Typography

Utility components that codify the Omni mono-uppercase system—display headlines, eyebrows, body copy, and metric styling with a consistent glass-era tone.

Tone & hierarchy

Dashboard hero
Combine eyebrows, display headings, and body copy to mirror the cloud console landing view.
STATUS

Control Plane Deployment Overview

Edge fleet, workload health, and compliance snapshots in one uppercase viewport.

Latency and error rates mirror the alerting thresholds defined in the platform guardrails. Use the label and caption variants to annotate aux metrics or timestamps.

Metrics deck
Mix metric, mono, caption, and label components for dense telemetry cards.
Requests
87.2k
+12.4% vs. previous week
Latency (P95)
162 ms
+28 ms variance
Error rate
0.14%
24 incidents resolved
Feature flag

Edge cache rewrite

Rollout is limited to 35% of requests while regional soak tests complete.

Installation

pnpm dlx shadcn@latest add @omni/typography

Usage

import {
  TypographyDisplay,
  TypographyEyebrow,
  TypographySubtitle,
  TypographyBody,
} from "@/components/ui/typography"

export function Hero() {
  return (
    <div className="space-y-3">
      <TypographyEyebrow>STATUS</TypographyEyebrow>
      <TypographyDisplay>Omni Cloud Control Plane</TypographyDisplay>
      <TypographySubtitle>
        Fleet telemetry and incident response dashboard.
      </TypographySubtitle>
      <TypographyBody>
        Stay ahead of SLO drift with live metrics and automated guardrails.
      </TypographyBody>
    </div>
  )
}