oh-my-design-cli 1.0.2 → 1.1.0

package/references/nvidia/DESIGN.md

@@ -1,308 +0,0 @@
-# Design System Inspiration of NVIDIA
-
-## 1. Visual Theme & Atmosphere
-
-NVIDIA's website is a high-contrast, technology-forward experience that communicates raw computational power through design restraint. The page is built on a stark black (`#000000`) and white (`#ffffff`) foundation, punctuated by NVIDIA's signature green (`#76b900`) -- a color so specific it functions as a brand fingerprint. This is not the lush green of nature; it's the electric, lime-shifted green of GPU-rendered light, a color that sits between chartreuse and kelly green and immediately signals "NVIDIA" to anyone in technology.
-
-The custom NVIDIA-EMEA font family (with Arial and Helvetica fallbacks) creates a clean, industrial typographic voice. Headings at 36px bold with tight 1.25 line-height create dense, authoritative blocks of text. The font lacks the geometric playfulness of Silicon Valley sans-serifs -- it's European, pragmatic, and engineering-focused. Body text runs at 15-16px, comfortable for reading but not generous, maintaining the sense that screen real estate is optimized like GPU memory.
-
-What distinguishes NVIDIA's design from other dark-background tech sites is the disciplined use of the green accent. The `#76b900` appears in borders (`2px solid #76b900`), link underlines (`underline 2px rgb(118, 185, 0)`), and CTAs -- but never as backgrounds or large surface areas on the main content. The green is a signal, not a surface. Combined with a deep shadow system (`rgba(0, 0, 0, 0.3) 0px 0px 5px`) and minimal border radius (1-2px), the overall effect is of precision engineering hardware rendered in pixels.
-
-**Key Characteristics:**
-- NVIDIA Green (`#76b900`) as pure accent -- borders, underlines, and interactive highlights only
-- Black (`#000000`) dominant background with white (`#ffffff`) text on dark sections
-- NVIDIA-EMEA custom font with Arial/Helvetica fallback -- industrial, European, clean
-- Tight line-heights (1.25 for headings) creating dense, authoritative text blocks
-- Minimal border radius (1-2px) -- sharp, engineered corners throughout
-- Green-bordered buttons (`2px solid #76b900`) as primary interactive pattern
-- Font Awesome 6 Pro/Sharp icon system at weight 900 for sharp iconography
-- Multi-framework architecture (PrimeReact, Fluent UI, Element Plus) enabling rich interactive components
-
-### Do's and Don'ts
-
-- **DO** use NVIDIA Green `#76b900` exclusively as a SIGNAL color — borders, link underlines, button outlines, focus states.
-- **DON'T** use the green as a fill on large surfaces, backgrounds, or decorative gradients — that destroys its function as a fingerprint accent.
-- **DO** keep the foundation black-and-white. Black `#000000` for dark sections, white `#ffffff` for content, with green pinpricks of accent.
-- **DON'T** introduce mid-tone backgrounds (gray cards, tinted sections) — NVIDIA's contrast is binary by design.
-- **DO** use sharp 1-2px border radius across all components — buttons, cards, inputs.
-- **DON'T** use rounded or pill-shaped buttons — that reads as friendly consumer tech, not high-precision engineering hardware.
-- **DO** apply tight 1.25 line-height to headings for dense, authoritative blocks of text.
-- **DON'T** use generous 1.5+ line-height on display headers — it relaxes the engineered, compressed feel.
-- **DO** use `2px solid #76b900` as the primary button border pattern — green-outlined CTAs are the brand's default interactive shape.
-- **DON'T** use filled green buttons as the primary pattern — fills belong to consumer brands; NVIDIA reserves green for outlines and accents.
-- **DO** use Font Awesome 6 Pro/Sharp at weight 900 for sharp iconography matching the engineering aesthetic.
-- **DON'T** use rounded or playful icon sets — they conflict with NVIDIA's industrial precision.
-
-## 2. Color Palette & Roles
-
-### Primary Brand
-- **NVIDIA Green** (`#76b900`): The signature -- borders, link underlines, CTA outlines, active indicators. Never used as large surface fills.
-- **True Black** (`#000000`): Primary page background, text on light surfaces, dominant tone.
-- **Pure White** (`#ffffff`): Text on dark backgrounds, light section backgrounds, card surfaces.
-
-### Extended Brand Palette
-- **NVIDIA Green Light** (`#bff230`): Bright lime accent for highlights and hover states.
-- **Orange 400** (`#df6500`): Warm accent for alerts, featured badges, or energy-related contexts.
-- **Yellow 300** (`#ef9100`): Secondary warm accent, product category highlights.
-- **Yellow 050** (`#feeeb2`): Light warm surface for callout backgrounds.
-
-### Status & Semantic
-- **Red 500** (`#e52020`): Error states, destructive actions, critical alerts.
-- **Red 800** (`#650b0b`): Deep red for severe warning backgrounds.
-- **Green 500** (`#3f8500`): Success states, positive indicators (darker than brand green).
-- **Blue 700** (`#0046a4`): Informational accents, link hover alternative.
-
-### Decorative
-- **Purple 800** (`#4d1368`): Deep purple for gradient ends, premium/AI contexts.
-- **Purple 100** (`#f9d4ff`): Light purple surface tint.
-- **Fuchsia 700** (`#8c1c55`): Rich accent for special promotions or featured content.
-
-### Neutral Scale
-- **Gray 300** (`#a7a7a7`): Muted text, disabled labels.
-- **Gray 400** (`#898989`): Secondary text, metadata.
-- **Gray 500** (`#757575`): Tertiary text, placeholders, footers.
-- **Gray Border** (`#5e5e5e`): Subtle borders, divider lines.
-- **Near Black** (`#1a1a1a`): Dark surfaces, card backgrounds on black pages.
-
-### Interactive States
-- **Link Default (dark bg)** (`#ffffff`): White links on dark backgrounds.
-- **Link Default (light bg)** (`#000000`): Black links with green underline on light backgrounds.
-- **Link Hover** (`#3860be`): Blue shift on hover across all link variants.
-- **Button Hover** (`#1eaedb`): Teal highlight for button hover states.
-- **Button Active** (`#007fff`): Bright blue for active/pressed button states.
-- **Focus Ring** (`#000000 solid 2px`): Black outline for keyboard focus.
-
-### Shadows & Depth
-- **Card Shadow** (`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`): Subtle ambient shadow for elevated cards.
-
-## 3. Typography Rules
-
-### Font Family
-- **Primary**: `NVIDIA-EMEA`, with fallbacks: `Arial, Helvetica, sans-serif`
-- **Icon Font**: `Font Awesome 6 Pro` (weight 900 for solid icons, 700 for regular)
-- **Icon Sharp**: `Font Awesome 6 Sharp` (weight 300 for light icons, 400 for regular)
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display Hero | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25 (tight) | normal | Maximum impact headlines |
-| Section Heading | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25 (tight) | normal | Section titles, card headings |
-| Sub-heading | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75 (relaxed) | normal | Feature descriptions, subtitles |
-| Card Title | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25 (tight) | normal | Card and module headings |
-| Body Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67 (relaxed) | normal | Emphasized body, lead paragraphs |
-| Body | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
-| Body Bold | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | Strong labels, nav items |
-| Body Small | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67 (relaxed) | normal | Secondary content, descriptions |
-| Body Small Bold | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | Emphasized secondary content |
-| Button Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25 (tight) | normal | Primary CTA buttons |
-| Button | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25 (tight) | normal | Standard buttons |
-| Button Compact | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00 (tight) | 0.144px | Small/compact buttons |
-| Link | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | Navigation links |
-| Link Uppercase | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | `text-transform: uppercase`, nav labels |
-| Caption | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | Metadata, timestamps |
-| Caption Small | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25 (tight) | normal | Fine print, legal |
-| Micro Label | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | `text-transform: uppercase`, tiny badges |
-| Micro | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00 (tight) | normal | Smallest UI text |
-
-### Principles
-- **Bold as the default voice**: NVIDIA leans heavily on weight 700 for headings, buttons, links, and labels. The 400 weight is reserved for body text and descriptions -- everything else is bold, projecting confidence and authority.
-- **Tight headings, relaxed body**: Heading line-height is consistently 1.25 (tight), while body text relaxes to 1.50-1.67. This contrast creates visual density at the top of content blocks and comfortable readability in paragraphs.
-- **Uppercase for navigation**: Link labels use `text-transform: uppercase` with weight 700, creating a navigation voice that reads like hardware specification labels.
-- **No decorative tracking**: Letter-spacing is normal throughout, except for compact buttons (0.144px). The font itself carries the industrial character without manipulation.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary (Green Border)**
-- Background: `transparent`
-- Text: `#000000`
-- Padding: 11px 13px
-- Border: `2px solid #76b900`
-- Radius: 2px
-- Font: 16px weight 700
-- Hover: background `#1eaedb`, text `#ffffff`
-- Active: background `#007fff`, text `#ffffff`, border `1px solid #003eff`, scale(1)
-- Focus: background `#1eaedb`, text `#ffffff`, outline `#000000 solid 2px`, opacity 0.9
-- Use: Primary CTA ("Learn More", "Explore Solutions")
-
-**Secondary (Green Border Thin)**
-- Background: transparent
-- Border: `1px solid #76b900`
-- Radius: 2px
-- Use: Secondary actions, alternative CTAs
-
-**Compact / Inline**
-- Font: 14.4px weight 700
-- Letter-spacing: 0.144px
-- Line-height: 1.00
-- Use: Inline CTAs, compact navigation
-
-### Cards & Containers
-- Background: `#ffffff` (light) or `#1a1a1a` (dark sections)
-- Border: none (clean edges) or `1px solid #5e5e5e`
-- Radius: 2px
-- Shadow: `rgba(0, 0, 0, 0.3) 0px 0px 5px 0px` for elevated cards
-- Hover: shadow intensification
-- Padding: 16-24px internal
-
-### Links
-- **On Dark Background**: `#ffffff`, no underline, hover shifts to `#3860be`
-- **On Light Background**: `#000000` or `#1a1a1a`, underline `2px solid #76b900`, hover shifts to `#3860be`, underline removed
-- **Green Links**: `#76b900`, hover shifts to `#3860be`
-- **Muted Links**: `#666666`, hover shifts to `#3860be`
-
-### Navigation
-- Dark black background (`#000000`)
-- Logo left-aligned, prominent NVIDIA wordmark
-- Links: NVIDIA-EMEA 14px weight 700 uppercase, `#ffffff`
-- Hover: color shift, no underline change
-- Mega-menu dropdowns for product categories
-- Sticky on scroll with backdrop
-
-### Image Treatment
-- Product/GPU renders as hero images, often full-width
-- Screenshot images with subtle shadow for depth
-- Green gradient overlays on dark hero sections
-- Circular avatar containers with 50% radius
-
-### Distinctive Components
-
-**Product Cards**
-- Clean white or dark card with minimal radius (2px)
-- Green accent border or underline on title
-- Bold heading + lighter description pattern
-- CTA with green border at bottom
-
-**Tech Spec Tables**
-- Industrial grid layouts
-- Alternating row backgrounds (subtle gray shift)
-- Bold labels, regular values
-- Green highlights for key metrics
-
-**Cookie/Consent Banner**
-- Fixed bottom positioning
-- Rounded buttons (2px radius)
-- Gray border treatments
-
-## 5. Layout Principles
-
-### Spacing System
-- Base unit: 8px
-- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 15px
-- Primary padding values: 8px, 11px, 13px, 16px, 24px, 32px
-- Section spacing: 48-80px vertical padding
-
-### Grid & Container
-- Max content width: approximately 1200px (contained)
-- Full-width hero sections with contained text
-- Feature sections: 2-3 column grids for product cards
-- Single-column for article/blog content
-- Sidebar layouts for documentation
-
-### Whitespace Philosophy
-- **Purposeful density**: NVIDIA uses tighter spacing than typical SaaS sites, reflecting the density of technical content. White space exists to separate concepts, not to create luxury emptiness.
-- **Section rhythm**: Dark sections alternate with white sections, using background color (not just spacing) to separate content blocks.
-- **Card density**: Product cards sit close together with 16-20px gaps, creating a catalog feel rather than a gallery feel.
-
-### Border Radius Scale
-- Micro (1px): Inline spans, tiny elements
-- Standard (2px): Buttons, cards, containers, inputs -- the default for nearly everything
-- Circle (50%): Avatar images, circular tab indicators
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Page backgrounds, inline text |
-| Subtle (Level 1) | `rgba(0,0,0,0.3) 0px 0px 5px 0px` | Standard cards, modals |
-| Border (Level 1b) | `1px solid #5e5e5e` | Content dividers, section borders |
-| Green accent (Level 2) | `2px solid #76b900` | Active elements, CTAs, selected items |
-| Focus (Accessibility) | `2px solid #000000` outline | Keyboard focus ring |
-
-**Shadow Philosophy**: NVIDIA's depth system is minimal and utilitarian. There is essentially one shadow value -- a 5px ambient blur at 30% opacity -- used sparingly for cards and modals. The primary depth signal is not shadow but _color contrast_: black backgrounds next to white sections, green borders on black surfaces. This creates hardware-like visual layering where depth comes from material difference, not simulated light.
-
-### Decorative Depth
-- Green gradient washes behind hero content
-- Dark-to-darker gradients (black to near-black) for section transitions
-- No glassmorphism or blur effects -- clarity over atmosphere
-
-## 7. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile Small | <375px | Compact single column, reduced padding |
-| Mobile | 375-425px | Standard mobile layout |
-| Mobile Large | 425-600px | Wider mobile, some 2-col hints |
-| Tablet Small | 600-768px | 2-column grids begin |
-| Tablet | 768-1024px | Full card grids, expanded nav |
-| Desktop | 1024-1350px | Standard desktop layout |
-| Large Desktop | >1350px | Maximum content width, generous margins |
-
-### Touch Targets
-- Buttons use 11px 13px padding for comfortable tap targets
-- Navigation links at 14px uppercase with adequate spacing
-- Green-bordered buttons provide high-contrast touch targets on dark backgrounds
-- Mobile: hamburger menu collapse with full-screen overlay
-
-### Collapsing Strategy
-- Hero: 36px heading scales down proportionally
-- Navigation: full horizontal nav collapses to hamburger menu at ~1024px
-- Product cards: 3-column to 2-column to single column stacked
-- Footer: multi-column grid collapses to single stacked column
-- Section spacing: 64-80px reduces to 32-48px on mobile
-- Images: maintain aspect ratio, scale to container width
-
-### Image Behavior
-- GPU/product renders maintain high resolution at all sizes
-- Hero images scale proportionally with viewport
-- Card images use consistent aspect ratios
-- Full-bleed dark sections maintain edge-to-edge treatment
-
-## 8. Responsive Behavior (Extended)
-
-### Typography Scaling
-- Display 36px scales to ~24px on mobile
-- Section headings 24px scale to ~20px on mobile
-- Body text maintains 15-16px across all breakpoints
-- Button text maintains 16px for consistent tap targets
-
-### Dark/Light Section Strategy
-- Dark sections (black bg, white text) alternate with light sections (white bg, black text)
-- The green accent remains consistent across both surface types
-- On dark: links are white, underlines are green
-- On light: links are black, underlines are green
-- This alternation creates natural scroll rhythm and content grouping
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Primary accent: NVIDIA Green (`#76b900`)
-- Background dark: True Black (`#000000`)
-- Background light: Pure White (`#ffffff`)
-- Heading text (dark bg): White (`#ffffff`)
-- Heading text (light bg): Black (`#000000`)
-- Body text (light bg): Black (`#000000`) or Near Black (`#1a1a1a`)
-- Body text (dark bg): White (`#ffffff`) or Gray 300 (`#a7a7a7`)
-- Link hover: Blue (`#3860be`)
-- Border accent: `2px solid #76b900`
-- Button hover: Teal (`#1eaedb`)
-
-### Example Component Prompts
-- "Create a hero section on black background. Headline at 36px NVIDIA-EMEA weight 700, line-height 1.25, color #ffffff. Subtitle at 18px weight 400, line-height 1.67, color #a7a7a7. CTA button with transparent background, 2px solid #76b900 border, 2px radius, 11px 13px padding, text #ffffff. Hover: background #1eaedb, text white."
-- "Design a product card: white background, 2px border-radius, box-shadow rgba(0,0,0,0.3) 0px 0px 5px. Title at 20px NVIDIA-EMEA weight 700, line-height 1.25, color #000000. Body at 15px weight 400, line-height 1.67, color #757575. Green underline accent on title: border-bottom 2px solid #76b900."
-- "Build a navigation bar: #000000 background, sticky top. NVIDIA logo left-aligned. Links at 14px NVIDIA-EMEA weight 700 uppercase, color #ffffff. Hover: color #3860be. Green-bordered CTA button right-aligned."
-- "Create a dark feature section: #000000 background. Section label at 14px weight 700 uppercase, color #76b900. Heading at 24px weight 700, color #ffffff. Description at 16px weight 400, color #a7a7a7. Three product cards in a row with 20px gap."
-- "Design a footer: #000000 background. Multi-column layout with link groups. Links at 14px weight 400, color #a7a7a7. Hover: color #76b900. Bottom bar with legal text at 12px, color #757575."
-
-### Iteration Guide
-1. Always use `#76b900` as accent, never as a background fill -- it's a signal color for borders, underlines, and highlights
-2. Buttons are transparent with green borders by default -- filled backgrounds appear only on hover/active states
-3. Weight 700 is the dominant voice for all interactive and heading elements; 400 is only for body paragraphs
-4. Border radius is 2px for everything -- this sharp, minimal rounding is core to the industrial aesthetic
-5. Dark sections use white text; light sections use black text -- green accent works identically on both
-6. Link hover is always `#3860be` (blue) regardless of the link's default color
-7. Line-height 1.25 for headings, 1.50-1.67 for body text -- maintain this contrast for visual hierarchy
-8. Navigation uses uppercase 14px bold -- this hardware-label typography is part of the brand voice

