Withings DESIGN.md

Design System Inspiration of Withings

Overview

Visual Theme & Atmosphere

Withings makes connected health devices for everyday use, including scales, hybrid watches, blood-pressure monitors and sleep systems. Its company history begins in 2008 and records its first smart scale in 2009. The company describes its products as “Simple. Elegant. Durable.”, connecting unobtrusive product design with long-term health tracking. Company and history

The measured French storefront expresses that combination through Aeonik, near-black text, white and sand surfaces, and violet-blue actions. The principal shopping link has generous 16px corners, while navigation links remain square. This is a useful contrast for a reference implementation: quiet surfaces and regular-weight type around a clear, rounded action.

The service is developing beyond collecting measurements: Withings’ current support documentation describes a subscriber-only Health Assistant, contextual measurement explanations and long-term Smart Trends. That provides product context for the storefront’s emphasis on following health over time; these website measurements do not describe the app’s interface tokens. Withings Intelligence

Brand Narrative

Withings’ own timeline records Nokia’s acquisition in 2016 and Eric Carreel’s reacquisition and restoration of the Withings name in 2018. The same company page connects everyday devices, continuing measurements and app guidance. The current Health Assistant documentation extends that direction into personalised interpretation and trends. This reference draws its visual values from the French storefront. History, current service

Principles

The company’s published emphasis on everyday use, durable product design and sustained health tracking provides context for a restrained interface. As an implementation inference from the measured controls, give the main action a clear colour and generous shape, while keeping surrounding navigation quieter. This is not an attributed set of internal design principles. Company

Personas

No persona research was verified.

Colors

These are values from the live storefront’s computed root custom properties, with rendered examples identified separately. They are not a published brand specification.

Muted paragraph ink is rgba(15, 15, 15, 0.6), counted on 9 paragraphs. Keep that alpha relationship explicit instead of treating it as an opaque grey swatch. The census includes embedded interfaces; it does not establish a brand role for every frequent colour.

Typography

Substitute: none chosen.

Aeonik’s loaded normal faces are served by www.withings.com/cdn/shop/files/: Aeonik-Regular.woff2, Aeonik-Medium.woff2 and Aeonik-Bold.woff2. These are observed delivery paths, not permission to redistribute the files.

Measured action text is 16px/500 with a 19.2px line height. The Boutique navigation link uses 16px/400 and 26.7429px line height. The footer email field uses 14px/400 and 16.8px line height. Root heading declarations include h1 clamp(3.25rem, 7.2vw, 4.5rem) and h2 clamp(2.5rem, 5.2vw, 3.25rem), both weight 400 and line-height 1.2; those declarations are distinct from measured rendered heading sizes.

Layout

The desktop survey records a 70px sticky header with 44px navigation and icon targets. The logo and the first product-card column begin at x = 32px. Product links begin at x = 32px, 308px and 584px in the first row, each 260.2px wide. Preserve those observations as one desktop composition, rather than inferring a universal column grid.

A photograph-backed hero precedes the product sections in the captured viewport. Collection tabs and a separate “Toutes les montres” link provide two levels of browsing. The DOM survey also identifies health-need cards and testimonial product links further down the page. The regional dialog and promotional popup obscure parts of the worker's visual evidence; the re-measure closed both.

Responsive Behavior

Only desktop 1440 × 1000 was captured. The h1/h2 clamp declarations under Typography are verified CSS, but mobile layout, breakpoints and touch states were not measured.

Elevation & Depth

The primary action’s exact rest shadow is rgb(103, 132, 254) 0px 0px 0px 1px inset: an edge treatment rather than an elevated shadow. The five other selected controls have box-shadow: none at rest. The footer input’s boundary belongs to its wrapper.

Motion & Easing

