SILIPA

Overview

SILIPA is a B2B/B2C e-commerce platform specializing in high-quality plotter paper, transparent films, and specialty materials for professional printing and production. The design system embodies "Industrial Clarity"—a philosophy that combines the precision and trustworthiness of manufacturing with the directness of modern digital commerce. The aesthetic is deliberately warm and approachable: a vibrant orange accent (#f39717) energizes the interface against a pristine white canvas, evoking both the tactile quality of paper products and the efficiency of a well-organized warehouse. The user experience prioritizes rapid task completion and confidence in product selection.

The brand voice is professional yet personable, speaking to both experienced procurement specialists and first-time buyers. Tone: direct, knowledgeable, never condescending. Vocabulary emphasizes material quality, reliability, and speed ("ab Lager in 1–2 Tagen" / "in stock within 1–2 days"). Example sentence in brand voice: "Unsere Plotterpapiersorten sind optimiert für Ihre Anforderungen—schnelle Lieferung, konsistente Qualität, faire Preise." (Our plotter papers are optimized for your requirements—fast delivery, consistent quality, fair pricing.)

Colors

The color system is anchored by a warm, energetic primary orange (#f39717) that commands attention on CTAs, navigation highlights, and key interactive elements. This primary is paired with a slightly darker secondary orange (#dd8317) for hover states and secondary actions, creating a cohesive warm accent family. The surface stack is built on near-white neutrals: the body background is #fafcfc (a soft off-white with 250, 252, 252 RGB), while surface containers range from #f9f9f9 (lowest) through #dce0e3 (highest), providing subtle depth without visual noise. Text is rendered in near-black (#0c0c0b) for maximum legibility on light backgrounds, with a secondary gray (#4a545b) for supporting copy and icons. The outline color (#798489) is used for borders and dividers, maintaining a professiona

Typography

The type system uses Inter exclusively, a highly legible geometric sans-serif that conveys both professionalism and approachability. Display text (51px, 700 weight, -0.02em letter-spacing) anchors hero sections and major page titles with commanding presence. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) structure content hierarchy, with tighter line-heights (48px and 36px respectively) creating visual density. Body text is set at 16px (body-md) with 400 weight and 24px line-height, ensuring comfortable reading for product descriptions and long-form content. Labels and buttons use 14px (label-md) at 600 weight with 0.01em letter-spacing, providing crisp, scannable action text. All headings inherit the primary orange color (#f39717) by default, reinforcing brand identity

Layout

The layout follows a 12-column grid system with a maximum container width of 1400px, allowing content to breathe on ultra-wide displays while maintaining focus on narrower screens. The page rhythm is structured around semantic spacing: section separation uses lg spacing (40px), card-to-card gutters use md spacing (24px), and internal component padding uses sm spacing (12px). The hero section spans full-width with a dark overlay image (paper rolls) and white text overlay, creating strong visual contrast. Product listings and category sections use a flexible card grid that adapts from 1 column (mobile) to 3–4 columns (desktop), with consistent md spacing between cards. The search bar and primary navigation occupy a fixed header with gutter spacing (24px) on either side, ensuring the logo and

Elevation & Depth

Depth is conveyed through a restrained shadow system that emphasizes clarity over drama. The base elevation (md shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) is applied to all cards and interactive containers, creating a subtle lift from the background. On hover or focus, cards elevate to lg shadow (0 8px 24px rgba(0, 0, 0, 0.12)), signaling interactivity without overwhelming the interface. The hero section uses a dark semi-transparent overlay (rgba(0, 0, 0, 0.4)) over the background image to ensure text legibility. Input fields and form elements use a 1px solid border in outline-variant (#bcc1c7) ra

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are applied strategically to soften the industrial aesthetic while maintaining clarity and structure. Buttons use a 8px radius (rounded.md), striking a balance between approachability and professional precision. Cards and containers use 1rem (16px) radius (rounded.lg), creating a gentle, inviting appearance that contrasts with the sharp edges of product images. Input fields use the smallest radius (4px, rounded.DEFAULT) to signal their functional, utilitarian purpose. Badges and pills use full radius (9999px) for a cohesive, self-contain

Components

Action Elements Buttons are the primary interaction mechanism and use the full primary orange (#f39717) background with white text (16px, 600 weight, Inter). Standard button height is 40px with 6px vertical and 16px horizontal padding, creating a compact but tappable target. On hover, the background shifts to #c27912 (a darker orange) with a 150ms ease-in-out transition, providing clear feedback. The button-primary-hover state is defined as a separate component to allow independent styling and animation control. Secondary buttons use a transparent background with a 1px outline in outline-variant (#bcc1c7) and primary text color, allowing users to distinguish between primary and alternative actions. Ghost buttons (used for tertiary actions like "Learn More") have no background or border