Arveum Intelligence — Design SystemDESIGN.md alpha

Claim: Hire Intelligence. Not Tools.

Konzept: SENS — KI-Agenten als natürliche, warme Erweiterung menschlicher Fähigkeit. Keine Tool-Ästhetik, kein steriles AI-Weiß. Wärme, Tiefe, Persönlichkeit.

Tonalität visuell: Editorial. Selbstbewusst. Human-first. Dunkel wo nötig, hell wo lesbar.

---

### 2.1 Semantische Tokens (primäre Verwendung)

| Token | Hex | Verwendung |

|-------|-----|------------|

| brand | #aa3d55 | Primärfarbe — Buttons, Labels, Akzente |

| brandHover | #d15878 | Hover-State auf Brand-Elementen |

| brandActive | #8b2c44 | Active/Pressed-State |

| bgPage | #eceae3 | Standard-Seitenhintergrund (Cream) |

| bgSurface | #ffffff | Cards, Overlays auf hellem BG |

| bgInverse | #242428 | Dunkle Sektionen (Problem, Produkt) |

| bgAccent | #5a6d4d | Akzent-BG (grün, Solution-Section) |

| textPrimary | #242428 | Haupttext auf hellem Hintergrund |

| textSecondary | #a2998d | Sekundärtext, Captions, Labels |

| textOnDark | #eceae3 | Text auf dunklen/inversen Flächen |

| textOnAccent | #eceae3 | Text auf Akzent-Flächen (grün) |

| border | #edeae4 | Trennlinien, Rahmen |

| focusRing | #aa3c54 | Keyboard-Focus-Indikator |

| info | #9acad8 | Info-Status, Sky-Akzent |

| success | #c7e0b8 | Success-Status, Sage-Akzent |

### 2.2 Badge-Tokens

| Token | Hex | |

|-------|-----|-|

| badgeCrimson | #aa3d55 | Brand-Badge |

| badgeSky | #9acad8 | Info-Badge |

| badgeSage | #c7e0b8 | Success/Neutral-Badge |

| badgeTaupe | #edeae4 | Default/Neutral-Badge |

### 2.3 Crimson-Skala

| Token | Hex |

|-------|-----|

| colorCrimson300 | #d15978 |

| colorCrimson500 | #aa3d55 |

| colorCrimson700 | #8c2d44 |

| colorCrimson800 | #6b0e2d |

| colorCrimson900 | #470520 |

### 2.4 Cream-Skala

| Token | Hex |

|-------|-----|

| colorCream100 | #edeae4 |

| colorCream200 | #e0dbd1 |

| colorCream300 | #ccc6ba |

| colorCream400 | #bcb5aa |

| colorCream600 | #a3998d |

### 2.5 Sky-Skala

| Token | Hex |

|-------|-----|

| colorSky100 | #e9f0f2 |

| colorSky300 | #d8e6ea |

| colorSky400 | #c0dce2 |

| colorSky500 | #9acad8 |

| colorSky600 | #7fa4ad |

| colorSky700 | #5a7a82 |

| colorSky900 | #234249 |

### 2.6 Green-Skala

| Token | Hex |

|-------|-----|

| colorGreen100 | #f4f7f2 |

| colorGreen300 | #e7efe1 |

| colorGreen500 | #d8e5cc |

| colorGreen700 | #a9c199 |

| colorGreen800 | #5b6d4e |

| colorGreen900 | #343d2d |

### 2.7 Charcoal-Skala

| Token | Hex |

|-------|-----|

| colorCharcoal | #252528 |

| colorCharcoal100 | #777777 |

| colorCharcoal300 | #616163 |

| colorCharcoal500 | #525254 |

| colorCharcoal700 | #464649 |

| colorCharcoal900 | #3c3c3f |

| colorCharcoal1100 | #303033 |

### 2.8 Overlay / Gradient-Tokens (Orb & Dark-Section-Verläufe)

| Token | Hex + Opacity | Verwendung |

|-------|---------------|------------|

| colorRose1586 | #46051f @ 86% | Tiefer Rose-Dunkel für Helden-Overlay |

| colorRose2466 | #6b0e2c @ 66% | Mittlere Rose-Dunkel-Ebene |

| colorRose3650 | #8b2c44 @ 50% | Hellere Rose-Ebene, 50% |

| colorRose5842 | #d15878 @ 42% | Heller Orb-Glow, subtil |

| colorRose580 | #d15878 @ 0% | Transparent-Ende für Orb-Verlauf |

| colorRose982 | #1c1418 @ 82% | Sehr dunkle Rose-Overlay |

| colorRose962 | #1c1418 @ 62% | Mittel-dunkle Rose-Overlay |

| colorRose934 | #1c1418 @ 34% | Leichte dunkle Rose-Overlay |

