Looye Kwekers

Overview

Looye Kwekers is a Dutch greenhouse grower brand that celebrates the authenticity and seasonality of fresh produce. The design system embodies 'Agricultural Minimalism'—a philosophy that strips away unnecessary ornamentation to reveal the honest beauty of the product and the craft behind it. The visual identity combines earthy, warm tones (sage greens, warm grays, deep reds) with clean typography and generous whitespace, evoking trust, quality, and a direct connection to the land. The UI evokes a sense of calm confidence: users feel they are engaging with a serious, knowledgeable supplier who respects both the product and the customer.

The brand voice is warm yet authoritative, conversational yet precise. Looye speaks in Dutch with a tone that is neither corporate nor overly casual—it's the voice of a grower who knows their craft and wants to share that knowledge. Vocabulary leans into agricultural terminology and seasonal language. Example sentence: 'Proef de Looye zomer—onze tomaten groeien onder de Nederlandse zon, van zaad tot tafel.'

Colors

The color palette is rooted in the agricultural landscape and greenhouse environment. Primary (#ef343a) is a vibrant, warm red used exclusively for CTAs, active states, and brand-critical interactions—it commands attention without aggression, evoking the ripeness of ripe tomatoes. Secondary (#aaa274) is a muted sage-khaki that represents the greenhouse structure and natural earth; it appears in supporting UI elements, badges, and secondary containers. Tertiary (#505050) is a neutral charcoal used for body text, borders, and disabled states.

The surface stack is anchored in dark tones (#202020 base, #1d1d1b container) to provide contrast for agricultural imagery and hero photography. On-surface text is pure white (#ffffff) for maximum legibility. The outline color (#6c757d) is a mid-gray u

Typography

The type system pairs Zona W01 SemiBold (a distinctive serif with agricultural character) for headlines and display text with Roboto (a neutral, highly legible sans-serif) for body and UI text. This pairing creates visual hierarchy while maintaining readability across devices. Display (60px, 600 weight, -0.02em tracking) is reserved for hero statements and major section titles; Headline-lg (40px, 600 weight) anchors page sections; Headline-md (28px, 600 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and rich content; Body-md (16px, 400 weight, 24px line-height) is the default for form labels and standard text. Label-md (15px, 600 weight, 20px line-height, 0.01em tracking) is applied to all button text and interactive labels.

Layout

The layout uses a 12-column fluid grid with a maximum container width of 1280px, allowing the design to scale responsively from mobile (single column) to desktop (full grid). The gutter spacing is consistently 24px, creating a breathing room that reflects the agricultural brand's unhurried, deliberate aesthetic. Section separation uses lg spacing (40px) vertically to create clear visual breaks between content blocks; internal card padding uses md spacing (24px). The hero section spans full-width with a dark background (#202020) to showcase photography and create visual impact. Content sections are contained within the max-width container and centered. Whitespace is intentional: the design avoids cramping elements, allowing each component (button, card, input) to exist with dignity. The spa

Elevation & Depth

Depth is achieved through subtle layering and shadow rather than aggressive contrast. The base layer (Level 1) is the dark surface (#202020) with no shadow. Level 2 (standard cards, modals) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 4px border-radius, creating a gentle lift. Level 3 (elevated modals, popovers) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) with a 12px border-radius, signaling higher prominence. Interactive elements (buttons, inputs) on hover transition to Level 2 shadow with a 200ms ease-out timing function. The cookie consent modal and overlays use a semi-transpare

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are minimal and purposeful, reflecting the precision of greenhouse agriculture. Buttons use 4px border-radius (rounded.sm / 0.25rem), a subtle softening that maintains their rectangular authority. Cards and containers use 12px border-radius (rounded.lg / 1rem), creating a gentle, approachable appearance without sacrificing structure. Input fields use 4px border-radius (rounded.DEFAULT / 0.5rem) to align with buttons and maintain visual consistency. Toggle switches and badges use full border-radius (9999px) to emphasize their distinc

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses #ef343a background with white text, 15px vertical padding, 24px horizontal padding, and 4px border-radius. On hover, the background transitions to #c92a2f (primary-container) with a 150ms ease transition. Button-secondary is transparent with a 2px solid #ef343a border and the same padding; on hover, it gains a light red background (rgba(239, 52, 58, 0.08)). Button-ghost is transparent with a 1px outline (#6c757d) and gains a surface-container-high background on hover. All buttons use label-md typography (15px, 600 weight) and maintain a minimum height of 48px for touch accessibility. Focus states add a 3px blur shadow (0 0 0 3px rgba(239, 52, 58, 0.1)) around the button.

Containers & Surfaces Cards