UI Design / Branding

SystopiaIdealism with system

Rebrand and website relaunch for Systopia. A Hamburg software and consulting company. Open Source CiviCRM, portals and bespoke software for non‑profits. A modular design system, lively colours and abstract illustrations give Systopia a distinctive, modern look.

Client

Systopia

Agency

mattrs Branding Agency

Year

2024

Role

Corporate Design · UX/UI ·
Design System · Illustration

01 / The Brief

Software for non-profitsis rarely inviting

Systopia builds Open Source CiviCRM, portals and bespoke software. For non‑profits, associations and foundations. The brand needed to feel more contemporary and digital. Without losing its collaborative character.

The branding runs from landing page to subpage and keeps complex content navigable.

02 / The Solution

Idealismtakes shape

A modular design system carries the brand. Triangular modules. Vivid colours. Abstract illustrations.

Systopia stays structured while feeling approachable and contemporary.

03 / Visual System

A brand madeof modules

The triangle‑based signet sets the principle. Shapes overlap into illustrations. From web to print.

Wordmark, palette, typography, icons, subtle grain. All follow the same logic.

04 / Web Design

Landing pageto subpage

The relaunch carries the new branding into a clear digital structure. Intuitive navigation, strong readability.

On subpages, cards, custom illustrations and responsive layouts reduce complexity and make content easier to grasp.

Idealismwith system

systopia.de
Image CreditsProject Partners
© Systopia · mattrs Branding Agency
  • Creative Direction: Mathias Rüsch
  • Web Design: Lisa Thiem
Next Project · 03 / 12
smapp, citizen reporting app

smapp

UX/UI Case Study