Skip to content
NockerlDesignv2.0.0

Stat / metric card

In review
Live · web

Anatomy: number + label, a trend delta, a sparkline, a leading icon

Active sessions
42
Tokens today
1.2M+12%vs last wk
Avg latency
640ms−8%vs last wk
Cost · 7d
$184

Trend semantics: up isn’t always good (cost / latency flip the color, not the glyph)

Sessions
42+6vs last wk
Spend · 7d
$184+14%vs last wk
p95 latency
1.4s−21%vs last wk

Icon-plate tint (task 2740, opt-in): default stays the neutral D6 plate; tint colors the glyph + plate

Neutral · default
42
Accent tint
1.2M
Healthy
99.9%
Errors · 24h
7

Experimental (task 2763): subtle theme-following surface gradient; opt-in, default stays the flat surface

Flat · default
42
Gradient
1.2M
Gradient + tint
99.9%

Featured · compact · loading · empty

Tokens · all time
1.2M+12%vs last wk
Tools run
318+9%vs last wk
Errors · 24h
n/a

Dashboard cluster: equal-height tiles; the first is clickable (tab / click it)

Number is a mono figure, label muted, delta is warm status + a glyph (never color alone), the featured fill uses on-accent, sparkline is brand cyan, all var(--token). Tiles opened 0 · count-up honors reduced-motion. The island is live.

Code

Section titled “Code”
// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform. Spec + live demo,
// not yet exported from @dizyx/nockerl-react; promotion is tracked.)
// The number is a mono figure; the label is muted; a delta is a WARM status color
// + a direction glyph (never color alone). Featured fills with cyan. All tokens.


export function DashboardCluster() {
  return (
    <div className="stat-grid">
      <StatCard label="Tokens" value={formatCount(1_240_000)} icon={<TokenIcon />}
        delta={{ value: '12%', trend: 'up' }} spark={tokenTrend} onClick={openTokens} />
      <StatCard label="Sessions" value="42" icon={<SessionIcon />}
        delta={{ value: '6', trend: 'up' }} />
      {/* up isn't always good, so cost/latency flip the color, not the glyph */}
      <StatCard label="Cost · 7d" value="$184" icon={<CostIcon />}
        delta={{ value: '14%', trend: 'up', goodWhenDown: true }} />
      <StatCard label="p95 latency" value="640ms" icon={<LatencyIcon />}
        delta={{ value: '8%', trend: 'down', goodWhenDown: true }} />
      <StatCard label="Tokens · all time" value="1.2M" tone="featured" />
      <StatCard label="Errors · 24h" value="-" />   {/* empty, not a zero */}
    </div>
  );
}

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
label *stringShort metric name. Bound to the muted label.small role.
value *stringHeadline figure, pre-formatted (e.g. 1.2M, $184). Pass a dash for the empty state, never a misleading 0.
delta{ value: string; trend: "up" | "down"; goodWhenDown?: boolean }Trend chip: a warm status color + a direction glyph (▲/▼) + a sign. Never color alone. goodWhenDown flips the color for cost/latency (the glyph stays).
iconReactNodeOptional leading glyph, rendered on the ratified D6 neutral hairline plate (muted glyph, transparent fill) by default. Opt into a hue with tint.
sparknumber[]Optional inline sparkline, normalized to its own min/max with a filled "now" dot. Brand cyan (on-accent when featured).
tone'default' | 'featured''default'featured fills the tile with the cyan gradient (one per cluster); labels use on-accent.
tint'accent' | 'success' | 'warning' | 'danger'Opt-in icon-plate tint that colors the glyph + plate a soft hue (soft wash + hue border + hue glyph, the Badge-soft recipe). Omit for the neutral D6 plate (default renders byte-identical). Ignored on featured tiles.
gradientbooleanfalseEXPERIMENTAL (task 2763, not ratified canon): a subtle THEME-FOLLOWING surface gradient (a gentle neutral diagonal, not the featured cyan). Default renders the flat surface, byte-identical. Ignored on featured.
size'comfortable' | 'compact''comfortable'Density. compact is the dense ClusterSheet tile; comfortable the Voice card.
loadingbooleanfalseSkeleton shimmer instead of content; holds the tile height and sets aria-busy.
onClick() => voidWhen set, the whole tile becomes one button (hover lift, focus-visible ring, single accessible name).