package/references/pinkoi/DESIGN.md

@@ -1,309 +0,0 @@
-# Design System Inspiration of Pinkoi
-
-## 1. Visual Theme & Atmosphere
-
-Pinkoi is Asia's cross-border design marketplace, and its system reflects exactly that — a busy, multi-cultural commerce surface that prioritizes density, legibility, and conversion over minimalist whitespace. The page opens on a near-white canvas (`#f7f7f8` for grouped sections, `#ffffff` for primary surfaces) with dark slate text (`#39393e`) and a confident **teal-navy primary** (`#10567b`) that anchors actions like Login and primary CTAs. This isn't a "designer-chic" pastel palette as the brand name might suggest — the actual product surface is engineered for high-density browsing across Taiwan, Japan, Hong Kong, mainland China, and Thailand.
-
-Typography is **bold-heavy**, with weight 700 dominating across headlines, badges, and key CTAs (37 occurrences in core CSS vs. 16 of weight 400). There is no custom brand typeface; instead, Pinkoi runs a sophisticated locale-aware system stack — `Helvetica Neue, Helvetica, Arial` followed by `PingFang TC, Heiti TC, Microsoft JhengHei` for Traditional Chinese, `PingFang SC, Heiti SC, Microsoft YaHei` for Simplified, `ヒラギノ角ゴ Pro W3, Meiryo` for Japanese, and `Thonburi, Noto Sans Thai` for Thai. Every character renders in the user's native font infrastructure. This is design-as-localization, not design-as-decoration.
-
-What gives Pinkoi its quietly distinctive feel is its **flat semantic button system** with seven named variants. Every button — `--primary`, `--secondary`, `--purchase`, `--danger`, `--green`, `--login`, plus `*-plain` ghost variants — uses the same recipe: `background: <color>; border: 1px solid <same-color>; color: #fff;`. The matched border-and-background gives buttons a crisp "solid block" appearance without any shadow, while the explicit `1px` border ensures visual integrity even on high-DPI displays where pure-fill buttons can look fuzzy. Coral (`#f16c5d`) is reserved for the `--purchase` variant alone — the highest-conversion moment on every product page.
-
-**Key Characteristics:**
-- Locale-aware system font stacks — no custom typeface, but explicit per-language fallbacks (TC/SC/JP/TH)
-- Weight 700 dominant for headlines, CTAs, and emphasis (verified in CSS: 37x vs. 16x weight 400)
-- Conservative `border-radius` — `4px` is the workhorse on buttons and cards, `2px` on badges, `50%` on avatars
-- **Flat button system** — every variant uses `border: 1px solid <bg-color>`, giving a crisp solid-block look without shadow
-- 7-tier semantic button variants (`primary`, `secondary`, `danger`, `purchase`, `green`, `login`, `*-plain`) with full hover/active state matrices
-- Cool teal-navy (`#10567b`) as primary action color — overrides the warm "Pinkoi" naming
-- Coral (`#f16c5d`) reserved exclusively for the `--purchase` variant — the highest-conversion CTA
-- Skeuomorphic colored shadows reserved for **legacy specialty controls** only (`.m-button-{pink,gray,green,unfav}` — favorite hearts, follow-shop buttons), never on the primary `.m-br-button` system
-- High-density grid: 6-column product layout (`16.66%` each) with `12px` total horizontal margin per card
-- 12-step neutral gray scale from `#f7f7f8` → `#202026` for surfaces, borders, and text hierarchy
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Mid Teal** (`#10567b`): `--primary` and `--login` button **base** background. The default brand action color.
-- **Deep Teal** (`#064162`): `--primary` and `--login` **hover** state. Darker for visual press feedback.
-- **Darkest Navy** (`#003354`): `--primary` and `--login` **active/pressed** state. The deepest brand blue.
-- **Bright Teal** (`#2e90b7`): Link color, `--*-plain` visited state, secondary brand accent (used 22x in core CSS).
-- **Pure White** (`#ffffff`): Card surfaces, modal backgrounds, button text on filled buttons, `--secondary` button background.
-
-### Surface & Background
-- **Surface Soft** (`#f7f7f8`): Default page background tint, `--secondary` button hover, grouped section background (20x in core).
-- **Surface Hover** (`#eeeeef`): `--secondary` button active state, slightly heavier muted surface.
-- **Border Light** (`#e5e5e6`): Default thin dividers between rows.
-- **Border Mid** (`#d3d3d5`): Standard component border (cards, inputs, button outlines for non-filled variants — used 32x in core).
-
-### Neutral Scale (Text & Iconography)
-- **Text Primary** (`#39393e`): Default body and heading color (41 uses in CSS — the dominant text color).
-- **Text Secondary** (`#515156`): Slightly lighter for secondary headings and labels (10x).
-- **Text Muted** (`#66666a`): Captions, timestamps, descriptive text (26x).
-- **Text Subtle** (`#7c7c80`): Disabled-looking tertiary text.
-- **Text Faint** (`#929295`): Hints, placeholder, very low-emphasis labels.
-- **Text Disabled** (`#a8a8ab`): Disabled states, line-through original prices (`.oprice`), `--secondary` button border.
-- **Text Ghost** (`#bfbfc1`): Decorative or low-priority dividers, alternative line-through price color.
-- **Text Black** (`#202026`): Reserved for maximum-emphasis moments (overlays, modal titles).
-
-### Purchase (CTA-exclusive)
-- **Coral Base** (`#f16c5d`): `--purchase` button **base** background. Used **only** on the most important conversion moment per page (Add to Cart, Buy Now).
-- **Coral Hover** (`#e56051`): `--purchase` hover state. Confirmed CSS-exclusive: appears in only 2 places — the `--purchase` button and one decorative bold text rule.
-- **Coral Active** (`#da5648`): `--purchase` pressed state.
-
-### Error / Danger
-- **Error Red** (`#e63349`): The system's error/danger color (25 uses in core CSS). Used as: `--danger` button base, form validation error label/border/icon, required-field asterisk (`.s-required:after`), warning info text (`.g-info.g-warn b`), `--danger-plain` text hover. **Not** a promotional sale color — it's the validation/destructive red.
-- **Error Red Hover** (`#d72136`): `--danger` button hover.
-- **Error Red Active** (`#c41428`): `--danger` button pressed.
-- **Pink Visited** (`#f86173`): `--danger-plain` visited link state.
-
-### Success
-- **Success Green Base** (`#2cac97`): `--green` button base background. Teal-leaning green, not pure forest.
-- **Success Green Hover** (`#289c8a`): `--green` hover and active state.
-
-### Decorative / Legacy
-- **Brand Pink** (`#c83166`): Used inside the legacy skeuomorphic shadow recipe for pink-themed buttons (`.m-button-pink`). Also appears as accent in promotional decoration.
-- **Hot Pink** (`#ff6299`): `.m-button-pink:hover` background — legacy favorite/heart button.
-- **Lime Green** (`#7ec527` / `#65a40e` / `#4d9200`): `.m-button-green` legacy palette — applies to specialty controls only.
-
-### Shadow Tints (Layered Shadow Components)
-- **Shadow Soft** (`rgba(32,32,38,.12)`): The default soft drop shadow base.
-- **Shadow Edge** (`rgba(32,32,38,.2)`): Used in `0 1px 1px 0 rgba(32,32,38,.2)` for subtle row dividers and `.card-discount-badge`.
-- **Shadow Modal** (`rgba(32,32,38,.4)`): Stronger overlay shadow for modals and popovers.
-- **Shadow Tooltip** (`hsla(240,2%,41%,.8)`): Tooltip outer glow.
-
-## 3. Typography Rules
-
-### Font Stack (Locale-Aware)
-Pinkoi runs **per-language font stacks**. Always lead with `Helvetica Neue, Helvetica, Arial`, then append the user's locale stack:
-
-| Locale | Font Stack |
-|---|---|
-| Default (en) | `Helvetica Neue, Helvetica, Arial, Verdana, sans-serif` |
-| Traditional Chinese | `Helvetica Neue, Helvetica, Arial, PingFang TC, Heiti TC, Microsoft JhengHei, sans-serif` |
-| Simplified Chinese | `Helvetica Neue, Helvetica, Arial, PingFang SC, Heiti SC, Microsoft YaHei, sans-serif` |
-| Japanese | `Helvetica Neue, Helvetica, Arial, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, PingFang TC, sans-serif` |
-| Thai | `Helvetica Neue, Helvetica, Arial, Thonburi, Noto Sans Thai, Droid Sans Thai, sans-serif` |
-
-### Weights
-- **700**: Headings (H1–H4 verified weight 700 on `/browse`), prices, discount badge children, emphasis spans. Bold-heavy is the brand's typographic posture **for hierarchy and emphasis**.
-- **500**: Secondary emphasis — subheads, semi-bold UI labels.
-- **400**: Body text, long-form descriptions, **button text** (verified: `.m-br-button .text` renders at weight 400 on product pages — buttons rely on color and border for prominence, not weight), card badges (`s-card-badge`).
-- **600**: Reserved for narrow contexts; rarely used (only 2 occurrences in core CSS).
-
-> **Note on buttons**: Despite the bold-heavy headline posture, button labels themselves are weight 400. Visual prominence comes from the colored bg + matched border (e.g., coral `#f16c5d` for purchase) — not from text weight.
-
-### Size Scale (px)
-| Use | Size |
-|---|---|
-| Captions, timestamps | `9–11px` |
-| Badge text, small labels, breadcrumbs | `12px` |
-| Inline metadata, secondary text | `13px` |
-| **Body, button text default, breadcrumbs `g-breadcrumb`** | `14px` |
-| Subheadings, stronger labels | `15–16px` |
-| Card titles, mid headings | `18–20px` |
-| Section headings | `21–22px` |
-
-The scale stays compact — there is no extreme-large display type. Hero headlines on landing surfaces use 22px or scale up via percentage (`100%`, `2.2em`) rather than fixed large pixels.
-
-### Hierarchy is Weight-Driven, Not Size-Driven (verified via Playwright on `/browse`)
-Pinkoi's heading hierarchy is unusual: most `<h1>`, `<h2>`, `<h3>` render at **14–16px** — close to body size. The visual hierarchy comes from **weight 700** combined with **color shifts** (e.g., `#39393e` for primary headings, `#66666a` for secondary, `#2cac97` for special emphasis like "Flagship Shops"). This is the opposite of the SaaS convention of using 32–48px headlines. It reflects Pinkoi's commerce-density priority: every pixel of vertical space saved means more browsable inventory above the fold.
-
-### Special Conventions
-- **No letter-spacing customization** in the modern core CSS — system defaults are trusted (legacy `.g-breadcrumb` uses `letter-spacing: 1px`; `.g-breadcrumb-v2` removes it).
-- **`font-style: italic`** is reserved for testimonials and quoted content.
-- **`text-decoration: none`** on `:hover` for `.m-br-button` — buttons never look like links.
-- **`text-decoration: line-through`** for `.oprice` (original price before discount), in muted gray (`#a8a8ab` or `#bfbfc1`).
-- **Numerals are not tabularized** by default — Pinkoi's product prices flow with prose.
-
-## 4. Component Stylings
-
-### Buttons (`.m-br-button`)
-Base: `border-radius: 4px`, `transition: border .1s, color .1s, background .1s`, `outline: 0`, `cursor: pointer`, `text-align: center`, default text size `14px`. Icon `margin-right: 6px`. **Every filled variant uses `border: 1px solid <same-as-bg>` for a crisp solid block.**
-
-Verified state matrices from production CSS:
-
-| Variant | Base | Hover | Active | Use Case |
-|---|---|---|---|---|
-| `--primary` | bg `#10567b`, border `#10567b`, text `#fff` | bg/border `#064162` | bg/border `#003354` | Primary CTAs |
-| `--login` | bg `#10567b`, border `#10567b`, text `#fff` | bg/border `#064162` | (matches primary) | Auth flows |
-| `--secondary` | bg `#fff`, border `1px solid #a8a8ab`, text `#39393e` | bg `#f7f7f8` | bg `#eeeeef` | Cancel, dismiss, neutral CTAs |
-| `--purchase` | bg `#f16c5d`, border `#f16c5d`, text `#fff` | bg/border `#e56051` | bg/border `#da5648` | Add to Cart, Buy Now (coral, exclusive) |
-| `--danger` | bg `#e63349`, border `#e63349`, text `#fff` | bg/border `#d72136` | bg/border `#c41428` | Destructive actions |
-| `--green` | bg `#2cac97`, border `#2cac97`, text `#fff` | bg/border `#289c8a` | bg/border `#289c8a` | Confirmations, follow |
-| `--*-plain` | transparent, text-only color | text color hover only | bg `#f7f7f8` | Ghost variants |
-
-Buttons sit horizontally with `+ .m-br-button { margin-left: 10px }` for chained CTAs.
-
-### Cards (`.m-card-product`)
-- `box-sizing: border-box`, `display: inline-block`, `vertical-align: top`
-- `max-width: 190px`, width `calc(16.66667% - 12px)` → 6-column responsive grid
-- Horizontal margins: `0 6px` per card → `12px` total gap
-- Container `.m-card-container { margin: 0 -6px }` to negate edge gaps
-- Cards rely on the product image as the primary visual; chrome around them is minimal
-
-### Card Badges (`.s-card-badge`)
-- `border-radius: 2px` (smaller than buttons — sits inside a busy product card)
-- `font-size: 12px`, `font-weight: 400`
-- `padding: 1px 4px` (very tight)
-- `display: inline`, `position: relative`, `top: -1px` for optical alignment
-
-### Discount Badges (`.card-discount-badge`)
-- `border-radius: 2px 0 2px 0` — **asymmetric** corners create a folded-ribbon effect (top-right and bottom-left squared)
-- `box-shadow: 1px 1px 2px 0 rgba(32,32,38,.2)` — subtle lift to separate from product image
-- `position: absolute; top: 0; left: 0` — anchored to product image corner
-- Numeric content uses `font-weight: 700` (`.g-item-badge-discount span`)
-- Companion `.oprice` shows the original price line-through in muted gray (`#a8a8ab` / `#bfbfc1`)
-
-### Navigation
-- Sticky horizontal header on desktop with category dropdowns
-- Default text color `#39393e`, link/active state `#2e90b7`
-- Logo references `pinkoi_logo_2019.svg` — circular arcs + acute angles per brand identity refresh
-- Navigation links remain weight 400 (lighter than headlines) for scannability
-
-### Inputs
-- Border-color follows the neutral scale (`#d3d3d5` default, `#bfbfc1` on focus, `#e63349` on error)
-- Error state uses `box-shadow: inset 0 0 0 1px #e63349` for emphasized error borders
-- Border-radius `4px` to match buttons
-- Padding patterns from CSS: common `5px 10px`, `8px 12px`, `9px 14px` depending on size
-- Required-field asterisk: `.s-required:after { color: #e63349; content: "*"; margin-left: 4px }`
-- No floating-label or pill-shaped inputs — bordered rectangle is the convention
-
-### Tables
-- Used sparingly; commerce content is card-grid first
-- When used, row dividers via `0 1px 1px 0 rgba(32,32,38,.2)` shadow or `1px solid #e5e5e6` border
-
-## 5. Layout Principles
-
-### Spacing Scale
-Pinkoi works in a **5–10px micro-scale** for component padding and a coarser **24px+ rhythm** for section spacing:
-
-| Common Padding Values | Use |
-|---|---|
-| `0` (15 uses) | Reset, tight columns |
-| `2px`, `3px` | Badge insets, icon padding |
-| `5px 10px` | Default tight button/cell |
-| `4px 10px`, `6px 10px`, `8px 12px`, `9px 14px` | Button size variants S → M → L |
-| `14px 0`, `64px 0` | Vertical section rhythm |
-
-### Grid
-- 6-column product grid is the dominant pattern (`16.66667%` per card)
-- Container max-widths via media queries — content centers on wider viewports
-- Negative margins on container (`margin: 0 -6px`) to pull edge cards flush
-
-### Density
-Pinkoi is a **high-density** system. Whitespace is rationed; products, prices, badges, and CTAs are stacked tightly to maximize browsable inventory. Don't space components like a SaaS dashboard.
-
-## 6. Depth & Elevation
-
-Pinkoi has a **two-track shadow philosophy**: the modern button/card system stays mostly flat, while a small set of legacy specialty controls retain a skeuomorphic colored-underglow recipe.
-
-### Modern Surface Shadows (the default)
-- **Card discount badge** — `1px 1px 2px 0 rgba(32,32,38,.2)` (subtle lift over product image)
-- **Outline focus** — `box-shadow: 0 0 0 1px #d3d3d5` (border-as-shadow, often on focused inputs)
-- **Inline error** — `box-shadow: inset 0 0 0 1px #e63349` (red inset for invalid form fields)
-- **Single-pixel solid bottom** — `0 1px #515156` ("button depth"), `0 1px #d3d3d5` (subtle bottom edge)
-- **Tooltip glow** — `0 0 2px hsla(240,2%,41%,.8)`
-- **Modal/dialog** — `0 0 4px rgba(32,32,38,.4)`
-- **Row divider** — `0 1px 1px 0 rgba(32,32,38,.2)`
-
-The primary `.m-br-button` system has **no shadow at all** — its visual weight comes from the matched bg+border combo, not elevation.
-
-### Legacy Skeuomorphic Shadows (specialty controls only)
-A small set of older button classes — `.m-button-pink`, `.m-button-gray`, `.m-button-green`, `.m-button-unfav` — apply a layered colored shadow on `:hover`. These are typically used for favorite/follow-shop heart buttons, not primary CTAs.
-
-Pattern: `0 .2em .2em -.1em <BRAND_MID>, 0 .3em <BRAND_DARK>, 0 .5em .5em -.1em rgba(32,32,38,.12)`
-
-| Class | Hover bg | Mid shadow | Dark shadow |
-|---|---|---|---|
-| `.m-button-pink` | `#ff6299` | `#c83166` | `#a32252` |
-| `.m-button-green` | `#7ec527` | `#65a40e` | `#4d9200` |
-| `.m-button-gray` | `#8e9a9f` | `#66666a` | `#535c5f` |
-| `.m-button-unfav` | (transparent) | `#d3d3d5` | `#d3d3d5` |
-
-Treat this as a **legacy accent**, not a system-wide pattern. Don't generalize it to the main button system.
-
-### Z-Index Hierarchy
-- Sticky header sits above content
-- Dropdown menus above sticky header
-- Modal overlay above all chrome
-- Toast notifications above modals
-
-## 7. Do's and Don'ts
-
-- **DO** use weight 700 for headlines, CTAs, prices, and badges. Bold is the brand's voice.
-- **DON'T** apply weight 300 — Pinkoi never goes "airy thin." Headlines are confident and dense.
-- **DO** reserve coral (`#f16c5d` / `#e56051` on hover) for the single most important purchase moment per page.
-- **DON'T** use coral for navigation, generic CTAs, or info accents — it dilutes the conversion signal.
-- **DO** use the locale-aware font stack with the user's language fallback as the second priority.
-- **DON'T** load custom web fonts — system fonts respect each market's reading habits and reduce LCP across slow APAC connections.
-- **DO** keep the modern button system flat — `border: 1px solid <same-as-bg>` and no shadow. Visual weight comes from color, not elevation.
-- **DON'T** apply skeuomorphic shadows to primary CTAs — that recipe is reserved for legacy specialty controls (favorite, follow-shop buttons).
-- **DO** keep border-radius in the `2px–8px` range (badges 2px, buttons/cards 4px, occasional 6–8px on featured surfaces).
-- **DON'T** use pill-shaped or fully rounded buttons — they break the high-density commerce aesthetic.
-- **DO** pack product cards tightly with `12px` total gutters and 6-column grids on desktop.
-- **DON'T** overspace on landing pages — Pinkoi users browse a lot of inventory at once.
-- **DO** treat `#e63349` (and its hover/active siblings) as the **error/destructive red** — use it for form validation, danger buttons, required-field asterisks, and warnings.
-- **DON'T** confuse the error red with a sale-price color — discount badges use the asymmetric-corner ribbon style, not red text.
-
-## 8. Responsive Behavior
-
-### Breakpoints
-| Name | Range | Key Changes |
-|---|---|---|
-| Mobile | `<767px` | 2-column product grid, stacked nav, full-width CTAs |
-| Mobile (alt) | `<768px` | Some surfaces use 768px as the cutoff |
-| Tablet | `768px–1037px` | 3–4 column product grid, condensed nav |
-| Desktop | `1037px–1200px` | 5–6 column product grid, full nav |
-| Wide | `>1200px` | 6-column grid with side margins |
-| Extra Wide | `>1248px` | Centered max-width container |
-
-### Touch Targets
-- Buttons use `5px 10px` to `9px 14px` padding scale — adequate but compact
-- Card tap targets cover the entire `.m-card-product` area
-- Mobile nav typically expands to a full-screen drawer
-
-### Collapsing Strategy
-- 6-column product grid → 4 → 3 → 2 columns on shrinking width
-- Horizontal sticky nav → hamburger drawer below 768px
-- Multi-column footer → stacked sections below 768px
-- Filter sidebar → bottom sheet on mobile
-- Inline price + action → stacked below thumbnail on mobile
-
-### Image Behavior
-- Product images dominate cards — minimum 190px square
-- Hover states may swap to alternate angle on desktop only (no hover on mobile)
-- WebP/lazy-load standard practice (CDN: `cdn02.pinkoi.com`)
-- Card aspect ratio preserved across breakpoints
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Primary CTA bg: Mid Teal (`#10567b`); hover `#064162`; active `#003354`
-- Purchase CTA bg: Coral (`#f16c5d`); hover `#e56051`; active `#da5648` — **buy actions only**
-- Danger/Error: Red (`#e63349`); hover `#d72136`; active `#c41428` — destructive AND form validation
-- Success: Teal Green (`#2cac97`); hover `#289c8a`
-- Secondary button: white bg, `1px solid #a8a8ab` border, `#39393e` text
-- Default text: Slate Dark (`#39393e`)
-- Muted text: Slate Mid (`#66666a`)
-- Link / mid-brand: Bright Teal (`#2e90b7`)
-- Border default: Light Gray (`#d3d3d5`)
-- Surface tint: Cool White (`#f7f7f8`)
-
-### Example Component Prompts
-- "Create a Pinkoi-style product card: white background, 1px solid #d3d3d5 border, 4px radius, max-width 190px. Image fills the top 75% of the card. Below: title in 14px weight 700 #39393e (2-line clamp), price in 16px weight 700 #39393e, optional discount badge with `border-radius: 2px 0 2px 0` (asymmetric ribbon corners), `1px 1px 2px 0 rgba(32,32,38,.2)` shadow, absolute top-left."
-- "Build a Pinkoi primary button: 4px radius, 14px text weight 400, white text, #10567b background, `1px solid #10567b` border, 8px 12px padding. Hover: bg + border to #064162. Active: bg + border to #003354. No shadow — the matched bg+border combo gives the solid-block feel. Transition: `border .1s, color .1s, background .1s`. Note: button labels are weight 400, not 700 — visual weight comes from color + border, not text weight."
-- "Design a 'Add to Cart' purchase button: 4px radius, 14px weight 400 white text, #f16c5d background, `1px solid #f16c5d` border, 9px 14px padding. Hover: #e56051. Active: #da5648. This button must be the most visually weighted element on the product page — coral is finite and reserved for this moment only. Verified live: `.m-br-button--purchase` on product detail page exactly matches these values."
-- "Create a Pinkoi navigation header: white sticky bar, 14px weight 400 #39393e nav links with #2e90b7 hover, dropdown menus with 4px radius and `0 0 4px rgba(32,32,38,.4)` shadow. Logo (`pinkoi_logo_2019.svg`) on the left, search input center (border #d3d3d5, 4px radius), Login button (`--login` variant: #10567b bg + matched border + white text) on the right."
-- "Build a form input with error state: 1px solid #d3d3d5 border default, 4px radius, 8px 12px padding. On error, set border to #e63349 and add `box-shadow: inset 0 0 0 1px #e63349` for a doubled-up red border effect. Helper text below in #e63349 weight 400 12px. Required-field labels get an asterisk via `.s-required:after { color: #e63349; content: '*'; margin-left: 4px }`."
-
-### Iteration Guide
-1. **Use weight 700 for headings, prices, and emphasis spans** — but **button labels stay at weight 400**. Visual weight on buttons comes from color + matched border, not text weight.
-2. **Use the locale-aware font stack** — never hardcode a single font family. Lead with `Helvetica Neue, Helvetica, Arial`, append the user's language fallback.
-3. **`border-radius: 4px`** is the workhorse. `2px` for badges. Discount badges use asymmetric `2px 0 2px 0`. Never go above `10px` except on rare hero overlays.
-4. **Filled buttons get `border: 1px solid <same-as-bg>`** — this matched border gives the crisp solid look. Never add a shadow to the modern button system.
-5. **Reserve coral (`#f16c5d`) exclusively for the `--purchase` variant**. Using it elsewhere weakens conversion.
-6. **Treat `#e63349` as the error red across ALL contexts** — `--danger` button, form validation borders, required-field asterisks, warning text. It's not a sale-price color.
-7. **High-density spacing** — micro-padding (`5px 10px` to `9px 14px`) on controls, generous (`24px+`, `64px 0`) only between full sections.
-8. **6-column product grid** is the desktop default. Cards are `calc(16.66667% - 12px)` wide with `0 6px` horizontal margins.
-9. **Use `#39393e` for body text**, never pure black. The slightly warm dark-gray reads better against the soft `#f7f7f8` surface tint.
-10. **Skeuomorphic colored shadows are LEGACY** — only apply them to favorite/follow-shop accent buttons (`.m-button-{pink,gray,green,unfav}`), never to the main `.m-br-button` system.