talkingHEADS Design System
Modern SaaS styleguide and visual playground for the complete talkingHEADS design system.
Section 2
Brand Colors
Core talkingHEADS colors used across the design system.
Primary Blue
#0E51A0
Accent Orange
#EA9413
Text
#707070
Background
#FFFFFF
Surface
#F8F9FB
Border
#E5E7EB
Section 3
Typography
Rubik for headlines and Roboto for body text, with calm gray text by default.
Rubik
Headline family
H1
H2
H3
Roboto
Body family
Body copy stays readable and understated. It never steals attention from the interface.
Small text is still calm, clear, and aligned to the system rules.
Muted text remains slightly softer but still within the gray family.
Section 4
Buttons
Orange is the default CTA. Blue stays reserved for brand-level actions.
Primary CTA
Orange, pill-shaped, strong hierarchy.
Secondary Blue
Blue action for brand-level secondary calls.
Outline
Transparent with primary border and text.
Ghost
Quiet action with no border.
Disabled
Button state
Section 5
Inputs
Inputs, textarea, select, checkbox, radio, and switch share the same control language.
Form Fields
Text input, select, textarea
Choice Controls
Checkbox, radio, switch
Section 6
Cards
White cards with radius, border, and very subtle shadows.
Standard Card
Neutral container
A calm content card with generous white space.
Feature Card
Highlight with orange accent only
Designed for product highlights and feature callouts.
KPI Card
Metric focused
248
Active leads this week
Info Card
Utility block
Smaller utility content stays understated and easy to scan.
Section 7
Badges
Small markers for status and navigation states.
Section 8
Table
A sample table with very light borders and gray text.
| Name | Firma | Status | Datum |
|---|---|---|---|
| Mia Becker | Nordlicht Media | Qualified | 05 Jul 2026 |
| Luca Weber | Studio Orbit | Contacted | 04 Jul 2026 |
| Sara König | Peak Commerce | New | 03 Jul 2026 |
| Noah Hartmann | Frame Digital | Won | 02 Jul 2026 |
Section 9
Sidebar Preview
Primary Blue sidebar with white navigation and orange active state.
Workspace
Sidebar preview area
Overview
Brand surfaces and layout blocks
The main content stays bright and spacious to preserve hierarchy.
Navigation
White text and icons on blue
Active navigation uses the orange accent without introducing extra color noise.
Section 10
Mini CRM Dashboard Preview
A compact CRM dashboard with KPI cards, recent leads, activity, and quick actions.
Open Leads
128
+12% vs last week
Demo Bookings
34
+7% vs last week
Pipeline Value
€248k
+18% vs last week
Reply Rate
46%
+4% vs last week
Recent Leads
Compact CRM table
| Name | Firma | Status | Datum |
|---|---|---|---|
| Mia Becker | Nordlicht Media | Qualified | 05 Jul 2026 |
| Luca Weber | Studio Orbit | Contacted | 04 Jul 2026 |
| Sara König | Peak Commerce | New | 03 Jul 2026 |
| Noah Hartmann | Frame Digital | Won | 02 Jul 2026 |
Activity Feed
Recent CRM activity
New lead from website
3 minutes ago
Demo confirmed with Studio Orbit
18 minutes ago
Proposal sent to Peak Commerce
1 hour ago
Follow-up task scheduled
3 hours ago
Quick Actions
Common CRM actions