This analysis examines the visual design system of CLdN (Cobelfret Lines / CLdN Logistics), a European specialist in short sea shipping, multimodal transport, and automotive logistics. The CLdN website presents a mature B2B design language built on restraint, professionalism, and clarity — characteristics well-suited as a reference system for the PAI presentation platform.
Color Palette
CLdN employs a tightly controlled palette anchored in deep navy blue, with a gold/amber accent that signals premium quality without overt luxury. The palette conveys stability, trust, and maritime authority — consistent with the company's 90+ years of logistics heritage. The background remains predominantly white with light neutral tones, keeping visual weight on content rather than decoration.
| Color Name | Approximate Hex | Usage |
|---|---|---|
| Primary Navy | #1B3F6E |
Navigation, hero sections, footer, headings |
| Navy Dark | #132E52 |
Hover states, depth accents, footer depth |
| Gold Accent | #C9A227 |
CTAs, highlights, hover accents, borders |
| Gold Light | #F0C040 |
Gold hover states, icon fills |
| Charcoal | #2D3748 |
Body text, card titles, primary content text |
| Gray 700 | #4A5568 |
Secondary text, descriptions, card body copy |
| Gray 500 | #718096 |
Meta text, dates, timestamps, labels |
| Light Background | #F7F9FC |
Page background, alternate row fills |
| White | #FFFFFF |
Card surfaces, modal backgrounds |
| Border Subtle | #E2E8F0 |
Dividers, card outlines, table row borders |
"The pairing of deep navy and warm gold is a classic B2B formula — navy anchors authority while gold provides warmth and aspirational quality without tipping into consumer luxury territory."
Typography
CLdN uses a custom display typeface identified in their CSS as
cldn-title for headings. This custom font exhibits characteristics
consistent with geometric sans-serif display typefaces — high x-height, tight
letter-spacing, and strong weight contrast between light and bold variants.
For the PAI platform, Raleway was selected as the closest
Google Fonts match based on its geometric construction, distinctive uppercase
letterforms, and wide weight range (400–900).
Type Scale
| Level | Font | Size | Weight | Usage |
|---|---|---|---|---|
| Hero H1 | Raleway | clamp(2rem → 3.25rem) | 800 | Hero section primary headline |
| Page Title | Raleway | clamp(1.75rem → 2.75rem) | 800 | Deliverable page header title |
| H2 Section | Raleway | 1.5rem (24px) | 700 | Content section headings |
| H3 Sub | Raleway | 1.15rem (18.4px) | 700 | Sub-section headings |
| Card Title | Raleway | 17px | 700 | Card component titles |
| Body | Inter | 16px | 400 | Content paragraphs |
| Small / Meta | Inter | 12–13px | 500 | Dates, labels, meta information |
| Code | SF Mono / Fira Code | 13.5px | 400 | Code blocks and inline code |
Inter was selected for body text due to its optical precision at screen sizes, its wide language support, and its visual compatibility with Raleway's geometric construction. Together they create a clear hierarchy: Raleway commands attention in headings, Inter delivers clarity in reading.
Layout System
CLdN's layout is built on a standard 12-column responsive grid using what appears to be Tailwind CSS utility classes. The overall container is max-width constrained (~1280px) with responsive horizontal padding. Key layout patterns observed across the site:
- Hero carousel — full-width imagery with overlaid text and CTA
- Card grids — 5 columns on XL, stepping down to 3, 2, 1 on smaller breakpoints
- Two-column feature layouts — image left or right, text opposite, equal or 40/60 split
- Stats strips — full-width navy bar with animated counter numbers in gold
- Three-column footer — links organized by topic area
Spacing Grid
Spacing follows an 8px base unit system — a standard industry pattern that creates visual rhythm without requiring micro-adjustments. Common spacings observed: 8px (tight), 16px (standard), 24px (comfortable), 32px (section padding), 48–80px (major section gaps).
Key Design Principles
Analysis of CLdN's design language reveals four core principles that underpin every design decision on the site:
1. Authority Through Restraint
The palette is narrow by design. Two primary colors, two font families, consistent spacing. This restraint communicates confidence — the brand doesn't need to shout because its heritage speaks for itself.
2. Content as Navigation
CLdN's card-heavy layouts make browsing feel like natural content discovery rather than menu navigation. Cards are the primary wayfinding mechanism, with the nav serving as a secondary system.
3. Gold as Trust Signal
Gold/amber is used with deliberate scarcity — on CTAs, hover states, and key numbers. This scarcity creates a Pavlovian association: when users see gold, they know to pay attention. Overusing it would destroy the effect.
4. Hierarchy Through Scale
Rather than using many different colors to signal importance, CLdN uses scale, weight, and spacing. The hierarchy is felt through contrast of large-to-small type and tight-to-loose spacing.
"Good B2B design rarely wins awards. It wins trust. The CLdN design system is a masterclass in using visual conservatism as a competitive signal — communicating 'we have been doing this for 90 years' without saying a word."
Implementation in PAI
The PAI presentation platform adopts this design language with the following direct mappings. The CSS custom properties below form the foundation of the system:
/* PAI Design System — CLdN-Inspired */
:root {
/* Primary Colors */
--color-navy: #1B3F6E; /* CLdN primary blue */
--color-gold: #C9A227; /* CLdN gold accent */
--color-charcoal: #2D3748; /* Body text */
--color-bg: #F7F9FC; /* Page background */
/* Typography */
--font-heading: 'Raleway', 'Segoe UI', system-ui, sans-serif;
--font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
/* Base spacing unit: 4px (×2 = 8px system) */
--space-2: 8px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
}Conclusion
The CLdN design system is a well-executed example of B2B brand identity translated into digital product design. Its core strength is discipline — a small set of colors, two typefaces, and a consistent grid system applied with precision across every surface.
For the PAI presentation platform, this system provides an ideal foundation: professional enough to take any deliverable seriously, flexible enough to accommodate research, code, plans, and analysis, and distinctive enough to make every output feel intentional rather than default.
Going forward, every deliverable produced by PAI will be presented within this system — giving Joan a consistent, high-quality reading experience regardless of the content type.