--- id: pinkoi name: Pinkoi country: TW category: consumer-tech homepage: "https://www.pinkoi.com" primary_color: "#ff595a" logo: type: github slug: pinkoi verified: "2026-05-15" omd: "0.1" tokens: source: prose-derived extracted: "2026-06-09" note: "primary = §2 Mid Teal #10567b (--primary/--login base); purchase-exclusive CTA = coral #f16c5d" colors: primary: "#10567b" primary-hover: "#064162" primary-active: "#003354" link: "#2e90b7" canvas: "#f7f7f8" surface: "#ffffff" surface-hover: "#eeeeef" border-light: "#e5e5e6" border-mid: "#d3d3d5" heading: "#39393e" text-secondary: "#515156" muted: "#66666a" subtle: "#7c7c80" faint: "#929295" disabled: "#a8a8ab" ink: "#202026" purchase: "#f16c5d" purchase-hover: "#e56051" purchase-active: "#da5648" error: "#e63349" error-hover: "#d72136" success: "#2cac97" on-primary: "#ffffff" typography: family: { sans: "Helvetica Neue", cjk: "PingFang TC" } section-heading: { size: 22, weight: 700, use: "Section headings — weight-driven hierarchy" } card-title: { size: 18, weight: 700, use: "Card titles, mid headings" } subhead: { size: 16, weight: 500, use: "Subheadings, stronger labels" } body: { size: 14, weight: 400, use: "Body, button text default, breadcrumbs" } meta: { size: 13, weight: 400, use: "Inline metadata, secondary text" } badge: { size: 12, weight: 400, use: "Badge text, small labels, breadcrumbs" } caption: { size: 11, weight: 400, use: "Captions, timestamps" } spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 } rounded: { sm: 2, md: 4, lg: 8, full: 9999 } shadow: soft: "rgba(32,32,38,0.12) 0px 2px 4px" edge: "rgba(32,32,38,0.2) 0px 1px 1px" modal: "rgba(32,32,38,0.4) 0px 8px 24px" components: button-primary: { type: button, bg: "#10567b", fg: "#ffffff", radius: 4, padding: "8px 12px", font: "14px / 400", use: "Primary CTA, 1px #10567b border" } button-secondary: { type: button, bg: "#ffffff", fg: "#39393e", radius: 4, padding: "8px 12px", font: "14px / 400", use: "Cancel / neutral CTA, 1px #a8a8ab border" } button-purchase: { type: button, bg: "#f16c5d", fg: "#ffffff", radius: 4, padding: "8px 12px", font: "14px / 400", use: "Add to Cart / Buy Now (conversion-exclusive coral)" } button-danger: { type: button, bg: "#e63349", fg: "#ffffff", radius: 4, padding: "8px 12px", font: "14px / 400", use: "Destructive actions" } button-success: { type: button, bg: "#2cac97", fg: "#ffffff", radius: 4, padding: "8px 12px", font: "14px / 400", use: "Confirmations, follow" } input: { type: input, bg: "#ffffff", fg: "#39393e", radius: 4, padding: "8px 12px", font: "14px / 400", use: "Standard text input, 1px #d3d3d5 border" } product-card: { type: card, bg: "#ffffff", radius: 4, use: "6-column commerce product grid, image-led" } card: { type: card, bg: "#ffffff", radius: 4, padding: "16px", use: "Generic content card, 1px #d3d3d5 border" } card-badge: { type: badge, bg: "#10567b", fg: "#ffffff", radius: 2, padding: "1px 4px", font: "12px / 400", use: "Inline product card badge" } discount-badge: { type: badge, bg: "#e63349", fg: "#ffffff", radius: 2, padding: "2px 6px", font: "12px / 700", use: "Discount ribbon on product image" } components_harvested: true --- # 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: ; border: 1px solid ; 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 `, 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 `

`, `

`, `

