zugzbot 1.2.0 → 1.4.0

package/.opencode/oh-my-design/design-md/dcard/DESIGN.md

@@ -1,633 +0,0 @@
----
-id: dcard
-name: Dcard
-country: TW
-category: consumer-tech
-homepage: "https://www.dcard.tw"
-primary_color: "#0086ff"
-logo:
-  type: github
-  slug: Dcard
-verified: "2026-05-15"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  note: "text colors ship as black-with-opacity (rgba); only 6-digit hexes promoted to colors — foreground uses #000000 (bg-dark) as the solid grounded base."
-  colors:
-    primary: "#3397cf"
-    primary-hover: "#5ab0db"
-    secondary: "#006aa6"
-    brand: "#00324e"
-    canvas: "#f2f2f2"
-    surface: "#ffffff"
-    foreground: "#000000"
-    on-primary: "#ffffff"
-    hint: "#e7f3f9"
-    premium: "#ffc51b"
-    premium-hover: "#ffd558"
-    success: "#49bd69"
-    danger: "#ea5c5c"
-    warning: "#f0a955"
-    special: "#f0b941"
-    topic: "#bf8ff0"
-    snackbar: "#2c2c2c"
-    sidebar-hover: "#032133"
-    disabled: "#e0e0e0"
-    hairline: "#cacaca"
-    gender-female: "#cb3a6b"
-    gender-male: "#1c7fac"
-  typography:
-    family: { sans: "Roboto" }
-    headline-1:  { size: 32, weight: 500, lineHeight: 1.31, use: "Top headline tier (mobile 30px)" }
-    headline-2:  { size: 28, weight: 500, lineHeight: 1.43, use: "Second headline tier" }
-    headline-3:  { size: 24, weight: 500, lineHeight: 1.17, use: "Third headline tier" }
-    headline-4:  { size: 20, weight: 500, lineHeight: 1.4, use: "Smallest headline tier" }
-    title:       { size: 18, weight: 600, lineHeight: 1.39, use: "Section headers in modals/editors (only 600 tier)" }
-    subtitle:    { size: 16, weight: 500, lineHeight: 1.38, use: "Subtitle 1" }
-    body:        { size: 16, weight: 400, lineHeight: 1.38, use: "Body 1, standard reading" }
-    body-sm:     { size: 14, weight: 400, lineHeight: 1.43, use: "Body 2" }
-    caption:     { size: 12, weight: 500, lineHeight: 1.42, use: "Caption — bumps to 500 for small-size legibility" }
-    caption-sm:  { size: 10, weight: 500, lineHeight: 1.6, use: "Caption 2, smallest" }
-  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 20, xl: 32, xxl: 48, section: 64 }
-  rounded: { sm: 4, md: 8, full: 9999 }
-  shadow:
-    level-1: "Material elevation level 1 — subtle card lift"
-    level-5: "Material elevation level 5 — modals, popovers"
-  components_harvested: true
-  components:
-    button-primary: { type: button, bg: "#3397cf", fg: "#ffffff", radius: 8, padding: "8px 20px", font: "14/500", use: "Hero Download App CTA" }
-    button-secondary: { type: button, bg: "#006aa6", fg: "#ffffff", radius: 4, padding: "8px 20px", font: "14/500", use: "Search submit, joined to input" }
-    button-counter: { type: button, radius: 8, padding: "1px 14px", font: "14/500", use: "Like / comment counters" }
-    button-disabled: { type: button, bg: "#e0e0e0", radius: 8, use: "Inactive button state" }
-    search-input: { type: input, bg: "#ffffff", radius: 4, padding: "8px 12px", use: "Header search, 1px #cacaca border, joined to submit" }
-    post-card: { type: card, bg: "#ffffff", radius: 4, padding: "20px", use: "Main feed post card on #f2f2f2 gray bg, contrast handles separation" }
-    forum-card: { type: card, bg: "#ffffff", radius: 4, padding: "16px", use: "Forum directory card, 146x110px" }
-    topic-chip: { type: badge, bg: "#bf8ff0", fg: "#ffffff", radius: 4, padding: "4px 8px", font: "12/500", use: "Topic tags — lavender accent" }
-    sponsor-chip: { type: badge, bg: "#f0b941", fg: "#ffffff", radius: 4, padding: "4px 8px", use: "Sponsored / special-promotion chips" }
-    feed-tabs: { type: tab, radius: 4, use: "All / Following switcher, 48px header", active: "underline indicator + #000000 text" }
-    snackbar: { type: toast, bg: "#2c2c2c", fg: "#ffffff", radius: 4, use: "Toast notification, 250px wide" }
----
-
-# Design System Inspiration of Dcard
-
-## 1. Visual Theme & Atmosphere
-
-Dcard is Taiwan's largest anonymous social platform — and its design system is an exemplar of **Material Design adapted for East-Asian forum culture**. The page chrome is wrapped in a deep teal-navy (`#00324e`) header bar that frames a **clean light-gray content surface** (`#f2f2f2`), inside which posts sit on **pure white cards** (`#ffffff`). This editorial framing — dark exterior, clean interior — distinguishes Dcard from the all-light Western social platforms (Reddit, Facebook) and the all-dark gamer-chic alternatives. It feels closer to a curated digital magazine than an open feed.
-
-Typography is **Roboto-led** with comprehensive Traditional Chinese fallbacks (`Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang TC", 黑體-繁, "Heiti TC", 蘋果儷中黑, "Apple LiGothic Medium", 微軟正黑體, "Microsoft JhengHei"`). Headlines use **weight 500 (medium)**, not 700 — a Material Design convention that creates hierarchy through subtle weight shifts and color (`rgba(0,0,0,0.85)` for primary text). The typography scale is exhaustive: 4 headline tiers (32/28/24/20px), title (18px/600), 2 subtitles (16/14px/500), 2 body sizes (16/14px/400), and 2 caption sizes (12/10px/500).
-
-What truly distinguishes Dcard is the **breadth of its semantic token system**. The site exposes 200+ CSS custom properties on `:root`, organized into clear namespaces: `--color-dcard-*` for brand, `--color-state-*` for status, `--color-text-*` for foreground, `--color-bg-*` for surfaces, `--color-gender-*` for forum-specific identity colors (a unique reflection of Dcard's gender-tagged posting culture), `--shadow-level-1` through `--shadow-level-5` for elevation, `--vars-*` for layout sizing, and `--animations-*` for motion. This isn't an internal-only design system — it's a public, semantically-named token layer that any agent can read directly from the live site.
-
-**Key Characteristics:**
-- Roboto-led typography stack with full Traditional Chinese (`PingFang TC`, `Heiti TC`, `微軟正黑體`) fallbacks
-- **Weight 500 (medium)** as the headline default — Material Design convention, not bold-700
-- 200+ semantic CSS custom properties exposed on `:root` (effectively a public design system)
-- Deep teal-navy header (`#00324e`) framing a light-gray content area (`#f2f2f2`) with white post cards
-- Blue-monochrome brand palette: primary `#3397cf`, secondary `#006aa6`, tertiary `#00324e`
-- 5-level Material elevation shadow system (`--shadow-level-1` to `--shadow-level-5`)
-- Material Design easing curve: `cubic-bezier(.4, 0, .2, 1)` with `.15s` short / `.3s` medium durations
-- Unique **gender-coded color tokens** (`--color-gender-female: #cb3a6b`, `--color-gender-male: #1c7fac`) reflecting forum culture
-- **Gold premium accent** (`#ffc51b`) reserved for subscription/premium features
-- **Topic purple** (`#bf8ff0`) for cross-cutting interest groups
-- 8px border-radius is the default (buttons, cards, chips); `--vars-max-page-width: 1280px` with 728px main content + 300px aside
-
-## 2. Color Palette & Roles
-
-Dcard exposes its color system via CSS custom properties on `:root`. All values below are extracted directly.
-
-### Brand
-- **Dcard Primary** (`#3397cf`): `--color-dcard-primary`. Main brand blue. Used for primary CTAs (Download App), brand icons, link accents.
-- **Dcard Primary Hover** (`#5ab0db`): `--color-dcard-primary-hover`. Lighter blue for hover states.
-- **Dcard Secondary** (`#006aa6`): `--color-dcard-secondary`. Deeper supporting blue, used in search submit buttons and active states.
-- **Dcard Tertiary** (`#00324e`): `--color-dcard-tertiary`. The signature deep teal-navy. Used as the page header bg, sidebar hover bg (`--color-bg-sidebar-hover: #032133`), and brand chrome.
-- **Dcard Hint** (`#e7f3f9`): `--color-dcard-hint`. Very light blue tint for hover backgrounds and subtle highlights.
-- **Dcard Premium** (`#ffc51b`): `--color-dcard-premium`. Gold for premium subscribers and paid features.
-- **Dcard Premium Hover** (`#ffd558`): `--color-dcard-premium-hover`.
-
-### State (Status)
-- **Success** (`#49bd69`): `--color-state-success`. Hover `#6fc985`, active `#339653`.
-- **Danger** (`#ea5c5c`): `--color-state-danger`. Hover `#f78c88`, active `#c44347`.
-- **Reminder / Warning** (`#f0a955`): `--color-state-reminder`. Hover `#f0b941`, active `#da9246`.
-
-### Backgrounds (Surfaces)
-- **Bg Base 1** (`#f2f2f2`): `--color-bg-base-1`. Default page content background — the gray frame inside the navy header.
-- **Bg Base 2** (`#ffffff`): `--color-bg-base-2`. Card surface, post background.
-- **Bg Base 3** (`#ffffff`): `--color-bg-base-3`. Same as base 2; reserved for layered cards.
-- **Bg Light** (`#ffffff`): `--color-bg-light`. Pure white, modal/dropdown surfaces.
-- **Bg Dark** (`#000000`): `--color-bg-dark`. Reserved for inverted contexts.
-- **Bg Container** (`#0000000d`): `--color-bg-container`. Black 5% — chip backgrounds on light surfaces.
-- **Bg Special** (`#f0b941`): `--color-bg-special`. Same as reminder hover — used for promotional/sponsored chips.
-- **Bg Topic** (`#bf8ff0`): `--color-bg-topic`. Lavender-purple for topic tags (cross-cutting interest groups).
-- **Bg Snackbar** (`#2c2c2c`): `--color-bg-snackbar`. Dark gray for toast notifications.
-- **Bg Sidebar Hover** (`#032133`): `--color-bg-sidebar-hover`. Slightly darker than tertiary for sidebar item hover.
-- **Bg Chip on Dark** (`#ffffff14`): `--color-bg-chip-on-dark`. White 8% for chips on the navy header.
-- **Bg Spotlight** (`#00000059`): `--color-bg-spotlight`. Black 35% — modal backdrop.
-- **Bg Sign-up Overlay** (`#000000b3`): `--color-bg-sign-up-overlay`. Black 70% — full-page CTA overlay.
-- **Bg Btn Disabled** (`#e0e0e0`): `--color-bg-btn-disabled`.
-- **Shimmer Bg / Fg** (`#f2f2f2` / `#fafafa`): Loading skeleton colors.
-
-### Text (Foreground)
-- **Text Primary** (`#000000d9`): `--color-text-primary`. Black at 85% opacity. Used for headings, post titles, primary body text.
-- **Text Secondary** (`#00000080`): `--color-text-secondary`. Black at 50%. Captions, timestamps, metadata.
-- **Text Hint** (`#00000059`): `--color-text-hint`. Black at 35%. Placeholder hints.
-- **Text Disabled** (`#0003`): `--color-text-disabled`. Black at 20%.
-- **Text Light Primary** (`#ffffff`): `--color-text-light-primary`. White text on the navy header.
-- **Text Light Secondary** (`#ffffff8c`): `--color-text-light-secondary`. White at 55% on dark surfaces.
-- **Text Light Hint** (`#fff6`): `--color-text-light-hint`. White at 40%.
-- **Text Dark Primary / Secondary**: Same as primary / secondary, semantic aliases.
-- **Text Default Hovered** (`#00000059`): `--color-text-default-hovered`.
-
-### Borders & Separators
-- **Border** (`#cacaca`): `--color-border`. Standard component border (inputs, dividers).
-- **Border Disabled** (`#e0e0e0`): `--color-border-disabled`.
-- **Separator** (`#0000001a`): `--color-separator`. Black 10% — row dividers on light surfaces.
-- **Separator on Dark** (`#ffffffb3`): `--color-separator-on-dark`. White 70% — separators on the navy header.
-
-### Gender-Coded (Unique to Dcard)
-A reflection of Dcard's posting culture, where many forums (女孩 / 男生 / 心情) display gender-tagged author chips:
-- **Female** (`#cb3a6b`): `--color-gender-female`. Light variant `#f48fb1`.
-- **Male** (`#1c7fac`): `--color-gender-male`. Light variant `#81d4fa`.
-- **Other** (`#2c2c2c`): `--color-gender-other`. Light variant `#e0e0e0`.
-
-### Icon & Misc
-- **Icon Button** (`#000000b3`): `--color-icon-button`. Black 70% — default icon color on light surfaces.
-- **Crop Mask** (`#000000b3`): `--color-crop-mask`. Modal/crop UI backdrop.
-- **Brand Sponsor Hovered** (`#fcd46d`): `--color-brand-sponsor-hovered`. Sponsored content highlight.
-
-## 3. Typography Rules
-
-### Font Stack
-```
-Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang TC", 黑體-繁, "Heiti TC", 蘋果儷中黑, "Apple LiGothic Medium", 微軟正黑體, "Microsoft JhengHei", sans-serif
-```
-
-Roboto leads (Material Design convention), with full Traditional Chinese fallbacks for native rendering on TW/HK Chrome environments.
-
-### Type Scale (verified from `:root` CSS custom properties)
-
-| Role | Token | Size | Weight | Line Height |
-|---|---|---|---|---|
-| Headline 1 | `--typography-headline-1-font-size` | `32px` (mobile `30px`) | `500` | `42px` (mobile `40px`) |
-| Headline 2 | `--typography-headline-2-font-size` | `28px` (mobile `24px`) | `500` | `40px` (mobile `33px`) |
-| Headline 3 | `--typography-headline-3-font-size` | `24px` (mobile `20px`) | `500` | `28px` |
-| Headline 4 | `--fonts-headline-4-font-size` | `20px` | `500` | `28px` |
-| Title | `--typography-title-font-size` | `18px` | `600` | `25px` |
-| Subtitle 1 | `--typography-subtitle-1-font-size` | `16px` | `500` | `22px` |
-| Subtitle 2 | `--typography-subtitle-2-font-size` | `14px` | `500` | `20px` |
-| Body 1 | `--typography-body-1-font-size` | `16px` | `400` | `22px` |
-| Body 1 (lh-28 variant) | `--typography-body-1-lh-28-font-size` | `16px` | `400` | `28px` (article reading) |
-| Body 2 | `--typography-body-2-font-size` | `14px` | `400` | `20px` |
-| Caption | `--typography-caption-font-size` | `12px` | `500` | `17px` |
-| Caption 2 | `--typography-caption-2-font-size` | `10px` | `500` | `16px` |
-
-### Conventions
-- **Weight 500 (medium)** is the headline default — never weight 700/800 like commerce or news sites. Material Design heritage.
-- **Title is the only weight-600 tier** — used sparingly for section headers in modals and editors.
-- **Body uses weight 400** — captions and small labels jump to weight 500 to remain readable at small sizes.
-- **Mobile sizes step down by ~20%** for headlines but stay identical for body and below.
-- **Line-heights are generous** (1.3–1.4× ratio for body, ~1.4× for headlines) — supports CJK glyph density.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary CTA (Download App)**
-- Background: `#3397cf` (`--color-dcard-primary`)
-- Text: `#ffffff`
-- Radius: 8px
-- Padding: 8px 20px
-- Font: 14px / 500
-- Use: Hero "Download App" CTA
-
-**Secondary CTA (Search Submit)**
-- Background: `#006aa6` (`--color-dcard-secondary`)
-- Text: `#ffffff`
-- Radius: 0px 4px 4px 0px (joined to search input)
-- Padding: 8px 20px
-- Font: 14px / 500
-- Use: Search submit button (joined to input)
-
-**Counter / Action**
-- Background: transparent
-- Text: `rgba(0,0,0,0.5)`
-- Radius: 8px
-- Padding: 1px 14px
-- Font: 14px / 500
-- Use: Like / comment counters (e.g., 584, 179)
-
-**Disabled**
-- Background: `#e0e0e0` (`--color-bg-btn-disabled`)
-- Text: secondary text color
-- Radius: 8px
-- Use: Inactive button states
-
-### Inputs
-
-**Search Input**
-- Background: `#ffffff`
-- Border: 1px solid border
-- Radius: 4px 0px 0px 4px (left side; joined to submit on right)
-- Padding: 8px 12px
-- Use: Header search field (joined with Secondary CTA submit)
-
-### Cards
-
-**Post Entry**
-- Background: `#ffffff` (`--color-bg-base-2`)
-- Radius: 4px
-- Padding: 20px (`--vars-post-entry-padding`)
-- Use: Main feed post card on `#f2f2f2` gray content bg (contrast handles separation, no border)
-
-**Forum Card**
-- Background: `#ffffff`
-- Radius: 4px
-- Padding: 16px
-- Use: Forum directory cards — explicit `146px × 110px` (`--vars-forum-card-width` / `-height`)
-
-### Badges
-
-**Topic Chip**
-- Background: `#bf8ff0` (`--color-bg-topic`)
-- Text: `#ffffff`
-- Radius: 4px
-- Padding: 4px 8px
-- Font: 12px / 500
-- Use: Topic chips — lavender accent
-
-**Sponsor / Special Chip**
-- Background: `#f0b941` (`--color-bg-special`)
-- Text: `#ffffff`
-- Radius: 4px
-- Padding: 4px 8px
-- Use: Sponsored / special-promotion chips
-
-**On-Dark Chip**
-- Background: `#ffffff14` (`--color-bg-chip-on-dark`)
-- Text: `#ffffff`
-- Radius: 4px
-- Padding: 4px 8px
-- Use: Chips placed on dark surfaces (header, modal)
-
-### Tabs
-
-**All / Following**
-- Active text: `#000000d9` (`--color-text-primary`)
-- Inactive text: `#00000080` (`--color-text-secondary`)
-- Indicator: underline
-- Header height: 48px (`--vars-tabview-header-height`)
-- Use: Feed view switcher
-
-### Toasts
-
-**Snackbar**
-- Background: `#2c2c2c` (`--color-bg-snackbar`)
-- Text: `#ffffff` (`--color-text-light-primary`)
-- Radius: 4px
-- Width: 250px (`--vars-toast-width`)
-- Position: bottom 0px (or 16px when bottom bar present)
-- Use: System feedback toasts
-
-### Dialogs
-
-**Post Modal**
-- Background: `#ffffff`
-- Radius: 8px
-- Width: 728px (`--vars-post-modal-width`)
-- Backdrop: `#00000059` (`--color-bg-spotlight`) or `#0006` (`--color-mask`)
-- Use: Full post detail view
-
-**Comment Modal**
-- Background: `#ffffff`
-- Radius: 8px
-- Width: 720px (`--vars-comment-modal-width`)
-- Use: Comment-thread modal
-
-**Sign-Up Overlay**
-- Background: `#000000b3` (`--color-bg-sign-up-overlay`, black 70%)
-- Use: Full-page overlay triggered after scroll/engagement
-
-### Header / Navigation
-
-- Header: 48px height (`--vars-header-height`), 20px padding, bg `#00324e` (tertiary), white text
-- Layout: Logo + Search + Sign In/Up + Download App (horizontal)
-- Left Sider (forum nav): 208px width (`--vars-my-page-sider-width`), light bg, icon + text rows
-- Right Aside (widgets/ads): 300px width (`--vars-forum-aside-section-width`), 10px gap (`--vars-forum-aside-section-gap`)
-
-## 5. Layout Principles
-
-### Page Structure
-- **Max page width**: `--vars-max-page-width: 1280px`
-- **Three-column layout**:
-  - Left sider (forum nav): `208px` (`--vars-my-page-sider-width`)
-  - Main content (post list): `728px` (`--vars-min-post-list-section-width`)
-  - Right aside (widgets/ads): `300px` (`--vars-forum-aside-section-width`)
-- Sections gap: `--vars-forum-sections-gap: 12px`
-
-### Spacing
-- **Header padding**: `20px`
-- **Post entry padding**: `20px`
-- **Post view padding**: `20px` vertical, `24px` horizontal
-- **Post list section padding**: `20px` vertical, `24px` horizontal
-- **Columns item horizontal**: `24px`
-- Content title height: `60px` (`--vars-my-page-content-title-height`)
-
-### Density
-Dcard is **medium-density**. Posts are visually distinct (white card on gray bg), but the 728px main column packs efficiently — title + preview + thumbnail + actions in a single horizontal row at desktop sizes. Not as dense as Pinkoi commerce, not as airy as Medium articles.
-
-## 6. Depth & Elevation
-
-Dcard uses a **Material Design-style 5-level shadow system**, all keyed off black with low alpha for soft, neutral elevation.
-
-| Level | Token | Value | Use |
-|---|---|---|---|
-| 1 | `--shadow-level-1` | `0px 1px 6px -2px #00000052` | Subtle lift (chips, hover cards) |
-| 2 | `--shadow-level-2` | `0px 2px 8px -1px #0003` | Default card, dropdown |
-| 3 | `--shadow-level-3` | `0px 3px 12px #0000002e` | Elevated card, popover |
-| 4 | `--shadow-level-4` | `0px 4px 16px #00000029` | Modal, sticky bar |
-| 5 | `--shadow-level-5` | `0px 6px 24px #0000001f` | Highest elevation: dialogs, full-screen overlays |
-
-Note: Most post cards on the feed sit **flat without shadow** — the content area (`#f2f2f2`) provides separation against white cards via contrast. Shadows are reserved for genuinely floating elements.
-
-### Z-Index
-- Header is sticky and sits above content
-- Modals use `--color-bg-spotlight` backdrop
-- Sign-up overlay (`--color-bg-sign-up-overlay`) sits above all chrome
-- Toast/snackbar at the highest level
-
-### Animation
-- Easing: `--animations-bezier: cubic-bezier(.4, 0, .2, 1)` — Material Design standard easing curve
-- Short duration: `--animations-short-duration: .15s` (hover, press)
-- Medium duration: `--animations-medium-duration: .3s` (page transitions, accordions)
-
-## 7. Do's and Don'ts
-
-- **DO** use weight 500 (medium) for headlines. Dcard never goes weight 700 — Material Design convention.
-- **DON'T** use weight 700 except in legacy or one-off display contexts.
-- **DO** use the semantic color token namespace: `--color-dcard-*` for brand, `--color-state-*` for status, `--color-text-*` for foreground, `--color-bg-*` for surfaces.
-- **DON'T** introduce ad-hoc hex values. Dcard's 200+ tokens cover virtually every UI surface.
-- **DO** wrap the page in the deep navy header (`#00324e`) and place content on the gray base (`#f2f2f2`) with white cards. The chrome/content contrast is the brand signature.
-- **DON'T** use white-on-white nesting — the `#f2f2f2` content layer is what separates white cards visually.
-- **DO** use `8px border-radius` as the default for buttons, cards, and chips.
-- **DON'T** use 4px or sharp corners — Dcard's softer 8px radius is the brand's tactile signature.
-- **DO** use `--shadow-level-2` (`0px 2px 8px -1px #0003`) for default cards that need elevation. Use higher levels only for genuinely floating UI.
-- **DON'T** apply heavy shadows to feed posts — let the gray/white contrast separate them.
-- **DO** use the gender colors (`--color-gender-female`, `--color-gender-male`, `--color-gender-other`) for author chips on gender-tagged posts. This is a culturally significant part of Dcard's UX.
-- **DON'T** use gender colors for non-author contexts — it conflates identity with status.
-- **DO** reserve gold (`#ffc51b`, `--color-dcard-premium`) for premium/subscription features only.
-- **DON'T** use premium gold for warnings or general highlights — it weakens the subscription signal.
-- **DO** use Material easing `cubic-bezier(.4, 0, .2, 1)` with `.15s` for hover/press and `.3s` for page transitions.
-- **DON'T** use bouncy/elastic easing — Dcard's motion is restrained and platform-native.
-
-## 8. Responsive Behavior
-
-### Breakpoints (inferred from mobile-specific tokens)
-Dcard provides explicit mobile typography sizes via `--typography-*-font-size-mobile` tokens, indicating a clear breakpoint at the tablet/mobile boundary (typically 768px in Material conventions).
-
-| Width | Behavior |
-|---|---|
-| Desktop `>1280px` | Centered max-width container, three-column layout (208 / 728 / 300) |
-| Desktop `1024–1280px` | Three-column compresses, asides may collapse |
-| Tablet `768–1024px` | Right aside hidden, two-column (sider + main) |
-| Mobile `<768px` | Single column. Headlines step down: H1 32px → 30px, H2 28px → 24px, H3 24px → 20px |
-
-### Touch & Mobile
-- Bottom navigation height token: `--vars-bottom-navigation-height: 0px` on web (used in app webviews)
-- Safe area inset: `--safe-area-inset-bottom: 0px` (notch handling)
-- Forum hero image: `--vars-forum-hero-image-height: 243px`
-
-### Media Caps
-- `--vars-max-post-media-vh: 60vh` — embedded videos/images cap at 60% viewport height
-- Cover image: `width: 100%`, `object-fit: cover`, `height: 100%` (`--mixins-cover-image-*`)
-
-### Text Truncation
-- Single-line ellipsis: `--mixins-ellipsis-overflow: hidden; --mixins-ellipsis-text-overflow: ellipsis; --mixins-ellipsis-white-space: nowrap`
-- Multi-line clamp: `--mixins-multi-ellipsis-display: -webkit-box`, `--mixins-multi-ellipsis--webkit-box-orient: vertical`, `--mixins-multi-ellipsis--webkit-line-clamp: 1`
-- Line-clamp value can be customized per component
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Primary CTA: `--color-dcard-primary` (`#3397cf`); hover `#5ab0db`
-- Secondary CTA: `--color-dcard-secondary` (`#006aa6`)
-- Page chrome (header bg): `--color-dcard-tertiary` (`#00324e`)
-- Page content bg: `--color-bg-base-1` (`#f2f2f2`)
-- Card / surface: `--color-bg-base-2` (`#ffffff`)
-- Primary text: `--color-text-primary` (`#000000d9`, black 85%)
-- Secondary text: `--color-text-secondary` (`#00000080`, black 50%)
-- Border: `--color-border` (`#cacaca`)
-- Separator: `--color-separator` (`#0000001a`, black 10%)
-- Premium: `--color-dcard-premium` (`#ffc51b`) — subscription only
-- Topic accent: `--color-bg-topic` (`#bf8ff0`)
-- Success / Danger / Reminder: `#49bd69` / `#ea5c5c` / `#f0a955`
-
-### Example Component Prompts
-- "Create a Dcard-style post card: white bg (`#ffffff`), no border, no radius (sits on gray `#f2f2f2` page bg). Inner padding 20px. Layout: avatar (40px circle) + forum name (12px weight 500 colored per forum) + timestamp (12px weight 500 `#00000080`) on top row, post title H4 size (20px weight 500 `#000000d9`) on second row, body preview (14px weight 400 `#00000080` 2-line clamp), inline thumbnail (84px), action buttons (heart/comment/save/share) at bottom."
-- "Build a Dcard primary button: bg `#3397cf`, white text, 8px border-radius, 14px weight 500, padding `8px 20px`. Hover: bg `#5ab0db`. Active: darken further. No shadow. Transition: `background .15s cubic-bezier(.4, 0, .2, 1)`."
-- "Design the Dcard header: full-width sticky bar, height 48px, bg `#00324e` (tertiary navy), white logo on left (28px height), search input center (white bg, 8px radius left side, joined search submit `#006aa6` on right with `0px 8px 8px 0px` radius), Sign in/Sign up text link + Download App button (`#3397cf` bg, white text, 8px radius) on right."
-- "Create a topic chip: bg `#bf8ff0` (lavender purple), white text, 12px weight 500, 8px radius, padding `4px 10px`. Use only for cross-cutting topics (e.g., '#study tips', '#dating advice')."
-- "Build a sign-up overlay CTA: full-page absolute overlay with `#000000b3` (black 70%) bg, centered content card (white, 8px radius, `0px 6px 24px #0000001f` shadow level 5), heading 'From school to work, find your resonance on Dcard.' (24px weight 500 `#000000d9`), subhead 14px weight 400 `#00000080`, two buttons: Sign in (white border ghost) + Sign up (`#3397cf` filled). Triggers after 2 scroll lengths."
-
-### Iteration Guide
-1. **Always reference CSS variables, not hex values** — Dcard's design system is its `:root` token layer. `--color-dcard-primary` is more durable than `#3397cf`.
-2. **Default headline weight is 500, never 700**. Dcard is Material Design-aligned.
-3. **`8px` radius everywhere** (buttons, cards, chips). Don't use 4px or pill shapes.
-4. **Wrap page in `#00324e` chrome + content on `#f2f2f2` + white cards** — this is the visual signature.
-5. **Five shadow levels exist (`--shadow-level-1` to `-5`)** — use level 2 for cards by default, escalate only for floating UI.
-6. **Roboto first, then Traditional Chinese fallbacks** — never hardcode `font-family` without including the TC stack.
-7. **Material easing `cubic-bezier(.4, 0, .2, 1)`** with `.15s` (hover/press) or `.3s` (transitions). Don't use bounce.
-8. **Gender colors (`--color-gender-*`) only for author chips** on gender-tagged forums (女孩/男生/感情). Never repurpose.
-9. **Premium gold (`#ffc51b`) only for subscription/premium UI**. It's a finite signal.
-10. **Three-column layout 208 / 728 / 300** at desktop. Right aside drops first on tablet, sider drops on mobile.
-
----
-
-## 10. Voice & Tone
-
-Dcard speaks like an older classmate on a university BBS — familiar, low-volume, Traditional-Chinese-native, with just enough informality to feel like peer conversation rather than an editorial voice. The default register is casual-polite Traditional Chinese (using `你` rather than `您`, but never colloquial internet slang on system surfaces). The platform's anonymity premise means the UI itself rarely uses the brand's first person; Dcard the product mostly *frames* user-generated content and stays out of the way. English strings exist on login/download flows for international visitors but are secondary — Traditional Chinese is the first-class voice.
-
-| Context | Tone |
-|---|---|
-| CTAs | Short Traditional Chinese verb form. `登入`, `註冊`, `發文`, `下載 App`. English fallback on international flows: `Sign in`, `Sign up`. |
-| Forum names (brand surface) | Single Traditional Chinese noun — `女孩`, `男生`, `心情`, `工作`, `感情`, `時事`. Never bilingual labels; the forum name IS the space. |
-| Post-card metadata | Time + school/forum + anonymized author. Formatted as `B站大學 · 3 小時前` pattern. No decorative punctuation. |
-| Empty states | Single-sentence explanation + one action. Blameless — never implies the user did something wrong. |
-| Error messages | State the condition, never apologize with `不好意思` openers. Actionable single sentence. |
-| Sign-up overlay | Aspirational-but-brief one-liner about finding your people. Avoids FOMO-framing ("Don't miss out"). |
-| Comments / reactions | Counter numbers without units — just `584`, `179`, `12` with an icon. The icon is the unit. |
-| Legal / policy | Formal `您` register + `敬啟` / `謹此` patterns. Single exception to the casual default. |
-
-**Forbidden phrases.** `不好意思，系統發生錯誤` (generic apology opener), `很抱歉` on non-destructive failures, emoji in system-generated surfaces (emoji is *user* territory, not UI-chrome territory — exception: user-authored post content and sticker reactions), exclamation-mark-as-emphasis on buttons (`立即下載！` is wrong — `下載 App` is right), marketing adjectives `最佳`, `極致`, `革命性`, Simplified Chinese characters in TW surfaces (`网络` → always `網路`; `视频` → always `影片`). No cartoon illustrations on error screens — Dcard is a text-first forum, not an app mascot brand.
-
-**Voice samples.**
-
-- `下載 App` — primary CTA on the right of the desktop header. <!-- verified: https://www.dcard.tw/f via live Playwright recon 2026-04 (base DESIGN.md §1 confirms this CTA) -->
-- `登入` / `註冊` — header auth links, Traditional Chinese verbs, no punctuation. <!-- verified: https://www.dcard.tw/f via live Playwright recon 2026-04 (base DESIGN.md §4 confirms auth chrome) -->
-- `Binding Generations. Breaking Limitations. Building with Passion.` — public tagline on the engineering publication, the clearest first-person brand statement Dcard publishes. <!-- cited: https://medium.com/dcardlab masthead, fetched 2026-04 -->
-- `還沒有文章` — illustrative empty-state pattern for a forum the user has just joined. Three characters, stated not apologized. <!-- illustrative: not verified as live Dcard copy; follows Traditional-Chinese UI convention observed in §14 pattern -->
-- `這篇文章已被刪除` — illustrative post-removed state, factual single sentence, no blame. <!-- illustrative: not verified as live Dcard copy -->
-- `搜尋 Dcard` — illustrative search input placeholder. Verb + brand; matches base DESIGN.md §4 header recon which confirms the search input component without quoting its placeholder. <!-- illustrative: not verified as live Dcard copy -->
-
-## 11. Brand Narrative
-
-Dcard began on **2011-12-16 at National Taiwan University** as a late-night "card-match" experiment: every midnight the app surfaces one profile to another, and the two students get 24 hours to decide whether to connect. The **`D`** in the name stands for *Destiny*. The founding premise was narrow — bored college students, the specific hour of 00:00, a single random pairing — and the product's entire structure flows from that origin. Dcard is built on the presumption that **online belonging in Taiwan is school-anchored and time-scoped**, not interest-anchored and always-on like Reddit or Facebook. ([en.wikipedia.org/wiki/Dcard](https://en.wikipedia.org/wiki/Dcard) — founding facts)
-
-From that single-feature card-match, Dcard expanded into **topic forums** in 2012 — `女孩`, `男生`, `感情`, `心情`, `時事`, and dozens more — each moderated by volunteers drawn from the community. The company, Dcard Taiwan Ltd., was formally established in Taipei in **October 2015**, and by November 2022 the platform had **over 6 million members and 18 million monthly unique visitors** — a platform-scale audience inside a 23-million-person country. ([en.wikipedia.org/wiki/Dcard](https://en.wikipedia.org/wiki/Dcard)) <!-- source: Wikipedia via WebFetch 2026-04; not re-verified against live Dcard data. -->
-
-The design language reflects three things the product must hold simultaneously. **One**, it must stay school-coded enough that a 21-year-old in Kaohsiung or Taipei doesn't feel like they're using a corporate social network — hence Material Design's restrained medium-weight typography rather than the bold-700 display type of commerce or news apps. **Two**, it must frame user content without competing with it — hence the dark-navy chrome (`#00324e`) + light-gray content area (`#f2f2f2`) + white post cards: the product is the frame, the posts are the picture. **Three**, it must surface *identity-under-anonymity* gracefully — the same user posts anonymously but is labeled by their school and gender forum affiliation, which is why Dcard invests in gender-coded author chips (`--color-gender-female: #cb3a6b`, `--color-gender-male: #1c7fac`) as first-class design tokens where other platforms would treat gender as metadata.
-
-What Dcard refuses: the open-graph identity of Facebook (school-verified but anonymous-posting is the point), the karma-and-moderation-wars culture of Reddit (Taiwan forum culture is softer, more mutual), the full-dark aesthetic of gamer or crypto platforms (Dcard is a well-lit reading space), and the heavy illustration style of consumer super-apps (the content is the illustration).
-
-The Dcard Tech Blog publishes under the tagline **"Binding Generations. Breaking Limitations. Building with Passion."** ([medium.com/dcardlab](https://medium.com/dcardlab)), which frames the brand's own ambition for its engineering — not a user-facing slogan, but the clearest first-person statement the company makes in public.
-
-## 12. Principles
-
-1. **The product is the frame, posts are the picture.** Every surface outside a post body is deliberately subdued — muted chrome, no decorative illustration, no brand mascots in the reading flow. Dcard earns attention only where attention is required (auth, composition, notifications). *UI implication:* No illustrations on post-list screens. No brand color inside the content area. The `#f2f2f2` content bg + `#ffffff` post card is the canonical composition; any UI that breaks that contrast must justify itself.
-
-2. **Medium is the new bold.** Weight 500 is the highest weight Dcard UI uses for headlines; weight 600 is reserved for the `Title` tier (modal headers and editor labels); weight 700 is **forbidden** on product surfaces. Hierarchy is built through size, opacity, and vertical rhythm — not by making things fatter. *UI implication:* Headlines `font-weight: 500`. Never upgrade an H2 to 700 for emphasis; instead increase size from 28px → 32px or use the 85%-black text color instead of the 50%-black metadata color.
-
-3. **Identity tokens are semantic, not decorative.** `--color-gender-female` and `--color-gender-male` exist because anonymous posting in a school-anchored community needs *some* axis of identity, and gender is the axis Dcard's community inherited from its origin forums. These tokens are never to be recycled as brand accent colors. *UI implication:* Use gender colors only on author chips and gender-forum headers. A danger toast must use `--color-state-danger`, never `--color-gender-female`, even if the pinks are similar.
-
-4. **Gold is a subscription, not a highlight.** `--color-dcard-premium: #ffc51b` is reserved exclusively for subscription, paid, or verified-premium surfaces. Using it as a generic warning or "featured" accent devalues a finite economic signal. *UI implication:* Warnings use `--color-state-reminder` (`#f0a955`, orange). Featured-without-payment content uses topic lavender (`--color-bg-topic: #bf8ff0`). Premium gold appears only behind a paid wall.
-
-5. **8px is tactile.** Every Dcard button, card, chip, and input uses 8px border-radius. This single radius token does the work of communicating "soft product, safe space" across the entire UI. 4px reads as utility/enterprise; 16px reads as playful/commerce; pill-shaped reads as iOS-native. Dcard sits at 8px. *UI implication:* `border-radius: 8px` is the default. Pills are for toggles only. Sharp corners are for nothing.
-
-6. **Shadows are for floating, not for separating.** Post cards in the feed sit flat — the `#f2f2f2` content bg separates them from the `#ffffff` card surface via contrast. Shadows are reserved for UI that genuinely floats above the surface (dropdowns, modals, toasts). *UI implication:* No default shadow on feed cards. Use `--shadow-level-2` only for dropdowns and elevated cards. `--shadow-level-5` only for full-screen dialogs.
-
-7. **Traditional Chinese first, English second.** The font stack starts with Roboto (Latin/numerals) and layers on `PingFang TC`, `黑體-繁`, `Heiti TC`, `微軟正黑體`. Simplified Chinese characters are never acceptable on TW surfaces — the distinction is culturally load-bearing, not cosmetic. *UI implication:* Every `font-family` declaration includes the TC fallback stack. String tables use `網路` not `网络`, `影片` not `视频`, `資料` not `数据`. Hardcoded `font-family: sans-serif` is a bug.
-
-8. **Anonymity requires generous metadata.** The author is anonymous, but the context isn't. Every post surfaces school name + forum + timestamp + gender chip (if the forum warrants it). That metadata cluster is why a Dcard feed feels informative rather than chaotic — you know *where* and *when* without knowing *who*. *UI implication:* Every post-card component must render the school-forum-time triplet with consistent typography (12px weight 500 `--color-text-secondary`). Never hide it for density; never elaborate it with icons.
-
-## 13. Personas
-
-*Personas are fictional archetypes informed by publicly described Dcard user segments (Taiwanese college students and recent graduates, 2022 figure of 6M+ members reported by Wikipedia), not individual people.*
-
-**宥廷 (You-Ting), 20, Taipei.** Second-year university student. Opens Dcard late at night on her phone — after class, before sleep — and reads the `女孩` and `感情` forums for an hour without posting. Comments anonymously maybe once a week, posts original content twice a semester. Treats Dcard as a quieter alternative to Threads or IG comments. Will not install another forum app — Dcard is the forum app.
-
-**Kytu, 24, Hsinchu.** Recent engineering grad, first tech job at a semiconductor firm. Uses Dcard primarily on the `工作` and `科技業` forums for salary-transparency threads and interview-prep AMAs. Posts about work experiences under a throwaway-feel chip (still anonymous, but wants the school-verified credibility tag). Would never tag himself identifiably. Reads the Dcard Tech Blog on Medium for engineering posts and recognizes Kytu Lin's byline.
-
-**小柔 (Xiao-Rou), 22, Taichung.** Third-year undergrad, active in the `美妝` and `購物` forums. Cross-references Dcard threads before any skincare purchase — treats the forum as peer-verified product reviews. Clicks into `Good Choice` when a thread recommends a product that's listed. Strong preference for Traditional Chinese interface; if a brand website is Simplified-Chinese-only she won't buy.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (new forum subscribed)** | Single paragraph of `--color-text-secondary` (`#00000080`) body text explaining what the forum covers + one CTA button in `--color-dcard-primary` bg to compose the first post. No illustration. Example pattern: `還沒有文章 · 成為第一個發文的人`. |
-| **Empty (search no results)** | Single line of `--color-text-secondary` 14px caption — `找不到符合的文章`. No suggested searches, no autocomplete spam. The user refines the query themselves. |
-| **Loading (feed first paint)** | Shimmer skeleton using `--color-bg-shimmer-bg` (`#f2f2f2`) → `--color-bg-shimmer-fg` (`#fafafa`) linear gradient. Card-shaped blocks matching final layout. Duration: `--animations-medium-duration` (300ms) shimmer cycle. |
-| **Loading (infinite scroll)** | Centered spinner at bottom of feed, 24px, `--color-dcard-primary` stroke. No full-screen block; existing cards remain interactive. |
-| **Error (inline form field)** | 1px border replaced with `--color-state-danger` (`#ea5c5c`), error caption below in `--color-state-danger` 12px weight 500. One actionable sentence. |
-| **Error (toast)** | Snackbar: bg `--color-bg-snackbar` (`#2c2c2c`), white 14px weight 400 text, 3s auto-dismiss. Bottom of screen with 20px safe-area inset. No icon, no illustration. |
-| **Error (post deleted)** | Full card replaced with single line `這篇文章已被刪除` in `--color-text-secondary` 14px, centered. Card chrome (radius, padding) preserved so feed rhythm is intact. |
-| **Success (post published)** | Snackbar in `--color-bg-snackbar` with white text `文章已發布` + secondary action link `查看文章` in `--color-dcard-primary`. 4s auto-dismiss. |
-| **Success (upvote/heart)** | Inline icon color transitions from `--color-icon-button` (`rgba(0,0,0,0.7)`) to `--color-state-danger` (heart) or `--color-dcard-primary` (upvote) over `--animations-short-duration` (150ms). Counter number increments without animation. |
-| **Disabled (button)** | bg `--color-bg-btn-disabled` (`#e0e0e0`), text `--color-text-secondary` (`#00000080`). No opacity reduction — the swatch change is the signal. |
-| **Skeleton (post body)** | Three shimmer lines at 100% / 90% / 70% width, 14px line height, 8px gap. `--animations-bezier` easing on the shimmer gradient. |
-| **Sign-up overlay (anonymous scroll wall)** | Full-page backdrop `--color-bg-sign-up-overlay` (`#000000b3`). Centered card, `--shadow-level-5`, 8px radius. One headline (`--typography-headline-3` weight 500), one subhead (`--typography-body-2`), two buttons: ghost `Sign in` + primary `Sign up`. Triggers after ~2 scroll lengths of anonymous browsing. |
-
-## 15. Motion & Easing
-
-Dcard's motion system is Material-Design-standard. The entire runtime design token layer ships with exactly three motion tokens — `--animations-bezier`, `--animations-short-duration`, `--animations-medium-duration` — which is the whole point: restraint.
-
-**Durations:**
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Toggle flips, checkbox state, counter increments |
-| `motion-short` (`--animations-short-duration`) | 150ms | Hover, press, small reveals, icon color transitions |
-| `motion-medium` (`--animations-medium-duration`) | 300ms | Accordion expand, dropdown open, tab switch, page transitions |
-| `motion-long` | 500ms | Emphasized transitions only — sign-up overlay entrance, first-load shimmer fade-out |
-
-**Easings:**
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-standard` (`--animations-bezier`) | `cubic-bezier(0.4, 0, 0.2, 1)` | The default. Material Design standard. Used for 95%+ of Dcard's motion. |
-| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Sheets rising, toasts entering, modals appearing |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals, pops, toast departures |
-
-**Spring stance.** Spring / overshoot easing is **forbidden** on Dcard product surfaces. Rationale: Dcard is a reading platform for a community that uses it late at night, often to discuss sensitive topics (`感情`, `心情`, `工作壓力`). Kinetic overshoot on a card-flip or button-press contradicts the platform's emotional register. The community's culture is *quiet*; the motion design matches. The only place where Dcard's original card-match origin might have licensed overshoot — the midnight match reveal — sits inside a specific ritual surface, not the general UI; treat it as a legacy product moment, not a reusable motion token.
-
-**Signature motions.**
-
-1. **Feed card tap.** On press, card background transitions from `#ffffff` to a very subtle `--color-bg-base-3` tint over `motion-short / ease-standard`. No scale, no shadow pulse. The user's finger is the feedback, not the animation.
-
-2. **Sign-up overlay entrance.** The backdrop fades from `rgba(0,0,0,0)` to `--color-bg-sign-up-overlay` (`#000000b3`) over `motion-long / ease-enter` while the centered card slides from `y+20px` to its final position over `motion-medium / ease-enter`. Coordinated, not simultaneous — the backdrop lands first.
-
-3. **Infinite-scroll reveal.** Newly-loaded cards fade in with `opacity 0 → 1` over `motion-medium / ease-standard`. No slide — the feed is already scrolled, cards just materialize in place. A slide-in would read as "new content arrived" (social-feed paradigm); Dcard treats it as "your next page of reading" (forum paradigm).
-
-4. **Sidebar forum-switch.** Selected forum item's left-indicator bar (2px) animates its height from collapsed to full over `motion-short / ease-standard`; the old selection's indicator collapses over the same duration. No color fade on the text — the indicator does the work.
-
-**Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. Shimmer skeletons become static `#f2f2f2` blocks. Card fade-ins become immediate opacity-1. Sign-up overlay appears without coordinated entrance — just present. No exceptions.
-
-<!--
-OmD v0.1 Sources — Philosophy Layer (sections 10–15)
-Augmented: 2026-04-20
-
-⚠️ SOURCING CAVEAT: Dcard publishes almost no public brand-philosophy
-documentation. The company is a college-community forum platform, not a
-design-forward brand. Most of the Philosophy layer above is INFERRED from
-three sources:
-
-1. The base DESIGN.md §1–9 (UI patterns extracted from `:root` CSS variables
-   via Playwright MCP runtime recon on 2026-04-17). This is the most
-   authoritative source for what the product actually does; it is NOT the
-   same as the company's self-stated philosophy.
-
-2. Wikipedia's Dcard entry (https://en.wikipedia.org/wiki/Dcard), fetched
-   2026-04-20. Used for founding year (2011-12-16), founding location
-   (National Taiwan University, NOT NCCU as a common misconception),
-   founder name (Kytu Lin / 林裕欽), the "D = Destiny" name origin, and
-   the 6M members / 18M monthly UV figure from November 2022. None of these
-   have been re-verified against primary Dcard sources.
-
-3. The Dcard Tech Blog (https://medium.com/dcardlab), fetched 2026-04-20.
-   Confirms the tagline "Binding Generations. Breaking Limitations. Building
-   with Passion." as Dcard's clearest first-person public brand statement.
-   The blog lists Kytu Lin as one of four editors, confirming he remains
-   publicly associated with the engineering org.
-
-Direct verification of live Dcard microcopy was NOT possible:
-WebFetch against dcard.tw / about.dcard.tw / dcard.tw/service/about all
-returned HTTP 403 (Cloudflare bot challenge, consistent with the base
-recon's note that only Playwright MCP successfully passes the challenge).
-Re-running this augmentation with Playwright MCP would allow direct voice
-sample verification; that was out of scope for this pass.
-
-Voice samples in §10:
-- `下載 App`, `登入`, `註冊` — verified via base DESIGN.md §4 header recon
-  (Playwright, 2026-04-17).
-- `Binding Generations. Breaking Limitations. Building with Passion.` —
-  cited from medium.com/dcardlab masthead, fetched 2026-04-20.
-- `還沒有文章`, `這篇文章已被刪除`, `搜尋 Dcard` — ILLUSTRATIVE only.
-  These follow Traditional-Chinese UI conventions observed in the base
-  recon's component catalog, but were not confirmed as live Dcard strings.
-  Do not present these to the brand owner as verbatim Dcard copy.
-
-Interpretive claims (editorial readings, not documented Dcard statements):
-- "The D in Dcard stands for Destiny" is from Wikipedia and treated as fact.
-- "Taiwan forum culture is softer, more mutual" (§11 what-Dcard-refuses
-  section) is an editorial reading of the product's tone, not a sourced
-  Dcard statement.
-- All §12 Principles are derived from observable UI patterns (8px radius,
-  weight-500 defaults, gender color tokens, shadow-reserved-for-floating);
-  they are not quotations from a Dcard design-principles document, which
-  does not publicly exist.
-- §13 Personas are fictional archetypes. Any resemblance to specific
-  Dcard users is unintended.
-
-NCCU vs NTU note: the augmentation brief suggested NCCU (National Chengchi
-University) as the founding site, but Wikipedia attributes the founding to
-National Taiwan University (NTU). This narrative uses NTU per Wikipedia; if
-a more authoritative source (Dcard press page, founder interview) confirms
-NCCU, §11 should be corrected.
--->
-
----
-
-**Verified:** 2026-05-08 (omd:migrate run 21 — Apple-tier)
-**Tier 1 sources:** dcard.tw/f (live DOM — `#3397cf` Dcard Blue 8px / 14×1 / 32px / 14px·500 Download App + Sign in CTAs); about.dcard.tw/ (corporate nav — same `#3397cf` accent text, 200+ token `:root` system).
-**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
-**Tier 2 (Philosophy/founders):** Wikipedia (Dcard — Kytu Lin / 林裕欽 / NTU 2011-12-16 founding / D=Destiny / 6M+ members Nov 2022); medium.com/dcardlab masthead.
-**Style ref:** `pinkoi` (TW Asian marketplace tone). **Conflicts unresolved:** none. NCCU/NTU founding origin remains a noted editorial-only research gap (NTU per Wikipedia is canonical here).
-