LK Hjelle

Overview

LK Hjelle is a Norwegian furniture manufacturer embodying Scandinavian Functionalism—a design philosophy that prioritizes material honesty, structural clarity, and timeless utility over ornament. Founded in the 1940s in the Norwegian fjords, the brand's aesthetic is rooted in restraint: warm, earthy palettes (cream #fffcec, sage greens #2c622c, warm grays #a79d94), serif typography (Reckless), and minimal visual noise. The UI evokes a gallery-like quietness, allowing product imagery and craftsmanship to dominate. The emotional response is one of calm confidence—users feel they are engaging with something built to last, not to trend.

The brand voice is understated and authoritative: precise, unhurried, and deeply respectful of the user's intelligence. Vocabulary favors material specificity ('oak,' 'linen,' 'joinery') over marketing abstractions. Tone is conversational but never casual—think museum docent rather than lifestyle influencer. Example sentence: 'This chair has been in production since 1962. The frame is solid beech; the seat is hand-tied with jute webbing.'

Colors

The color system is anchored in natural materials and Norwegian landscape. Primary (#2c622c, a muted forest green) is reserved for actionable elements—buttons, links, and interactive states—and draws from the deep evergreen forests surrounding the factory. Secondary (#234923, a darker forest tone) provides hover and active states with increased visual weight. The surface stack ranges from warm cream (#fffcec, body background) through increasingly neutral grays (#f9f9f8, #eeeeed, #ddddda) for layered containers and cards, creating subtle visual hierarchy without contrast shock. On-surface text (#453c1f, a warm brown-black) sits atop all surfaces with 7:1+ contrast. Tertiary (#aa3030, a muted rust-red) is used sparingly for error states and decline actions, maintaining the earthy palette. Th

Typography

The type system uses a single serif family (Reckless) across all scales, reinforcing the brand's commitment to material authenticity and craft heritage. Display (60px, 400 weight, -0.02em tracking) is reserved for hero headlines and major section breaks; headline-lg (48px, 400 weight) for subsection titles; headline-md (36px, 400 weight) for card titles and prominent labels. Body-lg (19px, 400 weight, 28px line-height) is the primary reading size for product descriptions and long-form content, with generous line-height to ensure legibility on cream backgrounds. Body-md (16px, 400 weight) is used for secondary text, metadata, and UI labels. Label-md (15px, 700 weight, 0.02em tracking) is applied to all button text and form labels, providing visual distinction through weight rather than size

Layout

The layout follows a 12-column grid with a max-width of 1200px, centered on viewport. The page rhythm uses lg spacing (40px) for major section breaks, md spacing (24px) for component padding and inter-element gaps, and sm spacing (12px) for internal component spacing. The gutter (24px) is applied consistently to left/right margins on all container elements, collapsing to 12px on tablets and 8px on mobile. White-space is generous and intentional: product cards are separated by 40px vertical space, allowing each piece to 'breathe' and emphasizing the quality-over-quantity philosophy. Container max-width of 1200px ensures text remains readable (60–80 characters per line at body-lg). Hero sections use full-viewport imagery with overlaid text positioned at 56px from the left edge (as seen in h1

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic contrast. The elevation system uses three levels: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for minor UI elements like badges and small cards; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdown panels; lg (0 8px 24px rgba(0, 0, 0, 0.18)) for modals and elevated overlays. Shadows are warm-tinted (using black with 15–18% opacity) to harmonize with the cream and gray palette. The cookie consent modal uses a fixed overlay with rgba(0, 0, 0, 0.7) backdrop, creating clear modal hierarchy without blur effects. Cards i

Shapes

The shape language is 'Architectural Minimalism'—sharp, precise, and restrained. Border-radius follows a strict scale: sm (2px) for subtle softening on inputs and small UI elements; DEFAULT (3px) for buttons and standard cards; md (4px) for larger cards and containers; lg (5px) for modal dialogs and prominent surfaces; full (9999px) for toggle switches and circular badges. Buttons use DEFAULT (3px) radius, creating a slightly softened corner that feels contemporary without sacrificing the geometric clarity. Input fields use DEFAULT (3px) radius and a 1px border in outline-variant (#cccccc), wi

Components

Action Elements Buttons are the primary interactive affordance. Button-primary uses background {colors.primary} (#2c622c), text {colors.on-primary} (#ffffff), label-md typography (15px, 700 weight), 3px border-radius, and 15px vertical / 32px horizontal padding, yielding a 48px height. On hover, background transitions to {colors.secondary} (#234923) over 200ms with ease-in-out timing. On active/pressed, apply box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) to indicate depression. Button-secondary uses transparent background, 1px border in {colors.primary}, and text in {colors.primary}; on hover, background becomes {colors.surface-container-high} (#ddddda) with the same 200ms transition. Disabled state: opacity 0.5, cursor not-allowed, no hover effect.

Containers & Surfaces Cards us

Do's and Don'ts

**Do**

• Do use Reckless serif typography for all headings and body text—it is the brand's voice and must remain consistent across all scales.
• Do apply the primary green (#2c622c) exclusively to interactive elements: buttons, links, focus states, and category highlights. Never use it as a background fill.
• Do maintain generous white-space: use lg spacing (40px) between major sections and md spacing (24px) between components to reinforce the 'quality over quantity' philosophy.
• Do use the shadow system (md for cards, lg for modals) to create subtle depth without blur effects or glassmorphism.
• Do apply 200ms ease-in-out transitions on all hover and focus state changes (background-color, box-shadow, border-color) for smooth, predictable interaction feedback.

**Don't**

• Don't use sans-serif fonts or system fonts; Reckless serif is non-negotiable and defines the brand's material authenticity.
• Don't apply primary green to large background areas or as a dominant surface color; it must remain an accent for interactive affordances only.
• Don't use high-contrast black (#000000) or pure white (#ffffff) for text or backgrounds; stick to the warm cream (#fffcec) and warm brown-black (#453c1f) palette.
• Don't add blur effects, gradients, or glassmorphism; the design philosophy is flat, opaque, and material-honest.
• Don't use border-radius values outside the defined scale (sm: 2px, DEFAULT: 3px, md: 4px, lg: 5px, full: 9999px); arbitrary rounding undermines the architectural precision.