Two shops.
One brand.

The wordmark

One asset, used on both shops: the red wordmark with the knocked-out U and the letterspaced Cosmetic and Hair subtext. The U block is the ownable detail, it comes back in display typography.

• Files. logo/logo.svg two-tone, logo/logo-inverse.svg white for Ink and photography, logo/mark.svg. Vector, traced from the original artwork; approve against the source above before production use.
• Artwork colors. Gorgeous Red #E64938, subtext #303030.
• Lettering. Optima Bold with a 1.09 horizontal stretch, the exclamation is custom. M, E, U and S run a size larger than the other caps: the wordmark quietly spells ME and US.
• The block. A sharp-cornered rectangle, not rounded. The U is knocked out, the surface shows through.
• Clear space. One cap height free on all sides. Minimum width 160 px, below that the subtext breaks up, use the mark instead.

The U, on its own

The knocked-out U is the wordmark’s most recognizable piece, so it becomes the compact mark for every place the full logo does not fit: favicon, social avatars, app icon, packing slips.

• Stands in, never next to. The mark replaces the wordmark in small spaces, the two never appear side by side.
• Ship it. SVG favicon plus 32 and 16 px PNG fallbacks and a 180 px apple touch icon.
• Clear space. Half the block width free on all sides. Do not recolor, outline or rotate it.
• On dark. The red block holds its own on Ink, no inverse needed.
• File. logo/mark.svg, from the wordmark trace. The viewBox is portrait like the block, pad to a square canvas for icon exports.

One red, warm neutrals

The ramp is drawn from the logo artwork. Red 500 is the brand seen big, Red 600 is the same red made accessible for buttons and text, Red 700 handles hover states and text on tints. Neutrals are warm so they sit well next to it. Ratios are WCAG 2.2 contrast. AA means it passes for normal text; large text, 24 px and up or 19 px bold, needs 3:1.

Optima Nova speaks, Inter works

Optima Nova carries the wordmark’s flared letterforms into headings, the wordmark itself is set in Optima Bold. Display only. Inter does everything else: body, navigation, prices, forms. The whole system is three variants, nothing more.

• Three font variants in total: Optima Nova semibold for display, Inter 400 for reading, Inter 600 for weight. No other weights, no italics, nothing else loads.
• Body text is 16 px minimum, regular weight, over 1.5 line height.
• Never use weight 300 below 18 px.
• Uppercase is reserved for eyebrows and navigation: Inter 600, 0.08 em tracking or more, 11 to 13 px. It echoes the letterspaced Cosmetic and Hair subtext in the logo.
• Prices are always Inter 600. Old prices in Gray 600 with strikethrough, sale prices in Red 600.
• Headings sit in Ink. Red headings are allowed in Red 600, or Red 500 from 24 px.
• Optima Nova stays one weight by design. No faux bold, no faux light. License real cuts before adding weights.

One button, one field

One button for both shops, states defined. Every interactive element gets the same focus ring and a 44 px touch height.

• Inter 600 at 16 px, radius 8, minimum 44 px tall, padding 12 by 22. Labels in sentence case, never uppercase.
• Hover darkens one ramp step: Red 600 to Red 700. Secondary hovers to Blush with Red 700 text, plain Red 600 on Blush would drop under AA.
• Focus is a 2 px Red 600 ring with 2 px offset, on every interactive element, on both shops.
• Disabled is Line background with Gray text and no hover. Disabled elements are exempt from contrast rules.
• Inputs use 16 px text (prevents iOS zoom), border #958E86 (3.2:1 on white, the WCAG non-text minimum), label Inter 600 at 13 px.
• Error fields get a 2 px Red 600 border and a Red 700 message with an icon.
• Range slider (price filter): 4 px Line track, Red 600 fill between the thumbs, 20 px white thumbs with a 2 px Red 600 border, the two values in Inter 600 above the track. Applies on release.
• Filter options are text rows with a count. A selected row turns Red 600 with a check. A facet with more than ten options starts capped at ten with a Toon meer+ text link under the rows (Toon minder- once opened), and gets a search field above the rows: the standard input register with a magnifier, placeholder Zoek plus the two biggest values. Matching is filter-as-you-type; the cap is off while searching, and a no-match line names the query. Active filters repeat as outlined chips in the secondary style, each with a remove cross, plus a Wis alles text link.
• Search highlight: the matched characters of a product name get Red 700 on Blush (the mark element), weight and size unchanged.
• Loading (ajax add to cart): the label turns transparent and a 22 px spinner in the label color turns in its place. The button keeps its size and color and ignores clicks until the request answers, then the minicart opens.
• Minicart: a centered modal of at most 384 px over the scrim, white with a Line border, radius 8 and the header shadow. Header with the title in Optima Nova at H3 size, the item count in Gray and a 44 px close button. Product rows: 48 px thumbnail, name in Inter 600, delivery promise in Success with a check, quantity in Gray, row price in Inter 600 tabular, a trash button. Footer: Subtotaal row, then Afrekenen (primary) above Naar winkelwagen (secondary), both full width.
• Category pill (the homepage categories row, the subcategory row on a category page): a 32 px white pill at pill radius in a Line hairline, label Inter 600 at 13 px in Gray (5.4:1), padding 13, 8 px gaps, 12 px padding under 860 px. The frame is decorative and the label carries the contrast, so the row stays quiet next to the products. Sentence case, never uppercase: taxonomy names run long and would shout. Hover is the system chip hover, Blush with Red 700 (6.2:1) in a Red 600 frame.
• Brand tile (the Onze merken slider): a white tile in a Line hairline at radius 8; the logo in grayscale, at most 40 px tall. Hover or focus restores the logo color and darkens the frame to Border.
• Mega menu (desktop, wherever the menu row shows): a white panel the full width of the viewport, hung under the menu row between two Line hairlines with the header shadow. Inside, the content width in five equal columns at a 24 px gap and 28 px of air top and bottom. A column carries one or more blocks: a heading in the navigation register (Inter 600, 13 px, uppercase, 0.1 em, Gray at 5.5:1, linked to its category) over a Line hairline, then its children as 14 px Inter 400 Ink rows, hover Red 700 (7.5:1). The first column is Ontdek: the Alles in link and every subcategory without children. The last is Top merken, five brands. Lists over ten rows stop at nine and close with Alles in. Merken swaps the columns for an A to Z row of letter buttons over a hairline, Alle merken bekijken ranged right, and the chosen letter’s brands in four text columns. Opens on hover after 120 ms and on keyboard focus, closes after a 200 ms grace or on Escape, which returns focus to the menu item. No scrim: the panel is not modal. It folds with the menu row when the header compacts or the search panel opens.
• Promobar (campaign bar): the header’s last row, under the menu. White on Red 600 (4.98:1), 13 px Inter with the key words in 600, never uppercase; the code in an alpha-white chip. The whole bar is one link to the promotions page: hover darkens one ramp step to Red 700, the chevron slides. Folds with the service strip when the header compacts; on mobile only the discount message stays. Red 500 never carries 13 px text (3.91:1).

