Styles

variant="display"Landing hero headline. Grows with the viewport from 36px to 60px.

Ship the form today

--wr-text-4xl--wr-leading-none--wr-font-weight-extrabold--wr-tracking-tight

variant="h1"Page title — one per page.

Account settings

--wr-text-5xl--wr-leading-none--wr-font-weight-bold--wr-tracking-tight

variant="h2"A major section of the page.

Billing

--wr-text-4xl--wr-text-4xl-leading--wr-font-weight-bold--wr-tracking-tight

variant="h3"A subsection, or the title of a compact page.

Payment method

--wr-text-3xl--wr-text-3xl-leading--wr-font-weight-bold

variant="h4"A section or card title inside a page.

Card details

--wr-text-2xl--wr-text-2xl-leading--wr-font-weight-bold

variant="h5"A card or panel title in a dense layout.

Billing address

--wr-text-xl--wr-text-xl-leading--wr-font-weight-bold

variant="h6"The smallest heading: a group, list or table title.

Tax ID

--wr-text-lg--wr-text-lg-leading--wr-font-weight-bold

variant="lead"The intro paragraph under a headline.

Everything you need to start, nothing you have to remove later.

--wr-text-xl--wr-leading-relaxed--wr-font-weight-regular--wr-color-on-surface-muted

variant="body"Running text. The default when no variant is set.

Invoices are emailed on the first of each month.

--wr-text-base--wr-leading-normal--wr-font-weight-regular

variant="small"Secondary notes, readouts and fine print.

Prices exclude VAT where it applies.

--wr-text-sm--wr-leading-normal

variant="caption"Helper text under a title, an image or a list item.

Updated 2 minutes ago

--wr-text-xs--wr-leading-normal--wr-color-on-surface-muted

variant="overline"An uppercase eyebrow above a heading.

Pricing

--wr-text-xs--wr-font-weight-semibold--wr-tracking-widest--wr-color-on-surface-muted

variant="code"Inline code in a sentence: a command, an input, a file name.

ng add ngwr

--wr-font-family-mono--wr-color-fill-strong--wr-space-xs--wr-space-sm

variant="list"A plain ul, ol or dl — put it on the list element itself.

Standalone components
Signal inputs

--wr-text-base--wr-leading-normal--wr-color-on-surface-muted

variant="link"A link inside text. Always underlined, with a focus ring.

Read the typography overview

--wr-font-weight-medium--wr-color-primary-ink

tone="base"Body ink. Brings a muted variant back to full strength.

Invoices are sent monthly

--wr-color-on-surface

tone="muted"Secondary text: subtitles, notes, metadata.

Updated 2 minutes ago

--wr-color-on-surface-muted

tone="primary"Brand emphasis: an eyebrow, a highlighted line.

Free for open source

--wr-color-primary-ink

tone="success"Something went right.

Payment received

--wr-color-success-ink

tone="warning"Something needs attention.

Card expires in 3 days

--wr-color-warning-ink

tone="danger"Something went wrong.

Payment failed

--wr-color-danger-ink

--wr-typography-font-familyTypeface. The code variant and mono switch it to monospace.

var(--wr-font-family-base)

--wr-typography-font-sizeSize. Every sizing variant sets its own.

var(--wr-text-base)

--wr-typography-font-weightWeight.

var(--wr-font-weight-regular)

--wr-typography-letter-spacingLetter spacing. Display, h1, h2 and overline set their own.

var(--wr-tracking-normal)

--wr-typography-line-heightLine height.

var(--wr-leading-normal)

--wr-typography-list-dd-font-sizeSize of a description in a dl.

var(--wr-text-lg)

--wr-typography-list-dd-font-weightWeight of a description in a dl.

var(--wr-font-weight-medium)

--wr-typography-list-dt-borderThe divider above each new term in a dl.

var(--wr-border-base)

--wr-typography-list-dt-margin-bottomSpace between a term and its description.

var(--wr-space-xs)

--wr-typography-list-dt-margin-topSpace above each new term in a dl.

var(--wr-space-md)

--wr-typography-list-dt-padding-topSpace between a divider and the term under it.

var(--wr-space-md)

--wr-typography-list-margin-topGap between the items of a list.

var(--wr-space-xs)

--wr-typography-list-padding-startIndent of a nested list.

var(--wr-space-xl)

--wr-typography-padding-xHorizontal padding of the code chip.

0

--wr-typography-padding-yVertical padding of the code chip.

0

--wr-typography-radiusCorner radius of the code chip.

var(--wr-border-radius-sm)

Release notes

Version 15 moves charts and bits into their own folders. Import paths change; component names do not. The typography overview has the rest.

Charts live under ngwr/charts.
Bits live under ngwr/bits.

Entry point: A path you import from, such as ngwr/button.
Bit: An animation or visual effect, such as a text reveal.

Update with one command:

ng update ngwr

The mark, as a figure with a caption.

Nothing to do if you only use form controls.

Colour hooks, set on the container:

--wr-typeset-bodyParagraphs and list items.

Paragraph text

light-dark(var(--wr-color-gray-700), var(--wr-color-gray-300))

--wr-typeset-headingsHeadings h1 to h4 and table header labels.

Heading

var(--wr-color-on-surface)

--wr-typeset-leadAn opening paragraph marked .wr-typeset-lead.

Intro paragraph

light-dark(var(--wr-color-gray-600), var(--wr-color-gray-400))

--wr-typeset-boldStrong text. Set it to the body colour for plain bold.

Bold text

var(--wr-color-primary-ink)

--wr-typeset-linksLinks. Set it to give links your brand colour.

Link

var(--wr-color-on-surface)

