How Rise Canvas was created

Designing the design system

One of the most important early decisions was establishing a shared design language across all 19 builders so they felt like one product rather than 19 separate experiments.

That meant deciding on:

• Colours: all stored as constants and used consistently

• Typography: Poppins throughout, loaded from Google Fonts, with consistent size scales

• UI components: the same input styles, label styles, card editor layouts, toggle switches and colour pickers appearing in every builder

• Spacing: consistent padding, border-radius and gap values so the control panels feel like a system

This paid off enormously later. Because every builder shares the same visual DNA, users can move between them without relearning anything.

Accessibility requirement

Every piece of output HTML had to work properly in Rise, which means it had to be accessible. From the start, every component was built with:

• Correct ARIA roles and labels

• Keyboard navigation (tab, enter, space, escape where relevant)

• Appropriate colour contrast

• Screen reader-friendly markup

This was baked in from the beginning rather than added as an afterthought, which saved a lot of pain later.