🧬 PEPTIDE SERUMS NOW LIVE · 1% GHK-Cu + 1% PDRN
GHK-CU BACK IN STOCK | DON'T MISS OUT
search call us 9:30-3PM bag

Internal Review

Helloskin Design System Review

This page is a static sign-off artifact for the audited foundation before the SEO template rollout. It shows the real typography, palette, spacing language, radii, elevation, and a small in-context assembly using the existing token system.

Internal sign-off audience: Dom and Souraya. This page is for design-system review only and is not intended for customer-facing marketing use.

Body + Utility Font

Apercu Pro across body, utility labels, and dense ecommerce copy.

Display Accent

TAN-MEMORIES reserved for selective emphasis rather than whole-interface headings.

Colour Model

Neutral brand base with GHK-Cu purple and PDRN pink overlays.

Typography

Display Accent

Clinical, warm, memorable.

TAN-MEMORIES for occasional emphasis and emotional contrast.

Primary Heading

Apercu Pro heavy headline system.

32-52px / 900 with short, direct, editorial phrasing.

Body Copy

Apercu Pro body copy for educational and ecommerce content with generous line-height.

14-17px with relaxed rhythm and plain-language clarity.

Core Palette

Primary Ink

--design-color-ink-900

Headings, strong CTA surfaces, and inverse contrast moments.

Neutral Surface

--design-color-neutral-100 / --design-color-neutral-50

Quiet framing colour for cards, dividers, and breathing space.

GHK-Cu Accent

--design-color-ghk-accent-500 / --design-color-ghk-accent-600 / --design-color-ghk-accent-50

Science storytelling, editorial emphasis, and cool-toned protocol cues.

PDRN Accent

--design-color-pdrn-accent-500 / --design-color-pdrn-accent-700 / --design-color-pdrn-accent-100

Renewal-led moments, warmth, and soft clinical contrast.

Trust / Success

--design-color-success-700 / --design-color-success-200 / --design-color-success-50

Verification, reassurance, and review-adjacent proof states.

Spacing, Radius, and Shadows

Compact spacing
--design-space-16 keeps UI dense but readable.

Card spacing
--design-space-32 is the core interior rhythm for panels.

Section spacing
--design-space-section-mobile separates review modules on mobile.

Desktop section spacing
--design-space-section-desktop preserves the premium open feel.

Button radius
--design-radius-button for assertive ecommerce actions.

Panel radius
--design-radius-panel for structured information blocks.

Card radius
--design-radius-card for softer feature and proof cards.

Glass radius
--design-radius-glass for larger atmospheric panels.

Soft lift
--design-shadow-soft

Card elevation
--design-shadow-card

Feature emphasis
--design-shadow-feature

Simple Component Specimens

Primary + Secondary Actions

High-weight uppercase CTAs with a restrained radius and minimal hover-style elevation language.

Shop The Protocol Read The Science

Trust Badge

Positive states should feel reassuring and clinical, not neon or gamified.

Verified reviews · 4.9 average

Proof Stats

Use compact stat cards when a section needs fast scanning without becoming a dashboard.

52px

Desktop editorial heading

20px

Default feature-card radius

In Context

Science-Backed Skincare

Editorial, clinical, and warm without feeling generic.

The brand should feel premium and informed first, then expressive in carefully chosen moments. Neutral structure does most of the work. Purple and pink appear as directional accents, not as the whole interface.

Use gradients as atmosphere, not decoration.

The best Helloskin sections pair dense educational copy with soft ingredient-led colour transitions and strong text contrast.

Approve Direction Request Adjustments
What To Look For

Typography should feel recognisably Helloskin even before colour is added.

What To Avoid

Overusing the display face, high-saturation gradients everywhere, or deep UI chrome that makes the page feel like an app.

Sign-Off Lens

This page is for internal review only, so clarity and faithful token mapping matter more than conversion patterns.