| colorGrey1560 | #242428 @ 60% | Dunkel-Overlay auf Fotos |

| colorGrey9182 | #efefef @ 82% | Helles Overlay |

| colorBlack0 | #000000 @ 0% | Transparent-Schwarz |

---

| Sektion | BG-Token | Text-Token | Akzent |

|---------|----------|-----------|--------|

| Header/Nav | bgPage | textPrimary | brand |

| Hero | colorCrimson800–colorCrimson900 + Orb-Overlay | textOnDark | White |

| PURPOSE | bgPage | textPrimary | brand |

| PROBLEM | bgInverse | textOnDark | colorSky500 |

| SOLUTION | bgAccent (gedimmt) | textOnDark | White |

| IM PRODUKT | bgPage | textPrimary | — |

| WHY NOW | bgPage | textPrimary | brand |

| Testimonial | Foto + colorGrey1560 Overlay | textOnDark | White |

| MARKET | bgPage | textPrimary | brand |

| PRODUKT-Steps | bgInverse | textOnDark | White |

| TRACTION | bgPage | textPrimary | — |

| TEAM | Foto-BG warm | textOnDark | — |

| Vision/CTA | colorCrimson800 | textOnDark | White |

| Footer | bgInverse | textSecondary | — |

---

### Schriftfamilien

| Rolle | Familie | Charakter |

|-------|---------|-----------|

