Creditreform

Overview

Creditreform is Germany's premier provider of business intelligence, credit ratings, and debt collection solutions, serving enterprises that demand precision and trust. The design system embodies a "Professional Clarity" aesthetic—combining institutional gravitas with approachable digital modernity. The visual language prioritizes legibility and confidence: a vibrant cyan accent (#009ee3) cuts through a warm, neutral palette (Cararra beige #edece5 backgrounds, charcoal text #4c4c4c), creating focal points that guide users through complex financial workflows. The UI evokes a sense of security and competence, transforming data-heavy interfaces into navigable, human-centered experiences.

The brand voice is direct, authoritative, and solution-oriented. Creditreform speaks in the language of business: precise, outcome-focused, free of jargon when possible but never condescending. Tone examples: "Schema F is the most effective for your use case" (not "we think you might like"), "Your credit rating updates in real time" (not "we're always working on your data"). The vocabulary favors concrete nouns (Bonitätsprüfung, Forderungsmanagement, Wirtschaftsinformationen) and active verbs. Example sentence in brand voice: "Meine Creditreform gives you 24/7 access to credit reports—no delays, no surprises."

Colors

The color system is rooted in institutional trust and digital clarity. **Primary (#009ee3)** is the signature cyan accent—used exclusively on call-to-action buttons, active navigation states, and key interactive elements. It commands attention without aggression, evoking reliability and forward momentum. **Secondary (#4c4c4c)** is the dominant text color and structural element, providing the visual weight that anchors the interface. **Tertiary (#006eb7)** serves as a deeper accent for hover states and secondary CTAs, creating visual hierarchy without introducing new hues. **Error (#dc3545)** is reserved for validation failures and warnings, maintaining the Bootstrap convention for consistency with enterprise systems.

The surface stack is built on a warm, off-white foundation: **Surface (#

Typography

The type system pairs two distinct families to balance authority with accessibility. **Averta Std** (700 weight) is reserved for headlines, display text, and brand-critical moments—its geometric, modern letterforms convey precision and forward-thinking. **Open Sans** (weights 300, 400, 600) handles body copy, labels, and UI text, providing exceptional legibility at small sizes and a neutral, professional tone. The hierarchy spans six levels: **Display (56px, 700)** for hero statements; **Headline-lg (40px, 700)** for section titles; **Headline-md (32px, 700)** for subsections; **Title-lg (28px, 600)** for card headers; **Body-lg (18px, 400)** for feature descriptions; **Body-md (15px, 400)** for standard paragraph text; **Label-md (14px, 600)** for buttons and form labels; **Label-sm (12px

Layout

The layout system uses a 12-column grid with a max-width of 1140px, providing a fixed container that scales responsively down to mobile. The gutter width is 15px (padding-left and padding-right on each column), creating a 30px gap between columns. **Spacing is semantic and hierarchical**: use **lg (40px)** for major section separation (hero to content, content to footer); **md (24px)** for card padding and component spacing; **sm (12px)** for internal component spacing (button icon-to-text, form field margins); **xs (4px)** for micro-interactions (badge padding, tight label spacing). The page rhythm follows a 8px baseline grid, ensuring all measurements align to multiples of 8px for visual harmony. White-space is generous—never crowd elements. Cards and modals use {spacing.md} (24px) paddi

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color darkening. The elevation system uses three levels: **Level 1 (Base)**: no shadow; used for the page background and primary surfaces. **Level 2 (Standard Cards & Dropdowns)**: `box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)` — a soft, spread shadow that lifts content 4–8px above the background, used for cards, input fields, and standard modals. **Level 3 (Elevated Modals & Overlays)**: `box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5)` — a more pronounced shadow indicating maximum elevation, used for consent dialogs, lightboxes, and fl

Shapes

The shape philosophy is **"Institutional Softness"**—combining the sharp edges of corporate design with subtle rounding that humanizes the interface. **Buttons and CTAs** use {rounded.full} (50px border-radius), creating pill-shaped elements that feel modern and approachable while maintaining professional gravitas. **Cards and containers** use {rounded.DEFAULT} (0.5rem / 8px), a minimal rounding that suggests structure without softness. **Modals and elevated surfaces** use {rounded.lg} (1rem / 16px), providing slightly more visual softness for secondary content. **Input fields** use {rounded.D

Components

Action Elements **Button-primary** is the dominant call-to-action, using {colors.primary} (#009ee3) background with {colors.on-primary} (white) text. Dimensions: 44px height, 20px vertical padding, 25px horizontal padding, {rounded.full} (50px border-radius). Typography: {typography.label-md} (14px, 600 weight, but rendered at 300 weight per live DOM for a lighter feel). On hover, shift backgroundColor to #006eb7 (a 15% darkening) and maintain white text; transition over 150ms using `transition: background-color 150ms ease-out`. On active/focus, darken further to #004884. **Button-secondary** is a ghost variant: transparent background, {colors.primary} text, 2px solid border in {colors.primary}, same padding and height as primary. On hover, fill the background with {colors.primary-cont

Do's and Don'ts

**Do**

• Do use {colors.primary} (#009ee3) exclusively on CTAs, active states, and focus indicators—it's the brand's signature accent and must never be diluted or overused.
• Do maintain generous white-space: {spacing.lg} (40px) between sections, {spacing.md} (24px) inside cards. Dense layouts undermine the professional, trustworthy aesthetic.
• Do pair Averta Std (headlines) with Open Sans (body) consistently—never mix typefaces within a single component or section.
• Do apply {elevation.md} (`0 3px 8px rgba(0, 0, 0, 0.15)`) to all floating content (cards, dropdowns, modals) to create clear visual hierarchy without harsh shadows.
• Do use {rounded.full} (50px) exclusively on buttons and badges; use {rounded.DEFAULT} (8px) on cards and inputs to maintain the institutional-softness balance.

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no gradients, no transparency variations beyond the elevation system. Every color must reference a token.
• Don't apply shadows darker than {elevation.lg} or lighter than {elevation.sm}—the shadow system is calibrated for the warm Cararra background and will appear harsh or invisible if altered.
• Don't round corners on borders, dividers, or structural elements—only interactive and container components use rounding. Dividers must be 1px solid {colors.outline-variant}.
• Don't mix button styles within a single action group—if you need multiple CTAs, use button-primary for the dominant action and button-secondary for alternatives, never both primary styles.
• Don't use {colors.secondary} (#4c4c4c) for interactive elements—it's reserved for text and structure. All interactive elements must use {colors.primary} or {colors.tertiary}.