SureSmile component library

The internal reference for suresmile.com's design system and blocks. Every page here is authored directly (never imported) and kept out of the site nav and sitemap. Use it to see how default content and each block render on-brand, and as the source the authoring Library panel points at.

Design identity

SureSmile presents as a calm, trustworthy clinical brand with a modern consumer-friendly warmth. The design reproduces the live suresmile.com faithfully — its real colours, type and spacing — rather than regularising it toward a generic system.

Typography carries the identity: Montserrat sets headings with a confident, slightly tight display feel, while Figtree keeps body copy open and highly readable. The scale steps cleanly from a large hero heading down to compact card titles, and headings run a touch heavier and tighter than the body to establish hierarchy without shouting.

Colour is restrained. A single brand blue anchors links and accents, pairing with a brand purple only in the blue-to-purple gradient band used behind marquees and calls to action. Soft tint bands provide gentle full-width sections; everything else sits on white with near-black ink for comfortable contrast.

Layout and motion stay quiet and purposeful: a shared 12-column grid (a 5/7 split for most two-column rows), one consistent vertical rhythm between sections, and motion reserved for genuine feedback — the steps accordion's slide, hover transitions — always honouring reduced-motion preferences. The governing principle is restraint: do less, and let the content lead.

Author-facing

Clean, ready-to-use instances of each block and each section style. Section styles live here in /library/blocks too: every background-* band is on the one backgrounds page, and the type/grouping styles (smaller-titles, tabs) each have their own page.

• /library/blocks

  • accordion
  • backgrounds — all background-* section styles
  • breadcrumb
  • cards
  • cases-carousel
  • columns
  • columns-trio
  • doctor-locator
  • embed
  • fragment
  • hero
  • smaller-titles — section style
  • steps
  • table
  • tabs — section style
  • treatment-ribbon

Design system

The default-content showcase — every semantic element (headings, body, lists, blockquote, links, buttons and the accent link) with no block applied, so the global typography, spacing and colour can be reviewed on their own.

• default-content