coderef

Celonis

"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…
DownloadRaw
celonis.comVisit ↗
View full
celonis.comVisit site ↗
Celonis website, full page

Palette

At a glance

Website
celonis.com ↗
Theme
light
Typefaces
System
Sections
10
Length
984 words

Add it to your project

Then prompt your agent

Design System · Celonis

Light and dark previews, tokens and a ready-to-use package, generated from this DESIGN.md. No AI involved: the same file always produces the same output.

Generating design system…

DESIGN.md

DownloadRaw
Design tokens (YAML front matter)
name: Celonis
colors:
  accent-green: '#5cfe50'
  accent-secondary: '#04cd24'
  black: '#000000'
  header-button: '#1d1d1d'
  header-button-hover: '#4d4d4d'
  canvas: '#ffffff'
  background-secondary: '#f5f5f5'
  background-tertiary: '#e5e5e5'
  background-quaternary: '#cbcbcb'
  background-quinary: '#767676'
  foreground: '#000000'
  text-mid: '#666666'
  text-low: '#8e8d8d'
  success: '#0b9e23'
  success-bg: '#d5ffd1'
  danger: '#bf281b'
  danger-bg: '#ffdfdc'
typography:
  display:
    fontSize: 80px
    fontWeight: 400
    use: section headlines (--fnd-typography-heading-xl 5rem, -3px tracking)
  body:
    fontSize: 14px
    fontWeight: 400
    use: header buttons
rounded:
  s: 2px
  m: 4px
  l: 8px
components:
  button-primary:
    type: button
    backgroundColor: '#5cfe50'
    textColor: '#000000'
    rounded: 2px
    height: 40px
    padding: 0 16px
    typography: 14px / 400
    hover: inset 0 0 0 1000px rgba(0,0,0,0.2)
    focus: inset 0 0 0 1000px rgba(0,0,0,0.2)
    use: Try for free — neon green with black text; hover and focus darken it with a 20% black inset shadow.
    pressed: shadow rgba(0, 0, 0, 0.2) 0px 0px 0px 1000px inset (:hover + :active)
  link-cta:
    type: button
    backgroundColor: transparent
    textColor: '#ffffff'
    rounded: 0px
    height: 24px
    typography: 18px / 400
    hover: 'underline #ffffff'
    use: 'Discover our solutions on the black hero — white text that underlines on hover while a green #5cfe50 ::before fades in.'
omitted:
  - section: spacing
    reason: No verified values in current evidence.
fonts:
  roles:
    sans: Poppins

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.

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 (), 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.”

More like Celonis

All brands designs →

Brand names describe the visual style only; coderef is not affiliated with or endorsed by any brand listed. Licenses