| Font 1 — Display / Headlines | [Crimson Pro](https://fonts.google.com/specimen/Crimson+Pro) | Humanistische Antiqua, hoher Kontrast, elegant-editorial. Bold Italic für Hero-Headlines. |

| Font 2 — UI / Body | [Karla](https://fonts.google.com/specimen/Karla) | Groteskschrift, freundlich, sehr lesbar. Für Body-Text, Labels, Navigation, Buttons. |

Zusammenspiel: Crimson Pro trägt die emotionale Schlagkraft der Headlines (SENS-Kernidee: Wärme + Prestige). Karla hält UI und Fließtext klar und zugänglich ohne sterile Tech-Kälte.

### Hierarchie

| Rolle | Familie | Stil | Größe Desktop | Gewicht | Notizen |

|-------|---------|------|--------------|---------|---------|

| Display / Hero | Crimson Pro | Bold Italic | ~64–80px | 700 | "Hire Intelligence. Not Tools." |

| H1 Section | Crimson Pro | Bold | 40–52px | 700 | Section-Hauptheadlines |

| H2 Sub | Crimson Pro | Regular / Italic | 28–36px | 400 | Ergänzende Headlines |

| Section-Label | Karla | Uppercase, Tracking+ | 10–12px | 500 | "01 PURPOSE" — brand-Farbe |

| Body | Karla | Regular | 16–18px | 400 | Fließtext |

| Caption / Meta | Karla | Regular | 12–14px | 400 | textSecondary |

| Stat / Number | Crimson Pro | Bold | 40–56px | 700 | "12k+", "3.4×", "98%" |

| CTA Button | Karla | Medium | 14–16px | 500 | |

| Nav Links | Karla | Regular | 14–16px | 400 | |

---

### Bestandteile

• Wordmark: arveum — Lowercase, clean

• Icon/Mark: Kreisförmige Punkte/Nodes (Netzwerk-Metapher). Hell auf Crimson-BG.

• Kombination: Icon links + Wordmark rechts

### Varianten

| Variante | Verwendung |

|----------|-----------|

| Wordmark hell auf dunkel | Hero, Footer, dunkle Sektionen |

| Wordmark dunkel auf hell | Header/Nav auf bgPage |

| Icon solo | Favicon, App-Icon, Social Avatar |

---

### Orb / Sphere

Weiche, glühende Sphäre (Verlauf: colorRose5842 → colorRose3650 → colorRose580 transparent). Metapher für emergente Intelligenz. Erscheint im Hero als atmosphärisches Hintergrundlayer.

### Dot-Matrix / Node-Pattern

Anordnungen von Punkten — geordnet (Logo-Mark) bis organisch gestreut. Als Hintergrundtextur, Divider, Infografik-Basis verwendbar.

### Donut-Shape

Konzentrische Kreise mit Crimson-Außenring + Pink-Center. Haupteinsatz: TAM/SAM/SOM-Visualisierung. Wiedererkennbarer Brand-Shape.

### Fotografie

• Reale Menschen, kein Stock-Look

• Warme, natürliche Lichtsituationen

• Personen nachdenkend oder in Aktion — kein direktes Posieren

• Hintergrund: Büro, Stadtarchitektur, Innenraum warm

---

### Desktop

• Max-Width: ~1280–1440px

• Seitenränder: ~80–120px

• Grid: 12-spaltig implizit; Sektionen 2–3 Spalten für Content-Splits

• Sektion-Padding: ~80–120px vertikal

### Mobile

• Viewport: ~375–430px

• Seitenränder: 20–24px

• Stack: Alle Spalten → 1 Spalte

• Sektion-Padding: ~48–64px vertikal

---

### Buttons

| Variante | BG | Text | Border | Verwendung |

|----------|----|------|--------|-----------|

| Primary Filled | brand | White | — | Haupt-CTA hell |

| Primary Outlined | Transparent | brand | brand | Sekundär-CTA hell |

| Ghost Light | Transparent | White | White | CTA in Crimson/Dark-Sections |

Hover: brandHover (#d15878) · Active: brandActive (#8b2c44)

### Section-Label

Uppercase, weites Tracking, 10–12px, brand-Farbe. Über jeder Section-Headline.

### Stat-Card

Große Zahl (Bold ~48px) + Label (12px, textSecondary). Ohne Rahmen, durch Whitespace getrennt. In 2–3er-Gruppen.

### Feature-Card

Outline-Icon (~24px) + Headline + Kurzbeschreibung. 4er-Grid (WHY NOW). bgPage-BG oder ohne Hintergrund.

### Market-Size-Karte

bgInverse oder Crimson-BG, Währungswert groß/bold, darunter "TAM"/"SAM"/"SOM" + Langform. 3er-Gruppe.

### Produkt-Step

Nummerierung (01/02/03) + Schritt-Name H2 + Beschreibung. Linear auf bgInverse.

### Testimonial

Großes Anführungszeichen-Zitat (Display, kursiv), Name + Rolle darunter. Auf Foto-Overlay.

### Team-Card

Quadratisch/rund Foto + Name (Bold) + Rolle (Regular, textSecondary).

---

| # | Sektion | BG | Kern-Aussage |

|---|---------|-----|-------------|

| — | Header/Nav | bgPage | arveum + Navigation + "Demo anfragen" |

| — | Hero | Crimson + Orb | "Hire Intelligence. Not Tools." |

| 01 | PURPOSE | bgPage | "Wir geben jedem Unternehmen einen Recruiting-Kollegen, der niemals schläft." |

| 02 | PROBLEM | bgInverse | "Screening ist kaputt — und alle wissen es." · 72% / 48% |

| 03 | SOLUTION | bgAccent | "Clara führt das Erstinterview. In über 50 Sprachen." · 70% |

| — | IM PRODUKT | bgPage | "Sieh Clara bei der Arbeit." — Tablet-Mockup |

| 04 | WHY NOW | bgPage | "Vier Kräfte treffen aufeinander." — Permanent Memory · 50+ Sprachen · Integriert · EU compliance |

| — | Testimonial | Foto-Dark | "Tools warten auf Befehle. Intelligenz ergreift die Initiative." |

| 05 | MARKET | bgPage | "Ein Markt, der gerade erst aufwacht." — TAM €84B / SAM €21B / SOM €3.4B |

| 06 | PRODUKT | bgInverse | "Drei Schritte: Interview · Extraktion · Entscheidung" |

| 07 | TRACTION | bgPage | 12k+ · 3.4× · 98% |

| 08 | TEAM | Foto-Warm | "Gebaut von Menschen, die Recruiting geliebt haben." — Philipp Montgelas · Albrecht von Senden |

| — | Vision/CTA | Crimson | "Statt Intelligenz ein. Nicht noch ein Tool." |

| — | Footer | bgInverse | Links / Legal |

---

• Übergänge: Organisch, morphend — kein mechanisches Snap

• Scroll-Reveal: Fade + leichte Y-Verschiebung. Kein abruptes Pop.

• Orb-Animation: Pulsierend/atmend, sehr subtil

• Hover: scale(1.02–1.04) oder Opacity-Shift

• Timing: ease-out standard · Mikro-Interaktionen 200–400ms

---

• [ ] Responsive Breakpoints Tablet (~768px) definieren

• [ ] Icon-Set finalisieren (Stroke-Stärke, Stil)

• [ ] Agent-Name auf Website: SOMA oder CLARA?

• [ ] Animierter Orb: CSS/SVG oder Lottie?

• [ ] Accessibility: brand (#aa3d55) auf bgPage (#eceae3) — Kontrast-Check WCAG AA

• [ ] Foto-Direktive Team-Section: neue Fotos oder bestehende?

---

• [[00-konzeptrichtung-sens|Konzeptrichtung SENS]]

• [[website-narrative-v1|Website Narrative v1]]

• [[website-wireframe-v3.html|Wireframe v3]]

• Figma: [Desktop-mobile](https://www.figma.com/design/HXBVS5OUf21rmPyZoxRm1T/Desktop-mobile)