# Design Language for globaltonecare.com ## Aesthetics and Tone globaltonecare.com is a **blobitecture clinic in soft daylight** — a wellness-grade skin-tone-care brand that is deliberately built around a single visual idea: **the human skin is not a flat color, it is a slow-moving topography of analogous warm hues, and our site behaves like one continuous, breathing blob of that tone-map.** Where most "global skincare" sites default to either clinical glassmorphism (Mayo Clinic crossed with a SaaS dashboard) or pastoral-romantic botanical (cottagecore meets Fenty), we go neither — we go **blobitecture**: a 1990s Greg Lynn / Future Systems / Karim Rashid lineage of architectural soft-form, where every container, every section divider, every imagery frame is an organic, melted, kidney-bean, lava-lamp, water-drop silhouette with no straight edges and no right angles, and where the white space between the blobs **is the design**, not the gaps. The mood is **friendly clinical** — friendly first, clinical second. This is the tone of a dermatologist who takes off her white coat to talk to you, or a Korean K-beauty pharmacist explaining a tonebook to a customer in Hangul-and-English mixed, or a Senegalese aunt who has been making shea-and-fonio masks for forty years and is now licensed to sell them in Tokyo and Toronto. Warmth is non-negotiable. Authority is implied, never declared. There is **never a stat-grid that says "98% of customers report..."** — we are radically biased against the SaaS reassurance pattern. Instead, the authority comes from the *softness of the form itself*: the blobs are confident enough not to need a hard edge. The lineage references we hold in our heads while designing: - **Karim Rashid's Blobjects** (1995-2005) — the kidney bean as the primal shape of human comfort. - **Olafur Eliasson's *The weather project*** at the Tate Modern — a single warm sun seen through a humidifier mist, pulled into UI. - **Greg Lynn's Embryological House** (1999) — a parametric blob that is never exactly the same twice, always within a family. - **Korean tonebook charts** — the 21-step Hanbok hue ladder used in traditional dye-matching (담황색 → 황토색 → 적황색). - **Pantone SkinTone Guide** (2012) — but reorganized as a *continuous* gradient, not a discrete swatch deck. - **Ma (間)** — the Japanese spatial concept that *negative space is not absence, it is the site of meaning*. The page's emotional arc is: arrive → exhale → notice the blob is breathing → realise the blob is a tone-map of human skin → realise *your tone* is somewhere in there → leave warmer than you arrived. No urgency. No countdown timer. No "limited drop." The blob just is, like a hot spring, and you can sit by it as long as you want. ## Layout Motifs and Structure The site is **ma-negative-space + layered-depth** — a deliberate inversion of the 93%-prevalent full-bleed pattern in the registry. We use **ma**: roughly 62% of every viewport is intentional, breathing emptiness — not as filler but as the **substrate the blobs float in**. The negative space is the canvas; the blobs are the marks. **The grid is not a grid.** There are no columns. There is a **soft baseline** at 1.6rem rhythm for type, but no horizontal column constraint. Each blob is positioned in absolute coordinates within a 1440 × variable-height SVG canvas, and the blob coordinates were generated once by a Worley-noise field with five attractor points (the five tone-anchor swatches — see Palette). This means the blob-positions feel both *organic* (no two distances are equal) and *intentional* (the eye can sense the underlying noise field as a soft pull toward the five anchors). **Layered depth is the sole structural mechanism.** We compose the page as **seven parallax layers** stacked along z-axis with explicit `translateZ` values: 1. **z = -800px: Tone Field** — the back wall, a 24-stop analogous gradient mesh from #FFE9D9 (Mochi) through #F5C9A1 (Honey-fonio) → #E7A578 (Adobe-shea) → #B8754F (Wormwood-clay) → #6B3A24 (Cacao-ink). Static, but it shifts hue 4° on cursor X-position. 2. **z = -500px: Mist Veil** — a 30% opacity warm-white SVG turbulence filter (`feTurbulence baseFrequency=0.012 numOctaves=2`) drifting at 8s loop. Adds Eliasson humidity. 3. **z = -250px: Big Blobs** — three giant kidney-bean blobs (each 600-900px on long axis), filled with semi-transparent versions of the tone anchors, rotating slowly (45s per revolution, never the same axis). 4. **z = 0px: Content Plane** — the only layer where text lives. Text is *never* on a colored blob; text always sits in the **ma** between blobs. This is the single most important layout rule. 5. **z = +200px: Line-Illustrations** — single-stroke continuous-line drawings of bottles, leaves, hands, faces in hairline 1px strokes (#3D241A on light bg, #FFE9D9 on dark bg). Path-draw-svg animated on enter. 6. **z = +400px: Small Blobs (Pulse Attention)** — tiny 24-80px blob-glyphs that pulse at 2.4s heartbeat (more on this in Patterns). These are the only true UI affordances — they are buttons, links, scroll-cues. 7. **z = +600px: Cursor Halo** — a single soft 200px radial-gradient circle that follows the cursor with magnetic-spring lag of 0.18s, blending in `mix-blend-mode: soft-light` to subtly warm whatever it passes over. **Section structure (six panels, each ~120vh, total ~720vh scroll):** 1. **Panel I — Arrive in the Tone Field.** Just one wordmark-blob and three big breathing blobs. 80% empty. Subhead pulled to the lower-right corner, hanging in ma. 2. **Panel II — The Tonebook.** A horizontal-scroll-on-vertical-scroll: as you scroll down, a 21-step Hanbok-tonebook ladder slides horizontally across the canvas. Each tone is a small blob, not a swatch. 3. **Panel III — The Maker's Hand.** A single line-illustration of a hand pouring oil, drawn live as you scroll into view. The page goes nearly blank around it — pure ma. 4. **Panel IV — Three Stories, Three Continents.** Three blob-cards in a triangle composition (NOT a card-grid). Each card is a different irregular blob silhouette. Inside each: one paragraph, no headers, no buttons. 5. **Panel V — The Ritual.** A vertical timeline-as-blob-river — a single tall blob meanders down 150vh, with five line-illustration touchpoints along its course (cleanse, tone, treat, moisturize, sun). No numbered steps. No icons. Just ma and lines. 6. **Panel VI — Find Your Tone.** A final interactive: the Tone Field gradient mesh from Panel I returns, but now the user can drag a small kidney-bean stylus across it, and it lifts a tone reading (hex + tonebook name). No form. No email capture. Just play. **Mobile (≤768px):** the blobs scale to ~140% of original positions to maintain visual presence; ma shrinks slightly to 52% but never below; horizontal scroll converts to slow auto-pan with manual override; layered-depth compresses from 7 to 4 z-layers (Tone Field, Big Blobs, Content, Small Blobs). ## Typography and Palette **Type stack — Google Fonts only.** - **Space Grotesk** (variable, weight 300–700) — the primary **sans-grotesk** voice for *all* body copy, all section labels, all small UI text, and the primary nav. Chosen specifically because Space Grotesk's slightly *narrower-than-normal* counter-spaces and its faintly humanist `a` and `g` give it warmth that Inter and Helvetica lack — and because at 6% prevalence in the registry, sans-grotesk is genuinely underused as a primary face. Set `font-feature-settings: "ss02" on` to enable the alternate single-storey `a` and softer `t` — these give Space Grotesk a friendlier, almost rounded quality that pairs beautifully with the blobs. - **Fraunces** (variable, opsz 9–144, SOFT 0–100, WONK 0–1) — the display face for the wordmark "globaltonecare", the Panel headers, and the tonebook entry names. Fraunces is the only Google variable serif with a `SOFT` axis that physically rounds the serif terminals — we set `SOFT: 80` and `WONK: 1` so the serifs literally curl into themselves like little blobs. Used at 72-180px for headings, with 0.92 line-height and -0.012em letter-spacing for the wordmark only. - **Caveat** (weight 400, single use) — exactly one handwritten word per panel, used as a marginalia annotation in 22px, 8° rotation, in the Cacao-ink color — like a dermatologist's pencil note in the margin of a chart. Total Caveat usage on the entire site: 6 words. No mono. No condensed. No display-bold. We deliberately avoid the 94%-mono and 53%-humanist defaults of the registry. The whole type system is two warm fluid sans + serif voices and one tiny handwritten whisper. **Palette — Analogous Warm-Earth (5 anchors + 2 ink + 1 highlight).** The palette is strictly **analogous** — every hue lies within a 38° arc of the color wheel from 18° (warm orange) through 30° (amber) to 18° below 0° (cacao-rose). Zero blue. Zero green. Zero violet. This is the singular constraint that makes the site feel like *one continuous skin*. Tone anchors (these are also the five Worley-noise attractor points): - `#FFE9D9` — **Mochi** — page background, the lightest tone, the rice-cake pale. - `#F5C9A1` — **Honey-fonio** — first warm step, the West African grain-honey hue. - `#E7A578` — **Adobe-shea** — mid-warm, sun-baked clay and shea-butter blend. - `#B8754F` — **Wormwood-clay** — deeper warm, Korean medicinal-mugwort terracotta. - `#6B3A24` — **Cacao-ink** — the deepest tone, used for ALL body text and line-illustrations. Ink + ground: - `#3D241A` — **Iron Cacao** — the only "near-black," used for the wordmark and Panel-header type. Never pure black. - `#FFFCF7` — **Linen White** — the only "near-white," used as the tone-field gradient endpoint and small-blob pulse fill. Never pure white. Highlight (used <1% of pixels, sparingly): - `#FF6A3D` — **Ember Orange** — the single accent color. Used ONLY for: (a) the cursor-halo at full opacity, (b) the Tone-Stylus tip in Panel VI, (c) the marginalia underline beneath a Caveat word. Never on a blob fill. Never on a CTA. (There are no CTAs.) The contrast ratio between Cacao-ink (#6B3A24) on Mochi (#FFE9D9) is 8.47:1 — passing AAA — but we are not designing for accessibility metrics, we are choosing this contrast because it *feels* like dermatology-textbook-on-cream-paper, which is the exact emotional target. ## Imagery and Motifs **Imagery is exclusively line-illustration.** No photography. No 3D-render. No stock product shots. No before/after slabs. This is a hard rule. The illustration system is a single **continuous-stroke vocabulary** of 14 hand-drawn-feeling SVGs, all drawn by the same imagined illustrator (an art-director directive — name her *Ines Yuna Coulibaly*, a fictional Korean-Senegalese line artist), all 1.25px stroke weight in Cacao-ink (#6B3A24), all rendered as a *single uninterrupted path* from start to finish, no lifts. The 14 motifs are: 1. A hand pouring oil from a small bottle. 2. A face in three-quarter, eyes closed, three soft folds at the brow. 3. A baobab leaf with three lobes. 4. A mugwort sprig (ssuk / 쑥) with seven serrations. 5. A cocoa pod sliced lengthwise. 6. A drop of liquid mid-fall, rendered as a comma. 7. A cotton boll mid-bloom. 8. A jar with a screw thread, lid set ajar. 9. A teaspoon with three drops descending. 10. A cupped palm holding an unspecified small thing. 11. The sun as a half-disk on a horizon line. 12. A wave-form, one undulation. 13. A pestle resting in a mortar. 14. The wordmark `globaltonecare` itself, hand-lettered in Caveat-style cursive. Each illustration animates on scroll-into-view via **path-draw-svg** with a 1.4s draw duration and `cubic-bezier(0.4, 0, 0.2, 1)` easing, drawn *as if by a slow ink pen* (0.85s pause at the halfway mark, mimicking a hesitation, a lift-and-replace of pen). After draw completes, the entire path **breathes** at 0.4 opacity oscillation on a 4.8s sine cycle — never fully visible, never fully invisible, always *present like skin*. **Decorative motifs** layer between the illustrations: - **Floating-elements (5%, but here load-bearing):** small 4-12px blob-dots, rendered in Honey-fonio at 18% opacity, drift slowly across the entire page at 0.3-1.2 px/s, like dust in a sunbeam. ~80 elements at any time. Generated by a noise-seeded particle system with a 2-minute loop. - **Layered-depth motif:** every blob has a *second, slightly offset, lower-opacity duplicate* of itself rendered 8px down and 6px right, at 14% opacity, in the next-deeper tone anchor. This produces a soft halation that reads as "the blob is sitting *on* the page, not stuck *to* it." - **Pulse-attention (the patterns choice):** the small blobs at z = +400px pulse — `transform: scale(1.0 → 1.08 → 1.0)` on a 2.4s cycle, with `box-shadow: 0 0 0 0 → 0 0 0 12px → 0 0 0 0 rgba(255,106,61,0.0 → 0.18 → 0.0)`. This is the heartbeat. It is the ONLY animated UI tell that something is interactive. We deliberately avoid the 85%-cursor-follow / 78%-magnetic / 84%-spring defaults — interactivity here is signaled by *steady pulse*, like a pulse oximeter, like a heartbeat through skin. **Texture overlay:** a single global SVG `feTurbulence` filter at 0.04 baseFrequency, 8% opacity, multiplied over the entire page — a barely-perceptible warm noise that gives the screen a *sebum-touched paper* quality, the soft tactile finish of a page in a Korean apothecary's reference book. It is the only "grain" we use, and it is everywhere. ## Prompts for Implementation Build globaltonecare.com as **one long single-page HTML document**. No SPA. No router. No framework. The entire site is `
` containing six `
` elements, plus a single root SVG canvas at the top of `` for the layered-depth blob system. **Stack:** - Vanilla HTML + CSS (custom properties heavily used for the analogous palette and the seven z-layers). - Vanilla JS (≈400 LOC) for: Worley-noise blob-position generation (run once on load, cached), scroll-driven parallax via `IntersectionObserver` + `requestAnimationFrame`, cursor-halo magnetic spring, path-draw-svg trigger, Panel VI tone-stylus. - **No GSAP. No Framer Motion. No Three.js.** The brief is *bias toward full-screen narrative experience*, and that means hand-rolled, hand-tuned, hand-easing. - Web Animations API (WAAPI) for the pulse-attention heartbeat — one shared `` definition, applied to all small blobs. **Panel-by-panel implementation:** 1. **Panel I — Arrive.** On load: page is Mochi (#FFE9D9). After 200ms, Tone Field gradient mesh fades in over 1.8s. After another 600ms, three Big Blobs fade in and begin their 45s rotation, each on a different rotation axis (X, Y, Z). At 1.4s, Fraunces wordmark `globaltonecare` morphs in from `font-variation-settings: SOFT 0, WONK 0` to `SOFT 80, WONK 1` over 1.2s — the serifs literally bloom into rounded blobs. Subhead in Space Grotesk 18/28 hangs in lower-right corner. No nav at top. (Nav appears after first scroll, see below.) 2. **Panel II — Tonebook.** 21 small tone-blobs (each 56-92px, irregular silhouettes) arranged on a horizontal track. As user scrolls down, the track slides left at 0.6× scroll velocity (sticky-positioned canvas). Each blob displays its tonebook name in Fraunces 14/20 italic when the cursor-halo passes within 80px (proximity-reveal, not hover — there is no hard hover state). At the 21st blob, a Caveat marginalia note in Cacao-ink reads "*you are somewhere here.*" 3. **Panel III — Maker's Hand.** Pure ma. 88% empty. Centered: a 480px line-illustration of the hand-pouring-oil motif, draws over 2.4s on enter. Two-line caption hangs below in Space Grotesk 16/26. Background remains Mochi. No other element. 4. **Panel IV — Three Stories.** Three blob-cards in a triangle: top-center, lower-left, lower-right. Each blob silhouette is a different Worley-noise instance (cards are NEVER the same shape twice). Each card contains: one line-illustration top-left of the blob, one paragraph (≈90 words) in Space Grotesk 17/28 in Cacao-ink, no header, no button, no link. Hover (or proximity for touch): the card's layered-depth shadow doubles (8px → 16px offset) over 0.6s ease-out. That is the entire interaction. 5. **Panel V — The Ritual.** A single tall blob (1100px tall) meanders vertically as a SVG path. Five line-illustrations sit along the path's curve at uneven intervals (cleanse-jar, tone-drop, treat-pestle, moisturize-palm, sun-half-disk). As user scrolls, the path **draws itself** along its length, and each illustration draws in turn as the path tip passes its anchor. No labels until path completion, then Caveat marginalia notes fade in beside each illustration. Total panel scroll: 180vh. 6. **Panel VI — Find Your Tone.** Tone Field gradient fills viewport. A small kidney-bean stylus (24px, Ember Orange, with pulse-attention heartbeat) sits at center. User drags it (mouse or touch) across the field. As they drag, a tooltip-blob follows with the current sampled hex value and the closest tonebook name in Fraunces italic. On release: the blob the user landed on grows to 320px and the wordmark `globaltonecare` re-renders on screen one final time at lower-right, with a single Caveat word: "*welcome.*" No form. No email capture. No "subscribe." Site ends. **Global behaviors:** - **Nav:** appears at scroll > 60vh, tucked top-right, three text links (no icons): `tonebook · ritual · find your tone`. Pure Space Grotesk 14/20, Cacao-ink, no underline until proximity-reveal. - **Cursor-halo:** the only cursor effect. 200px radial-gradient at 0.18s spring lag. On touch devices: the halo follows the most recent touch point and fades after 1.2s. - **Reduced motion:** if `prefers-reduced-motion: reduce`, big blobs stop rotating, path-draw still occurs but at 0.6× speed, pulse-attention still pulses (it is the heartbeat — removing it would kill the design language). Cursor-halo disabled. - **Loading:** full Tone Field gradient renders first (CSS, instant). Other layers fade in after fonts load. No loading spinner. **Storytelling priorities (in order):** 1. The page must feel like ONE continuous tone-map of skin from arrival to exit. 2. The negative space between blobs must read as *intentional breath*, not as missing content. 3. The pulse-attention heartbeat must be the only "look here" signal — never an arrow, never a "scroll" hint, never a CTA button. 4. Every line-illustration must feel hand-drawn by a single person. 5. The user should leave warmer than they arrived. **AVOID (explicit ban list):** - No card-grid (85% prevalence, banned). - No full-bleed hero with text overlay (93% prevalence, banned). - No CTA buttons. No "Sign up", no "Get started", no "Learn more". The site has zero buttons. - No pricing block. No tier comparison. - No stat-grid ("98% of users..."). No testimonial carousel. - No before/after photography. No product shots. No models. - No icons from a generic icon library (Feather, Heroicons, etc.). Only the 14 custom line-illustrations. - No glassmorphism (67% prevalence). No frosted blur. - No gradient buttons. No neon. No drop shadows on text. - No mono font anywhere. - No straight horizontal divider lines. No `
`. Section breaks are blob-edges only. ## Uniqueness Notes This design's distinct departures from the 210 designs already in the registry, and from the seed's defaults: 1. **Blobitecture as page architecture, not decoration.** Blobitecture sits at 1% in the registry, and where it has been used elsewhere, it tends to appear as decorative organic-blobs *on top of* a card-grid. Here, blobitecture **is the layout system itself** — there is no grid at all, blobs *are* the containers, and the negative space between them is *not* a gutter, it is the canvas. This is structurally different from any prior usage. 2. **Strict analogous palette, zero cool hues.** Analogous sits at 5% in the registry, and most analogous uses include a cool-counterpoint accent. globaltonecare contains zero blue, zero green, zero violet — every hue lives within a 38° arc (warm orange → amber → cacao-rose). The result is that the entire screen reads as one continuous skin-tone field. No registered design enforces this monochromatic-warm constraint. 3. **Pulse-attention as the only interactivity signal.** Pulse-attention sits at 2% in the registry and is typically used as a one-off micro-interaction. Here it is **promoted to the primary affordance language** — the heartbeat replaces hover-states, click-cues, scroll-hints, and CTA buttons, which together saturate the registry. Combined with a categorical ban on the 85%-card-grid and 93%-full-bleed defaults, the entire interaction model is rebuilt from scratch around a single pulsing rhythm. 4. **Ma-negative-space at 62% pixel density.** Ma-negative-space sits at 7% and is typically interpreted as "wide margins." Here it is interpreted literally — 62% of every viewport is intentional emptiness, and that emptiness is the *substrate*, not the *frame*. The layered-depth motif (10%) is then layered into the ma to give the emptiness *thickness*, so the void feels like warm humid air, not like a missing element. 5. **Line-illustration at 1.25px stroke, drawn as continuous-path SVG.** Line-illustration sits at 5% but is typically rendered as composite multi-path icons. Our 14 illustrations are each a *single continuous path* drawn without lifts, each animating in via path-draw-svg with a built-in mid-stroke hesitation — a deliberate signature of the imagined single illustrator, Ines Yuna Coulibaly. No other design in the registry commits to single-path continuous-line as a system. 6. **Type system is two variable fonts + one whisper.** Where 94% of registry designs include a mono face, globaltonecare contains zero mono. The type system is Space Grotesk (sans-grotesk, 6%, underused) + Fraunces with `SOFT 80, WONK 1` (the only registry use of Fraunces' soft-serif axis) + 6 total Caveat words for marginalia. This is a deliberate inversion of the most-used type pattern in the registry. 7. **Friendly tone without warm-inviting clichés.** Friendly sits at 18% but is typically expressed via "warm-inviting" (27%) and pastoral-romantic (34%) — sun-through-curtains, hand-lettered greetings, cozy-corner photography. globaltonecare achieves friendly via *form softness alone* — the blobs are friendly because they have no edges to threaten with. There is no copy that says "welcome" until the very last screen, and no human face in any photograph (because there is no photography). Friendly is a structural property, not a tonal coat of paint. 8. **Zero CTAs, zero buttons, zero forms.** This is the most radical commitment. The site has no `