---
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"
---

# 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

**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 <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.

---

## 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 <!-- verified: https://en.pinkoi.com/about, 2026-04 -->
- `"Asia's cross-border design marketplace"` — site header positioning <!-- verified: https://en.pinkoi.com, 2026-04 -->
- `"Sell on Pinkoi"` — designer-recruitment CTA, header + footer <!-- verified: https://en.pinkoi.com, 2026-04 -->
- `"Be a Pinkoist"` — brand-community invitation, about page <!-- cited: https://en.pinkoi.com/about/team -->
- `"Let's work together."` / `"Pinkoi loves collaborating with people. We can't wait to turn your good ideas into great realities."` — partnership CTA <!-- verified: https://en.pinkoi.com/about, 2026-04 -->
- `"Stay up to date on the latest designs"` — newsletter footer <!-- verified: https://en.pinkoi.com, 2026-04 -->
- `"Pinkoi believes that design has a transformative power that can permeate every aspect of our lives."` — about-page lead paragraph <!-- verified: https://en.pinkoi.com/about, 2026-04 -->
- Empty wishlist (illustrative): `"No favorites yet — tap the heart on anything you love and it will live here."` <!-- illustrative: not verified as live Pinkoi copy -->
- Form error (illustrative): `"Please enter a valid email so the shop can reach you about your order."` <!-- illustrative: not verified as live Pinkoi copy -->

## 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 <!-- source: en.pinkoi.com/about as of 2026-04; metrics surfaced by Pinkoi, not independently audited -->. 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 <color>, 0 .3em <color>, 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 <city>"). 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.

<!--
OmD v0.1 Sources — Philosophy Layer (sections 10–15)

Direct verification via WebFetch (2026-04-20):
- https://en.pinkoi.com/about — mission ("Design the way you are."; "Pinkoi believes that
  design has a transformative power…"), founding year (Taipei 2011), market list
  (Shanghai, Hong Kong, Tokyo, Bangkok), logo rationale (circular arcs + acute
  angles → diversity / inclusion / respect for the unique), partnership CTA
  ("Let's work together.", "Pinkoi loves collaborating with people…").
- https://en.pinkoi.com — header positioning ("Asia's cross-border design marketplace"),
  nav labels, seller CTA ("Sell on Pinkoi"), newsletter footer ("Stay up to date
  on the latest designs"), © 2026 Pinkoi footer line.
- https://en.pinkoi.com/about/team — founder names & titles: Peter Yen (顏君庭) Co-Founder/CEO,
  Mike Lee (李讓) Co-Founder/CPTO, Maibelle Lin (林怡君) Co-Founder. "Be a Pinkoist" invitation.

Cited (interview / press — not live product surface):
- https://www.taiwan-panorama.com/en/Articles/Details?Guid=3fb71a67-3e23-4723-8700-115a9afe9a71
  — Peter Yen on Asia-number-one design-platform ambition, designer livelihood thesis.
- https://cherubic.com/blog/founder-interview-pinkoi/
  — Peter Yen direct quotes: "E-commerce companies that sell standard products are
  playing a game of capital, but that's not our game. Pinkoi sells non-standard products."
  "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."
  "If we abandoned the review system, Pinkoi would lose its advantage."
- Pinkoi founding / background: three co-founders, Peter Yen's Yahoo Sunnyvale background
  + SF craft-fair origin story — cross-confirmed via Taiwan Panorama + TechCrunch 2015
  + SME Business Review profile.

Carried from base DESIGN.md (sections 1–9) — token-level claims:
- Coral #f16c5d reserved for `--purchase`; flat matched-border button system;
  locale font stacks (5); 4px default radius; weight 700 bold-heavy structure;
  6-column product grid; `transition: border .1s, color .1s, background .1s`.
  These were extracted from production CSS bundles (`cdn02.pinkoi.com/media/dist/`)
  during base reference creation and re-verified via Playwright on 2026-04-17.

Metrics used (6.25M members, 50k+ shops, 95% cross-border, 150 countries):
- Surfaced on en.pinkoi.com/about as of 2026-04; Pinkoi-published, not independently audited.
  Marked with `<!-- source: en.pinkoi.com/about as of 2026-04; metrics surfaced by Pinkoi,
  not independently audited -->` 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.

