Type and data card showcase

Summary

A dark slide that explains using Monzo Sans for data and UI, demonstrated by a horizontal row of bright product cards showing balance rings, spending bars and nested figures.

Visual description

Near-black navy background. Top-left a small outlined pill reads "Our typography"; the page number "37" sits top-right. A heading "Type and data" in bold near-white display type heads a short left-aligned paragraph about leading with Monzo Sans for clarity in UI, graphs and infographics. The lower two-thirds is a row of large rounded UI cards that bleed off both edges: an orange card peeking at far left, a muted olive card with a lime ring reading "£3209 left this month", a dark olive card headed "This month £3209" over a pale bar chart with an "Avg." line and a lime "+802" pill, a white card titled "Eating" holding nested orange, pink and teal blocks labelled 50/30/20, and a teal card peeking at far right. All numerals are set in a heavy grotesque sans.

Key takeaway

Teaching a functional typeface by showing it inside real product cards rather than as abstract specimens. The card row bleeding off both edges reads as a scrollable component shelf and brings the brand color system and data viz into one frame.

Reuse notes

A strong template for a UI or data-typography page in a brand or product guideline, or any slide that needs to show a component library in context. Depends on a saturated multi-color card set and clean fictional financial data. Works on dark.