--wr-typeset-codeInline code. The chip behind it stays the fill colour.

inline code

var(--wr-color-on-surface)

--wr-typeset-pre-bgThe background of a code block.

var(--wr-color-fill)

--wr-typeset-bulletsBullets of an unordered list.

● ● ●

var(--wr-color-primary)

--wr-typeset-countersNumbers of an ordered list.

1. 2. 3.

light-dark(var(--wr-color-gray-500), var(--wr-color-gray-400))

--wr-typeset-quotesBlockquote text.

Quoted text

var(--wr-color-on-surface)

--wr-typeset-quote-bordersThe bar beside a blockquote.

light-dark(var(--wr-color-gray-200), var(--wr-color-gray-700))

--wr-typeset-captionsFigure captions.

Figure caption

light-dark(var(--wr-color-gray-500), var(--wr-color-gray-400))

--wr-typeset-hrHorizontal rules between sections.

light-dark(var(--wr-color-gray-200), var(--wr-color-gray-700))

--wr-typeset-th-bordersThe rule under a table header.

light-dark(var(--wr-color-gray-300), var(--wr-color-gray-600))

--wr-typeset-td-bordersThe rules between table rows.

light-dark(var(--wr-color-gray-200), var(--wr-color-gray-700))

--wr-text-xsBadges, tags, tooltips, hints and small controls.

Signals all the way down

--wr-text-xs-leading.wr-text-xs

--wr-text-smMost UI text: controls, menus, tables, alerts, labels.

Signals all the way down

--wr-text-sm-leading.wr-text-sm

--wr-text-baseBody copy, dialog and drawer content, large controls.

Signals all the way down

--wr-text-base-leading.wr-text-base

--wr-text-lgSmall titles: dialogs, drawers, h6.

Signals all the way down

--wr-text-lg-leading.wr-text-lg

--wr-text-xlLead paragraphs, h5, and values on a gauge or knob.

Signals all the way down

--wr-text-xl-leading.wr-text-xl

--wr-text-2xlSection titles and big numbers, h4.

Signals all the way down

--wr-text-2xl-leading.wr-text-2xl

--wr-text-3xlPage header titles, statistic values, h3.

Signals all the way down

--wr-text-3xl-leading.wr-text-3xl

--wr-text-4xlLarge headings: h2 and the smallest display.

Signals all the way down

--wr-text-4xl-leading.wr-text-4xl

--wr-text-5xlHero headlines: h1.

Signals all the way down

--wr-text-5xl-leading.wr-text-5xl

--wr-font-weight-thinVery large, quiet display text.

Signals all the way down

.wr-font-thin

--wr-font-weight-lightLarge, quiet text.

Signals all the way down

.wr-font-light

--wr-font-weight-regularBody text — the default.

Signals all the way down

.wr-font-regular

--wr-font-weight-mediumButtons, tabs, tags, labels and links.

Signals all the way down

.wr-font-medium

--wr-font-weight-semiboldTitles: dialogs, alerts, toasts, table headers.

Signals all the way down

.wr-font-semibold

--wr-font-weight-boldHeadings h1 to h6 and page titles.

Signals all the way down

.wr-font-bold

--wr-font-weight-extraboldDisplay headlines.

Signals all the way down

.wr-font-extrabold

--wr-leading-noneOne line that must sit tight: display, h1, keycaps.

Invoices are emailed on the first of each month and stay available here for seven years after the account closes.

.wr-leading-none

--wr-leading-tightHeadings and short helper lines.

Invoices are emailed on the first of each month and stay available here for seven years after the account closes.

.wr-leading-tight

--wr-leading-snugCompact one-line items: chips, anchor links.

Invoices are emailed on the first of each month and stay available here for seven years after the account closes.

.wr-leading-snug

--wr-leading-normalBody text — the default.

Invoices are emailed on the first of each month and stay available here for seven years after the account closes.

.wr-leading-normal

--wr-leading-relaxedLong reading: articles, markdown, lead paragraphs.

Invoices are emailed on the first of each month and stay available here for seven years after the account closes.

.wr-leading-relaxed

--wr-leading-looseDouble spacing.

Invoices are emailed on the first of each month and stay available here for seven years after the account closes.

.wr-leading-loose

--wr-tracking-tighterVery large display text.

Signals all the way down

.wr-tracking-tighter

--wr-tracking-tightBig headings and large numbers.

Signals all the way down

.wr-tracking-tight

--wr-tracking-normalThe default. Undoes a wider setting.

Signals all the way down

.wr-tracking-normal

--wr-tracking-wideSmall labels and badges.

Signals all the way down

.wr-tracking-wide

--wr-tracking-widerTiny labels, like calendar weekdays.

Signals all the way down

.wr-tracking-wider

--wr-tracking-widestUppercase eyebrows — the overline variant.

Signals all the way down

.wr-tracking-widest

--wr-font-family-baseEvery component's text. Set your typeface here.

Signals all the way down 0123456789

.wr-font-base

--wr-font-family-monoCode, OTP digits, hex values — characters that line up.

Signals all the way down 0123456789

.wr-font-mono

.wr-text-balanceEven line lengths for a heading that wraps.

Invoices are emailed on the first of each month and stay available here for seven years after the account closes.

.wr-text-prettyNo lone word on the last line of a paragraph.

Invoices are emailed on the first of each month and stay available here for seven years after the account closes.

.wr-truncateOne line, cut with an ellipsis.

Invoices are emailed on the first of each month and stay available here for seven years after the account closes.

Text styles

Tones

Hooks

Long-form text

Release notes

Size

Weight

Line height

Letter spacing

Font family

Line breaking

See also