Copy, paste, ship

The book as code. The Tailwind block drops into the Hyvä theme on .nl, the CSS variables cover everything custom. Spacing stays on the 4 px scale, radius is 4 for badges and 8 for the rest. One shadow, for the sticky header once it is scrolled and for the search panel. The page behind the search panel dims with the scrim.

:root {
  /* color */
  --red-500: #E64938;   /* logo red, display text from 24 px, accents */
  --red-600: #D52D1B;   /* buttons, links, sale prices */
  --red-700: #A32214;   /* hover, text on blush, error messages */
  --blush:   #FBE5E4;
  --paper:   #FAF9F7;
  --white:   #FFFFFF;
  --ink:     #212121;   /* reading text, footer bg */
  --gray:    #6E6963;   /* secondary text, old prices */
  --line:    #E9E2DB;   /* decorative hairlines only */
  --border:  #958E86;   /* input borders, 3.2:1 on white */
  --success: #2A6F47;  --success-tint: #E3F2E8;
  --warning: #92400E;  --warning-tint: #FEF3C7;

  /* type, three variants: display 600, body 400, strong 600 */
  --font-display: 'Optima Nova', Optima, Candara, sans-serif;
  --font-body: Inter, 'Helvetica Neue', Arial, sans-serif;
  --weight-body: 400; --weight-strong: 600; --weight-display: 600;
  --text-display: 39px; --text-h1: 31px; --text-h2: 25px;
  --text-h3: 20px; --text-body: 16px; --text-small: 13px;

  /* shape and space, 4 px scale */
  --radius-badge: 4px; --radius-ui: 8px; --radius-pill: 999px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--red-600);
  --shadow-header: 0 8px 24px rgba(33,33,33,.06);  /* the only shadow: the sticky header once scrolled, the search panel and the minicart */
  --scrim: rgba(33,33,33,.32);  /* Ink at 32 percent, dims the page behind the search panel and the minicart */
}

colors: {
  primary:   { lighter: '#E64938', DEFAULT: '#D52D1B', darker: '#A32214' },
  secondary: { lighter: '#FAF9F7', DEFAULT: '#6E6963', darker: '#212121' },
  background: '#FAF9F7',
  blush: '#FBE5E4',
  line:  '#E9E2DB',
  scrim: 'rgba(33,33,33,0.32)',
  success: { DEFAULT: '#2A6F47', tint: '#E3F2E8' },
  warning: { DEFAULT: '#92400E', tint: '#FEF3C7' },
},
boxShadow: {
  header: '0 8px 24px rgba(33,33,33,.06)',
},
fontFamily: {
  sans:    ['Inter', 'Helvetica Neue', 'Arial', 'sans-serif'],
  display: ['"Optima Nova"', 'Optima', 'Candara', 'sans-serif'],
},

Adoption on .nl is one PR: merge the block above into the Hyvä theme’s tailwind.config.js, and buttons, links, sale prices, badges and the footer pick the system up through the primary, secondary and blush utilities.