Stratum

Overview

Stratum is a skin-science skincare theme built around one idea taken literally: every active ingredient has a real target layer in the skin, and the site shows it rather than just claiming it. Cool clinical porcelain and near-black ink, one condensed uppercase display face for headlines, an italic editorial serif for lede copy, and IBM Plex Mono for every eyebrow, nav link, and data figure — a strata-band layout system, not a template-y hero-plus-cards structure. Built to answer a direct client brief that this catalogue’s own AI-generated-prototype quality bar was being missed: the homepage and design system were hand-built first, then extended faithfully rather than redesigned.

1. A real-time WebGL2 skin cross-section (assets/js/cross-section.js), mounted as up to six independent simultaneous instances across the site. A hand-written fragment shader renders four distinct, hairline-bounded bands — tessellated corneum cells, rounder epidermal keratinocyte-like clusters, domain-warped fBm collagen-fibre streaks through the dermis, and sparse adipocyte circles in the hypodermis — and any element carrying a `data-st-probe-layer` attribute (an ingredient table row, a formula’s anchor-ingredient list, a standalone layer card) moves every mounted instance’s highlight to that ingredient’s real depth on hover or keyboard focus. Capability-gated to a genuine static CSS-gradient fallback (not a blank box) under prefers-reduced-motion, missing WebGL2, or Save-Data, and pauses its render loop via IntersectionObserver + visibilitychange rather than burning cycles off-screen.

2. A real, non-duplicated data model. inc/depth-data.php holds the four skin layers and eight ingredients with their genuine typical depth ranges and mechanisms, deliberately hedged copy throughout (“commonly associated with,” “formulated to reach,” never an absolute or therapeutic claim). The `st_formula` product CPT references 2-4 of those ingredients by a stable key rather than re-describing the science, so the homepage table, the standalone Ingredient Index, and every product page are structurally incapable of contradicting each other about where an active targets. 8 demo formulas ship with real prices, full INCI ingredient decks, and honest AM/PM usage notes carrying real retinol/AHA/vitamin-C safety caveats — no “clinically proven,” no unattributed percentages, no implied medical credential (the founder is titled Formulation Lead, a real cosmetic-chemistry role).

3. A complete page set on one system, not a homepage with thin inner pages: a layer-filterable Formulas archive rendered as a dense mono list rather than a card grid, single formula pages with their own scoped cross-section instance and full INCI data-table, a full-height standalone “The Section” page, the Ingredient Index, About, an AJAX contact form (honeypot, nonce, zero plugins), and a Journal with its own `.st-prose` typographic scope kept structurally separate from the section-layout classes so author content can never inherit rules meant for hand-built bands.

Zero third-party JavaScript anywhere in the theme. Four self-hosted, subset, Latin+Latin-ext fonts, each licence individually re-verified against its actual directory in the google/fonts GitHub repository rather than assumed. Full compliance kit: real i18n `.pot`, RTL stylesheet, complete unedited GPLv2 licence, idempotent WP-CLI demo importer that never bakes a literal host into content or menus.