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 22.09.2026 from css/_tokens.css (sha256 c1816c9ee29b7e39…, 78 tokens) and the rule register (40 rows, pulled 2026-09-22, seal 043b2d36c3cb3716…). This page is generated, not maintained by hand.
Who we are, what our names are, and which statements are substantiated.
The tagline reads “consultingheads. When results matter.” It sits on a line of its own and is never woven into running text; the company name is the main clause, the tagline the subordinate one, so wordmark and tagline always stand together. It is used once per document, not repeated. 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.
consultingheads (not ConsultingHeads, not Consultingheads) — the word mark is lower case throughout. freelance management consultants (not freelance consultants) across the entire English tree; the German house name is freiberufliche Unternehmensberater. Experts and consultants (not staff, not resources, not manpower) — this is a people business, people rather than units. Network (not database, not pool) — the network is curated, not searched. Quality-assured profiles (not vetted CVs) — the wording comes from the entity sentence.
German numbers take a full stop as the thousands separator (23.000), an en dash for ranges (24–36) and a narrow space before the per cent sign; in English it is 23,000. Active and specific: “We deliver profiles within 24 to 36 hours” instead of “Profiles are provided promptly”. NEVER: overly casual language, slang, or a lightness of tone that undermines seriousness. NEVER: passive or impersonal constructions.
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 color 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 color, never a text color.
--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 color on light backgrounds |
--ch-link-hover | #003805 = #003805 | link on hover |
--ch-link-on-dark | var(--ch-mint-500) = #76FFA0 | link color 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.2 | 600 |
| h1 | 44px | 1.2 | 600 |
| h2 | 34px | 1.2 | 600 |
| h3 | 28px | 1.2 | 600 |
| h4 | 24px | 1.2 | 600 |
| h5 | 20px | 1.2 | 600 |
| h6 | 18px | 1.2 | 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/600 · h1 44/600 · h2 34/600 · h3 28/600 · h4 24/600 · h5 20/600 · h6 18/500 · body-lg 18/400 · body 16/400 · small 14/400 · xs 12/500 with +0.08em tracking. LINE HEIGHT: 1.2 for ALL heading levels, 1.6 for body text, 1.5 for small, 1.4 for xs — there is no line height tiered per level. The sizes are tokens in the token file; the weight per level is given in this rule only. The 56px display level does not occur anywhere on the site.
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 / h3 24 / h4 20, everything else remains unchanged. H5 and H6 do not change at any width. The base size remains 16px at ALL widths.
The subtitle field above a heading (eyebrow) carries a LABEL, not a sentence: no more than three words, no full stop at the end. It is set in capitals — 14px, line height 1.2, 16px spacing to the heading. Why the length limit: capitals are the house form and carry a short label such as “FAQ” with ease; a whole sentence in capitals takes the word shape away from the eye and reads as shouting. If you want to say more than three words, put it in the heading or in the body text, not in the subtitle.
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. NAMED EXCEPTION: a row of key figures counts as ONE statement — a set of equally ranked figures that only together form a piece of evidence may be highlighted throughout; all of them or none, at most four per section.
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 — binding for every new page and module.
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 20px/500 (18px on mobile), ink-200 divider beneath each entry, no line beneath the last one, spacing 16px, icon on the right, rotating 90 degrees when opened. The opened answer gets NO surface and NO border — it sits indented 32px below the question, with 16px padding above and 24px below. Mint stays reserved for actions, not for states. TABS: active tab with a 2px mint-500 underline and text in ink-900, inactive in ink-500. There is exactly ONE accordion module; the accordion slider remains a slider form of its own, and the tab modules are reviewed individually because they do different jobs.
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`. SCOPE: binding for every new icon — the existing stock is counted first, before any existing icon is replaced.
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.
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: info@consultingheads.com.