Color Palette

Visual color reference for TOGETHER CCA brand and architecture diagrams.

Click to Copy

Click any color swatch to copy its hex value to clipboard.

---

Architecture Diagram Colors

Colors for system landscape and context diagrams. Each family has a 4-tier structure:

Tier	Use Case	Text Color
light	Container backgrounds	dark
base	Component fills	dark
medium	Vibrant fills, emphasis	BLACK
dark	Labels needing contrast	WHITE

TOGETHER (Orange)

light#FFF5E619.46:1 AAAdark text

base#FFC05612.93:1 AAAdark text

medium#FF99009.81:1 AAABLACK text

dark#A65F004.93:1 AAWHITE text

VU-Systeme (Green)

light#C8E3D015.35:1 AAAdark text

base#8ED4A212.09:1 AAAdark text

medium#69BA7A8.91:1 AAABLACK text

dark#2E7D425.09:1 AAWHITE text

Kundensysteme (Purple)

light#EEEAF517.72:1 AAAdark text

base#867FBB5.77:1 AAdark text

dark#5D56916.55:1 AAWHITE text

CCA (Blue)

light#E7F1F818.34:1 AAAdark text

base#54A3D77.60:1 AAAdark text

dark#0066B25.93:1 AAWHITE text

Neutral

light#EEEEEE18.10:1 AAAdark text

base#CCCCCC13.08:1 AAAdark text

medium#9999997.37:1 AAABLACK text

dark#6666665.74:1 AAWHITE text

---

Status Colors

For analysis diagrams highlighting quality, problems, or change status.

Success

base#9DE4B514.20:1 AAAdark text

medium#31AF5D7.42:1 AAABLACK text

dark#1E70386.12:1 AAWHITE text

Error

base#F5A3A310.65:1 AAAdark text

medium#E540405.14:1 AABLACK text

dark#B32D2D6.31:1 AAWHITE text

Warning

base#FAD97A15.27:1 AAAdark text

medium#F7C83D13.28:1 AAABLACK text

dark#8B69145.09:1 AAWHITE text

Info

light#E0F0FA18.01:1 AAAdark text

base#7FBAE110.01:1 AAAdark text

medium#4AA3D47.48:1 AAABLACK text

dark#0066B25.93:1 AAWHITE text

---

System Colors Quick Reference

Preview	Name	Variable	Hex	Contrast	Usage
	Kundensysteme	${kundensystem}	#867FBB	5.77:1 AA	External partners, DMS, CRM
	VU-Systeme	${vu}	#8ED4A2	12.09:1 AAA	Insurance company systems
	TOGETHER	${together}	#FFC056	12.93:1 AAA	TOGETHER platform
	CCA	${cca}	#54A3D7	7.60:1 AAA	CCA products
	Infrastruktur	${neutral}	#CCCCCC	13.08:1 AAA	Servers, network

---

Dark Tiers (White Text)

These colors are WCAG AA compliant for white text:

Preview	Name	Variable	Hex	Contrast	Usage
	TOGETHER dark	${together-dark}	#A65F00	4.93:1 AA	4.93:1 contrast
	VU dark	${vu-dark}	#2E7D42	5.09:1 AA	5.09:1 contrast
	Kundensystem dark	${kundensystem-dark}	#5D5691	6.55:1 AA	6.55:1 contrast
	CCA dark	${cca-dark}	#0066B2	5.93:1 AA	5.93:1 contrast
	Neutral dark	${neutral-dark}	#666666	5.74:1 AA	5.74:1 contrast
	Success dark	${success-dark}	#1E7038	6.12:1 AA	6.12:1 contrast
	Error dark	${error-dark}	#B32D2D	6.31:1 AA	6.31:1 contrast

---

Medium Tiers (Black Text)

Vibrant brand colors that need black text for contrast:

Preview	Name	Variable	Hex	Contrast	Usage
	TOGETHER medium	${together-medium}	#FF9900	9.81:1 AAA	9.81:1 contrast (AAA)
	VU medium	${vu-medium}	#69BA7A	8.91:1 AAA	8.91:1 contrast (AAA)
	Neutral medium	${neutral-medium}	#999999	7.37:1 AAA	7.37:1 contrast (AAA)
	Success medium	${success-medium}	#31AF5D	7.42:1 AAA	7.42:1 contrast (AAA)
	Error medium	${error-medium}	#E54040	5.14:1 AA	5.14:1 contrast (AA)

---

Primary Brand Colors

TOGETHER Orange Ramp

0#FFF2DF

3#FFCC80

5#FFB340

8#B87614

9#8A590F

00#FFF5E5

7 (base)#FF9900

CCA Blue Ramp

0#D6EDFF

3#59B7FF

5#0693FF

8#0E4F81

9#0B3B60

00#DEF1FF

7 (base)#0066B2

---

Entity Color Coding

Color coding for domain entities in CCA applications:

Preview	Name	Variable	Hex
	Person	--entity-person	#0066B2
	Vertrag	--entity-vertrag	#755AE8
	Schaden	--entity-schaden	#F7C83D
	Dokument	--entity-dokument	#31AF92
	Provision	--entity-provision	#30A3B8
	Risiko	--entity-risiko	#B64183
	Wiedervorlage	--entity-wiedervorlage	#94B938
	Geschaeftsfall	--entity-geschaeftsfall	#FF9900

---

Usage

D2 Diagrams

...@_colors.d2

box: "TOGETHER" {
  style.fill: ${together}
}

dark-box: "Service" {
  style.fill: ${together-dark}
  style.font-color: white
}

CSS Custom Properties

@import 'colors.css';

.element {
  background: var(--arch-together);
  color: var(--color-white);
}

JavaScript/TypeScript

import colors from './colors.json';
const primary = colors.categories.primary.colors['orange-peel'].base;

---

Files

File	Format	Usage
colors.json	JSON	Machine-readable UI colors
architecture.json	JSON	Architecture diagram colors
colors.css	CSS	CSS Custom Properties
_colors.d2	D2	D2 diagram variables
color-tiers-preview.html	HTML	Visual preview (standalone)