`@busflow/config-tailwind`

Global design tokens for the busflow design system. All consuming apps extend this base Tailwind configuration to inherit brand colors, typography, spacing, shadows, and transitions.

This package is the single source of truth for visual consistency across all six busflow applications.

Design Principles

Pragmatic — Every token solves a real problem. No decorative complexity.
Sovereign — Enterprise-grade stability. Predictable, robust interactions.
Seamless — Everything flows. No visual breaks between booking, dispatch, and driver.
Generous Whitespace — Reduce perceived complexity. Let content breathe.
Mobile-First — Driver PWA on a phone is as important as the dispatcher's 27" monitor.

Visual Identity

"Consumer-Grade" B2B identity replacing legacy "Windows-95-Charme" UIs:

Primary: Tiefes Navy Blue / Asphalt-Schwarz — Enterprise-Sicherheit, Seriosität.
Accent: Elektrisierendes „Flow Mint" / Neon Cyan — KI, Geschwindigkeit, Digitalisierung.
Whitespace: Großzügig — reduziert gefühlte Komplexität.
Typografie: Clean, modern, sans-serif (Inter). Lesbar auf mobilen Displays und großen Dashboards.
Bildsprache: Cleane UI-Mockups (Dark/Light Mode), dynamische Makroaufnahmen. Keine Stock-Fotos.

Reference Documents

