Semester9 Kunsttransport

Overview

Semester9 Kunsttransport is a specialized art logistics provider serving galleries, museums, and collectors across Europe with white-glove service and bespoke logistics solutions. The design system embodies 'Architectural Minimalism'—a movement that prioritizes structural clarity, professional restraint, and trust through refined geometry. The visual language combines a deep corporate blue (#00539e) with crisp whites and supporting accent blues, creating an interface that feels simultaneously authoritative and approachable. The emotional response is one of confidence: users perceive Semester9 as a partner who handles precious cargo with precision and care, never rushing, always attentive.

The brand voice is measured, knowledgeable, and warm. Vocabulary emphasizes expertise ('specialized,' 'certified,' 'insured'), reliability ('secure,' 'vetted,' 'trusted'), and personal attention ('white-glove,' 'bespoke,' 'care'). The tone avoids corporate jargon and instead speaks in clear, direct language that respects the user's intelligence. Example: 'Your art deserves transport as refined as the work itself—we handle every piece like it's irreplaceable, because it is.'

Colors

The color system is anchored in institutional trust and refined elegance. Primary (#00539e) is the signature corporate blue used for all interactive elements, CTAs, and brand moments—it appears on buttons, links, and focus states, conveying authority and professionalism. Secondary (#0099ff) is a brighter, more energetic blue reserved for highlights, secondary CTAs, and accent moments that need to pop without overwhelming. Tertiary (#005392) is a deeper, more conservative blue used for hover states and secondary navigation, maintaining visual hierarchy while staying within the blue family.

The surface stack is deliberately light and clean: white (#ffffff) as the primary canvas, with subtle grays (#f5f5f5 to #eeeeee) for container differentiation and depth. On-surface text is pure black (#0

Typography

The type system pairs Archivo (a geometric, confident sans-serif) for headlines and display text with Inter (a neutral, highly legible humanist sans-serif) for body copy and UI labels. This pairing creates a visual hierarchy that is both authoritative and accessible: Archivo's structured forms convey expertise and precision, while Inter's warmth makes dense information feel approachable. Display (55px, 700 weight, -0.02em tracking) is reserved for hero headlines like 'Kunst verdient het beste transport,' commanding attention while maintaining elegance. Headline-lg (40px, 700 weight) and headline-md (28px, 600 weight) are used for section titles and card headers, with tighter letter-spacing (-0.015em to -0.01em) to reinforce structural clarity. Body-lg (18px, 400 weight) and body-md (16px,

Layout

The layout system uses a 12-column grid with a maximum container width of 1200px, providing flexibility for both desktop and tablet experiences. The grid is fluid on mobile (full bleed with 24px gutters) and fixed at 1200px on desktop, ensuring content never feels cramped or stretched. White-space is generous: section separation uses lg spacing (40px) between major blocks, md spacing (24px) between cards and components, and sm spacing (12px) between related elements. The gutter (24px) is consistent across all breakpoints, creating a predictable rhythm. Hero sections use full-width backgrounds with a 40px top/bottom padding to frame the content, while card grids use 24px gaps between items. Container max-width is enforced at 1200px to prevent line-length from exceeding 80 characters on body

Elevation & Depth

Depth in this system is achieved through subtle shadows and layering rather than dramatic effects. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for baseline cards and subtle separations, md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated cards and hover states, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and floating elements. The shadow blur and spread are calibrated to feel refined, not heavy—the 6px offset in the observed box-shadow (6px 7px 10px #0000001a) is avoided in favor of centered, softer shadows that suggest depth without visual drama. Buttons and

Shapes

The shape philosophy is 'Refined Geometry'—combining sharp, architectural precision with selective softness to balance professionalism and approachability. Buttons and pills use the full rounded token (300px / 9999px border-radius), creating a distinctive capsule shape that feels modern and friendly while remaining professional. Cards and containers use md (0.75rem / 12px) or lg (1rem / 16px) border-radius, providing subtle rounding that softens the grid without appearing playful. Input fields use DEFAULT (0.5rem / 8px) for a more structured, form-like appearance. The rationale: full-rounded b

Components

Action Elements Buttons are the primary interaction pattern and use the full rounded token (300px) for maximum visual distinction. Primary buttons (bg: #00539e, text: white, 44px height, 12px 24px padding) are used for main CTAs like 'Onze Diensten' and form submissions. On hover, the background shifts to tertiary (#005392), creating a subtle darkening that signals interactivity without jarring the user. Secondary buttons (bg: white, text: #00539e, 1px border: #00539e) are used for alternative actions like 'Contact' or 'Offerte aanvragen,' maintaining visual hierarchy while offering choice. Ghost buttons (bg: transparent, text: #00539e, 1px border: #d9d9d9) are reserved for tertiary actions and navigation links. All button text uses label-md typography (14px, 600 weight, 0.02em trackin

Do's and Don'ts

**Do**

• Do use primary blue (#00539e) exclusively for all CTAs, links, and interactive focus states—it is the signature brand color and should never be diluted or substituted.
• Do maintain generous white-space: use lg spacing (40px) between major sections and md spacing (24px) between cards to create visual breathing room and reduce cognitive load.
• Do pair Archivo headlines with Inter body copy to create a clear visual hierarchy that feels both authoritative and warm—never reverse this pairing.
• Do use full-rounded buttons (300px border-radius) for all primary and secondary CTAs to create visual focal points and signal clickability.
• Do apply subtle shadows (sm: 0 1px 2px rgba(0, 0, 0, 0.06)) to cards and containers for depth without drama—avoid heavy shadows that feel dated.
• Do use the primary blue family (primary, secondary, tertiary) for all interactive elements and status indicators—never introduce new accent colors.

**Don't**

• Don't use near-black or near-white as primary or secondary colors—the brand's strength lies in the confident, institutional blue (#00539e), not neutrals.
• Don't apply sharp corners (0px border-radius) to buttons or interactive elements; always use at least sm (4px) rounding to maintain the refined aesthetic.
• Don't mix Archivo and Inter in the same headline or body section—maintain clear typographic roles: Archivo for display/headlines, Inter for body/labels.
• Don't use shadows heavier than lg (0 16px 40px rgba(0, 0, 0, 0.12)) on any element; excessive shadow depth contradicts the refined, architectural aesthetic.
• Don't introduce secondary or tertiary colors into button backgrounds—reserve those for supporting visual elements, badges, and status indicators only.
• Don't compress padding or spacing below sm (12px) in cards or containers; the generous white-space is essential to the brand's premium positioning.