Computed rest-style metadata for the primary link is exactly color, box-shadow, background-color 0.125s, 0.125s, 0.125s ease-in-out, ease-in-out, ease-in-out 0s, 0s, 0s. The secondary link reports border-color 0.125s ease-in-out 0s. The probe waited past the longest transition in each control's scope (125ms on the primary action and the secondary link) before sampling, so the colour change and the caret's slide run on these declarations. The caret's own transition string sits on a descendant and was not recorded. No cubic-bezier curve is declared; the easing is the ease-in-out keyword.

---

First-party sources opened on 2026-10-29: French storefront (survey and rest styles); company and history; legal notice (Withings France SA, Issy-les-Moulineaux); newsroom and official logo listing; Withings Intelligence. The nonsense-path control returned a curl challenge twice; in a fresh-profile browser it rendered a real 404 (404 Not Found – Withings, after a redirect to /en-us/zz-this-does-not-exist).

Components

The following are computed rest observations from identified DOM controls; their states follow the table. The worker's states run was blocked by a regional shipping dialog and a promotional popup, so the states below come from a re-measure with both closed.

States. The primary action darkens on hover and press: its background and its 1px inset edge both turn #5570e0, the declared --color-primary-hover. The secondary link drops its underline (the bottom border turns transparent) and slides its caret 4px to the right. Keyboard focus is an authored 1px solid outline, not the browser ring: #6784fe offset 3px on the primary action and the secondary link, #6784fe offset 2px on the product card, #0f0f0f offset 3px on Boutique and offset 2px on the search icon. Boutique, the search icon and the product card did not change on hover or press within the compared scope. The footer email field changed in none of the three states, so it stays a rest description.

The survey also records testimonial product links with 6px corners and 11.2px padding. This is the source of the separate testimonial radius; it does not describe the full watch-card container. No visible search input or distinct secondary button appeared in the survey; the search trigger and secondary action link are the measured alternatives.

States

Measured in a fresh-profile browser at 1440 × 1000 with the regional shipping dialog and the promotional popup closed by their own close buttons (no country was chosen):

• Primary action: hover and pressed turn the background and the 1px inset edge from #6784fe to #5570e0; focus adds a 1px solid #6784fe outline offset 3px.
• Secondary link: hover and pressed make the 1px bottom border transparent and move the caret 4px right; focus adds a 1px solid #6784fe outline offset 3px.
• Boutique and search icon: no change on hover or press; focus adds a 1px solid #0f0f0f outline, offset 3px and 2px respectively.
• Product card link: no change on hover or press within the link's own subtree; focus adds a 1px solid #6784fe outline offset 2px.
• Footer email field: no change on hover, press or focus within the compared scope.

No focus ring persisted after blur. Disabled, error and loading states were not exercised.

Do's and Don'ts

• Use the measured violet-blue for the principal action and near-black for paragraph ink.
• Use Aeonik’s verified normal faces and the measured regular/medium hierarchy.
• Keep the primary action and footer input at their measured 16px corner radius; keep navigation square.
• Darken the primary action to #5570e0 on hover and press, edge included.
• Draw keyboard focus as a 1px solid outline with a 2–3px offset: violet-blue around violet-blue actions and links, near-black around near-black navigation.
• Keep widget fonts and popup controls out of the storefront component vocabulary.

Voice & Tone

The measured labels address a concrete next step: beginning tracking, viewing watches, learning about a health need. “Commencez votre suivi” and “Toutes les montres” keep the action specific. This is an observation from the French storefront’s labels, not an official editorial style guide.

Agent Prompt Guide

“Build a Withings-inspired desktop health-device storefront using live-loaded Aeonik, #0f0f0f paragraph ink, white and sand surfaces, and a #6784fe principal action. Give the action 16px corners, 16px 24px padding and 16px/500 text with 19.2px line height. On hover and press its background and 1px inset edge turn #5570e0; keyboard focus is a 1px solid #6784fe outline offset 3px. Text links lose their bottom border on hover and slide their caret 4px right.”

Governance

Known Gaps

• Contrast, primary-cta. Text #ffffff on #6784fe measures 3.33:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.