Unisol Paneel B.V.

Overview

Unisol Paneel B.V. is an industrial building-materials manufacturer serving contractors, agricultural operations, and commercial enterprises across Europe. The design system embodies **Technical Pragmatism**—a philosophy that marries industrial precision with approachable, human-centered clarity. The UI evokes confidence and reliability: every interaction feels purposeful, every color choice signals intent. The brand personality is direct, solution-focused, and grounded in 35 years of manufacturing expertise. Voice: clear, confident, never condescending. Example: "Our sandwich panels deliver R-values up to 8.0 m²K/W—engineered for your climate, built to last."

Colors

The color palette is anchored in **Industrial Authenticity**: a clean white canvas (#ffffff) paired with a vibrant, nature-inspired green primary (#72be44) that signals growth, sustainability, and trust. The secondary accent, a professional blue (#1863dc), reinforces authority and technical competence—used for navigation, secondary CTAs, and data-driven elements. A warm tertiary orange (#fb8e28) adds energy to highlights, badges, and accent imagery. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (#f4f4f4, #ededed, #e8e8e8) to support visual hierarchy without introducing darkness. On-surface text is a near-black (#212121) for maximum legibility in industrial environments; on-surface-variant (#4e4b66) provides subtle secondary text. Primary (#72be44

Typography

The type system uses **Plus Jakarta Sans** exclusively—a modern, geometric sans-serif that conveys technical precision while remaining warm and approachable. The hierarchy spans from Display (60px, 800 weight, -0.04em tracking) for hero headlines down to Label-sm (12px, 500 weight) for metadata and form labels. Headlines use 700–800 weights to command attention; body text sits at 400 weight with 24–28px line-height for comfortable reading in technical documentation. Letter-spacing tightens on large display sizes (-0.04em to -0.02em) to create visual density and authority; body text maintains neutral spacing (0em) for clarity. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text overlaid on photographic backgrounds (e.g., hero h1) to ensure legibility. Use 700 weight for all butto

Layout

The layout operates on a **12-column fluid grid** with a max-width of 1200px, centered on viewport. Horizontal gutters are 24px on desktop, reducing to 16px on tablet and 12px on mobile. Vertical rhythm follows the spacing scale: lg (40px) separates major sections (hero to content, content to footer); md (24px) divides subsections and card groups; sm (12px) provides breathing room between list items and form fields. The hero section spans full-width with a semi-transparent overlay (rgba(0, 0, 0, 0.4)) to ensure text legibility over background imagery. Container max-width of 1200px prevents content from stretching excessively on ultra-wide displays. White-space philosophy: generous margins around primary CTAs (minimum 24px padding), compact spacing within form groups (12px between label and

Elevation & Depth

Depth is conveyed through **Subtle Layering**—a restrained shadow system that avoids dark, dramatic drops. Level 1 (Base): flat surfaces with no shadow, relying on 1px borders in outline-variant (#cccccc) for definition. Level 2 (Elevated Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and dropdowns to lift them 8px above the base. Level 3 (Hover/Active): box-shadow: 0 -1px 10px 0 rgba(172, 171, 171, 0.3), a softer, more diffuse shadow that signals interactivity without overwhelming. Buttons use no shadow by default; on hover, they transition to Level 2 shadow over

Shapes

The shape language follows **Industrial Minimalism**: sharp, functional corners with minimal ornamentation. Border-radius values are: sm (2px) for subtle softening on small elements like badges and form inputs; DEFAULT (4px) for buttons, cards, and standard containers; md (6px) for slightly larger cards and dropdowns; lg (8px) for prominent modals and hero sections; xl (16px) for large feature cards and hero overlays; full (9999px) for pill-shaped buttons and circular avatars. The 2–4px range dominates, reflecting the brand's technical, no-nonsense aesthetic. Buttons use 4px radius to feel mod

Components

Action Elements Buttons are the primary interaction mechanism. **button-primary** uses #72be44 background, white text, 44px height, 8px vertical / 24px horizontal padding, 4px radius, and 500-weight label-md typography. On hover, background shifts to #5fa838 (darker green) over 200ms. **button-secondary** mirrors the primary structure but uses #1863dc (secondary blue) and transitions to #0d47a1 on hover. **button-ghost** has transparent background, 2px primary-colored border, and primary text; on hover, it fills with primary-container (#c8e6c9) and text shifts to on-primary-container (#1b5e20). All buttons include a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition for smooth state changes.

Containers & Surfaces **card** elements use white background (#ffffff), 6px radius, 24px paddin

Do's and Don'ts

**Do**

• Do use primary green (#72be44) exclusively for primary CTAs and key interactive elements—it must command attention and signal action.
• Do maintain 24px gutters and 40px section spacing to create breathing room and visual hierarchy in dense technical content.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions on all interactive state changes (hover, focus, active) for smooth, professional feedback.
• Do use Plus Jakarta Sans at 700–800 weight for headlines and 500 weight for button labels to establish clear visual hierarchy.
• Do layer shadows subtly: 0 3px 8px rgba(0, 0, 0, 0.15) for elevated cards, never exceeding 15px blur radius to maintain industrial precision.

**Don't**

• Don't use primary green for backgrounds, body text, or non-interactive elements—reserve it exclusively for CTAs and active states.
• Don't apply border-radius greater than 8px on standard buttons or form inputs; keep corners sharp to reinforce technical credibility.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) or blur radii exceeding 15px; the brand aesthetic rejects dramatic depth.
• Don't mix typefaces; Plus Jakarta Sans is the sole font family—avoid system fonts or serif alternatives.
• Don't reduce padding below 8px on buttons or below 12px on cards; white-space is essential to the industrial-minimalist aesthetic.