` 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 **Primary** - Background: `#10567b` - Text: `#ffffff` - Border: 1px solid `#10567b` - Radius: 4px - Padding: 8px 12px - Font: 14px / 400 - Hover: bg/border `#064162` - Active: bg/border `#003354` - Use: Primary CTAs **Login** - Background: `#10567b` - Text: `#ffffff` - Border: 1px solid `#10567b` - Radius: 4px - Padding: 8px 12px - Font: 14px / 400 - Hover: bg/border `#064162` - Active: matches primary - Use: Auth flows **Secondary** - Background: `#ffffff` - Text: `#39393e` - Border: 1px solid `#a8a8ab` - Radius: 4px - Padding: 8px 12px - Font: 14px / 400 - Hover: bg `#f7f7f8` - Active: bg `#eeeeef` - Use: Cancel, dismiss, neutral CTAs **Purchase** - Background: `#f16c5d` - Text: `#ffffff` - Border: 1px solid `#f16c5d` - Radius: 4px - Padding: 8px 12px - Font: 14px / 400 - Hover: bg/border `#e56051` - Active: bg/border `#da5648` - Use: Add to Cart, Buy Now (coral, conversion-exclusive) **Danger** - Background: `#e63349` - Text: `#ffffff` - Border: 1px solid `#e63349` - Radius: 4px - Padding: 8px 12px - Font: 14px / 400 - Hover: bg/border `#d72136` - Active: bg/border `#c41428` - Use: Destructive actions **Green (Success)** - Background: `#2cac97` - Text: `#ffffff` - Border: 1px solid `#2cac97` - Radius: 4px - Padding: 8px 12px - Font: 14px / 400 - Hover: bg/border `#289c8a` - Active: bg/border `#289c8a` - Use: Confirmations, follow **Plain (Ghost)** - Background: transparent - Text: variant-color (e.g., `#10567b` for `--primary-plain`) - Radius: 4px - Padding: 8px 12px - Hover: text color hover only - Active: bg `#f7f7f8` - Use: Ghost variants of any button color ### Inputs **Default** - Background: `#ffffff` - Text: `#39393e` - Border: 1px solid `#d3d3d5` - Radius: 4px - Padding: 8px 12px - Font: 14px / 400 - Focus: border `#bfbfc1` - Error: `box-shadow: inset 0 0 0 1px #e63349`, border `#e63349` - Use: Standard text input — bordered rectangle, no floating-label **Compact** - Background: `#ffffff` - Border: 1px solid `#d3d3d5` - Radius: 4px - Padding: 5px 10px - Use: Dense inputs in tight layouts ### Cards **Product Card (`.m-card-product`)** - Background: `#ffffff` - Radius: 4px - Padding: 0 (image-led) - Max-width: 190px (6-column grid: `calc(16.66667% - 12px)`) - Margin: 0 6px (12px total gap) - Use: 6-column commerce product grid — image is the primary visual, chrome minimal **Standard** - Background: `#ffffff` - Border: 1px solid `#d3d3d5` - Radius: 4px - Padding: 16px - Use: Inferred from §1-§2 baseline (no explicit DS variant in source) — generic content card. ### Badges **Card Badge (`.s-card-badge`)** - Background: `#10567b` (or variant) - Text: `#ffffff` - Radius: 2px - Padding: 1px 4px - Font: 12px / 400 - Use: Inline product card badges — tight padding, smaller radius than buttons **Discount Badge (`.card-discount-badge`)** - Background: `#e63349` - Text: `#ffffff` - Radius: 2px 0 2px 0 (asymmetric folded-ribbon effect) - Padding: 2px 6px - Font: 12px / 700 - Shadow: `1px 1px 2px 0 rgba(32,32,38,.2)` - Use: Discount ribbon anchored to product image corner ### 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 ### 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 ## 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 , 0 .3em , 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 ` 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 `** — 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. --- ## 10. Voice & Tone Pinkoi speaks like a well-travelled friend recommending a designer they met at a craft fair: warm, specific, and quietly proud of the maker behind every product. The voice is **curatorial, bilingual, and commerce-forward** — English, Traditional Chinese, Japanese, Simplified Chinese, and Thai all render as first-class (never translated "to English" but authored for each locale, served via the per-language font stack in §3). Sentences avoid hype; they frame objects through the designer's intent. The house tagline "Design the way you are" is declarative, not aspirational — it says *your* taste is already valid, Pinkoi's job is to surface it. No em-dash-heavy marketing voice, no "game-changer" vocabulary, no purple-prose product poetry. Shop copy, on the other hand, is **the designer's voice** — Pinkoi deliberately lets shop owners write listings in their own register, because a ceramicist from Kyoto should not sound like a leather-worker from Taipei. | Context | Tone | |---|---| | Primary CTAs | Short, verb-led, bilingual-parallel (`Sign In / Register`, `Sell on Pinkoi`, `Add to Cart`). Title-case in English, no trailing punctuation. | | Purchase CTAs (coral `--purchase` button only) | Imperative + concrete object: `Add to Cart`, `Buy Now`. Never generic `Continue` or `Submit`. | | Product listings (shop-authored) | Designer's own voice preserved. Pinkoi does not normalize tone across shops — variance is the feature. | | Empty states (browsing / wishlist) | One-line explanation of *why* it is empty, plus one suggested next action. Never `No results`. | | Error messages (form validation) | Field-specific + blameless. Asterisk-marked required field labels (`.s-required:after { content: "*" }`) carry most of the work; error lines stay short. | | Success (add-to-cart, wishlist) | Confirmation of what happened, plus immediate next step (View Cart / Continue Browsing). Never celebratory. | | Editorial / Pinkoi Zine | Longer-form, essayistic. Designer interviews use direct quotation. Contrast with terse storefront chrome is intentional. | | Founder / corporate ("About") | First-person-plural, plain, slightly formal. `Pinkoi believes…`, `Pinkoi strives…`. | | Onboarding / seller recruitment | Invitational (`Be a Pinkoist`, `Let's work together`). No countdown urgency, no "limited time" manipulation. | **Forbidden phrases.** `World-class`, `amazing finds`, `curated for you` (overused across competitors), `Oops!`, `Something went wrong` without a reason, `No items found.` (too terminal — always give a path forward). In Traditional Chinese surfaces avoid `獨家優惠`, `超值` and other aggressive-discount vocabulary; Pinkoi's discount layer is the asymmetric ribbon badge (§4), not shouty copy. No emoji on money or checkout screens. No exclamation marks in error messages. No approximate prices on any surface — listings show exact amounts in the shop currency. **Voice samples.** - `"Design the way you are."` — brand line, homepage hero - `"Asia's cross-border design marketplace"` — site header positioning - `"Sell on Pinkoi"` — designer-recruitment CTA, header + footer - `"Be a Pinkoist"` — brand-community invitation, about page - `"Let's work together."` / `"Pinkoi loves collaborating with people. We can't wait to turn your good ideas into great realities."` — partnership CTA - `"Stay up to date on the latest designs"` — newsletter footer - `"Pinkoi believes that design has a transformative power that can permeate every aspect of our lives."` — about-page lead paragraph - Empty wishlist (illustrative): `"No favorites yet — tap the heart on anything you love and it will live here."` - Form error (illustrative): `"Please enter a valid email so the shop can reach you about your order."` ## 11. Brand Narrative Pinkoi was founded in **Taipei in 2011** by **Peter Yen (顏君庭)**, **Mike Lee (李讓)**, and **Maibelle Lin (林怡君)** — three Taiwanese engineers and designers who had watched Asian design culture thrive in craft fairs and boutique storefronts while remaining absent from global e-commerce ([en.pinkoi.com/about](https://en.pinkoi.com/about), [en.pinkoi.com/about/team](https://en.pinkoi.com/about/team)). Peter had spent four years at Yahoo in Sunnyvale leading the Yahoo Answers engineering team; weekends in San Francisco craft fairs seeded the question that became Pinkoi: *why can a potter in Taichung or a leather-worker in Kyoto only sell within a fifty-kilometre radius when the internet exists?* The thesis: build the infrastructure that lets an Asian independent designer sell to a buyer in Tokyo, Hong Kong, Bangkok, or São Paulo without building their own logistics stack, payment layer, or translation pipeline. The site's mission framing is explicit: *"Pinkoi believes that design has a transformative power that can permeate every aspect of our lives. Embracing great design can bring us closer to our ideal lifestyles"* ([en.pinkoi.com/about](https://en.pinkoi.com/about)). This translates into a refusal — Pinkoi is **not** a generic marketplace competing on SKU count or price. Peter has stated the position plainly: *"E-commerce companies that sell standard products are playing a game of capital, but that's not our game. Pinkoi sells non-standard products"* ([cherubic.com](https://cherubic.com/blog/founder-interview-pinkoi/)). And: *"While the saying 'money talks' may be true in some places, at Pinkoi our decisions are primarily based on providing users with a good experience"* ([cherubic.com](https://cherubic.com/blog/founder-interview-pinkoi/)). Every designer is vetted; every listing is the work of a small maker; the review system is treated as non-negotiable infrastructure, not a line-item to optimize away. **Founder backgrounds**: Peter Yen — 7 years Silicon Valley, **4 years as Senior Engineer Lead Yahoo Global HQ Social Search Group** ([Taiwan Panorama — Peter Yen and Pinkoi](https://www.taiwan-panorama.com/en/Articles/Details?Guid=3fb71a67-3e23-4723-8700-115a9afe9a71&CatId=7&postname=Peter+Yen+and+Pinkoi-Connecting+Designers+with+Consumers)); **Maibelle Lin** — senior designer at multiple Silicon Valley startups (interaction + UI/UX); **Mike Lee** — National Chiao Tung University civil engineering grad, founded multiple websites/online services prior to Pinkoi. Initial bootstrap: **NT$500,000 raised** between the three; Yen worked from a **7-square-meter study in his home** with Lee on backend and Lin on visual design. **2015 funding round: $9M from Sequoia Capital India + GMO Venture Partners** alongside **English-site launch** ([TechCrunch — Pinkoi $9M 2015-09](https://techcrunch.com/2015/09/30/pinkoi/), [Tracxn — Pinkoi](https://tracxn.com/d/companies/pinkoi/__LQaag4M-ow4XbNs2JjI2lfTj0h0L6XEX2Kv8O8jCk1s/founders-and-board-of-directors)). What Pinkoi has become is a design-commerce platform serving **5 primary markets (Taiwan, Hong Kong, Japan, mainland China, Thailand)** with ~6.25M members, 50,000+ active shops across 77 countries, and 95% cross-border sales share . The logo is *"designed using circular arcs and acute angles, conveying the brand's core values of diversity, inclusion and respect for the unique"* ([en.pinkoi.com/about](https://en.pinkoi.com/about)). The design language reflected in §1–§9 — high-density 6-column grids, bold-heavy Helvetica Neue + locale stacks, coral coral reserved for a single `--purchase` moment per page, flat matched-border buttons, conservative 4px radii — is the product-surface expression of that thesis: clarity and density serve the designer's work, and the chrome stays out of the way so the object can do the talking. ## 12. Principles 1. **The designer is the voice.** Pinkoi's chrome is the frame; the product and shop copy is the picture. Shop owners author their own listings in their own register; Pinkoi does not homogenize tone across shops. *UI implication:* Shop-owned surfaces (listing description, shop bio, designer story) use body text with minimal chrome. Pinkoi-owned chrome (nav, cart, checkout) uses the tight bold-heavy system. Do not style shop content with site chrome type scale — it will flatten the variance that is the product. 2. **Coral is finite.** `#f16c5d` (`--purchase`) appears on one button per page — the conversion moment. Spending it elsewhere dilutes the one signal users have learned to trust. *UI implication:* A product page has exactly one coral button (Add to Cart or Buy Now). A category page has zero. A checkout page has exactly one (Place Order). Never two coral buttons on the same viewport. 3. **Density is the browse feature.** Pinkoi users cross 6+ categories per session looking for a specific aesthetic, not a specific product. Whitespace hostile to scanning is anti-feature. *UI implication:* Product grid desktop default is 6 columns (`calc(16.66667% - 12px)`). Do not space product cards like a SaaS dashboard. Vertical rhythm between sections is generous (`64px 0`); within sections, micro-padding (`5px 10px` → `9px 14px`). 4. **Locale is infrastructure, not a language toggle.** Every surface ships through 5 font stacks (TC / SC / JP / TH / default). Copy is authored per locale, not translated from English. *UI implication:* Do not use `font-family: 'Helvetica Neue'` alone. Always use the full 5-stack fallback chain from §3. Microcopy strings should route through the locale bundle; do not inline English. 5. **Errors are field-local, blameless, and actionable.** Pinkoi's error convention leans heavily on the required-asterisk (`.s-required:after { color: #e63349 }`) plus an inline field-level message. Global error banners are a last resort. *UI implication:* Form error state sets `1px solid #e63349` border + `box-shadow: inset 0 0 0 1px #e63349` (doubled red) on the invalid input. Error text lives directly beneath the field in 12px `#e63349`. Do not show a dialog. Do not block the page. 6. **Bold is for structure, not buttons.** Weight 700 carries the visual hierarchy (headlines, prices, badges) — but button labels are weight 400. A button's weight comes from the matched bg+border combo, not its text. *UI implication:* `.m-br-button .text { font-weight: 400 }` is load-bearing. Never render a button label in weight 700 — it breaks the color-does-the-work principle and flattens the hierarchy that weight 700 establishes elsewhere. 7. **Shadows are evidence of history, not a depth system.** The primary `.m-br-button` system is flat. The skeuomorphic colored-glow shadow (pink / lime / gray recipes in §6) is **legacy specialty control territory** — favorite hearts, follow-shop — not a system-wide pattern. *UI implication:* When introducing a new component, default to flat + matched `1px solid` border. Do not use the legacy `0 .2em .2em -.1em , 0 .3em , 0 .5em .5em -.1em rgba(32,32,38,.12)` recipe on anything but the existing `.m-button-{pink,gray,green,unfav}` classes. 8. **Metrics are the designer's, not Pinkoi's.** The product lists the shop owner's rating, the shop owner's sales count, the shop owner's reviews — Pinkoi's own platform metrics (MAU, GMV) are absent from customer surfaces. *UI implication:* Card badges, product pages, and shop pages expose shop-level trust signals (rating stars, review count, "ships from "). Do not add platform-level badges like "Trending on Pinkoi" unless they reinforce a shop-level claim. ## 13. Personas *Personas below are fictional archetypes informed by publicly described Pinkoi user segments (Taiwan / Hong Kong / Japan cross-border design buyers), not individual people.* **Yi-Chen (怡蓁), 29, Taipei.** Product designer, opens Pinkoi 3–4 evenings a week to browse ceramics and stationery, averaging NT$1,200–NT$3,000 per basket twice a month. Re-visits the same 8–10 shops by name before exploring new ones, treating the wishlist as a curated mood board rather than a shopping list. **Wing-Lam, 34, Hong Kong.** Architect and wishlist-first buyer; discovers Pinkoi via Instagram posts of Japanese stationery shops she cannot reach otherwise, and reads every shop's "about" page before a first-time purchase. Toggles the site between Traditional Chinese and English by shop origin, and will abandon a cart if shipping logistics feel opaque. **Haruto (陽翔), 42, Tokyo.** Mid-career art director sourcing Taiwanese and Thai ceramics and leather goods that rarely reach Japanese department stores; evaluates photography, dimensions, and materials carefully before adding to cart. Low session frequency (~4x/month) but high basket value (¥15,000+), desktop-only, unlikely to use promotions. **Ploy, 26, Bangkok.** Early-career graphic designer and lurker-turned-seller — opened her own shop eighteen months ago, still browses daily as a buyer, and uses the platform bilingually (Thai + English). Bookmarks shops whose packaging and photography she admires as craft references, and engages heavily with Pinkoi Zine editorial. ## 14. States | State | Treatment | |---|---| | **Empty (wishlist, first visit)** | One-line `#66666a` body explanation of *why* the list is empty, plus one secondary button (`--secondary` variant — white bg, `1px solid #a8a8ab`, `#39393e` text) suggesting browsing a category. Never `No items`. Never an illustration. | | **Empty (search no-results)** | Single `#66666a` caption explaining the zero-match in the user's own query terms, plus 3–5 suggested alternate category chips. Never terminal `No results found.` | | **Empty (cart)** | `#39393e` heading at 16px weight 700, one-line body describing next step, single `--primary` button linking to the last-browsed category. No promotional banner injection — an empty cart is not an upsell moment. | | **Loading (first paint, product grid)** | Skeleton blocks at `#f7f7f8` (surface-soft) with 4px radius matching final card radius. Image areas are fixed-aspect skeletons; price and title areas are 14px-tall gray bars. Shimmer = 1.2s `linear-gradient` with 8% white highlight. No spinner. | | **Loading (inline action — add to cart)** | Coral button stays in place at `#f16c5d` bg, text swaps to a 3-dot animation in white. Button width does not change — prevents layout shift and double-tap. | | **Loading (route transition)** | Top-of-page 2px progress bar in `#2e90b7` (brand mid-teal), no overlay, previous page content stays visible. | | **Error (form field)** | Input border switches to `1px solid #e63349` plus `box-shadow: inset 0 0 0 1px #e63349` for the doubled-red effect. Helper text below in `#e63349` 12px weight 400. Required-field label gets `*` in `#e63349` via `.s-required:after`. | | **Error (inline banner — shop or shipping issue)** | Thin horizontal banner, `#e63349` left border (3px), `#f7f7f8` background, `#39393e` body text. One action link on the right. Not a modal. | | **Error (checkout — payment declined)** | Reserved escalated state: full-width `#e63349` border-left card at checkout top, one sentence describing the decline in blameless language, single retry button in `--primary`. Do not show a generic `Something went wrong`. | | **Success (add-to-cart)** | Toast at top-right, `#39393e` bg, white 14px weight 400 text, 3s auto-dismiss. Single sentence: confirms the item added, offers View Cart action in `#2e90b7` link color. No checkmark animation; no sound. | | **Success (order placed)** | Dedicated confirmation screen — not a toast. Order number in 20px weight 700, shop(s) notified list, estimated ship date per shop. `--secondary` button `Continue Browsing`, `--primary` button `View Order`. Never a coral button here — the purchase moment is past. | | **Skeleton** | `#f0f0f0` blocks at exact product-card dimensions (1:1 image, 2-line title, designer-name line, price). Shimmer 1.2s with 8% white highlight. Price placeholder renders as `—` per currency locale (`NT$ —` / `JP¥ —` / `USD $ —`) — never `$0`. Designer-name placeholder stays blank, never "Loading…" — a made-up designer name would be misleading on a craftsmanship-first marketplace. | | **Disabled** | Button opacity per default browser disabled treatment; border stays visible so geometry is stable. Disabled form inputs keep their `#d3d3d5` border — no grey-out wash — so re-enabled fields do not shift. | ## 15. Motion & Easing **Durations** (named tokens, extending the `transition: border .1s, color .1s, background .1s` convention already present in `.m-br-button`): | Token | Value | Use | |---|---|---| | `motion-instant` | 0ms | Toggle flips, radio state changes, reduce-motion fallback | | `motion-fast` | 100ms | Hover / focus transitions on buttons, links, cards (matches the production `.1s` already in `.m-br-button`) | | `motion-standard` | 200ms | Dropdown reveals, tooltip fades, cart-count updates | | `motion-slow` | 300ms | Modal open, filter sidebar slide, image lightbox | | `motion-page` | 250ms | Route transitions + top progress bar fade | **Easings:** | Token | Curve | Use | |---|---|---| | `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Things appearing — modals, dropdowns, toasts | | `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Things dismissing | | `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions — accordion, filter expand | **Spring / overshoot stance.** **Forbidden.** Pinkoi is a commerce surface populated by handmade designer goods whose value proposition is craftsmanship and restraint; bouncy UI motion reads as a consumer-app tic that fights the product. The closest peer brands (Asian design marketplaces, curated commerce) universally avoid spring; applying it would code Pinkoi closer to a flash-sale app than a curated marketplace. No `cubic-bezier` with y > 1, no overshoot on add-to-cart confirmations, no bouncy modal entries. Where a brand like Toss licenses spring for money-moved checkmarks, Pinkoi does not — the commerce confirmation in §14 is a dedicated screen, and a static checkmark at 300ms `ease-enter` is the whole effect. **Signature motions.** 1. **Button state transitions.** `transition: border .1s, color .1s, background .1s` (production CSS, literal). Hover/active state changes on all `.m-br-button` variants are simultaneous color + border interpolations at 100ms with `ease-standard`. 2. **Card hover (desktop only).** Product card scales imperceptibly (1.0 → 1.02) over 200ms `ease-standard`, or swaps to an alternate product image. No shadow change — the flat chrome is the brand. Mobile: no hover, no tap-highlight on the card (taps route directly to product page). 3. **Discount-ribbon entry.** When a discount badge renders on a product card, the `0 1px 1px 0 rgba(32,32,38,.2)` shadow fades in over 200ms. The badge itself does not rotate, bounce, or shimmer — it is a static anchor, not an attention grab. 4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. No exceptions. Hover color transitions still apply (they are not motion per the spec — they are state changes). Modal slide-ins become instant opacity toggles; route-transition progress bar is hidden entirely. ` inline. Interpretive / editorial claims (not documented Pinkoi statements): - "Coral is finite" framing as a principle — inferred from the exclusive `--purchase` variant naming + CSS-exclusive hex usage observed during base reference creation. - Persona behaviors (session frequency, basket range, browse patterns) — fictional archetypes informed by publicly described Pinkoi user segments and Asian cross-border design-commerce conventions, not individual people. Disclaimer present in §13. - Spring-forbidden stance — editorial reading; Pinkoi does not publicly declare a motion policy. Rationale tied to the brand's curated-commerce positioning, not a Pinkoi statement. Illustrative voice samples in §10 are explicitly marked; they are placeholders showing tonal intent, not strings observed on the live Pinkoi surface. --> --- **Verified:** 2026-05-08 (omd:migrate run 44 — Apple-tier) **Tier 1 sources:** en.pinkoi.com home + /about/team (live DOM via playwright — Search button **`#10567b`** Pinkoi Teal **split-radius `0px 8px 8px 0px`** (search-box trailing geometry) / 8×20 / 40px; **Country pills 100px** active `#fff8f7` Coral Tint / inactive `#eeeeef` Cool Gray / 14px·500; Outline Secondary `#fff` 4px / 40-52px / 14-16px·400-500; Charcoal text `#39393e` warm-cast). **Tier 2 sources:** styles.refero.design / getdesign.md — no record. **Tier 2 (Philosophy/founders/funding):** Wikipedia (Pinkoi), Taiwan Panorama (Peter Yen Yahoo origin), LinkedIn (Peter Yen), TechCrunch (2015-09 $9M Sequoia India + GMO Venture Partners), Tracxn, en.pinkoi.com/about + /about/team, blog.google (Pinkoi case study). **Style ref:** `pinkoi` (self / TW Asian retained). **Conflicts unresolved:** none. **Earlier addition:** split-radius search trailing + 100px country pills + Coral Tint active state + 3-fill discipline missed by prior pass. --- Source: https://oh-my-design.kr/design-systems/pinkoi · Raw twin of references/pinkoi/DESIGN.md Install 221 verified references for your AI coding agent: npx oh-my-design-cli install-skills