Design System

Canon

Everything you need to build interfaces that feel right. Colors, typography, components, and the thinking behind each decision.

"Weniger, aber besser"
— Dieter Rams (Less, but better)

Explore the System

Start here. Colors, typography, spacing, and motion tokens you can copy directly into your project.

Ready-to-use buttons, cards, navigation, and form elements with code examples.

How to handle forms, loading states, and navigation across your application.

Why we made these choices. The principles that guide every design decision.

Before adding anything to Canon, we ask three questions.

First

If we've built something similar, we combine them into one solution.

→ Unify

Second

Every element needs a clear purpose. Decoration without function gets cut.

→ Remove

Third

Each piece should work with everything else. If it doesn't, we rethink it.

→ Reconnect

We use the golden ratio (1.618) for spacing. It creates visual rhythm that feels balanced without you having to think about why.