Adobe XD source
The full Bonlife Design System lives in Adobe XD. Inspect components, copy assets, and download everything from the developer link.
Adobe XD developer view
Open the XD source to inspect spacing, typography, components, and every asset in the system. Suppliers and designers should use this as the master reference.
'%20fill='%23fff'%3e%3c/path%3e%3c/svg%3e)
Wordmarks and marks
Six SVGs cover every surface. Use the light wordmark on navy and photography; the dark wordmark on white and tint surfaces.
Primary wordmark for use on dark backgrounds.
'%20fill='%230c1c3e'%3e%3c/path%3e%3c/svg%3e)
Primary wordmark for use on light backgrounds.
Typefaces
Onest carries display type; Inter carries body copy. Both are free on Google Fonts.
Onest
Display headings and bold UI labels. Tight tracking, geometric, confident.
Inter
Body copy, captions, and interface text. Clean, readable, extensive weights.
Palette
Click any swatch to copy its hex. Token names match the CSS variables in the design system.
Colour tokens
Brand, category, state, and surface colours. Click a swatch to copy its hex to the clipboard.
Icon library
The full Bonlife icon set lives in the shared Drive folder. Download individual SVGs from the Iconography page, or grab the complete set from Drive.
Icon library
Curated Lucide glyphs, category icons, and custom SVGs. Use the Iconography page to browse, or download the full set from the Drive folder.
Campaign photography
High-resolution photography lives in the shared Drive because files are licensed per campaign and too large to ship with the design system.
Campaign photography
Open the folder to browse the full set of licensed campaign photography.
Gradient backgrounds
Gradients ship as layered PSDs and hi-res JPGs alongside the photography - grab them from the same Drive folder.
Gradient backgrounds
Grab layered PSDs and hi-res JPGs from the same shared Drive folder as the photography.
