Style Guide

The approved, formalised reference for this theme's design tokens and reusable components. Every element on this page renders with the site's real classes and CSS files - it is a live mirror of the shipped system, not a mockup, so it can never silently drift out of date. Build new work by reusing what is here; do not fork a new variant of a pattern that already exists below.

Colours

Blue

--c-blue

Blue dark

--c-blue-dark

Amber

--c-amber

Amber dark

--c-amber-dark

Ink

--c-ink

Body text

--c-body-text

Muted

--c-muted

Neutral

--c-neutral

Keyline

--c-keyline

Rule

--c-rule

White

--c-white

Hero dark

--c-hero-dark

Typography

Lead paragraph

.article-content > p:first-child

Copper is an excellent conductor of heat, with a thermal conductivity of 401 W/m/K.

Body copy

.article-body p

Thermal conductivity, or K value, measures how readily heat flows through a material, in units of W/m/K.

Section heading (h2)

.article-body h2

K values compared

FAQ question (h3)

.article-faq__q

What is copper's thermal conductivity in W/m/K?

Eyebrow label

.rail-block__label

In this article

Buttons & links

Primary button

.btn.btn--quote

Secondary button

.btn.btn--ghost

Link (default)

a - hover-underline in prose contexts only

Read more about Copper Alloys and how they are supplied.

Breadcrumb

.breadcrumb

Tables

Content table

.article-body .table-wrap table - header fill, zebra rows, 1px keyline cells

MaterialThermal conductivity (W/m/K)
Pure copper401
Pure silver429
Nickel91
Stainless steelsAround 16

Boxes & dividers

Keyline box

.keyline-box

Definition: a keyline box sets apart a definition, note or key takeaway within an article.

Keyline box (tinted)

.keyline-box.keyline-box--tint

Key takeaway: the tinted variant adds a pale blue fill for stronger emphasis.

Section divider

.section-divider / .article-body hr

Content above

Content below

Sidebar CTA box

.rail-block.rail-block--cta

Need this material?

Chips & cards

Related-reading chip

.rail-related a

Article card (slider)

.res-card

FAQ strip

.article-faqs - full-bleed band, text capped to the article measure

Frequently asked questions

What is copper's thermal conductivity in W/m/K?

Copper has a thermal conductivity of 401 W/m/K, making it one of the best heat-conducting metals.

Why is copper such a good conductor of heat?

Copper's atoms are packed closely together, letting electrons pass between adjacent atoms with relative ease.

Hero

.pillar-hero.article-hero - dark band, breadcrumb, single-weight h1 capped to 26ch

What is the thermal conductivity of copper?