BÖSE Fahrzeugbau

Overview

BÖSE Fahrzeugbau is a precision industrial vehicle manufacturer specializing in modular beverage truck bodies and cargo systems since 1967. The brand embodies "Technical Pragmatism"—a design philosophy that prioritizes functional clarity, durability, and German engineering excellence over decorative flourish. The visual identity conveys reliability and industrial competence through a bold primary blue (#006eb7) paired with a technical yellow accent (#ffcb00), creating high-contrast, legible interfaces that communicate trust and professionalism. The UI evokes a sense of purposeful efficiency: every element serves a function, every color choice signals meaning, and every interaction feels deliberate and responsive.

The brand voice is direct, authoritative, and solution-focused. Vocabulary emphasizes precision ("Qualitätsaufbauten", "Überdach-Schwenkwandsystem"), reliability ("garantiert", "perfekt"), and customer partnership ("Ihre Anforderungen", "Ihren Fuhrpark"). Tone is never casual or playful—it is confident, knowledgeable, and respectful of the customer's operational needs. Example sentence in brand voice: "Das BÖSE OVERSIDER Überdach-Schwenkwandsystem garantiert die Erfüllung aller kundenspezifischen Anforderungen an Komfort, Sicherheit und Wirtschaftlichkeit."

Colors

The color system is anchored in a professional industrial palette with three strategic accent roles. Primary (#006eb7) is the dominant brand color, applied to CTAs, navigation highlights, hero sections, and interactive focus states—it communicates authority and trustworthiness. Secondary (#ffcb00) is a technical yellow used sparingly for badges, status indicators, and secondary highlights to create visual rhythm without overwhelming the interface. Tertiary (#0d6efd) provides a cooler alternative for informational elements and secondary actions. The neutral foundation uses a warm-white surface (#ffffff) with carefully calibrated grays: surface-container (#e9ecef) for subtle backgrounds, outline (#6c757d) for borders and dividers, and on-surface (#002235) for body text. Error states use #dc3

Typography

The type system pairs Barlow Condensed for headlines and Schibsted Grotesk for body text, creating a distinctive contrast between technical precision (condensed, geometric headlines) and approachable clarity (humanist body text). Barlow Condensed at 700 weight conveys engineering rigor and confidence; Schibsted Grotesk at 400 weight ensures readability at 18px body size. Display (56px, 700, -0.02em letter-spacing) is reserved for hero statements and major page titles. Headline-lg (38px, 700) anchors section introductions and product names. Headline-md (28px, 700) breaks up content into digestible chunks. Title-lg (20px, 600) labels subsections and card headers. Body-lg (18px, 400) is the primary reading size for descriptions and long-form content; maintain 28px line-height for comfortable

Layout

The layout system uses a 12-column grid with a maximum container width of 1420px, allowing flexible content scaling from mobile (single column) to desktop (multi-column layouts). The gutter spacing is consistently 24px (md spacing token), creating predictable rhythm across all breakpoints. Hero sections and full-width blocks extend edge-to-edge, while content containers maintain 24px horizontal padding on mobile and 40px (lg spacing) on desktop. Section separation uses lg spacing (40px) for major content breaks and md spacing (24px) for minor subsections. The white-space philosophy prioritizes clarity: generous vertical rhythm (40px between sections) prevents cognitive overload, while tight horizontal spacing (12px between inline elements) maintains visual cohesion. Cards and containers us

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (Base): flat surfaces with no shadow, used for primary content areas and the page background (white, #ffffff). Level 2 (Elevated Cards): box-shadow: 0 3px 8px rgba(0, 34, 53, 0.15) applied to cards, modals, and interactive containers; this creates a gentle lift suggesting interactivity without visual heaviness. Level 3 (Hover/Active): box-shadow: 0 0.5rem 1rem rgba(0, 34, 53, 0.15) applied on hover or focus states, deepening the shadow by ~33% to signal state change. Modal overlays use a semi-trans

Shapes

The shape philosophy is "Functional Geometry"—rounded corners are applied strategically to soften technical interfaces without introducing organic or playful aesthetics. Buttons and primary interactive elements use rounded: DEFAULT (8px) for a balanced, approachable feel that is neither sharp nor overly rounded. Cards and containers use rounded: lg (16px) to create visual distinction from buttons while maintaining geometric clarity. Input fields use rounded: DEFAULT (8px) to align with button styling and improve touch-target perception. Badges and small UI elements use rounded: full (9999px) f

Components

Action Elements Buttons are the primary interaction mechanism and must communicate hierarchy clearly. Primary buttons (button-primary) use backgroundColor: {colors.primary} (#006eb7), textColor: {colors.on-primary} (white), padding: 16px 24px, height: 48px, rounded: {rounded.DEFAULT} (8px), and boxShadow: 0 3px 8px rgba(0, 34, 53, 0.15). On hover (button-primary-hover), shift backgroundColor to {colors.primary-container} (#0045a5) and increase boxShadow to 0 0.5rem 1rem rgba(0, 34, 53, 0.15). Active state (button-primary-active) darkens to #004a8a. Secondary buttons use transparent background with a 2px solid border in primary color, allowing them to sit alongside primary buttons without visual dominance. All buttons use typography: {typography.label-md} (14px, 600) and must include a

Do's and Don'ts

**Do**

• Do use primary (#006eb7) exclusively for CTAs, focus states, and brand-critical interactive elements—it is the signature accent and must not be diluted across non-essential UI.
• Do maintain 48px minimum height for all touch targets (buttons, inputs, list items) to ensure accessibility and reduce interaction errors on mobile devices.
• Do apply md spacing (24px) as the default gutter between sections and lg spacing (40px) for major content breaks to create predictable, scannable rhythm.
• Do use Barlow Condensed (700 weight) for all headlines and Schibsted Grotesk (400 weight) for body text—this pairing is non-negotiable and defines the brand's technical-yet-approachable voice.
• Do pair primary buttons with secondary buttons in forms and multi-action scenarios to establish clear hierarchy and guide user intent.
• Do apply subtle shadows (0 3px 8px rgba(0, 34, 53, 0.15)) to cards and containers rather than relying on borders alone; shadows create depth without visual clutter.

**Don't**

• Don't use secondary (#ffcb00) on large surfaces, body text, or CTAs—it is a technical accent for badges and status indicators only, and overuse dilutes its signal value.
• Don't apply border-radius values between 1–3px or exceed 24px on standard components; use the defined scale (4px, 8px, 12px, 16px, 9999px) to maintain geometric consistency.
• Don't use font weights outside the 400–700 range or apply letter-spacing beyond ±0.02em; the type system is tightly calibrated for technical clarity and must not be customized.
• Don't mix Barlow Condensed and Schibsted Grotesk within a single text block or use system fonts as fallbacks; always specify the full font stack to preserve brand identity.
• Don't apply multiple layered shadows or blur effects exceeding 8px; the aesthetic prioritizes clarity and precision, and excessive depth creates visual confusion.
• Don't use color alone to communicate state or meaning—always pair color changes with text labels, icons, or spatial shifts to ensure accessibility for color-blind users.