How consultingheads looks, sounds and is built — for agencies, partners, press and everyone designing something for us. The values on this page are binding; the machine-readable version of the design values is at /design-system.json.
Generated on 19.09.2026 from css/_tokens.css (sha256 c1816c9ee29b7e39…, 78 tokens) and the rule register (37 rows). This page is generated, not maintained by hand.
Who we are, what our names are, and which statements are substantiated.
The tagline reads „consultingheads. Wenn Ergebnisse entscheiden.“ and is used in its German wording in both languages; there is no approved English version. It sits on a line of its own and is never woven into running text. Logo and tagline are NEVER set as a single graphic — the tagline is text, otherwise it does not exist for search engines and screen readers.
consultingheads—one word, even at the beginning of a sentence. The company is called consultingheads GmbH. Not ConsultingHeads, not Consultingheads.
VISION: “We connect people to solve challenges.” MISSION STATEMENT: consultingheads places freelance management consultants, interim managers, and IT experts with companies, management consulting firms, and private equity firms—from strategy through implementation. Corporations, medium-sized enterprises, and scale-ups receive quality-assured profiles within 24–36 hours from a curated network of over 23,000 experts. SELF-IMAGE: “We live and breathe networking … We’re in the people business.” BACKGROUND: Founded in 2016 as a spin-off of the case interview community PrepLounge; spun off and sold to the current management in 2021. HEADQUARTERS: consultingheads GmbH, Borsigstr. 1, 51381 Leverkusen.
A network of 23,000 consultants, experts, and interim managers · 24–36 hours to access quality-assured profiles (identical in German and English) · 11 years of average professional experience · Founded in 2016, spun off in 2021. The network’s size is growing and is dated in press releases. If you find an older figure in a published release, leave it as is: press releases are dated documents and are not amended retroactively.
(1) Personal connections → People in the photos, no stock photo backgrounds; profile cards with real faces; “we” language instead of the passive voice. (2) Customer focus with passion → Every page ends with exactly ONE clear next step; one primary button per screen, not three. (3) Honesty, fairness, loyalty → Always cite sources and dates for figures; include the year for awards. (4) Fast, practical solutions → short sentences, short forms, visible response times; “24–36 hours” is the recurring theme. (5) Growth through partnership → references and case studies take precedence over advertising claims; customer logos as proof rather than decoration.
Four services, named exactly as they appear in the footer and main navigation—not renamed or abbreviated in any medium. (1) FREELANCE MANAGEMENT CONSULTANTS: Strategy, Concept Development, Transformation; in English, “freelance management consultants,” NOT “freelance consultants.” (2) IT AND SUBJECT-MATTER EXPERTS: Execution and Implementation, the largest section of the dynamic role pages. (3) INTERIM MANAGERS: Temporary leadership, bridging vacancies; in English: “interim managers.” (4) EXPERT TEAMS: Multiple profiles working as a well-coordinated team rather than as individual consultants; in English: “expert teams.”
Not candidates, not resources, not applicants. They are consultants, experts, Interim Managers—or heads.
German is the primary language; English appears under /en/. The English version is NOT a byproduct—company names, claims, and key figures apply equally there. Company names are not freely translated. German technical terms appear in the English text only where they are explained in the sentence. The body text of a published press release is not altered retroactively—it is a dated document.
Four forms, one clear space — and the colour follows the background.
WORD MARK (214×16 px) is the primary format: headers, footers, email headers, documents, ads—whenever there is sufficient horizontal space. PICTORIAL MARK (522×261) is used when the wordmark would be less than 100 px wide AND no solid area is desired: watermarks, bullet points, embossing. TILE (2048×2048, Mint, logo 86% of width, margin 7%) is the standard format for ALL square elements: social media profile pictures, schema.org logo, app tiles, favicons, directories. TILE WITH NAME TEXT only for explicit, individual cases where the brand would not be recognizable without surrounding text—not an equivalent alternative and never the default setting.
The primary variant for square spaces is the green rectangular tile featuring only the symbol. The combination of a figurative mark with a word mark below it is the exception. Geometry: Area mint-500, mark #212121 at 86% of the border width, border 7%. Files are available in resolutions ranging from 2048 to 64 px.
1× logo height of space all around — tied to the height so that the rule applies regardless of size or medium. MINIMUM WIDTHS: Screen header 160 px word mark · Footer 140 px · Email header 214 px · Narrow screen layout: starting at 32 px, use the figurative mark instead of the word mark · Print 30 mm word mark · Narrow print layout: 8 mm figurative mark.
On white and light-colored surfaces up to ink-100: Word mark in BLACK. On Mint #76FFA0: also BLACK (12.56:1). On ink-900/ink-950 and on photos: Word mark in WHITE. NEVER use the word mark in Mint — 1.27:1 on white; the brand-green lettering is called mint-700, and even then only if black is not an option.
Do not place it on a busy background without darkening it · do not place it inside a colored box · do not distort it · do not add shadows or outlines · do not reposition or recreate it · do not use the tile with the signature as the default · do not deliver the logo and tagline as a single graphic.
Awards are never centered, colored, or displayed larger than the consultingheads logo, and always include the year. Verified data: brand eins/Statista 2019, 2020, 2021, 2024, 2025, 2026 · F.A.Z. Institute Top Consultants 2026 · kununu Top Company 2023, 2024, 2025. kununu is part of the employer brand and is not included in customer communications.
Mint is the brand — and a surface colour, never a text colour.
--ch-mint-50#F0FFF51.03:1 on white · surface only--ch-mint-100#C3FFD11.13:1 on white · surface only--ch-mint-500#76FFA01.27:1 on white · surface only--ch-mint-700#16602D7.65:1 on white · text allowed--ch-mint-900#0A4F319.65:1 on white · text allowed--ch-ink-950#11111118.88:1 on white · text allowed--ch-ink-900#22222215.91:1 on white · text allowed--ch-ink-700#343A4011.51:1 on white · text allowed--ch-ink-600#494A528.81:1 on white · text allowed--ch-ink-500#71727A4.78:1 on white · text allowed--ch-ink-400#9DA5AE2.49:1 on white · surface only--ch-ink-300#CCCCCC1.61:1 on white · surface only--ch-ink-200#E4E4E41.27:1 on white · surface only--ch-ink-100#EAEAEA1.20:1 on white · surface only--ch-ink-50#F8FAFC1.05:1 on white · surface only--ch-surface#FFFFFF1.00:1 on white · surface only--ch-on-dark#FFFFFF1.00:1 on white · surface only--ch-success#4F7D244.89:1 on white · text allowed--ch-info#0270E04.78:1 on white · text allowed--ch-danger#F2545B3.39:1 on white · surface only--ch-danger-text#C8102E5.88:1 on white · text allowed| Token | Value | Use |
|---|---|---|
--ch-link | var(--ch-mint-700) = #16602D | link colour on light backgrounds |
--ch-link-hover | #003805 = #003805 | link on hover |
--ch-link-on-dark | var(--ch-mint-500) = #76FFA0 | link colour on dark backgrounds |
Contrast ratios calculated against #FFFFFF per WCAG 2.1, from the hex values in the token file.
mint-500 #76FFA0 on white has a contrast ratio of 1.27:1 and is unreadable as text—it also falls below the 3:1 threshold for graphics. Text and links use mint-700 #16602D (7.65:1 on white). On a dark background, mint-500 is used as the link color.
Allowed as text: ink-950, ink-900, ink-700, ink-600, and ink-500 #71727A (4.78:1 — barely AA). From ink-400 #9DA5AE (2.49:1) and below, never use as text; only for icons, decorative elements, borders, and separator lines. All values measured against white.
"danger" #F2545B achieves a contrast ratio of only 3.39:1 and is therefore limited to use as a background, icon, or large text. For error text, use "danger-text" #C8102E (5.88:1, AA).
The CMYK values for the design system are calculated conversions from sRGB. They are not final print values and must be confirmed on a proof before each print job. Mint #76FFA0 falls outside the CMYK color space.
For EVERY print job, the Lab values are provided, not CMYK values: CMYK depends on the paper and printing process, but Lab does not. The print shop calculates the profile for its machine based on these values. Lab (sRGB D65): mint-500 L 90.7 / a −57.6 / b 34.3 · mint-700 L 35.5 / a −34.6 / b 22.8 · mint-900 L 29.1 / a −28.5 / b 12.1 · mint-100 L 95.0 / a −27.6 / b 16.0 · mint-50 L 98.7 / a −6.7 / b 3.1 · ink-950 L 5.1 · ink-900 L 13.2 · ink-600 L 31.6 · ink-500 L 48.2.
mint-500 has a value of L 90.7 and a chroma of 67—it is both very light AND very colorful, which cannot be achieved in four-color printing: the lightest, most vivid process green comes close, with a value of around L 54 and a Delta E2000 of 27.5. Even within the standard range of spot colors, the next closest match has a Delta E2000 of 14.2. To put this in context: a value below 2 is considered practically identical, up to 5 is tolerable, and anything above that is considered a different color. For any print featuring mint as a solid color, a spot color from the neon or fluorescent range is required; the specific shade is selected from the color chart, not calculated.
One typeface, four weights, one scale — and one highlighting device.
| Level | Size | Line height | Weight |
|---|---|---|---|
| display | 56px | 1.05 | 600 |
| h1 | 44px | 1.15 | 600 |
| h2 | 34px | 1.2 | 600 |
| h3 | 28px | 1.3 | 600 |
| h4 | 24px | 1.35 | 600 |
| h5 | 20px | 1.4 | 600 |
| h6 | 18px | 1.45 | 500 |
| body-lg | 18px | 1.6 | 400 |
| body | 16px | 1.6 | 400 |
| small | 14px | 1.5 | 400 |
| xs | 12px | 1.4 | 500 |
Responsive: 768–991px h1 35px / h2 30px · up to 767px h1 30px / h2 28px / h4 20px. Line height 1.2 for headings, 1.6 for body text. Typeface: "Spline Sans", "Segoe UI", system-ui, -apple-system, sans-serif
Spline Sans, integrated into the theme as a web font. 400 Regular: body text, forms, table content. 500 Medium: buttons, navigation, H6, emphasis in body text. 600 SemiBold: H1 through H5 headings. 700 Bold: ONLY key figures and display sizes, used sparingly. Fallback stack: “Spline Sans,” “Segoe UI,” system-ui, sans-serif.
display 56px/1.05/600 · h1 44/1.15/600 · h2 34/1.2/600 · h3 28/1.3/600 · h4 24/1.35/600 · h5 20/1.4/600 · h6 18/1.45/500 · body-lg 18/1.6/400 · body 16/1.6/400 · small 14/1.5/400 · xs 12/1.4/500 with +0.08em tracking.
From 992px: h1 44 / h2 34 / h3 28 / h4 24 / h5 20 / h6 18. 768–991px: h1 35 / h2 30, everything else remains unchanged. Up to 767px: h1 30 / h2 28 / h4 20, everything else remains unchanged. H3, H5, and H6 do not change at any width. The base size remains 16px at ALL widths.
Important statements in headings are highlighted with the mint bar: linear-gradient(transparent 60%, mint-500 60%, mint-500 93%, transparent 93%). Only H1 and the tagline; not H2–H4; never in body text. The font remains Ink or white. At most one highlighted statement per screen or section—the effect is lost if the pattern is overused.
The name of a spacer token is its pixel value.
The name is the pixel value: --ch-sp-20 is 20px.
--ch-sp-44px--ch-sp-55px--ch-sp-88px--ch-sp-1010px--ch-sp-1212px--ch-sp-1515px--ch-sp-1616px--ch-sp-2020px--ch-sp-2424px--ch-sp-2525px--ch-sp-3030px--ch-sp-3232px--ch-sp-4040px--ch-sp-4848px--ch-sp-5050px--ch-sp-5656px--ch-sp-6060px--ch-sp-6464px--ch-sp-8080px--ch-sp-120120px--ch-radius-sm4px--ch-radius8px--ch-radius-lg16px--ch-radius-full999px--ch-container | 1240px |
--ch-gutter | 24px |
--ch-gutter-m | 16px |
--ch-bp-mobile | 477px |
--ch-bp-tablet | 768px |
radius-sm 4px for tags and small markers · radius 8px for buttons, input fields and cards (the default) · radius-lg 16px for large areas and image tiles · radius-full 999px for pills, avatars, and round control buttons. Any radius other than these four is considered an anomaly.
The content width of 1240px and section spacing of 40px are set in the CMS theme settings. Although they are also reflected as tokens, they are modified in the design editor. Additional grid dimensions: column spacing of 24px on desktop and 16px on mobile; breakpoints at 477px and 768px.
Many build variants are reduced to a few target forms. Rows marked as draft are not yet approved.
DEFINED STYLE for all buttons: border-radius 8px, padding 12px vertically and 24px horizontally, 1px border, font weight 500. FOUR VARIATIONS—that’s all there are: (1) PRIMARY — background mint-500, text ink-900, border 1px mint-500, hover mint-100. (2) SECONDARY — transparent, 1px border in ink-500, text in ink-900, hover background in ink-50. (3) DARK — background in ink-900, text in white; for image backgrounds and mint-colored backgrounds. (4) TEXT LINK BUTTON — no background, text mint-700, underlined on hover. The canonical class is .button. EXCEPTION: The round control buttons on the sliders have a border-radius of 50%; this is correct.
BASIC STYLE: White background, 1px border in ink-200, 8px radius, 24px inner spacing. No shadow when idle. HOVER only if the ENTIRE card is clickable: border set to ink-300, shadow set to shadow-md — otherwise, no hover effect at all. SIX VARIATIONS: Image card · Text card · Profile card · Reference card · Metrics card · List card. TITLE: H3 in 20px, not 28px. Same height in a row using `align-items:stretch`, never using fixed pixel heights.
FIELD: Border 1px ink-200, radius 8px, inner padding 12/16, font size 16px. FOCUS: Border mint-700 PLUS a 2px ring — never just a color change, otherwise the focus will be invisible to people with color vision deficiencies. LABEL: 14px, ink-600, ABOVE the field; a placeholder never replaces the label. ERROR: Text in danger-text, border in danger; the error text specifies what to do. REQUIRED FIELD: with the word “Required Field” or an asterisk along with a legend — never just highlighted in color.
ACCORDION: Header 18px/500, divider ink-200, icon on the right, rotates 180 degrees when opened. Area when opened ink-50, NOT Mint — Mint is reserved for actions, not states. TABS: Active tab with a 2px mint-500 underline and text in ink-900; inactive tab in ink-500. Goal: one accordion module, one tab module.
Three formats: (1) LOGO MARQUEE — loops continuously starting at nine entries; below that, a static row of chips. (2) CONTENT SLIDER — with visible arrows and dots; Arrows have a 44×44px click area, which is the minimum size for touch interaction. (3) REFERENCE SLIDER — for quotes and case studies. The round control buttons with a border-radius of 50% are the only exception to the 8px button style.
(1) HERO HOME PAGE — full width, graphic on the right, H1 44px, exactly one primary and one secondary button. (2) INTERNAL BANNER — for subpages, more compact, with a breadcrumb trail above it. (3) PROMOTIONAL BANNER — at the bottom of a page, ink-950 background with mint accent. PROHIBITED: Never place text over a photo without shading it. The minimum contrast requirement also applies to text over images.
BREADCRUMB: 14px ink-500, separator ›, the current node without a link. TABLE: Header ink-50 with ink-700 text, row separator ink-200, numbers right-aligned with tabular-nums. CHIP/TAG: Radius 999px, area ink-100, text ink-700, 12px. METRIC: Number 40px/700 in ink-900, label 14px ink-500 below it. Never use Mint as the number color on white.
Line icons, line weight 1.5 px on a 24-px grid, rounded ends, no fill. ONE set from ONE source—not three icon libraries side by side. Color ink-600 on a light background, white on a dark background; Mint only if the icon is placed within a mint-colored area; in that case, use ink-900. EXCEPTION: The checkmark is a branding element—a mint-colored checkmark on a dark circle. NEVER use an icon alone to convey meaning: every icon that conveys a function must have text next to it or an `aria-label`.
Two durations are enough: 150 ms for hover and focus, 300 ms for fade-in and fade-out, with an “ease-out” curve. The logo marquee runs continuously—continuous for nine or more entries, and as a static row of chips for fewer than nine. NEVER: Flashing, parallax across entire pages, autoplay videos with sound. All continuous motion pauses when “prefers-reduced-motion” is enabled.
People at work — and each image has alt text.
SO: People at work rather than posing; looking into the frame rather than at the camera · real work environments (meetings, workshops, construction sites, data centers) · uncluttered areas of the image where text or logos will be placed · aspect ratios: 3:2 for blogs and cards, 16:9 for hero images, 1:1 for social media, 4:5 for portrait-oriented feeds. NEVER: Handshakes, puzzle pieces, gears, light bulbs, and any other consulting clichés · A mint-colored filter over the entire image · Text in the image where it could simply be placed next to it · AI-generated images without labeling where they might be mistaken for real people.
WebP is the standard format. Dimensions: Hero Desktop 1280×648 · Hero Tile 1090×720 · Blog Featured Image 1216×810 · OG Card 1200×630. Every image needs alt text that describes the CONTENT, not the file name; for awards, include the year. Decorative graphics should have alt="" so that screen readers skip them.
All 78 design values on this page are available as a file in the W3C Design Tokens format — for Figma, for your own themes and for AI assistants.
The file carries a version stamp in its name, built from the checksum of the source file — the file name is itself the proof of which version it came from. The short link always points to the current version. Questions about the brand: contact us.