HSE

Overview

HSE is a German-language online retailer that sells fashion, beauty, jewelry and home & living products, grown out of TV shopping. Its interface is a clean, product-first commerce layout: white canvas, dark neutral text and a single saturated red-orange accent (#ff3c28) that drives every call to action. The aesthetic movement is best described as Retail Clarity: content is legible, dense enough for browsing, and never decorative for its own sake.

The voice is polite, direct and reassuring, addressing the shopper with the formal "Sie". Copy is inspirational but concrete: promotions name the exact code and percentage, and headings invite discovery. Example sentence: "Der Herbst steht Ihnen gut – entdecken Sie alle Highlights unserer Top Marken."

Colors

Primary (#ff3c28) is the signature CTA color, used on the hero "Lieblingslooks sichern" button, the logo wordmark and active pagination dots. Primary-container (#e63e24) is the hover state, a 12% darker shift. Secondary (#be0a14) is reserved for sale and promotion emphasis, such as the promo bar and sale prices. Tertiary (#46576f) carries secondary text and navigation labels on light surfaces.

Surfaces stay near-white: the page canvas is #ffffff, with #f4f7f9 for the search and filter zones and #eaf0f3 for hover-revealed containers. Text uses #252525 for body and headings, and #646c84 for meta copy. Never place the primary red on a red-tinted surface; keep contrast with white text (#ffffff on #ff3c28) above 3:1 for large labels only.

Typography

A single family, Lato, is used across all levels, loaded with font-display: swap and a fallback of Arial scaled by size-adjust 97.69%. Hierarchy comes from weight and size rather than typeface: headings sit at 700 (24px and 36px for hero), body at 400 at 16px with a 24px line-height, and labels at 700 for buttons. Use 700 weight for any text that must read as an action or a price.

Keep h1 at 24px/36px bold on product pages and reserve the 36px/44px headline for hero overlays. Apply text-shadow 0 0 8px rgba(0,0,0,0.75) on small white labels that sit over photography, as the site does on hero copy.

Layout

The layout is fixed-width centered: the container grows to 944px, 1164px, then 1280px across breakpoints, with 16px horizontal padding on mobile. Product grids use a 12-column model with a 16px gutter. White space is generous between content bands, using xl (24px) for component spacing and 2xl (32px) for section separation. Use the sm (8px) and md (12px) steps inside cards and between label and value; reserve lg (16px) for card padding.

Elevation & Depth

Hierarchy is flat. The site avoids conventional drop shadows and instead uses focus rings: the primary button and sale elements carry box-shadow 0 0 0 5px rgba(190,10,20,0.25) on focus, and a 5px ring at rgba(190,10,20,0.5) on active. Carousel arrows sit on a semi-opaque circular plate without blur. Do not introduce blurs or glass effects; depth is communicated by background contrast alone (#ffffff to #f4f7f9).

Shapes

Shape philosophy: Soft-Technical. Buttons use a 4.8px radius (rounded.lg), product tiles and cards use 10px (rounded.xl) for a friendlier silhouette, and inputs use 4px (rounded.DEFAULT). Pills and pagination dots are fully rounded at 9999px. The small 2px radius is used on promo banners to feel like printed tags.

Components

Action Elements The primary button is a solid #ff3c28 block, 48px tall, 24px horizontal padding, Lato 700 at 16px, with a trailing arrow icon. Hover transitions the background to #e63e24 over 150ms cubic-bezier(0.4, 0, 0.2, 1). Sale actions use #be0a14 with the same geometry.

Containers & Surfaces Product cards sit on #ffffff with a 10px radius and 16px padding. On hover, the surface shifts to #e9eff2 with no border. Promo banners use a full-width #be0a14 band with 12px vertical padding and white 700-weight text.

Inputs & Interaction The header search field uses #eaf0f3 at 4px radius, 16px padding and placeholder text in #646c84. Focus adds a 2px #46576f outline. Carousel controls are 40px circles with a 1px border at rgba(0,0,0,0.2) and transition opacity over 200ms.

Do's and Don'ts

**Do**

• Use #ff3c28 only for the single most important action on a screen.
• Keep body copy at 16px/24px Lato 400 on #252525 for legibility.
• Lead promotions with the exact code and percentage, as the hero does with CODE: MODE15.
• Use the 12-column grid with 16px gutters for every product listing.

**Don't**

• Don't use the sale red #be0a14 for regular navigation or neutral CTAs.
• Don't add drop shadows or glassmorphism; the system is flat by design.
• Don't mix a second display typeface; Lato alone carries all hierarchy.
• Don't place red text on red or photographic backgrounds without a text-shadow.