Celonis DESIGN.md

Design System Inspiration of Celonis

Overview

Visual Theme & Atmosphere

"We make processes work for people, companies, and the planet." Celonis was founded in 2011, "bringing Process Mining from academia into the boardroom"; its timeline runs through cloud (2018), unicorn and decacorn rounds, the Process Intelligence Graph (2023) and the Process Intelligence Platform (2024). It counts 3,000+ employees "in Munich, New York, Madrid and 14 other offices". Its imprint names Celonis SE, Theresienstr. 6, 80333 Munich, registered office Munich.

The site is stark: a black header and hero, white and light grey sections (#f5f5f5, #e5e5e5), black text, Poppins everywhere, and a single neon green #5cfe50 for the call to action.

What makes it worth reading:

• A foundation system, "fnd". 127 --fnd-* properties: colour roles (background base → quinary, border low/mid/high, text high/mid/low, semantic success/danger), a 4px spacing scale to 112px, radii 2/4/8px, and a type scale from paragraph-xs to display-s (8rem, −4px tracking).
• Motion as tokens. Three motion personalities — expressive (ease-out), focused (ease-in-out), informative (linear) — each with quick/base/slow durations (.2s/.3s/.45s–.6s).
• One accent. Everything is black, white and grey except the neon green.

Primary tasks

• Understand the platform and solutions.
• Try for free; talk to an expert.

Brand Narrative

Process mining brought from academia to the boardroom, now sold as process intelligence. The site is as reductive as a process diagram: black, white, grey, and one neon green where you act.

Principles

• Processes work for people, companies and the planet.
• One accent.
• Motion with intent. Expressive, focused, informative.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on celonis.com: 137 root custom properties, 127 of them --fnd-*. All first-party.

Accent

• Accent green (#5cfe50) — --fnd-color-background-accent-green; Try for free.
• Accent secondary (#04cd24).

Neutrals

• Black (#000000) — header, inverse background, text high.
• Header button (#1d1d1d) → hover (#4d4d4d).
• Canvas (#ffffff) · Background secondary (#f5f5f5) · tertiary (#e5e5e5) · quaternary (#cbcbcb) · quinary (#767676).
• Foreground (#000000) · Text mid (#666666) · Text low (#8e8d8d).

Semantic

Success #0b9e23 on #d5ffd1 · Danger #bf281b on #ffdfdc.

Typography

Font family

Poppins (400), loaded (document.fonts) with a metric-matched fallback.

Scale

--fnd-typography-*: heading-xxl 6.25rem/−2px, heading-xl 5rem/−3px, heading-l 3.75rem/−1.5px, heading-m 2.75rem, heading-s 2rem, paragraph-l 1rem/1.375rem, paragraph-m .875rem. Section headlines render at 80px/400.

Layout

• A black header and hero, then alternating white and grey sections on a 4px spacing grid.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

Flat; hover darkens with an inset shadow rather than a new fill.

Motion & Easing

Tokens: --fnd-motion-duration-{expressive,focused,informative}-{quick,base,slow} (.2s / .3s / .45s, informative slow .6s); --fnd-motion-ease-expressive ease-out, -focused ease-in-out, -informative linear.

---

Tier 1 sources: https://www.celonis.com/ (live homepage — 137 root custom properties read via getComputedStyle; Poppins loaded; two components measured at rest, hover and focus, captured 2026-09-26); https://www.celonis.com/zz-this-does-not-exist (nonsense-path control — HTTP 404 in the browser, read 2026-09-26); https://www.celonis.com/company/about-us (About — mission, 2011 founding, timeline, 3,000+ employees in Munich, New York, Madrid and 14 other offices, read 2026-09-26); https://www.celonis.com/legal (imprint — Celonis SE, Theresienstr. 6, 80333 Munich, registered office Munich, read 2026-09-26)

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• motion.duration-quick: .2s
• motion.duration-base: .3s
• motion.duration-slow: .45s
• motion.ease-expressive: ease-out
• motion.ease-focused: ease-in-out
• motion.ease-informative: linear

Components

Measured with focus under a real Tab key and a hover counted only when :hover matched. The pressed state could not be measured (an overlay intercepted the pointer) and is not recorded.

• Try for free — #5cfe50, black 14px/400, 2px, 40px. Hover and focus lay a 20% black inset (inset 0 0 0 1000px rgba(0,0,0,.2)).
• Hero link — Discover our solutions: white 18px. Hover underlines it and fades in a green #5cfe50 ::before.

Radius

2px on buttons; --fnd-radius-m 4px and -l 8px elsewhere.

States

Hover: a 20% black inset on the green button; underline plus a green bar on hero links; the header button lifts to #4d4d4d. Focus: the same as hover plus the browser's ring. Pressed: not measured.

Live state probe, 2026-10-16 (https://www.celonis.com/), button-primary: pressed — shadow rgba(0, 0, 0, 0.2) 0px 0px 0px 1000px inset.

Do's and Don'ts

Do

• Keep the palette black, white and grey, with neon green #5cfe50 for the one call to action.
• Darken hover with a 20% black inset instead of a new colour.
• Pick motion from the three personalities: expressive, focused, informative.

Don't

• Don't add a second accent colour.
• Don't round buttons; they are 2px.
• Don't put the green behind body text; it is for actions and highlights.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#5cfe50 neon green · #000000 black · #1d1d1d header button · #f5f5f5 / #e5e5e5 greys · #666666 mid text · #0b9e23 success · #bf281b danger

Example Component Prompts

• "A 40px #5cfe50 button, black 14px Poppins, 2px radius; hover a 20% black inset."
• "A black hero with an 80px Poppins headline and a white link that underlines on hover."