Content hierarchy

Write the headline, label, and explanation #

Existing marketing rule: use The Seasons for headlines, Switzer for body copy and values, and the small uppercase monospace style for eyebrows and stat labels. The typography guide distinguishes this from the video family’s type scale.

Proposed editorial recommendations: write one concrete claim in the headline; use a short noun phrase for the label; let the caption answer the next question. Start with roughly 4–10 words for a marketing headline and 2–4 for a label, then edit for the actual layout and audience. These are working targets, not library limits. A shorter sentence that loses its meaning is not an improvement.

Use real headings in a logical order. EyebrowLabel renders a span, and StatBlock renders paragraphs; their visual prominence does not create a heading. Never put the only necessary explanation into a clipped label or a decorative overlay.

Give statistics a unit, baseline, and period #

Name the measure and population, give the time period and comparison baseline, and identify the source. State whether a change is relative percent or percentage points: moving from 40% to 72% is a gain of 32 percentage points, or 80% relative to the starting rate. Do not write “32% better” for that difference.

StatBlock accepts value, unit, label, and caption as text; it does not calculate, fact-check, or announce the number. The example uses 100 fictional teams at each observation and labels the data illustrative. In real work, replace that with the actual source, method, and relevant uncertainty. For chart values, follow the chart explanation guidance.

Rewrite a vague claim #

'use client';

import { EyebrowLabel, StatBlock, coreuxPalette } from '@coreux/ui';

export default function ContentHierarchy() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 240px), 1fr))', gap: 24, color: coreuxPalette.inkNavy }}>
      <figure style={{ margin: 0, minWidth: 0 }}>
        <figcaption style={{ fontSize: 14, fontWeight: 600, marginBottom: 12 }}>Don’t — leave the reader guessing</figcaption>
        <div style={{ padding: 20, background: coreuxPalette.warmIvory, border: `1px solid ${coreuxPalette.paleSteel}` }}>
          <EyebrowLabel>Important update</EyebrowLabel>
          <h3 className="font-display" style={{ fontSize: 32, fontWeight: 700, lineHeight: 1.2, margin: '20px 0' }}>Better than ever.</h3>
          <StatBlock value="32" label="Performance" caption="A big improvement." />
        </div>
        <p style={{ fontSize: 14, lineHeight: 1.6, margin: '12px 0 0' }}>This intentionally incomplete fictional statistic has no unit, population, baseline, or period. A larger number cannot supply the missing explanation.</p>
      </figure>
      <figure style={{ margin: 0, minWidth: 0 }}>
        <figcaption style={{ fontSize: 14, fontWeight: 600, marginBottom: 12 }}>Do — state the change and its scope</figcaption>
        <div style={{ padding: 20, background: coreuxPalette.warmIvory, border: `1px solid ${coreuxPalette.paleSteel}` }}>
          <EyebrowLabel>Illustrative pilot</EyebrowLabel>
          <h3 className="font-display" style={{ fontSize: 32, fontWeight: 700, lineHeight: 1.2, margin: '20px 0' }}>More teams finish setup.</h3>
          <StatBlock value="32" unit="pp" label="Setup completion gain" caption="Completion rose from 40% to 72% across 100 fictional teams, weeks 1–4. pp means percentage points." />
        </div>
        <p style={{ fontSize: 14, lineHeight: 1.6, margin: '12px 0 0' }}>A specific headline leads; the label names the measure; the caption explains its denominator, baseline, period, and fictional source.</p>
      </figure>
    </div>
  );
}

Enforced constraints and editorial recommendations #

A valid prop value can still overflow or communicate poorly. These limits are checked against the pinned implementation; the linked references provide each complete contract.

• Marketing text: MarketingHero, SocialCarouselSlide, ShortformCover, StatBlock, and EyebrowLabel do not enforce character budgets. Their variant types require particular content, but length and fit are editorial responsibilities. Preserve the social 3:4 and cover 9:16 aspect ratios and inspect the actual words.
• ProcessSteps: the recommended 2–4 steps are a marketing convention, not an array-length validation. The component always uses two columns. A long process needs another presentation; adding steps does not create pagination or a responsive single column.
• Capsule: primary must be non-blank with at most two explicit LF/CRLF lines. There is no character cap. textLines is 1 or 2 and visually clamps at that count; it defaults to 1. Natural wrapping or a second explicit line can be hidden. Choose a short message and inspect it at its real width.
• PanelCard: title accepts at most two explicit lines and supportingCopy at most three; the displayed text also clamps at two and three wrapped lines respectively. Eyebrow and unit allow one explicit line. Keep essential qualifications outside a possibly clipped field. The component requires a title or value and restricts how its named slots can be combined.
• GroupFrame: an optional heading must be non-blank, single-line, and at most 32 UTF-16 code units. It is visually ellipsized when space runs out. Keep the group name short; a valid length does not guarantee a complete label.
• SpeechBubble: body permits at most three explicit lines and 32 Unicode code points per line, including spaces. It never wraps automatically. The shell’s maximum width does not guarantee a valid line fits, and the tail needs clearance.
• RichTextOverlay: 1–3 lines, at most 32 Unicode code points across each line’s spans, and at most one primary emphasis span are enforced. Spans must be non-blank, cannot contain line breaks, and receive no automatic spaces. Its fixed 72 px text does not wrap; marker length has no separate cap. Multi-code-point emoji consume several positions. Final-line emphasis may be clipped at this revision.
• Charts and tables: BarChart, DonutChart, LineChart, and DataTable validate their own data/geometry contracts. Some text budgets count JavaScript string length (UTF-16 code units), unlike the annotation limits above. Use each reference’s exact limit; do not apply a universal 32-character rule. Short category names and an external explanation remain editorial choices.

Values generated from @coreux/ui at 06f42fd: public foundation tokens, marketing stylesheet, bundled font definitions, and marketing conventions. Source links require repository access. Install the package and styles once.