Noran design library

An original launch-page starting point with brand switching, a pinned chapter story and sample content, built from the award research.

Whole screens and flows, with Ocean, EasyCare and Insight4D brand presets.

• LiveTracker
• ConfirmPay
• ReceiptPrint
• VoucherPicker
• BookingAccordion
• OptionBuilder
• CartList
• CategoryArc
• CardStack
• AddCard
• FaceUnlock
• SplashReveal
• SearchExpand
• RouteMap
• BalanceTabs
• GooeyDots

Small motion components and helpers, with colours, radius and fonts set through CSS variables.

• Lab 1 · Reveal, filter & scroll

  Digit reveals, staggered results, spring filters, a ticker and a scroll stack.

• Lab 2 · Drum, charts & light

  A 3D draw drum, self-drawing charts and shader light.

Loading brand count…

Colour tokens, contrast ratios, type settings and colour-and-font recipes.