Asset title sits here, set in IBM Plex Sans Light at 64px
A lede paragraph sits beneath the H1 at 20px / 30px line-height, framing what's in this asset. Typically one to three sentences. User-authored — the skill doesn't generate ledes silently.
Section H2 — opening section heading
A section opens with a strapline, an H2, and a body paragraph framing what the section is about. The body sets context before any modules; modules carry the section's spine. This paragraph demonstrates standard body type: 20px / 30px line-height, IBM Plex Sans Regular, on the page background.
Sections can have multiple body paragraphs before the first module, especially in a long-form HTML asset where a section's framing might run several sentences. Keep paragraph length comfortable for reading at this width (roughly 720px max).
1-col feature card — boxed
A 1-col feature card spans the full main content column. Use it to anchor a section with one dominant block — a chart, a synthesized finding, or a single argument that needs visual weight. Below: grey colorway, used for neutral diagnostic content.
What the diagnostic surfaced
The grey colorway in light mode is a subtle tint — #222 at 5% opacity over the page background. Text stays dark, dividers use the page's standard border tone. Use grey when you want soft differentiation without the emphasis weight of purple, blue, or white.
For colored cards (white text on purple or blue), see The insight and Recommendation sections. For the white card variant, see What's possible.
Lists ship in three styles (bulleted, numbered, with-body) and three layouts (1-, 2-, or 3-column). Bullets are 5×5 sharp-cornered squares; ordered numbers ("01," "02") are CSS-counter-generated in Roboto Bold 14px. Both inherit a single color token — blue on the page background, dimmed-white inside colored cards, dimmed-dark inside white cards.
- One observation about the diagnostic — single-line bullet items work best in 1-col layout.
- Another finding — list items have 20px top/bottom padding and a 1px bottom border in the page's
--bordertoken. - A third — the bullet's vertical position aligns with the first text line at any line-height.
- First item in a numbered list — 2-col layout with a 40px column gap.
- Second — numbered lists imply sequence or priority. Bulleted lists do not.
- Third — same color treatment as bullets (blue here, on page bg).
- Fourth — at 4+ items, two columns usually reads better than one.
-
Heading text
A short description sits beneath the bold heading. List-with-body suits items that need more context than a bullet alone.
-
Heading text
Three columns work when items are concise. The 20px column gap is tight by design.
-
Heading text
Body text inside a list item is 18px / 24px line-height — tighter than the section body's 20px / 30px.
2-col feature card — boxed, purple
A 2-col feature card pairs two columns of one connected concept inside a single card, divided by an internal 1px line. Typical pattern: text on the left, chart on the right. The colorway carries meaning — purple here, used for insight or persuasion content.
The insight that reframes the brief
One column of a 2-col feature card. Text on the left, chart or supporting visual on the right. The two columns belong to one statement — they're tied more closely than two separate cards in a 2-col area.
Purple is the brand's most engaging color. Use it when the section's job is to shift the reader's thinking.
Bar chart at 2-col feature card width
Horizontal bars rank cleanest in this slot. Left-aligned labels, right-growing fills, and value prefixes make scanning effortless.
Feature statement
A feature statement is the asset's thesis sentence. IBM Plex Sans Medium at 64px / 70px line-height, with an optional blue underline animating-or-static on a keyword span. Reserved for original assertions — never quotes, never someone else's line. Limit to one underlined span per statement.
The brief said one thing. The work shows a different problem needs solving first.
2-col area — boxed
A 2-col area is two separate cards in a row, each at ~50% width with a 40px gap between. Use when you have two parallel arguments, options, or observations that are independently meaningful. (For one connected concept across two columns, use the 2-col feature card above instead.)
The recommendation
Blue carries direction and recommendation. The Newfangled-led path forward, the projected outcome, the next step.
Cards inside an area follow the same internal anatomy as feature cards: optional icon, strapline, H3 headline, body.
The supporting context
Grey paired with blue is a common compare/contrast pattern — blue for what we're recommending, grey for the neutral observation that justifies it.
Two colorways per row works; three or more starts to compete for attention.
Below: same 2-col area, unboxed. No card chrome — columns sit on the page bg, divided by a 1px right-border. Use unboxed when the area is reference content that shouldn't compete with adjacent emphasis moments.
Unboxed left column
Unboxed treatment removes the card's colored background. Each column has its own internal padding (30px) and the divider is a 1px right-border in the standard border token.
Unboxed right column
The first column has no left padding, the last column has no right padding — so the unboxed area aligns to the main column edges and the divider sits between content blocks.
Simple tables compare values across multiple dimensions. Header row uses Roboto SemiBold 18px; body cells use IBM Plex Sans Regular 18px. Rows are 112px tall, content centered both axes, with 1px bottom borders. Best for 4+ rows of numeric or short-text comparisons.
| Region | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| North | 72% | 74% | 78% | 81% |
| South | 68% | 70% | 71% | 69% |
| East | 55% | 59% | 63% | 67% |
| West | 62% | 61% | 64% | 66% |
3-col area — boxed
A 3-col area is three slimmer cards in a row, each at 1/3 width with a 20px gap. Use for parallel observations, tactics, or options that share a pattern. Card padding is tighter here (30px horizontal, 40px vertical) since the columns are narrower.
Phase one
Three grey cards. Grey signals neutral context — useful when presenting a sequence, set, or comparison without yet advocating for one over the others.
Phase two
Slimmer cards mean tighter content. Aim for shorter prose in 3-col cards — typically a short headline plus 1–2 sentences.
Phase three
Going beyond three columns gets cramped fast. If you have four parallel items, consider a list or a 2-col area split into two rows.
Same 3-col shape, unboxed: three columns on the page bg, divided by 1px right-borders. Useful for reference detail blocks alongside heavier emphasis sections elsewhere in the asset.
Unboxed column one
Unboxed 3-col reads as quiet reference structure. Each column is divided from the next by a hairline border.
Unboxed column two
The right-borders create a clear column structure without the visual weight of full colored cards.
Unboxed column three
Mix boxed and unboxed sections through the asset to create rhythm — emphasis followed by reference, then back to emphasis.
Charts
Six chart types ship with the brand — bar, line, pie, donut, venn, and Gantt. Each renders at multiple sizes depending on container: sidebar (240px), feature-card slot (400–480px), 1-col feature card (up to 540px). Color treatment auto-resolves from the surrounding card colorway: blue on light surfaces, white on purple or blue cards.
Line chart — trends over time
Seven points, clean grid, numeric labels above each point. The shape does the talking. Best when the reader needs to see direction and trajectory.
Donut — single value in context
Best for "X% of the whole" framing, where the surrounding empty arc matters as much as the filled portion.
Pie — simple two- or three-way splits
Avoid more than three slices — beyond that, a bar chart almost always communicates more clearly.
Venn diagram — intersection framing
Use when content reads as "A, B, and the space between them." Customer overlap, channel overlap, opportunity space. The arrow points to the intersection; the percentage names what that overlap represents.
Gantt chart — cascading roadmap stages
The signature shape: stages indent progressively, creating a waterfall that reads as a timeline rolling out. Each stage has its own start (left indent), duration (track length), and progress (fill). Use when phasing or sequencing matters more than precise dates.
Unboxed module with a chart — content on the page bg
An unboxed feature card removes the card chrome but keeps the chart's anatomy. Color resolves to the page-bg defaults (blue fills on blue-10 tracks) since there's no colorway above to override. Use when the chart is reference content alongside other emphasis moments rather than a section's own emphasis moment.
White colorway — emphasis treatment
The white colorway inverts the card to dark text on a pure-white background. Against the page's off-white bg (#FAFAFA), the white card has the highest contrast in the system. Reserve for one or two emphasis moments per asset — the most important number, the standout testimonial, the takeaway statistic. Overuse and the hierarchy collapses.
What's possible if we do this
White cards keep the standard 60px padding but use dark text. The strapline reverts to dark at 50% opacity (--text-muted) rather than white at 50%.
The internal divider on a 2-col white feature card uses dark at 10% opacity, matching the brand's light-mode --border token.
Pullquotes carry attributed statements — testimonials, research findings, stakeholder interviews. The HTML asset variant uses IBM Plex Sans Light at 64px / 70px line-height with curly quotes wrapping the text and an em-dash before the attribution. Distinct from a feature statement, which carries the asset's own thesis.
“The shift wasn’t about doing more — it was about doing the right things. Once we saw it that way, the rest fell into place.”
Stakeholder name, Title at Organization
Supporting research
Research pills surface sources behind the recommendation. Roboto Regular 18px, default bg matches the page's --border token; hover transitions to --green with white text. Citations are user-provided — never fabricated. List as many as the asset legitimately draws from.
Ready to act on this?
The end of an asset is its call to action. Pick one or two buttons that align with what you want the reader to do next — book a call, read more, download something, share. Below: the full button system, six color variants plus a trailing-icon variant. A real asset would use one or two of these here, not all six.