Changelog
Version history for the COCKSTOCK Brand Guidelines. Current build: V2.3.0.
V2.3.0 — Astro + Keystatic CMS Migration CURRENT
Build date: 2026-04-11 · Status: Live
- Architecture shift: Migrated from monolithic
index.html(6000+ lines) to Astro 5 with MDX content collections, component library, and Keystatic CMS. Enables non-technical team content editing + proper component reuse. - Component library: 20+ reusable components — Topnav, Sidebar, MobileSubbar, Breadcrumbs, PrevNext, CmdKModal, ChapterLayout, OverviewCard, plus content components (DataRow, Badge, Quote, Killed, InfoBox, Figure, Pillars, Pillar).
- Content as data: All 16 content chapters migrated to MDX files under
src/content/chapters/. Each chapter has structured frontmatter (letter, title, group, order, heroPhotoId). Chapter P (Assets Library) remains an interactive app page. - Keystatic CMS: Admin UI at
/keystaticfor non-technical editors. Currently local storage mode for dev — switch to GitHub mode before team rollout. Chapters collection with MDX editor (headings, lists, bold/italic, blockquote, dividers). - Pagefind full-text search: Build-time index of all 19 pages, 4597 words. Replaces legacy runtime
cmdkSearch(). Arrow-key navigation, Enter jumps, Escape closes. - Cloudflare adapter: Hybrid static + server rendering via
_worker.js. Static chapters + dynamic Keystatic admin. Deploy target unchanged (Cloudflare Pages). - Legacy preserved:
public/legacy.htmlkeeps the old monolith accessible at/legacy.htmlfor reference during migration period. - Deploy command changed:
npm run build(runsastro build && pagefind --site dist) thennpm run deploy(wrangler pages deploy dist).
V2.2.3 — Assets Library & Tag Management DEPLOYED
Build date: 2026-04-10 · Status: Live
- Photo Library → Assets Library: Renamed Chapter P. Now supports all file types (PDF, AI, fonts, etc.) with auto-detection. Non-image assets show extension badge + original filename on cards and in modal.
- Tag management: Multi-select tag filtering (OR logic), expand/collapse tag area (3-row default), tag sort (A-Z / Uses), tag autocomplete suggestions when adding tags, global tag delete (× on filter chips removes tag from all assets with confirmation).
- Tag cleanup: Removed ~160 junk tags from 164 assets — numeric IDs (01-61), pageN, month names, internal codes (caresoft, loicongtact, kieusung, goldcz, pinkcz).
- Upload simplified: Folder field removed (auto-assigned). Sort options reduced to Date Added + Size.
- Modal improvements: Download button added. X close button (top-right, absolute positioned). Delete button height normalized. Non-image preview with extension badge. Original filename displayed.
- Copy ID/URL fix: Clipboard API with textarea fallback for cross-browser support.
- Decorative icons: 15 SVG icons uploaded to R2 (images/icons/decorative/) with proper tags.
- Sidebar: Chapter title clickable (navigates + closes sidebar). Hover states on letter + name.
- Workers API: Expanded mime types — PDF, AI, EPS, PSD, ZIP, TTF, OTF.
- Card outlines: Sand border on all asset/photo cards.
V2.2.2 — R2 Image Hosting, Photo Library & Workers API DEPLOYED
Build date: 2026-04-09 · Status: Live
- Cloudflare R2: 290 images migrated from git repo to R2 bucket (cockstock-assets). Images served via Workers API at cockstock-api.nhatminh.workers.dev/img/. Repo size reduced from ~200MB to ~5MB.
- Workers API: CRUD endpoints — list, serve, upload, rename, update tags, delete. CORS configured for production + localhost. Cloudflare Access auth (SSO) on write endpoints.
- Chapter P (NEW): Photo Library — 290 images browsable with search, tag clusters, sort (ID/folder/tag/date/size), pagination (48/page). Click to view full image + metadata. Edit tags, delete, upload from browser. Fetches from Workers API.
- Chapter Q: Changelog — shifted from P to Q.
- Navigation: 17 chapters A–Q. Homepage grid + mobile menu updated.
- All 318 image src/href updated from local paths to R2 serve URLs.
- Decorative icons grid: 15 SVG icons added to Ch D Visual Identity with download buttons.
V2.2.1 — Typography, UI Polish & Asset Pipeline DEPLOYED
Build date: 2026-04-08 · Status: Live
- Typography consolidation: Removed FF More Pro & Exchange entirely. All display roles now use Fraunces Soft only (Thin 100, ExtraLight 200, Light 300). Google Fonts variable import added for designer flexibility.
- New logos: Main logotype & alternative ♥PIERCING logo SVGs replaced with updated versions. Menu toggle animates COCKSTOCK ↔ ♥PIERCING with crossfade.
- Part titles unified: Homepage & menu part titles — Fraunces Soft 30px, wt 200, letter-spacing -0.02em, color off-blk-lt.
- Sidebar letter: Fraunces Soft Thin 100, repositioned to align baseline with down button.
- Image naming: 279 files renamed to 4-tag convention (XXXXXXX-tagA_tagB_tagC_tagD). All data-photoid attributes verified.
- 19 Caresoft infographics: Embedded across Ch K (pricing, benefits, promos), Ch M (aftercare protocol, position care), Ch A (store locations).
- UI fixes: Sidebar shadow removed when closed. Scroll progress bar solid orange. Pre-scroll on chapter navigation fixed. Mobile overflow on Ch E fixed. Search icon replaced (filled style, 12px, optical nudge).
- Platform Map: Redesigned as 2-column card grid. Reordered: TikTok → Instagram → Shopee → Facebook → Website → Zalo OA. Zalo OA handle added.
V2.2.0 — Content Production System, Pricing & Product Tiers DEPLOYED
Build date: 2026-04-08 · Status: Live
Content Series Codes (Ch E): Prefix system (X/, K/, E/, T/) with series roster tables. Standardized naming: [PREFIX]/[SERIES]-[SỐ TRONG THÁNG]. KBK = Kịch bản khung.
Kênh TikTok & Instagram (Ch E): Platform handle registry — @cockstock, @cockstock.khuyen, @cock.stock, @thichxokhuyen active. @cockstockpiercing deprecated.
Flow sản xuất IG Feed (Ch E): Content pipeline (Angle Tree → Grid → Shotlists → Shoot → Air). 3 parallel strategies: Viral, Phễu Retarget, Thời trang hoá.
Short Video Production (Ch G): 6 new sections — Nhịp edit (2 levels), Mức zoom (XXS→XXL 7-level scale), Color Grading (3 rules), Chuyển cảnh, Âm nhạc (artlist.io + DO/DON’T), Quy tắc phụ đề.
Bảng giá xỏ (Ch K): Full pricing table by position — Tai cơ bản (99K-149K), Tai nâng cao (149K-210K), Cơ thể (180K-270K). Discount: 2 positions 10%, 3 positions 15%.
Phân loại sản phẩm 6 Tier (Ch L): Product classification by material (Post/Top/Stone). Tier 1 Full Titan → Tier 6 Full HK. CZ 5A & 6A quality grades.
Nguyên tắc bất biến (Ch B): 9 immutable principles including clinical aesthetic, no rebel, sensitivity-first, Vietnamese-first, founder privacy, typography rules, fixed palette, language purity.
Từ điển Khái niệm (Ch O): New chapter — 30+ term glossary covering materials, anatomy, tools, aftercare, and product architecture. Cross-referenced from Ch K and Ch L.
Badge system: New
Kênh TikTok & Instagram (Ch E): Platform handle registry — @cockstock, @cockstock.khuyen, @cock.stock, @thichxokhuyen active. @cockstockpiercing deprecated.
Flow sản xuất IG Feed (Ch E): Content pipeline (Angle Tree → Grid → Shotlists → Shoot → Air). 3 parallel strategies: Viral, Phễu Retarget, Thời trang hoá.
Short Video Production (Ch G): 6 new sections — Nhịp edit (2 levels), Mức zoom (XXS→XXL 7-level scale), Color Grading (3 rules), Chuyển cảnh, Âm nhạc (artlist.io + DO/DON’T), Quy tắc phụ đề.
Bảng giá xỏ (Ch K): Full pricing table by position — Tai cơ bản (99K-149K), Tai nâng cao (149K-210K), Cơ thể (180K-270K). Discount: 2 positions 10%, 3 positions 15%.
Phân loại sản phẩm 6 Tier (Ch L): Product classification by material (Post/Top/Stone). Tier 1 Full Titan → Tier 6 Full HK. CZ 5A & 6A quality grades.
Nguyên tắc bất biến (Ch B): 9 immutable principles including clinical aesthetic, no rebel, sensitivity-first, Vietnamese-first, founder privacy, typography rules, fixed palette, language purity.
Từ điển Khái niệm (Ch O): New chapter — 30+ term glossary covering materials, anatomy, tools, aftercare, and product architecture. Cross-referenced from Ch K and Ch L.
Badge system: New
.badge-v22 CSS class (blue) for V2.2 content markers.V2.1.9 — Typography Refinement, Content Architecture & Logo Placement DEPLOYED
Build date: 2026-04-07 · Status: Live
Typography CSS (Tasks 1-2): Homepage part titles switched to Fraunces Soft Light 28px. Chapter Mark (sidebar alphabet letter) switched to Fraunces Soft Light 64px — term “Chapter Mark” established.
Content Type Hierarchy (Task 2): Added Super Alt + Headline Alt rows (Fraunces Soft Light alternatives). Sub-head typeface changed to Mallory Compact Medium. Editorial typeface expanded to include Fraunces Soft Light.
Type Specimen (Task 3): Section renamed from “Vietnamese Diacritics — Character Specimen” to “Type Specimen.”
Logo Placement (Task 4): Added 9-zone placement grid (inspired by ClownZ brand book) with zone-to-collateral mapping table. Added Logo Misuse section with 6 rules. Replaced PENDING block.
Font Downloads (Task 5): Added download buttons for 11 brand-operational font files (Fraunces Soft 5 weights, Fraunces Soft 2, Mallory Compact 2, Mallory MP Compact 2). New
Booking Guidelines (Task 6): Removed duplicate from Ch N (was already in Ch I from V2.1.8 restructuring).
Editorial Strategy + Master Process (Task 7): Two new sections at top of Ch F — Editorial Strategy (why editorial leads, dual-concept system, feed color strategy) and Editorial Master Process (6-phase pipeline with owners, deliverables, quality gates).
Content & Format (Task 8): Renamed from “Content Angles & Production Standards.” Moved to first section of Ch E. Fixed double <h2> tag bug. Includes Production Standards and Content Processes sub-sections.
Instagram Feed Strategy (Task 9): Deferred — FigJam board CONTENT-CS (XdlNtw23WaD8qnxTJTkNrE, node 349:325) crawl pending for future session. Existing section preserved.
Content Type Hierarchy (Task 2): Added Super Alt + Headline Alt rows (Fraunces Soft Light alternatives). Sub-head typeface changed to Mallory Compact Medium. Editorial typeface expanded to include Fraunces Soft Light.
Type Specimen (Task 3): Section renamed from “Vietnamese Diacritics — Character Specimen” to “Type Specimen.”
Logo Placement (Task 4): Added 9-zone placement grid (inspired by ClownZ brand book) with zone-to-collateral mapping table. Added Logo Misuse section with 6 rules. Replaced PENDING block.
Font Downloads (Task 5): Added download buttons for 11 brand-operational font files (Fraunces Soft 5 weights, Fraunces Soft 2, Mallory Compact 2, Mallory MP Compact 2). New
.dl-btn-row-link CSS class. Replaced PENDING “Font Files — Awaiting Upload” block.Booking Guidelines (Task 6): Removed duplicate from Ch N (was already in Ch I from V2.1.8 restructuring).
Editorial Strategy + Master Process (Task 7): Two new sections at top of Ch F — Editorial Strategy (why editorial leads, dual-concept system, feed color strategy) and Editorial Master Process (6-phase pipeline with owners, deliverables, quality gates).
Content & Format (Task 8): Renamed from “Content Angles & Production Standards.” Moved to first section of Ch E. Fixed double <h2> tag bug. Includes Production Standards and Content Processes sub-sections.
Instagram Feed Strategy (Task 9): Deferred — FigJam board CONTENT-CS (XdlNtw23WaD8qnxTJTkNrE, node 349:325) crawl pending for future session. Existing section preserved.
V2.1.8 — Major Restructuring, Layout System & Asset Pipeline DEPLOYED
Build date: 2026-04-07 · Status: Live
Chapter restructuring (15 chapters A-O): Content Production reordered — E: Content & Channels (leads), F: Editorial, G: Short Video, H: Photography, I: Partner + Friend (NEW). Operations shifted to J-N, Changelog to O.
Content moves: Editorial Photography + Stills + Mixset → Ch F. Photography Types → Ch H. Video/Reels → Ch G. Feedback Photography + CSFriends + Booking → Ch I. 925 Silver Architecture → Ch L.
2-column layout system: .col-2 CSS grid class. Content max-width widened to 840px. Homepage 2×2 cards on mobile with 4:5 ratio thumbnails.
Photo naming convention: All 263 images renamed to XXXXXXX-tagA_tagB_tagC_tagD format. IMAGE_REGISTRY.md tracks all assets. 5pt ALL-CAPS photo IDs on every JPG photo globally (selectable, copyable).
Carousel system: Slideshow carousel (scroll-snap, translucent dots, click arrows, drag). Card-scroll carousel (auto-width cards, edge bleed). Display rules: 1-4 photos = grid, 5+ = carousel.
Logo section redesigned (Ch D): Main Logo with Clear Space + Minimum Size (74px demo) merged. White logo on dark photo backgrounds. CS Mark merged into single card. SVG logos in Color Combinations. Logo Animation embed with play button + Cream (.mp4) and Transparent (.mov) download options.
Styling section (Ch F, NEW): Styling Direction from Tết Creative Deck — moodboards, outfit direction, lighting & angles, model/makeup/hair. Posing Styles shotlist from Q2/2026 deck.
Production insights (Ch E): Instagram Feed Strategy + Photography Production Categories (Outsource/In-house/Internal) from Production Suggestion deck.
Sidebar redesign: Mobile/tablet: big letter (52pt Mallory Cond Bold) + chapter name + numbered H2/H3 TOC + ↑/↓ chapter nav buttons (sticky, greyed when at boundary). Desktop: Parts + Chapters nav (all 15 chapters with group labels).
Breakpoint extended: Mobile/tablet pattern (hamburger + subbar + toggle sidebar) now covers 0-1100px. Desktop with topnav tabs at >1100px.
Download button system: 24px off-black rounded square with off-white arrow. Always visible on cards. Applied to logo SVGs and logo animation.
UI fixes: macOS-style color dots on dropdown cards. Do/don’t bars spacing + no left color bar. Scroll-margin-top 90px for navbar clearance. Prev/next same row. Dropdown independence (align-items:start). Subbar shows chapter name.
PDF extractions: 21 pages from Tết Creative Deck + 6 pages from Production Suggestion deck + 1 page from Q2/2026 Posing Styles shotlist. All renamed with ID convention.
Div balance: 1312/1312 ✓ · 280 image refs, 0 broken · 15 chapters · 4,424 lines
Content moves: Editorial Photography + Stills + Mixset → Ch F. Photography Types → Ch H. Video/Reels → Ch G. Feedback Photography + CSFriends + Booking → Ch I. 925 Silver Architecture → Ch L.
2-column layout system: .col-2 CSS grid class. Content max-width widened to 840px. Homepage 2×2 cards on mobile with 4:5 ratio thumbnails.
Photo naming convention: All 263 images renamed to XXXXXXX-tagA_tagB_tagC_tagD format. IMAGE_REGISTRY.md tracks all assets. 5pt ALL-CAPS photo IDs on every JPG photo globally (selectable, copyable).
Carousel system: Slideshow carousel (scroll-snap, translucent dots, click arrows, drag). Card-scroll carousel (auto-width cards, edge bleed). Display rules: 1-4 photos = grid, 5+ = carousel.
Logo section redesigned (Ch D): Main Logo with Clear Space + Minimum Size (74px demo) merged. White logo on dark photo backgrounds. CS Mark merged into single card. SVG logos in Color Combinations. Logo Animation embed with play button + Cream (.mp4) and Transparent (.mov) download options.
Styling section (Ch F, NEW): Styling Direction from Tết Creative Deck — moodboards, outfit direction, lighting & angles, model/makeup/hair. Posing Styles shotlist from Q2/2026 deck.
Production insights (Ch E): Instagram Feed Strategy + Photography Production Categories (Outsource/In-house/Internal) from Production Suggestion deck.
Sidebar redesign: Mobile/tablet: big letter (52pt Mallory Cond Bold) + chapter name + numbered H2/H3 TOC + ↑/↓ chapter nav buttons (sticky, greyed when at boundary). Desktop: Parts + Chapters nav (all 15 chapters with group labels).
Breakpoint extended: Mobile/tablet pattern (hamburger + subbar + toggle sidebar) now covers 0-1100px. Desktop with topnav tabs at >1100px.
Download button system: 24px off-black rounded square with off-white arrow. Always visible on cards. Applied to logo SVGs and logo animation.
UI fixes: macOS-style color dots on dropdown cards. Do/don’t bars spacing + no left color bar. Scroll-margin-top 90px for navbar clearance. Prev/next same row. Dropdown independence (align-items:start). Subbar shows chapter name.
PDF extractions: 21 pages from Tết Creative Deck + 6 pages from Production Suggestion deck + 1 page from Q2/2026 Posing Styles shotlist. All renamed with ID convention.
Div balance: 1312/1312 ✓ · 280 image refs, 0 broken · 15 chapters · 4,424 lines
V2.1.7 — Brand Identity, Logo & V0.3 Consolidation DEPLOYED
Build date: 2026-04-06 · Status: Deployed
Core Values finalized (Ch B): Tận Tâm (Devoted), Tinh Tế (Refined), Chuẩn Không Thỏa Hiệp (Uncompromising Standards), Tươi Mới (Fresh). Operational values: Trách Nhiệm + Tử Tế. Status upgraded from PENDING to V2.1.
Tone of Voice promoted (Ch C): V0.3 Vietnamese tone upgraded to full V2.1 Tone of Voice — 3 principles (Trung Thực, Chân Thành, Tươi Trẻ), communication priority hierarchy, and tone spectrum by context (Social, Consultation, Aftercare, Education, KOL). Status upgraded from PENDING to V2.1.
Vision & Mission refined (Ch B): Merged V0.3 Vietnamese phrasing — “trải nghiệm toàn diện” and “khẳng định bản thân” integrated into English Vision and Mission statements.
Brand Differentiation (Ch B, NEW): Two differentiation cards — COCKSTOCK vs. piercing competitors (spa-clinic-premium) and vs. jewelry competitors (ear styling expert). From V0.3 positioning analysis.
Experience Criteria (Ch B, NEW): Communication priority hierarchy (Clear message → Core function → Emotional connection → Reduce noise) and 4 visual principles (Tối giản, Rõ trọng tâm, Bắt xu hướng, Clinic + Sensible).
Logo section upgraded (Ch D): Status PENDING → V2.1. Added Clear Space rules (d = ½ height of “T”), Minimum Size (74px digital / 2cm print), Logo Color Combinations (5 approved pairings + 1 forbidden), and size-mood guidance.
Color Pairing Method (Ch D, NEW): Structural rule — Background group (1 color) + Content group (2 colors), with Light and Dark pairing modes.
Responsive diacritics (Ch D): Vietnamese specimen uses clamp() font sizes for mobile readability.
Rebel/Maverick fix (Ch B): Removed residual “Rebel/Maverick credibility” reference. Replaced with “12+ years defining the category.”
V0.3 archives removed: All 8 collapsible archive blocks consolidated into current content. V0.3 CSS, variables, and changelog entry removed.
Favicon: CS mark SVG added as site favicon and documented in Ch D Logo section.
Color philosophy: V0.3 color philosophy merged inline into Ch D Color System intro.
@thichxokhuyen: Instagram handle updated in Ch H with full description.
Navbar scroll fix: scroll-padding-top and scroll-margin-top to prevent content hiding behind fixed navbar.
Page title: Simplified to “COCKSTOCK Brand Guidelines”.
Tone of Voice promoted (Ch C): V0.3 Vietnamese tone upgraded to full V2.1 Tone of Voice — 3 principles (Trung Thực, Chân Thành, Tươi Trẻ), communication priority hierarchy, and tone spectrum by context (Social, Consultation, Aftercare, Education, KOL). Status upgraded from PENDING to V2.1.
Vision & Mission refined (Ch B): Merged V0.3 Vietnamese phrasing — “trải nghiệm toàn diện” and “khẳng định bản thân” integrated into English Vision and Mission statements.
Brand Differentiation (Ch B, NEW): Two differentiation cards — COCKSTOCK vs. piercing competitors (spa-clinic-premium) and vs. jewelry competitors (ear styling expert). From V0.3 positioning analysis.
Experience Criteria (Ch B, NEW): Communication priority hierarchy (Clear message → Core function → Emotional connection → Reduce noise) and 4 visual principles (Tối giản, Rõ trọng tâm, Bắt xu hướng, Clinic + Sensible).
Logo section upgraded (Ch D): Status PENDING → V2.1. Added Clear Space rules (d = ½ height of “T”), Minimum Size (74px digital / 2cm print), Logo Color Combinations (5 approved pairings + 1 forbidden), and size-mood guidance.
Color Pairing Method (Ch D, NEW): Structural rule — Background group (1 color) + Content group (2 colors), with Light and Dark pairing modes.
Responsive diacritics (Ch D): Vietnamese specimen uses clamp() font sizes for mobile readability.
Rebel/Maverick fix (Ch B): Removed residual “Rebel/Maverick credibility” reference. Replaced with “12+ years defining the category.”
V0.3 archives removed: All 8 collapsible archive blocks consolidated into current content. V0.3 CSS, variables, and changelog entry removed.
Favicon: CS mark SVG added as site favicon and documented in Ch D Logo section.
Color philosophy: V0.3 color philosophy merged inline into Ch D Color System intro.
@thichxokhuyen: Instagram handle updated in Ch H with full description.
Navbar scroll fix: scroll-padding-top and scroll-margin-top to prevent content hiding behind fixed navbar.
Page title: Simplified to “COCKSTOCK Brand Guidelines”.
V2.1.5 — Image Fix & Context Transfer DEPLOYED
Build date: 2026-04-06 · Status: Live
Image path fix: Corrected 3 infographic image references from .jpg to .jpeg (material-comparison, aftercare-service, aftercare-supplies) — images now load correctly.
Project setup: Added .gitignore (node_modules/, .DS_Store, .wrangler/). CLAUDE.md comprehensively updated to capture full V2.1.4 implementation context, Icons folder inventory, multi-machine workflow, and all pending work items for continuity across devices.
Project setup: Added .gitignore (node_modules/, .DS_Store, .wrangler/). CLAUDE.md comprehensively updated to capture full V2.1.4 implementation context, Icons folder inventory, multi-machine workflow, and all pending work items for continuity across devices.
V2.1.4 — Typography & Icons DEPLOYED
Build date: 2026-04-06 · Status: Deployed
Typography system (Ch D): Vietnamese diacritics character specimen with full vowel/tonal mark coverage. Content type hierarchy table mapping 8 typographic roles (Super→Micro) to typeface, specs, and use cases. Font pairing Do/Don’t section with live correct vs incorrect examples. Inspired by ClownZ brand book design patterns.
Chapter hero images: Responsive aspect ratios — 16:9 on desktop (>1024px), 4:5 vertical crop on tablet/mobile.
Icons system: Icons/ folder added with 38 SVG assets (5 product line logos, 28 operational icons, 5 decorative mini-icons). Decorative icons integrated into 6 Golden Standards, aftercare cleaning supplies, and content strategy info boxes.
Product line logos: Titanium F136, Stainless Steel 316L, and 925 Silver product line logo cards added to Ch D Logo section. Material tier badges updated to use Icons/ folder paths.
Content strategy: Two Visual Modes note added — editorial photography for social media vs rich infographics for customer education. Material comparison infographic content and aftercare supplies illustrations embedded in Ch K and Ch L.
Aftercare (Ch L): CS Aftercare service description expanded (Miễn Phí / Chuyên Môn Cao / Độc Quyền). 4 essential cleaning tool cards with icons added to 3-Step Protocol.
Chapter hero images: Responsive aspect ratios — 16:9 on desktop (>1024px), 4:5 vertical crop on tablet/mobile.
Icons system: Icons/ folder added with 38 SVG assets (5 product line logos, 28 operational icons, 5 decorative mini-icons). Decorative icons integrated into 6 Golden Standards, aftercare cleaning supplies, and content strategy info boxes.
Product line logos: Titanium F136, Stainless Steel 316L, and 925 Silver product line logo cards added to Ch D Logo section. Material tier badges updated to use Icons/ folder paths.
Content strategy: Two Visual Modes note added — editorial photography for social media vs rich infographics for customer education. Material comparison infographic content and aftercare supplies illustrations embedded in Ch K and Ch L.
Aftercare (Ch L): CS Aftercare service description expanded (Miễn Phí / Chuyên Môn Cao / Độc Quyền). 4 essential cleaning tool cards with icons added to 3-Step Protocol.
V2.1.3 — UI Polish DEPLOYED
Build date: 2026-04-06 · Status: Deployed
Mobile navigation: Expandable H1 menu with dropdown chevrons showing nested chapters. Hamburger → X close animation. Two-line hamburger for sidebar toggle. Thinner sub-bar (33px) with breadcrumb-matching font size. Sub-bar hidden on homepage.
Typography: ALL-CAPS Part names across topnav tabs, sidebar headers, H1 menu, and overview group titles. COCKSTOCK brand typography influence applied to UI elements. Consistent TOC numbering: H2=numbers, H3=lowercase letters.
Homepage: Separate card grid layout with thumbnails and descriptions on all viewports (Notion-style). Cards respond to grid on desktop, stack on mobile.
Sidebar: Full H2-H3 heading tree in slide-in sidebar (tablet/mobile). Unified cream background across topnav, sidebar, sub-bar, and H1 menu.
Fixes: Removed orange build band from Chapter A. Scroll progress bar attached to sub-bar bottom (or topnav when sub-bar hidden). Instant page navigation (no scroll animation artifact). Breadcrumbs fully clickable as links.
Typography: ALL-CAPS Part names across topnav tabs, sidebar headers, H1 menu, and overview group titles. COCKSTOCK brand typography influence applied to UI elements. Consistent TOC numbering: H2=numbers, H3=lowercase letters.
Homepage: Separate card grid layout with thumbnails and descriptions on all viewports (Notion-style). Cards respond to grid on desktop, stack on mobile.
Sidebar: Full H2-H3 heading tree in slide-in sidebar (tablet/mobile). Unified cream background across topnav, sidebar, sub-bar, and H1 menu.
Fixes: Removed orange build band from Chapter A. Scroll progress bar attached to sub-bar bottom (or topnav when sub-bar hidden). Instant page navigation (no scroll animation artifact). Breadcrumbs fully clickable as links.
V2.1.2 — Supabase UI DEPLOYED
Build date: 2026-04-05 · Status: Deployed
UI redesign: Supabase docs-inspired three-column layout. Fixed left sidebar with 4 collapsible nav groups (Brand Foundation, Content Production, Operations, Meta). Right-side sticky “On this page” TOC with scroll-spy active heading highlight. Hidden below 1100px, falls back to in-chapter TOC on mobile.
Search: Cmd+K (⌘K) modal replacing sidebar search input. Arrow key navigation, Enter to jump, Escape to close. Searches across all h2, h3, p, td, data-value elements.
Navigation: Breadcrumb bar (Guidelines > Group > Chapter). Prev/Next chapter footer links. Card-based overview landing page with all 14 chapters organized by group.
Technical: CHAPTERS data array drives breadcrumbs, prev/next, and search labels. buildTOCs() preserved unchanged. Print styles updated to hide new UI elements.
Search: Cmd+K (⌘K) modal replacing sidebar search input. Arrow key navigation, Enter to jump, Escape to close. Searches across all h2, h3, p, td, data-value elements.
Navigation: Breadcrumb bar (Guidelines > Group > Chapter). Prev/Next chapter footer links. Card-based overview landing page with all 14 chapters organized by group.
Technical: CHAPTERS data array drives breadcrumbs, prev/next, and search labels. buildTOCs() preserved unchanged. Print styles updated to hide new UI elements.
V2.1.1 — Optimizing DEPLOYED
Build date: 2026-04-05 · Status: Deployed
Archetype rebalance: Creator-Lover (primary) + Explorer-Caregiver (secondary). All rebel/maverick framing permanently removed. Aligned to Mejuri, Astrid & Miyu, Rowan.
Positioning update: Ear piercing = 80%+ revenue acknowledged. Sensitivity-first (“baby wet wipe”) strategy. Q2/2026 concept: sensitivity, self-love, well-being.
Founder identity: Removed from guidelines (name, birth year). Industry field corrected to “Fashion-beauty piercing & ear curation.”
Origin story: Compacted — 5m² on Kim Ma Street, no sentimental framing.
New chapters added: E Editorial Production (art direction deck template, Q2/2026 example, seasonal color system, 3-day shoot breakdown, KOL booking brief), F Short Video Production (POV: Thợ Xỏ 24-scene template, Zodiac typography specs, Slay Day template, Xỏ Cận template, production rules from 75-sheet Q1 tracker), G Product Photography (split from old Channels chapter).
Chapter restructure: A–M lettering system. H2 sections numbered 1/2/3, H3 subsections lettered a/b/c.
New images: 12 editorial concept photos (images/concept-photo/), 10 art direction deck pages (images/art-direction/), 6 brand ops images (consulting SOPs, kids piercing, 925 Silver, content calendar).
Hero image: Replaced with editorial fashion portrait (concept-photo/a3f6rkw-model_closeface_soft.jpg).
Aftercare archive: Full CS Aftercare manual content (VN+EN, 25pp each) embedded as collapsible archival reference. Physical manuals retired from operations.
Consulting SOPs: Tư Vấn Xỏ + Tư Vấn Khuyên 6-step flows with infographic images embedded in Operations chapter.
Competitive intelligence: Six-brand research (Mejuri, A&M, Rowan, Studs, Nébuleuse, Maria Tash) reframed as “playbooks to learn from” rather than competitors. Revenue-focus positioning replaces full-body-piercing push.
UX fixes: Logo responsive (75% sidebar width). Dark mode removed. Chapter TOC display fixed (was showing raw numbering). Column width consistency enforced (max-width on .chapter). H3 numbering changed from a/b/c to i/ii/iii (prevents uppercase CSS conflict). Typography specimen page added with live type demos. Pierce pillar (Xỏ Xinh) content expanded with photos, position breakdown, and equipment specs. Changelog chapter N added.
Positioning update: Ear piercing = 80%+ revenue acknowledged. Sensitivity-first (“baby wet wipe”) strategy. Q2/2026 concept: sensitivity, self-love, well-being.
Founder identity: Removed from guidelines (name, birth year). Industry field corrected to “Fashion-beauty piercing & ear curation.”
Origin story: Compacted — 5m² on Kim Ma Street, no sentimental framing.
New chapters added: E Editorial Production (art direction deck template, Q2/2026 example, seasonal color system, 3-day shoot breakdown, KOL booking brief), F Short Video Production (POV: Thợ Xỏ 24-scene template, Zodiac typography specs, Slay Day template, Xỏ Cận template, production rules from 75-sheet Q1 tracker), G Product Photography (split from old Channels chapter).
Chapter restructure: A–M lettering system. H2 sections numbered 1/2/3, H3 subsections lettered a/b/c.
New images: 12 editorial concept photos (images/concept-photo/), 10 art direction deck pages (images/art-direction/), 6 brand ops images (consulting SOPs, kids piercing, 925 Silver, content calendar).
Hero image: Replaced with editorial fashion portrait (concept-photo/a3f6rkw-model_closeface_soft.jpg).
Aftercare archive: Full CS Aftercare manual content (VN+EN, 25pp each) embedded as collapsible archival reference. Physical manuals retired from operations.
Consulting SOPs: Tư Vấn Xỏ + Tư Vấn Khuyên 6-step flows with infographic images embedded in Operations chapter.
Competitive intelligence: Six-brand research (Mejuri, A&M, Rowan, Studs, Nébuleuse, Maria Tash) reframed as “playbooks to learn from” rather than competitors. Revenue-focus positioning replaces full-body-piercing push.
UX fixes: Logo responsive (75% sidebar width). Dark mode removed. Chapter TOC display fixed (was showing raw numbering). Column width consistency enforced (max-width on .chapter). H3 numbering changed from a/b/c to i/ii/iii (prevents uppercase CSS conflict). Typography specimen page added with live type demos. Pierce pillar (Xỏ Xinh) content expanded with photos, position breakdown, and equipment specs. Changelog chapter N added.
V2.1 — Foundation DEPLOYED
Build date: 2026-04-04 · Status: Live baseline
Initial V2 build from deep dive sessions. 10 chapters (01–11). Archetype: Rebel/Maverick + Lover/Aesthete (later revised in V2.1.1). Fraunces Soft + DM Sans typography locked. COCKSTOCK orange (#E66419) + cream (#FAF6F1) palette. 199 SEO article images embedded. Consulting SOPs, problem resolution protocols, cashier process embedded. Pricing tables, knowledge base position guides, aftercare tiers documented. Deployed to Cloudflare Pages via Wrangler.