[project-scope.md](file:///Users/julianbruning/Projekte/busflow/busflow/docs/2-areas/product/PRODUCT_project-scope.md) — Brand positioning, messaging
[frontend-architecture.md](file:///Users/julianbruning/Projekte/busflow/busflow/docs/2-areas/architecture/frontend.md) — Package boundaries, constraints
[guidelines.md](file:///Users/julianbruning/Projekte/busflow/busflow/docs/2-areas/process/guidelines.md) — Documentation standards

Color System

Primary Palette

Token	Role	Value	Rationale
`primary`	Navy / Asphalt — enterprise trust	`#1A2B3D`	"Enterprise-Sicherheit und Seriosität"
`primary-dark`	Deep backgrounds (CTA sections)	`#1B2F4B`	Dark-mode surfaces, CTA backgrounds
`accent`	Flow Mint — action, AI, speed	`#2E8B6E`	"KI, Geschwindigkeit, Digitalisierung"
`accent-hover`	Accent interaction state	`#257558`	Darkened accent for hover/active
`accent-light`	Accent tint for backgrounds	`#E8F5EF`	Subtle highlight behind accent elements
`accent-warm`	Warm CTA — urgency, conversion	`#E07C4A`	Secondary action color for conversion flows
`accent-warm-light`	Warm tint background	`#FFF3ED`	—

Background Surfaces

Token	Value	Usage
`bg-primary`	`#FFFFFF`	Default page background
`bg-surface-elevated`	`#F0F4F3`	Hero and feature sections
`bg-surface-sunken`	`#FAFBFA`	Alternating content sections
`bg-muted`	`#F5F5F0`	De-emphasized areas
`bg-brand`	`#1B2F4B`	Dark CTA blocks
`bg-card`	`#FFFFFF`	Card surfaces

Text Hierarchy

Token	Value	Usage
`text-primary`	`#1A2B3D`	Headings and body text
`text-secondary`	`#4A5B6D`	Subtitles, descriptions
`text-muted`	`#7A8A99`	Captions, helper text
`text-inverse`	`#FFFFFF`	Text on dark backgrounds
`text-inverse-muted`	`rgba(255,255,255,0.7)`	Secondary text on dark backgrounds

Semantic Colors

Token	Value	Usage
`success`	`#2E8B6E`	Confirmations, positive states
`danger`	`#C65D4A`	Errors, destructive actions
`warning`	TBD	Warnings, attention-needed states
`info`	TBD	Informational feedback

Borders

Token	Value	Usage
`border`	`#E5E7EB`	Default borders (inputs, cards)
`border-light`	`#F0F1F3`	Subtle separators

Dark Mode (Future)

Strategy for app-admin dark theme:

Token names stay; values switch via CSS custom properties or Tailwind dark: variants
Primary/accent hues stay consistent; luminance inverts
To be specified when app-admin theming is implemented

Theme Scopes

For the architectural reasoning behind this system, see design-system architecture.

CSS variables are scoped to .theme-* classes (not just :root), enabling context-aware theming at the layout/router level:

css

@layer base {
  :root {
    --background: 0 0% 100%;
    --primary: 222.2 47.4% 11.2%; /* Navy */
    --radius: 0.25rem;
  }

  .theme-passenger {
    --background: 48 33% 97%;     /* Alabaster */
    --primary: 153 37% 16%;       /* Forest Green */
    --radius: 0.5rem;             /* Soft */
  }

  .theme-dispatcher {
    --background: 210 40% 98%;    /* Slate off-white */
    --primary: 222.2 47.4% 11.2%; /* Deep Navy */
    --radius: 0.25rem;            /* Sharp */
  }

  .theme-driver {
    --background: 222 47% 5%;     /* Off-black */
    --primary: 217 91% 60%;       /* High-vis Blue */
    --radius: 0.375rem;           /* Tactile */
  }
}

Scope Comparison

Element	`.theme-passenger`	`.theme-dispatcher`	`.theme-driver`
Background	Alabaster (`#F9F7F1`)	Slate off-white	Off-black
Primary	Forest Green (`#1B3B2E`)	Deep Navy	High-vis Blue
Borders	Soft Stone, `8px` radius	Slate, `4px` radius	Rugged Gray, `6px` radius
Shadows	`shadow-soft-warm`	Minimal `shadow-sm`	None static; `shadow-tactile` on buttons
Transitions	`ease-in-out 300ms`	Snappy `150ms`	Snappy `150ms`

Typography

Font stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Per branding: "Clean, modern, sans-serif … auf mobilen Fahrer-Displays genauso gut lesbar wie auf dem großen Dashboard."

Size Scale

Token	Value	Usage
`text-xs`	`0.8125rem` (13px)	Labels, badges, overlines
`text-sm`	`0.9375rem` (15px)	Secondary body, captions
`text-base`	`1.0625rem` (17px)	Default body text
`text-lg`	`1.1875rem` (19px)	Subtitles, section descriptions
`text-xl`	`1.375rem` (22px)	Card headings
`text-2xl`	`1.75rem` (28px)	Section headings
`text-3xl`	`2.25rem` (36px)	Page section titles
`text-4xl`	`2.875rem` (46px)	Hero secondary
`text-5xl`	`3.5rem` (56px)	Hero primary

Responsive overrides (≤768px): text-5xl → 2.5rem, text-4xl → 2rem, text-3xl → 1.75rem

Weight Usage

Weight	Usage
`400`	Body text
`500`	UI labels, navigation
`600`	Buttons, section labels
`700`	Inverse buttons, strong emphasis
`800`	Section titles, hero headings

Line Heights

Context	Value
Body text	`1.7`
Headings	`1.2`
UI elements	`1.4`

Spacing Scale

Token	Value	Usage
`space-xs`	`0.25rem` (4px)	Inline gaps, icon padding
`space-sm`	`0.5rem` (8px)	Tight element spacing
`space-md`	`1rem` (16px)	Default component spacing
`space-lg`	`1.5rem` (24px)	Section label-to-title gap
`space-xl`	`2rem` (32px)	Container horizontal padding
`space-2xl`	`3rem` (48px)	Component group spacing
`space-3xl`	`4rem` (64px)	Between-section padding (mobile)
`space-4xl`	`5rem` (80px)	Section vertical padding (mobile)
`space-5xl`	`7rem` (112px)	Section vertical padding (desktop)

Border Radii

Token	Value	Usage
`radius-sm`	`6px`	Chips, tags
`radius-md`	`10px`	Buttons, inputs, cards
`radius-lg`	`14px`	Modals, large cards
`radius-xl`	`20px`	Feature panels
`radius-full`	`9999px`	Pills, avatars, badges

Shadows

Token	Value	Usage
`shadow-xs`	`0 1px 2px rgba(0,0,0,0.04)`	Inputs at rest
`shadow-sm`	`0 2px 8px rgba(0,0,0,0.06)`	Raised elements
`shadow-md`	`0 4px 20px rgba(0,0,0,0.08)`	Cards, dropdowns
`shadow-lg`	`0 8px 40px rgba(0,0,0,0.10)`	Modals, overlays
`shadow-card`	`0 1px 3px rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.06)`	Multi-layer card depth

Transitions

Token	Value	Usage
`transition-fast`	`150ms ease`	Micro-interactions (hover color)
`transition-base`	`250ms ease`	Standard interactions (button press)
`transition-slow`	`400ms cubic-bezier(0.16,1,0.3,1)`	Entrance animations

Getting Started

1. Add the dependency

json

// apps/<app-name>/package.json
{
  "dependencies": {
    "@busflow/config-tailwind": "workspace:*"
  }
}

2. Import the theme (Tailwind v4)

In your app's main CSS file, import the theme before Tailwind:

css

@import "@busflow/config-tailwind/theme";
@import "tailwindcss";

This makes all busflow tokens available as Tailwind utilities (e.g., bg-accent, text-primary, rounded-lg, shadow-card).

3. Load the Inter font

Add the Google Fonts link to your app's HTML head:

html

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />

Token Preview

A built-in visual token viewer replaces tailwind-config-viewer (which doesn't support Tailwind v4). Run:

bash

# From monorepo root
pnpm dev:tokens

# Or from the package directory
pnpm preview

Opens http://localhost:3333 with a live preview of all colors, typography, spacing, shadows, radii, buttons, and animations — using the actual theme tokens.

Migration Note

apps/landing/src/style.css contains CSS custom properties (:root variables) as interim tokens. When migrating:

Replace :root variables with Tailwind utility classes from this package
Custom button classes (.btn--*) → Button component from ui-core
Layout classes (.container, .section) → equivalent Tailwind utilities or components

Busflow Docs

Types

Src

`@busflow/config-tailwind`

Design Principles

Visual Identity

Reference Documents

Color System

Primary Palette

Background Surfaces

Text Hierarchy

Semantic Colors

Borders

Dark Mode (Future)

Theme Scopes

Scope Comparison

Typography

Size Scale

Weight Usage

Line Heights

Spacing Scale

Border Radii

Shadows

Transitions

Getting Started

1. Add the dependency

2. Import the theme (Tailwind v4)

3. Load the Inter font

Token Preview

Migration Note

Busflow Docs

@busflow/config-tailwind ​

Design Principles ​

Visual Identity ​

Reference Documents ​

Color System ​

Primary Palette ​

Background Surfaces ​

Text Hierarchy ​

Semantic Colors ​

Borders ​

Dark Mode (Future) ​

Theme Scopes ​

Scope Comparison ​

Typography ​

Size Scale ​

Weight Usage ​

Line Heights ​

Spacing Scale ​

Border Radii ​

Shadows ​

Transitions ​

Getting Started ​

1. Add the dependency ​

2. Import the theme (Tailwind v4) ​

3. Load the Inter font ​

Token Preview ​

Migration Note ​

`@busflow/config-tailwind`

Design Principles

Visual Identity

Reference Documents

Color System

Primary Palette

Background Surfaces

Text Hierarchy

Semantic Colors

Borders

Dark Mode (Future)

Theme Scopes

Scope Comparison

Typography

Size Scale

Weight Usage

Line Heights

Spacing Scale

Border Radii

Shadows

Transitions

Getting Started

1. Add the dependency

2. Import the theme (Tailwind v4)

3. Load the Inter font

Token Preview

Migration Note