Leasetic and Colibris: two design systems, one family

Version 2 of the design systems for a leasing brand and its ESG reporting SaaS: a shared foundation of geometry, ink and icons, with two brand layers that each keep their own voice.

Role: Brand and design system lead Tools: Figma (Variables, components), Claude Design, Iconly, Notion Year: 2026

The Leasetic group runs four brands: Leasetic (IT leasing), Colibris (ESG reporting SaaS), Loopix (refurbished equipment) and Seensys. After the group rebrand gave them a common shape, the oval, each brand still needed a working system that designers and developers could build from. Version 1 of the Leasetic system rested on a written brief and a palette that did not survive contact with real pages.

I built both systems on the same base so the group reads as one family, then let each brand speak for itself.

Leasetic, the group anchor for leasing and financing: the propeller mark of four ellipse blades, Leasetic green #01CC72, Inter Tight for display and Inter for body, an advisory and precise voice, built for the marketing site and partner tools.

Colibris, the ESG measurement and reporting SaaS: the hummingbird mark of four tapered ellipse wings, Colibris cyan #009999, Inter throughout with mono for data, an analytical and evidence led voice, built for dashboards, KPI cards and client reports.

Shared: the group navy #112C3B as ink for both brands.

Both share one icon set of 106 outline glyphs from Iconly, renamed into the group's own vocabulary and set to inherit text color, so an icon never needs restyling between brands.

Version 2 replaced the first palette and type pairing entirely. I mined the Figma file directly instead of estimating from screenshots: 211 component families, 340 Figma Variables across 9 collections, including one mode per group brand.

Components: 139 in total, 60 authored and responsive for production, plus 79 extracted as a pixel reference. Figma variants became props, so four card layouts are one card with a layout option, not four components to keep in sync.

Principles: one interactive color (green means clickable, nothing else does), section rhythm from surface changes rather than borders, a 17px body size for an advisory reading pace, and shadows only on floating elements.

Assets: 7 approved photographs, 16 illustrations and 4 product screens, all framed by a single image component with three treatments.

Coverage map: every one of the 211 Figma families is accounted for, either built, merged into another component, or left out with a written reason.

Colibris users are ESG officers and CFOs reading dashboards, so the system carries data visualization as a first class layer: an 8 color categorical palette, a 5 step sequential scale and a diverging ESG scale from coral (behind target) through sand (on target) to green (leading).

The product interface got its own component set, the App Shell, ported from the ReUI Maia style and kept apart from the marketing components by prefix, so the website and the app can evolve without breaking each other. It includes forms, tables, progress gauges, empty states and a dim dark mode.

Both systems now live as browsable references with tokens, components, guidelines and assets in one place, with documentation mirrored in Notion for the team. Every value is traceable to a source file, and every gap is written down instead of guessed. Both already power real deliverables: the Extranet proposal PDF template, a three email campaign, event roll-ups and a services flier for Leasetic, and a monthly steering report for Colibris clients.