Additional components
A horizontal tab rail, a value block with a light and dark treatment, and the value-proposition icon set.
Tab rail
Twenty-four variants: six widths × two States × two button types. This is a horizontally scrolling chip rail with paging chevrons, 56 px tall.
State
sticked-to-page— full section width: 1400, 1200, 992, 768, 576, 358in-container— container width: 1320, 1140, 960, 720, 540, 326
button-typpe
defualt— outlined chips, brand-red textFiled— solid brand-red chips, white text
State distinguishes a bar that spans the full viewport
from one that sits inside the container. Pick sticked-to-page
for a bar pinned under the navigation, in-container for one
that aligns with page content.
Value block
value-block carries a
color-mode = dark | light property.
The dark surface is background/5 — #0a0a0a — which is
what that token is for, and why it sits outside the light grey ramp.
Text is Foreground/On brand (#ffffff). There is no
dark-mode foreground ramp, so a dark surface has exactly one text colour available.
background/5.Icon set
Icon-Card holds ten 24 px icons in a single
Property 1=bold weight, used by the value block and
value card.