PADIORA — Website Plan

STRATEGY · SITEMAP · DESIGN SYSTEM · WIREFRAME · ROADMAP · Doc PAD-WEB-PLAN-v1
The short version. PADIORA is a two-product brand built around one System, so the site's whole job is: tell the ecosystem story → prove the science → sell the pair. Platform = Shopify custom theme. Direction = hybrid (serene, premium look with a clinical, ecosystem spine). This doc is the map; the homepage mockup shows it built.

1 · Strategy & positioning

Who it's for

Skincare-savvy shoppers (largely from TikTok) who want visible brightening/even tone but are tired of guessing. They respond to clear routines, named actives, and a sense of "science you can trust."

The one idea

Brightening isn't one product — it's a system. RÉVEIL resets weekly, PERLE corrects daily. The site sells the pair and the protocol, not two separate SKUs.

Positioning line options

Claims guardrail. On the website we can use the fuller mechanism story (Quadra-Luminance Blockade, Tri-Phase Cellular Breach, "prep improves absorption") in appearance-based language. Keep hard drug/structure-function claims off. Saad signs off final on-site sentences before launch.

2 · Sitemap

Lean launch set (v1) plus a phase-2 wishlist. Everything a first-time visitor needs to understand and buy lives in five pages.

● HOME
├─ The System how it works
│ ├─ the 1–2 protocol (RÉVEIL → PERLE)
│ ├─ the two mechanisms
│ └─ the Ecosystem story
├─ Shop
│ ├─ PERLE — Daily Corrective Serum (PDP)
│ ├─ RÉVEIL — Weekly Resurfacing Ampoule (PDP)
│ └─ The Brightening System — bundle (PDP)
├─ The Science authority ├─ About brand / ecosystem ├─ Support
│ ├─ FAQ
│ ├─ Shipping & Returns
│ └─ Contact
└─ Cart → Checkout Shopify
phase 2 →
· Ingredient / actives library · Skin-concern quiz · Blog / Journal · Reviews hub · Rewards · Ecosystem teaser (Systems 2–6)

3 · Design system

Straight from the locked pack artwork — the site should feel like the box.

Colour

Navy #1A1A2E · text, dark sections Biolume Cyan #5ABCCC · accent Slate #6A8090 · secondary text Bead #B5D4F4 · motif Paper #F7FAFB · light sections Cream #F3EFE9 · warm break

Type

EB GaramondWordmark, product names, big display headings, pull-quotes (the "premium" voice). Weight ≤500.
JostBody, nav, buttons, labels, UI (the "clinical/clean" voice). Weight 300–500.
Space MonoMicro-labels / spec accents only (eyebrows, doc chrome). Optional.

Motifs & components

4 · Homepage wireframe

Section-by-section blocks (top → bottom). The live mockup is this wireframe, styled.

sticky header
PADIORA · nav + cart
The System · Shop · The Science · How to Use · About
hero
"Brightening, engineered as a system."
Sub-line + two CTAs (Shop the System / See the Science) · duo pack shot on the right
trust bar
Made in South Korea · 4 actives · Ecosystem science · TikTok
the system
One System · Two Steps
RÉVEIL (weekly) → PERLE (daily) cards + the sequence/synergy line
products
Meet the pair
PERLE & RÉVEIL cards — pack shot, actives chips, price, Add to Cart
10% Niacinamide4% TXA10% Glycolic1% Bromelain
the science
Two mechanisms, one goal
Quadra-Luminance Blockade (4 steps) · Tri-Phase Cellular Breach (3 steps) · "System 1 of the Ecosystem"
protocol
The protocol — Reset · Correct · Protect
3-step how-to (RÉVEIL first → PERLE → SPF AM)
social proof
Early reactions
3 review quotes + star ratings (placeholder → real at launch)
bundle CTA
Start the system — Add the System
Bundle price, save-vs-separate, free shipping
footer
Shop · Learn · Newsletter (10% off)
Houston, TX · Made in South Korea · legal links

5 · Page-by-page content

Product page (PERLE / RÉVEIL)

  • Gallery + pack shot, name, role, price, Add to Cart
  • Actives chips + "what it's for"
  • The mechanism (its 4- or 3-step)
  • How to use + where it sits in the system
  • Full INCI (accordion) · size · PAO
  • Reviews · cross-sell the other half of the pair

The System / How it works

  • The "1–2" story: RÉVEIL opens → PERLE delivers
  • Sequence + cadence diagram
  • Both mechanisms side by side
  • The Ecosystem framing (System 1 of 6)
  • CTA → the bundle

The Science

  • The activation idea in plain language
  • Actives glossary (Niacinamide, TXA, Arbutin, AHAs, Bromelain…)
  • Mechanism deep-dives
  • Formulation principles (South Korea, ≤ claims)

About & Support

  • About: brand origin, the Ecosystem vision, Houston + Korea
  • FAQ: is it a peel? how often? SPF? sensitivity?
  • Shipping/Returns · Contact form

6 · Build roadmap (Shopify)

1
Foundation — pick base theme (you already have the padiora-store repo), set brand tokens (colour, EB Garamond + Jost, logo), global header/footer, cyan-stripe styling.
2
Products & commerce — create the 3 products in Shopify (PERLE, RÉVEIL, System bundle), prices, images, variants, INCI metafields, inventory + TikTok Shop sync.
3
Homepage — build the sections from the mockup as theme sections (reorderable in Shopify's editor).
4
Content pages — The System, The Science, About, FAQ/Support with the outlines above.
5
Polish & launch — reviews app, email capture (10% off), SEO/meta, mobile QA, analytics + pixels, legal pages. Then go live on the real domain.
Open the homepage mockup →
PADIORA Skincare LLC · Houston, TX · Doc PAD-WEB-PLAN-v1 · working document — structure & direction for the Shopify build. Copy is draft; Saad approves final on-site claims.