SelpH Beauty + Skincare

Overview

SelpH Beauty + Skincare is a direct-to-consumer skincare brand that transforms pH science into playful, accessible beauty. The brand serves Gen-Z and millennial consumers seeking functional skincare without pretension, using bold gradient accents and clean typography to communicate both scientific credibility and youthful energy. The aesthetic movement is 'Vibrant Minimalism'—a collision of energetic, multi-color gradients (hot pink #ff7cd6, deep purple #5f5fa5, coral #dd6089) layered over pristine white surfaces and refined sans-serif typography. The UI evokes clarity, approachability, and a sense of playful discovery.

The brand voice is conversational, confident, and slightly irreverent. SelpH speaks directly to its audience with language like 'fun + functional skincare on your pH scale' and 'The skincare pHenomenon is here'—punny, direct, never clinical. The tone balances scientific precision (exact pH values, ingredient transparency) with personality-driven copy that feels like advice from a knowledgeable friend. Example sentence in brand voice: 'Your skin's pH is unique—find your perfect match and watch the difference unfold.'

Colors

The SelpH color system is anchored by a vibrant primary accent—hot pink (#ff7cd6)—which appears on all call-to-action buttons, interactive elements, and key brand moments. This primary is paired with a clean white surface (#ffffff) and neutral grays (#333333 for text, #efefef for dividers) to ensure maximum contrast and legibility. Secondary colors include a sophisticated deep purple (#5f5fa5) used for sale badges, reviews, and secondary CTAs, and a warm coral (#dd6089) deployed in gradient overlays and promotional story circles. The gradient system—particularly the radial gradient at 70% 70% with stops at #ee583f (8%), #d92d77 (42%), and #bd3381 (58%)—creates visual energy on Instagram story promotions and hero sections. All surfaces use a white base (#ffffff) with container variants step

Typography

The type system pairs Poppins (headings, display) with Roboto (body, UI labels), creating a modern, accessible hierarchy. Poppins at 600 weight conveys brand personality and confidence on headlines (40px, 28px, 20px), while Roboto at 400 weight ensures readability on body copy (18px, 16px) and UI labels (12px, 11px). Display text (60px, 600 weight, -0.02em letter-spacing) is reserved for hero sections and major announcements; headline-lg (40px, 400 weight) anchors page sections; headline-md (28px, 600 weight) breaks up content; title-lg (20px, 600 weight) labels card titles. Body-lg (18px, 400 weight, 28px line-height) is used for long-form content; body-md (16px, 400 weight, 24px line-height, 0.02em letter-spacing) is the default for product descriptions and UI copy. Labels (12px, 600 wei

Layout

The layout system uses a 12-column grid with a max-width of 1280px (120rem), centered on desktop with 24px (md spacing) gutters. Mobile breakpoints collapse to single-column at 768px and below. The page rhythm is driven by section spacing: lg spacing (40px) separates major sections (hero, product grid, testimonials), md spacing (24px) separates cards and content blocks, and sm spacing (12px) separates inline elements. The container max-width of 1280px ensures readability on ultra-wide displays while maintaining visual focus. White-space is generous—product cards are spaced 24px apart, hero sections have 40px+ padding on all sides, and footer content uses 64px (xl spacing) vertical separation. The grid is fluid on mobile (100vw - 24px gutter on each side) and fixed at 1280px on desktop. All

Elevation & Depth

Depth in SelpH is achieved through subtle shadows and layering, not through darkness. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and subtle containers, md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated cards and modals, and lg (0 8px 32px rgba(0, 0, 0, 0.12)) for floating elements and dropdowns. All shadows use a near-black shadow color (rgba(0, 0, 0, ...)) with opacity values between 0.06 and 0.12 to maintain the bright, clean aesthetic. Buttons do not use shadows in their default state; on hover, they receive a soft glow: box-shadow: 0 2px 8px rgba(25

Shapes

The shape philosophy is 'Soft-Technical'—combining rounded corners with precision geometry to balance approachability with modern sophistication. Buttons use full rounding (border-radius: 40px / 9999px) to feel friendly and clickable; this is the most distinctive shape token and appears on all primary CTAs, badges, and chips. Cards and containers use md rounding (12px / 0.75rem) to feel contemporary without excessive softness. Input fields use DEFAULT rounding (8px / 0.5rem) for a balanced, neutral appearance. Modals and overlays use sm rounding (4px / 0.25rem) to signal they are system-level

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses {colors.primary} (#ff7cd6) background, {colors.on-primary} (#1a1b18) text, 12px font-size, 600 font-weight, 40px height, 8px 20px padding, and full rounding (40px border-radius). On hover, the background shifts to #ff5fc9 with a soft glow (box-shadow: 0 2px 8px rgba(255, 124, 214, 0.25)). On active/pressed, the background darkens to #ff3db8. The button-secondary component uses a transparent background with a 1px solid outline at {colors.outline} (#999999), same text color as primary, and identical padding and rounding. On hover, the background fills with {colors.surface-container-high} (#e9ecef). Buttons use a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition on background-color and box-shadow to

Do's and Don'ts

**Do**

• Do use the primary pink (#ff7cd6) exclusively on call-to-action buttons, interactive elements, and brand moments—never on backgrounds or body text.
• Do apply md spacing (24px) between card elements and lg spacing (40px) between major sections to maintain visual rhythm and breathing room.
• Do use Poppins 600 weight for all headings and Roboto 400 weight for all body copy—never mix weights within a single text block.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on all text overlaid on product photography or gradient backgrounds to ensure WCAG AAA contrast.
• Do use full rounding (40px border-radius) exclusively on buttons and badges—never on cards or containers.
• Do transition all interactive elements (buttons, cards, inputs) over 150–200ms using cubic-bezier(0.4, 0, 0.2, 1) easing to feel responsive and polished.

**Don't**

• Don't use the primary pink on backgrounds, dividers, or non-interactive elements—it is reserved for CTAs and interactive states only.
• Don't apply shadows darker than rgba(0, 0, 0, 0.12) or use opacity values above 0.12—the design relies on subtle depth, not dramatic shadows.
• Don't mix Poppins and Roboto weights arbitrarily; use Poppins 600 for headings and Roboto 400 for body, with Roboto 600 only for button labels and badges.
• Don't use border-radius values other than those defined in the rounded scale (sm, DEFAULT, md, lg, xl, full)—arbitrary radii break visual consistency.
• Don't apply glassmorphism, backdrop-filter, or semi-transparent overlays on content surfaces—the design is clean and opaque, not frosted.
• Don't use more than three colors in a single UI section; the secondary purple (#5f5fa5) and coral (#dd6089) are supporting accents, not primary design elements.