Every component, in light and dark
Built from design/tokens.json and design/components.css. Sample pictures only: no client work on this page.
Colours
Every colour token. Light and dark come from the same names.
Type
Red Hat Display, Red Hat Text and Red Hat Mono.
- display-xl2 posts are waiting for you
- display-lgBoard
- display-mdAsk for changes
- display-smPuffer Series
- titlePuffer Series
- bodyPlease make the store names a little bigger.
- body-smStores added on the last slide.
- labelAsk for changes
- meta
- captionSlide 1 of 6
- microTo review
- overlineCHANGED SINCE V1
- code2.1
- display-xl2 posts are waiting for you
- display-lgBoard
- display-mdAsk for changes
- display-smPuffer Series
- titlePuffer Series
- bodyPlease make the store names a little bigger.
- body-smStores added on the last slide.
- labelAsk for changes
- meta
- captionSlide 1 of 6
- microTo review
- overlineCHANGED SINCE V1
- code2.1
Headline
One per screen. The part that matters in accent colour.
2 posts are waiting for you
2 posts are waiting for you
BottomBar
Always two buttons. On a real screen it is fixed at the bottom, above the home indicator.
TopBar
The version switch shows only when there is more than one version.
VersionSwitch
Client versions only. More than four: the last three and More.
VersionTag
Solid pill: a client version. Dashed chip: a design, team screens only.
TabBar
Home screens only. The client has two places; the team has four.
PostCard
The first slide, whole. Nothing on the picture. Scroll the row sideways.
PreviewCard
Swipe or tap a thumbnail to change slide. A single post has no foot.
Stores added on the last slide.
Stores added on the last slide.
Filmstrip
Slides 2 and 6 changed: the mark is under the thumbnail, never on it.
ChangeNote
Written by the team when they release. Left out on V1.
Stores added on the last slide. Price on slide 2 is bigger.
Stores added on the last slide. Price on slide 2 is bigger.
Field
The label is always visible. An error says how to fix it.
We save it with your approval.
Enter all 10 digits, for example 98200 12345.
We save it with your approval.
Enter all 10 digits, for example 98200 12345.
Toast
Done: goes after 4 seconds. Error: stays until closed.
EmptyState
Calm, never an error.
Nothing to review
When we send you a new post, it will be here.
Nothing to review
When we send you a new post, it will be here.
StageLabel
Colour follows who must act. A client sees only the last five.