oh-my-design-cli 1.6.0 → 1.6.2

package/web/references/flo/DESIGN.md

@@ -0,0 +1,306 @@
+---
+id: flo
+name: "FLO"
+country: KR
+category: consumer-tech
+homepage: "https://www.music-flo.com"
+primary_color: "#3f3fff"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=music-flo.com&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# FLO
+
+FLO (플로) is South Korea's music streaming platform operated by Dreamus Company, offering 120 million tracks with deep personalization and AI-driven discovery.
+
+## 1. Visual Theme & Atmosphere
+
+FLO's interface reads as clean, luminous, and quietly energetic. A pure electric blue (`#3f3fff`) punches through an overwhelmingly white canvas, anchoring interactive elements — buttons, progress bars, active tab indicators, and checked inputs — with a single, unwavering brand hue. The surrounding palette is almost entirely achromatic: near-black body text on white surfaces, mid-greys for metadata, and a barely-there light grey for resting chips and dividers. This restraint keeps the music and cover art front and center. A muted rose-pink (`#ff4d78`) appears only in error or warning states, creating a deliberate secondary signal language. Overall the product feels like a clean audio studio: cool-toned, confident, and built for extended listening sessions without visual fatigue.
+
+## 2. Color Palette & Roles
+
+- **Brand Blue:** `#3f3fff` — primary CTA buttons, active tab underline, progress fill, checked-state labels
+- **Blue Pressed / Hover:** `#2f2fae` — darkened blue on button press
+- **Blue Pressed:** `#1a1a86` — pressed/active primary button state
+- **Blue Mid (Player):** `#576aff` — mini-player seek bar fill
+- **Blue Light:** `#7286ff` — lighter tint used on selected items, soft accents
+- **Indigo Variant:** `#525cfd` — voucher card surfaces and secondary action text
+- **Error / Alert Pink:** `#ff4d78` — error border, incorrect input highlight
+- **White:** `#ffffff` — primary surface, button text on blue
+- **Body Text:** `#181818` — headings, input values, primary labels
+- **Secondary Text:** `#333333` — standard body copy, links (default)
+- **Tertiary / Meta:** `#989898` — timestamps, secondary metadata
+- **Placeholder:** `#c4c4c4` — input placeholder text
+- **Divider:** `#ebebeb` — input underlines, hairline rules
+- **Surface Grey:** `#f5f5f5` — inactive tab/chip backgrounds
+- **Track Grey:** `#323232` — player progress track (unfilled)
+
+## 3. Typography Rules
+
+- **Typeface:** Pretendard Variable → Pretendard → -apple-system → BlinkMacSystemFont → Roboto → Segoe UI → Helvetica → sans-serif
+- **Body base:** 14px / 400 — most-used size for metadata and list items
+- **Primary body:** 15px / 400–500 — track titles, main UI copy
+- **Small:** 12px / 400 — timestamps, tags, chip labels
+- **Label:** 13px / 500 — secondary labels, navigation items
+- **Subhead:** 16px / 600 — section headers, modal titles
+- **Section Title:** 18px / 600 — major section headings
+- **Display Small:** 22–28px / 700 — promotional copy, chart numbers
+- **Display Large:** 30–38px / 700 — hero callouts, large feature text
+- **Input text:** 15px / 400 with `#181818`; search bar 28px / 700
+- **Line height:** 1.2 default; labels and button text use explicit line-height matching the component height
+
+## 4. Component Stylings
+
+### Primary Button (Blue CTA)
+
+**Standard (btn_bg_blue_s)**
+- Background: `#3f3fff`
+- Text: `#ffffff`
+- Height: 36px
+- Padding: 0 15px
+- Radius: 5px
+- Font: 14px / 400
+
+**Large CTA (btn_bg_error_b base)**
+- Background: `#3f3fff`
+- Text: `#ffffff`
+- Height: 62px
+- Padding: 0 92px
+- Font: 18px / 400
+
+**Hover / Pressed**
+- Background: `#2f2fae`
+- Text: `#ffffff`
+
+**Pressed / Active**
+- Background: `#1a1a86`
+- Text: `#ffffff`
+
+### Pill / Round Button
+
+**Small Pill (btn-round)**
+- Background: `#3f3fff`
+- Text: `#ffffff`
+- Height: 28px
+- Padding: 0 12px
+- Radius: 15px
+- Font: 12px / 500
+
+**Medium Pill (btn-buy)**
+- Background: `#3f3fff`
+- Text: `#ffffff`
+- Height: 32px
+- Padding: 0 17px
+- Radius: 22px
+- Font: 14px / 400
+
+**Ghost Outline Chip (header-multi-track-search-button)**
+- Background: `#ffffff`
+- Text: `#3f3fff`
+- Border: 0.5px solid `#3f3fff`
+- Radius: 16px
+- Padding: 9px 15px
+- Font: 12px / 500
+
+### Text Input
+
+**Default (comp_inp_txt)**
+- Background: `#ffffff`
+- Text: `#181818`
+- Border: 1px solid `#ebebeb` (bottom only)
+- Height: 58px
+- Font: 15px / 400
+
+**Password (comp_inp_pw)**
+- Background: `#ffffff`
+- Text: `#181818`
+- Border: 1px solid `#ebebeb` (bottom only)
+- Height: 58px
+- Font: 15px / 400
+
+**Focus**
+- Border: 1px solid `#181818`
+
+**Error**
+- Border: 1px solid `#ff4d78`
+
+**Valid / OK**
+- Border: 1px solid `#3f3fff`
+
+**Placeholder**
+- Text: `#c4c4c4`
+
+### Card / Content Surface
+
+**Album Thumbnail**
+- Radius: 6px
+- Height: 175px
+
+**Voucher / Subscription Card**
+- Background: `#f4f5f8`
+- Radius: 8px
+- Padding: 50px 60px
+
+**Active Voucher Card**
+- Background: `#525cfd`
+- Text: `#ffffff`
+- Radius: 8px
+
+### Navigation Tab
+
+**Active Tab (main)**
+- Text: `#3f3fff`
+- Background: `#ffffff`
+- Underline: 2px solid `#3f3fff`
+
+**Inactive Tab**
+- Text: `#6d6d6d`
+- Background: `#f5f5f5`
+
+**Hover Tab**
+- Text: `#3f3fff`
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.music-flo.com (homepage HTML, 2026-06-03); https://cdn.music-flo.com/poc/p/fe/2026_05/291607/main.css (production CSS bundle, 467 KB, 2026-06-03); https://apps.apple.com/kr/app/flo-%ED%94%8C%EB%A1%9C/id1129048043 (App Store KR listing, 2026-06-03)
+**Tier 2 sources:** getdesign.md/flo — NOT LISTED (returned "No designs found"). refero ?q=FLO — no result (KR brand, no refero entry expected).
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+- Desktop breakpoint: 1070px minimum container width; content area up to 960px centered
+- Header height fixed at 96px with 80px horizontal padding
+- Vertical rhythm anchors at 15px (body) and 25–50px (section gutters)
+- Album grid uses 175×175px thumbnail cells with 14px top padding and 15px bottom margin
+- Player bar fixed to bottom; full-screen player overlays entire viewport
+- Mobile: container padding collapses to 30px horizontal at ≤955px; header padding reduces proportionally
+
+## 6. Depth & Elevation
+
+- **Level 0 (flat surface):** No shadow — list items, inactive tabs, default cards
+- **Level 1 (floating card):** `box-shadow: 0 4px 20px 0 rgba(0,0,0,0.10)` — album cover hover, dropdown menus, settings panels
+- **Level 2 (modal / sheet):** `box-shadow: 0 6px 15px 0 rgba(0,0,0,0.20)` — popup overlays, player download modal
+- **Overlay scrim:** `rgba(0,0,0,0.50)` — modal backdrop
+- **Dark scrim (player art):** `rgba(0,0,0,0.80)` — full-screen player overlay behind controls
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#3f3fff` exclusively for the single primary action on any given screen
+- Apply Pretendard at 14–15px for all body copy to maintain readability across light and dark surfaces
+- Keep album artwork as the dominant visual; let cover art supply color temperature to each screen
+- Use pill shapes (radius 15–22px) for purchase and streaming action buttons; use square-cornered (radius 5px) for utility actions
+- Reserve `#ff4d78` strictly for error, warning, and incorrect-input states
+- Maintain bottom-border-only treatment on text inputs to preserve a clean, understated form aesthetic
+
+### Don't
+- Don't apply blue to more than one CTA per screen — dilutes the click-priority hierarchy
+- Don't mix the indigo variant (`#525cfd`) and the primary blue (`#3f3fff`) on adjacent interactive elements
+- Don't use drop shadows on flat list rows — elevation is reserved for floating layers only
+- Don't reduce body text below 12px — smallest label size in production is 12px
+- Don't apply border-radius above 22px to rectangular content cards — pill radius is reserved for action chips and buttons
+
+## 8. Responsive Behavior
+
+- Desktop (≥1070px): full sidebar nav, 960px content column, 80px horizontal padding, 96px header
+- Tablet (956–1069px): sidebar collapses; content padding reduces to 30px
+- Mobile (≤955px): container padding 30px; album thumbnail grid reflows to single column; header condenses; player bar remains pinned to bottom
+- Font sizes do not scale with viewport — fixed px values used throughout; line heights compensate via explicit pixel or rem values (0.9375rem = 15px used in some components)
+
+## 9. Agent Prompt Guide
+
+When building UI components that match FLO's design language:
+- Set the primary action button to `background:#3f3fff`, `color:#fff`, `border-radius:5px` for rectangular or `border-radius:20px` for pill shapes, height 36px (small) or 62px (large CTA)
+- Use `font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', Helvetica, sans-serif` as the single font stack
+- Body text: `color:#333; font-size:14px; font-weight:400`
+- Heading text: `color:#181818; font-size:16–18px; font-weight:600`
+- Inputs: `border:0; border-bottom:1px solid #ebebeb; height:58px; font-size:15px; color:#181818`; on focus, `border-bottom-color:#181818`; on error, `border-bottom-color:#ff4d78`; on valid, `border-bottom-color:#3f3fff`
+- Card surfaces: `background:#f4f5f8; border-radius:8px` (neutral) or `background:#3f3fff; border-radius:8px` (highlighted/active)
+- Box shadows for floating elements: `0 4px 20px 0 rgba(0,0,0,0.10)`
+- Error / warning accent: `#ff4d78` — use only for error states, never as a decorative color
+
+## 10. Voice & Tone
+
+**Adjectives:** Friendly, direct, unforced.
+
+| Dimension | Do | Don't |
+|---|---|---|
+| Register | Conversational Korean; speak to listeners like a fellow music fan | Corporate, stiff, or overly formal speech |
+| Sentence length | Short punchy phrases (4–8 syllables) | Long compound clauses that bury the point |
+| Emotional temperature | Warm enthusiasm about discovery, calm confidence about features | Hype superlatives ("best ever", "revolutionary") |
+| Personalization | Speak about the listener's taste as genuinely theirs | Generic "music lovers" phrasing |
+
+**Voice samples (illustrative):**
+- "가볍게, 나답게 FLO." — the brand tagline; conveys effortlessness and personal identity in six syllables.
+- "내가 원하는 음악이 물 흐르듯 끊임없이 흘러나온다." — (Illustrative) The music you want flows ceaselessly, like water — sensory and unhurried.
+- "1억 곡 중에서 딱 나의 취향만." — (Illustrative) From 100 million songs, exactly my taste — confident without bragging.
+- "오늘 기분에 맞는 음악, FLO가 먼저 알아요." — (Illustrative) FLO knows the music for your mood before you do — AI personalization stated as a quiet fact, not a feature claim.
+
+## 11. Brand Narrative
+
+FLO launched in December 2018 as SK Telecom's answer to a market dominated by chart-first streaming services. Rather than leading with popularity rankings, FLO put personal taste on the home screen from day one — a deliberate counterpoint to the chart-centric paradigm that had defined Korean music streaming. The name itself is a promise: music flows, the way water does, continuously and without effort.
+
+In 2021 the service was spun into Dreamus Company as an independent entity, inheriting SK Telecom's scale and infrastructure while gaining the flexibility to pursue a broader creative vision. The platform expanded from simple streaming into a fan ecosystem — RE;CORD (an automatic musical memoir organized by date and genre), FLO Studio (artist collaboration space), and in 2026, FLO Shop (global music merchandise). Each expansion stays anchored to the same premise: music is personal, and every listener deserves a platform that treats their taste as unique.
+
+Today FLO serves 120 million tracks and positions itself at the intersection of music, fan culture, and algorithmic empathy. Its design language — restrained, blue-anchored, and content-first — expresses the same philosophy in pixels: get out of the way of the music, and let the listener find themselves in it.
+
+## 12. Principles
+
+1. **Taste is personal, not statistical.** FLO's recommendations lead with the individual listener's history, not chart position. *UI implication:* Home feed surfaces personal recommendations above any global trending section; personalized sections appear before editorial ones in the visual hierarchy.*
+
+2. **Flow without friction.** The brand name is a metaphor for effortless continuity — one song leading naturally to the next. *UI implication:* Autoplay and session-continuation are on by default; every disruptive confirmation dialog must earn its place; bottom-sheet modals slide up rather than hard-cut.*
+
+3. **Content leads, chrome follows.** Album artwork and track identity are the primary visual elements on every screen. *UI implication:* Brand blue appears only on interactive affordances; large areas of white and near-white keep the interface from competing with cover art.*
+
+4. **Clarity at every state.** Users should always know what is playing, what will play next, and what action the system expects of them. *UI implication:* The player bar is persistent; active/selected states use high-contrast blue with no ambiguity; error states switch to pink immediately with an explanatory label.*
+
+5. **Small moments of delight, not spectacle.** Animations are quick and purposeful — opacity fades at 0.3s, transforms at 0.25s — reinforcing response rather than demanding attention. *UI implication:* Motion budget is conservative; never block user intent with decorative animation; transitions serve orientation, not entertainment.*
+
+## 13. Personas
+
+*Illustrative Daily Listener — "Minjeong, 28, Seoul"*
+A professional who commutes by subway and needs music to shift her mental state within seconds. She rarely browses manually; she trusts FLO's daily mix to surface what she didn't know she needed. She uses the app in dark mode. A missed recommendation feels like a broken promise.
+
+*Illustrative Fan Tracker — "Junho, 22, Busan"*
+A K-pop enthusiast who follows specific artists religiously. He uses FLO's artist pages, checks chart positions, and purchases limited merchandise through FLO Shop. He opens the app multiple times a day and reads every notification from followed artists.
+
+*Illustrative Casual Subscriber — "Hyunsook, 45, Incheon"*
+An SKT subscriber who joined FLO through a bundled telecom plan. She plays background music while cooking and hasn't changed her playlist in weeks. The app needs to be completely transparent — no setting she didn't ask for, no screen she doesn't recognize.
+
+*Illustrative Discovery Explorer — "Taeyun, 31, Daejeon"*
+A crate-digger who uses FLO specifically for its genre-deep catalog, particularly indie and J-POP content. He triggers recommendations by seeding a niche track and is delighted when the algorithm surprises him. He evaluates FLO against its promise of 120 million tracks every time he searches for something obscure.
+
+## 14. States
+
+- **Empty (no music history):** Soft illustration with prompt text; primary blue CTA "지금 음악 찾기" (Find music now); no error language
+- **Empty (no search results):** Centered message at 16px/600 with secondary suggestion to try broader terms; zero shadows or borders to avoid visual noise
+- **Loading (track list):** Skeleton rows — grey `#ebebeb` bars at content widths, animated shimmer; no spinner overlay
+- **Loading (player artwork):** Album art placeholder in `#f5f5f5` with rounded corners matching the 6px radius; audio begins before art resolves
+- **Error (network, playback failed):** Pink `#ff4d78` inline label below the affected control; retry button in outline style with `#3f3fff` text; no full-screen block unless unrecoverable
+- **Error (input validation):** Bottom border switches to `#ff4d78`; helper text appears in `#ff4d78` at 12px below the field
+- **Success (purchase complete):** Confirmation screen with checkmark icon in `#3f3fff`; message at 18px/600; secondary action to "내 구독 보기" (View my subscription)
+- **Skeleton (browse feed):** Fixed-dimension grey blocks at album thumbnail proportions (175×175px) with 6px radius; staggered fade-in on resolution
+- **Disabled (button):** `opacity: 0.2` on the base `#3f3fff` (no color change); pointer-events removed
+- **Disabled (input):** `color: rgba(59,59,59,0.3); background-color: hsla(0,0%,94%,0.3)`; border-bottom remains at `#ebebeb`
+
+## 15. Motion & Easing
+
+**Duration scale:**
+- **Instant (0ms):** State changes with no visual transition (checked state icon swap)
+- **Fast (150ms):** Micro-interactions: tooltip appear, focus ring appear
+- **Standard (200–250ms):** Most UI transitions: `transform 0.25s ease-in`, fade overlays
+- **Deliberate (300ms):** Opacity fade on full player overlay: `opacity 0.3s`
+- **Entrance (300ms + 150ms delay):** Slide-in panel: `transform 0.15s ease-in` with `0.3s` delay for stagger
+
+**Named easing:**
+- `ease-in` — exits and element entrances (elements accelerate into resting position)
+- `linear` — scrollbar opacity: `opacity 0.2s linear` — neutral, non-physical
+
+**Motion rules:**
+- Player seek bar fill uses continuous transition so that progress feels live, not stepped
+- Volume slider uses the same `#3f3fff` fill with identical easing as the playback progress bar — consistent system language
+- Modal bottom-sheets translate on Y axis; they do not scale or fade — orientation is preserved through directional motion
+- Never autoplay video or looping animation in the browse feed — audio is the product; visual motion competes with listening attention

package/web/references/fugle/DESIGN.md

@@ -0,0 +1,250 @@
+---
+id: fugle
+name: "Fugle"
+country: TW
+category: fintech
+homepage: "https://www.fugle.tw"
+primary_color: "#f4af1c"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=fugle.tw&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# Fugle
+
+Taiwan's visual-first stock research and trading platform, built by investors for serious investors.
+
+## 1. Visual Theme & Atmosphere
+
+Fugle's interface speaks the language of precision and calm confidence. A predominantly light, near-white canvas — `#f5f5f5` for secondary surfaces, `#ffffff` for foreground containers — keeps the dense data of Taiwan equity markets easy to scan without overwhelming the eye. Against this quiet ground, the brand's signature amber `#f4af1c` appears sparingly but unmistakably: loading indicators, live-chat buttons, version badges, and chart reference lines all carry the same warm gold tone. The dark theme inverts the arrangement, dropping to a near-black `#131313` base with `#323232` surface layers, letting red and green trading signals pop with strong luminance contrast. Two modes share the same structural rhythm — compact rows, 4 px and 8 px radii, tight 12–14 px body type — giving both themes an identical sense of discipline and information density appropriate to active trading.
+
+## 2. Color Palette & Roles
+
+- **Brand Amber:** `#f4af1c` — primary brand color; loading spinners, live-chat button, version badges, chart line accent, primary CTA background
+- **Amber Dark:** `#e49b00` — hover state for primary buttons (`--p60`), icon fills on emphasis
+- **Amber Tint:** `#fef4cf` — soft background for amber-highlighted content areas (`--p20`)
+- **Secondary Blue:** `#4c85a0` — secondary interactive elements, link text default (`--s`, `--color-neutral-link-50`)
+- **Secondary Blue Dark:** `#36708c` — secondary blue hover (`--s60`)
+- **Surface White:** `#ffffff` — card backgrounds, modal surfaces, `--color-neutral-00-white`
+- **Background Secondary:** `#f5f5f5` — page backgrounds, hover fills (`--color-neutral-04`)
+- **Border Default:** `#eaeaea` — dividers, default strokes (`--color-neutral-08`)
+- **Border Heavy:** `#dfdfdf` — emphasized borders (`--color-neutral-13`)
+- **Secondary Text:** `#8b8a8a` — muted labels, helper text (`--color-neutral-46`)
+- **Body Text:** `#323232` — primary foreground text (`--color-neutral-80`)
+- **Dark Surface:** `#131313` — dark-mode primary background (`--color-neutral-93`)
+- **Rise (Light):** `#f3746d` — stock price rise in light theme (TW convention: red = up)
+- **Fall (Light):** `#6c9c46` — stock price fall in light theme (TW convention: green = down)
+- **Error:** `#d12a2a` — system errors, form validation (`--color-red-600`)
+
+## 3. Typography Rules
+
+Fugle uses **Lato** (via Google Fonts) as the Latin character family across the main web trading platform, complemented by **Noto Sans TC** and **Microsoft JhengHei** on the developer documentation portal for Traditional Chinese text. The Material Icons font handles iconography throughout.
+
+Body text runs at **14 px / normal** weight for dense data rows, **12 px** for secondary labels and timestamps, and **16 px** for modal body copy and form inputs. Section headings use **20 px / 700** in dialogs, and data highlight values reach **18–24 px**. Line heights are kept tight to maximize data density — approximately 1.4–1.5× for multi-line text. Font weight vocabulary: 400 for body, 700 for emphasis and headings. No custom variable fonts detected.
+
+## 4. Component Stylings
+
+### Primary Button
+
+**Amber CTA (e.g. "開始交易")**
+- Background: `#f4af1c`
+- Text: `#ffffff`
+- Border: none
+- Radius: 4px
+- Font: 14px / 700
+
+**Amber CTA Hover**
+- Background: `#e49b00`
+- Text: `#ffffff`
+- Radius: 4px
+
+### Input Field
+
+**Default Search / Trade Input**
+- Background: `#eaeaea`
+- Border: none
+- Radius: 4px
+- Height: 32px
+- Padding: 0 5px 0 5px
+- Font: 16px / 400
+
+**Input Group (with label)**
+- Border: 1px solid `#eaeaea`
+- Radius: 4px
+- Height: 32px
+
+### Stock Row (Watchlist)
+
+**Default Stock List Item**
+- Background: `#ffffff`
+- Border: 1px solid `#eaeaea`
+- Radius: 0px
+- Height: 55px
+- Font: 14px / 400
+
+**Hovered Stock Row**
+- Background: `rgba(0,0,0,0.04)`
+
+### Card / Trade Box
+
+**Surface Card (e.g. fugle-trade-box)**
+- Background: `#ffffff`
+- Border: none
+- Radius: 4px
+- Padding: 20px 0
+
+**Info Card (e.g. watchlist-stock__box)**
+- Background: `#eaeaea`
+- Radius: 8px
+
+### Modal
+
+**Dialog Container**
+- Background: `#ffffff`
+- Radius: 4px
+- Font: 16px / 400
+- Padding: 16px
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.fugle.tw (HTML, inline CSS, manifest.json), https://dk91kmsnfr6kg.cloudfront.net/desktop/assets/fugle-desktop.d5b14f507dc94191ea072af78696b931.css, https://dk91kmsnfr6kg.cloudfront.net/desktop/assets/chunk.ac7daef9fdaa5882212c.css, https://developer.fugle.tw/assets/css/styles.46d8cd92.css, https://apps.apple.com/tw/app/fugle/id1542310263
+**Tier 2 sources:** getdesign.md/fugle — No designs found for "fugle". refero — no TW/Fugle results expected.
+**Conflicts unresolved:** HTML `theme-color` is `#f4af1c`; PWA manifest `theme_color` is `#fbcc67` (a lighter amber). The CSS custom property `--p` and developer portal's `--ifm-color-primary` both canonically define `#f4af1c`; the manifest value is likely a PWA splash-screen approximation. Primary recorded as `#f4af1c`.
+
+## 5. Layout Principles
+
+Fugle's web trading platform is a dense multi-panel grid. The header is fixed at **50 px** height. A left sidebar watchlist panel (configurable width via `--watchListWidth`) sits beside a scrollable main canvas. The trading panel (`--tradingWidth`) expands from the right edge. The main content container caps at **1508 px** max-width for standard market views, but trading views use `max-width: initial` for full-bleed chart display. Column grids follow Bootstrap-compatible breakpoints: 576 px (sm), 768 px (md), 1280 px (lg), 1440 px / 1680 px (xl variants for watchlist density). Card grids use CSS grid with responsive `repeat(N, 1fr)` columns that scale from 2 up to 5 columns depending on viewport.
+
+## 6. Depth & Elevation
+
+Fugle uses a layered shadow system that signals interactive hierarchy without dramatic depth:
+
+- **Resting card:** `box-shadow: 0 2px 2px 0 rgba(0,0,0,.08), 0 2px 7px 0 rgba(0,0,0,.1)`
+- **Dropdown / popover:** `box-shadow: 0 0 24px 0 rgba(0,0,0,.08)`
+- **Modal / elevated panel:** `box-shadow: 0 0 17px 0 rgba(0,0,0,.14), 0 8px 9px 0 rgba(0,0,0,.12)`
+- **Focus / active ring:** `box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 3px rgba(0,0,0,.12), 0 4px 15px 0 rgba(0,0,0,.2)`
+- **Side panel frame:** `box-shadow: 0 4px 8px -4px var(--color-component-web-frame-shadow-default), 0 8px 16px -4px var(--color-component-web-frame-shadow-default)` — `rgba(0,0,0,0.08)` in light, `rgba(255,255,255,0.08)` in dark
+
+Dark mode shadows use white-alpha variants to create the inverse glow effect. No `z-index`-heavy stacking unless modals are active.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#f4af1c` amber as the single primary CTA color across light and dark modes
+- Show red (`#f3746d`) for rising prices and green (`#6c9c46`) for falling prices — follow Taiwan Stock Exchange convention, opposite of Western norms
+- Keep card surfaces white (`#ffffff`) in light mode and dark (`#131313`) in dark mode; always separate with subtle border `#eaeaea` rather than heavy shadows
+- Use Lato for Latin numerals in data-dense contexts; pair with Noto Sans TC for Chinese labels
+- Apply `border-radius: 4px` uniformly to buttons, inputs, and cards; reserve `8px` for highlighted info boxes
+- Limit the primary amber to interactive hotspots — loading states, primary buttons, notification badges — so it retains signal value
+
+### Don't
+- Don't use amber as a neutral fill or background wash — it should always signal action or system state
+- Don't swap the red/green convention to Western defaults; Fugle's users rely on red = up, green = down
+- Don't use heavy drop shadows on resting states; the light `rgba(0,0,0,.08)` layered shadow is intentional
+- Don't exceed 16 px body font in data rows — density is a core UX value
+- Don't add decorative illustration or gradient washes to the trading canvas; the chart data is the visual
+- Don't use the dark theme in onboarding or marketing contexts; it's designed for active-trading sessions
+
+## 8. Responsive Behavior
+
+The platform targets desktop-first (min 1024 px canvas) and degrades gracefully to tablet. Breakpoints mirror Bootstrap: 576 px, 768 px, 1280 px, 1440 px, 1680 px. The watchlist sidebar collapses on narrow viewports. The trading panel (`--tradingWidth`) is hidden by default and slides in over the canvas on demand. Card grids scale: 1 column below 576 px, 2 columns at md, 3–5 at xl depending on feature area. Mobile is covered by the native iOS/Android app (Fugle app id 1542310263), which shares the brand's color and typography tokens but uses a card-based vertical scroll layout optimized for thumb navigation.
+
+## 9. Agent Prompt Guide
+
+When building Fugle-style interfaces:
+
+- Start with a white (`#ffffff`) or light-grey (`#f5f5f5`) canvas, dense 12–14 px body text in Lato, no decorative imagery
+- Primary CTAs: `background #f4af1c`, white text, 4 px radius, no visible border, hover to `#e49b00`
+- Data rows: `min-height 55px`, `border-bottom 1px solid #eaeaea`, hover `rgba(0,0,0,0.04)` background
+- Price changes: **always** red for rise, green for fall (TW convention); use `#f3746d` / `#6c9c46` in light mode
+- Cards: `border-radius 4px`, `box-shadow 0 2px 2px 0 rgba(0,0,0,.08), 0 2px 7px 0 rgba(0,0,0,.1)`, no border
+- Form inputs: `height 32px`, `border-radius 4px`, background `#eaeaea`, `font-size 16px`
+- Transitions: `0.2s cubic-bezier(.4,.6,.2,1)` for most UI state changes
+- Dark mode: swap backgrounds to `#131313` / `#222222` surfaces; keep `#f4af1c` amber unchanged
+
+## 10. Voice & Tone
+
+Fugle's voice is **precise, empowering, and peer-to-peer** — a fellow investor who happens to have built better tools, speaking directly to another serious investor.
+
+| Dimension | Do | Don't |
+|---|---|---|
+| Register | Conversational but expert; uses financial terminology naturally | Dumbed-down language or over-explaining basics |
+| Stance | Equal peer — "we research too" | Corporate authority — "our platform provides" |
+| Framing | Research space, decision clarity, serious purpose | FOMO urgency, get-rich language, hype |
+| Sentence length | Short to medium; punchy declaratives | Long compound clauses |
+
+Voice samples (illustrative, modelled on App Store copy tone):
+
+- "告別密密麻麻數字的傳統看盤軟體。" — *Illustrative: crisp one-liner that rejects the status quo without drama.*
+- "認真的投資人，值得更好的工具。" — *Illustrative: the core brand promise stated as self-evident truth, not a sales claim.*
+- "把時間花在決策，而非整理資料。" — *Illustrative: frames value through the user's time, not the product's features.*
+
+## 11. Brand Narrative
+
+Fugle (富果, "rich harvest") was founded in Taiwan by Fortuna Intelligence, a team that describes itself as being simultaneously developers and practicing investors who watch the markets daily. The animating frustration was the poor quality of existing retail trading interfaces — dense, noisy, built around brokerage workflow rather than investor research workflow — and the refusal to accept that as the only option.
+
+The platform launched as a web trading app paired with a market data API, positioning itself at the intersection of fintech and developer tooling. The developer portal (developer.fugle.tw) made real-time Taiwan stock data accessible via clean REST and WebSocket APIs, partnering with Fubon, Taishin, and E.Sun securities to offer actual order execution. This dual strategy — beautiful research UI for investors, clean API for developers — reflects a philosophy that serious financial tools should meet users where they are, whether at a trading terminal or a code editor.
+
+Today Fugle frames its mission around a simple belief: "認真的投資人值得更好的工具" — serious investors deserve better tools. The product is designed not to compete with professional Bloomberg terminals or to simplify investing into a game, but to occupy a deliberate middle ground: rigorous, visual, and genuinely pleasant to use for hours of research.
+
+## 12. Principles
+
+1. **Data clarity over data density.** Every number on screen should earn its place. When a display becomes crowded, the answer is smarter information architecture — heatmaps, visual cards — not smaller type. *UI implication:* use whitespace and visual hierarchy in card layouts rather than cramming more data into fewer pixels.
+
+2. **Investor perspective, not brokerage perspective.** The interface is organized around how an investor thinks (by thesis, sector, comparison) not how a brokerage processes orders. *UI implication:* watchlists, custom research cards, and side-by-side comparisons are first-class features; order ticket is secondary until the user is ready to transact.
+
+3. **Amber signals action.** The brand's single accent color is reserved for interactive moments — loading, primary buttons, live notifications. Overuse dilutes the signal. *UI implication:* no decorative amber, no amber text, no amber borders; only amber fills on actionable elements.
+
+4. **Both modes are production-quality.** Light mode for daytime research, dark mode for active trading sessions — neither is an afterthought. *UI implication:* every component must be spec'd for both themes with equal care; dark mode uses near-black surfaces, not grey.
+
+5. **Serious tools should still feel fast.** Transitions are tight (0.2 s) and purposeful. Animation is reserved for loading states and layout expansions, not decoration. *UI implication:* use `cubic-bezier(.4,.6,.2,1)` easing on state changes; avoid entrance animations on data rows.
+
+## 13. Personas
+
+*Illustrative — not based on published Fugle user research.*
+
+**Illustrative: The Research-First Investor (個人投資者)**
+Mid-career professional, 35–50, investing personal savings in Taiwan equities. Spends evenings building sector maps and comparing fundamentals across 5–15 stocks. Values clarity and speed; deeply annoyed by noise. Uses Fugle's custom card layout to structure a personal research SOP.
+
+**Illustrative: The Developer-Investor (開發者投資人)**
+Software engineer in their late 20s–early 40s who approaches investing algorithmically. Builds personal screeners using Fugle's marketdata API. Values API quality, documentation clarity, and free-tier access for prototyping. Attracted by the developer-friendly portal and Noto Sans TC-styled docs.
+
+**Illustrative: The Active Trader (短線交易者)**
+Experienced retail trader who watches intraday tick data and uses the dark theme during market hours. Needs every pixel to serve a function. Relies heavily on the watchlist panel and real-time price update animations. Irritated by anything that obscures the bid/ask spread display.
+
+**Illustrative: The Student Investor (學習型投資人)**
+University student or new entrant to Taiwan equity investing, 20–28. Discovered Fugle through a campus or online investing community. Drawn to the clean visual design compared to legacy broker platforms. Starts with the mobile app and explores web tools as confidence grows.
+
+## 14. States
+
+- **Empty — Watchlist:** Watchlist panel shows a placeholder prompt to add a stock ticker; no skeleton rows; single amber CTA button "新增自選股"
+- **Loading — Data fetch:** Three amber `#f4af1c` bouncing dots (border-radius 50%, 11 px, `lds-ellipsis` animation at 0.6 s cubic-bezier(0,1,1,0)); used both on initial page load and in-panel data refresh
+- **Error — No data / API timeout:** Inline message inside the affected card or panel; muted text `#8b8a8a`; no modal interruption; retry link styled as secondary text link
+- **Error — Form validation:** Input border switches to `#d12a2a` (`--color-red-600`); error message appears below field at 12 px muted red
+- **Success — Order submitted:** In-panel confirmation message with a green `#6c9c46` checkmark icon; auto-dismisses after 3 s without blocking interaction
+- **Skeleton — Chart/card loading:** Placeholder shimmer animation (`placeHolderShimmer` keyframe, 500 ms interval defined in `loadingDelay`); uses `#eaeaea` animated gradient across content areas
+- **Disabled — Button:** `background-color rgba(0,0,0,.12)`, `color rgba(0,0,0,.26)`, `box-shadow none`, `cursor not-allowed`; no amber used on disabled state
+
+## 15. Motion & Easing
+
+**Duration scale:**
+- Micro (icon state): 0.1 s
+- Fast (hover, focus): 0.2 s
+- Standard (panel expand, input transitions): 0.3 s
+- Moderate (fade, scroll animation): 0.425 s
+- Slow (panel slide, complex layout): 0.6–0.65 s
+- Extra-slow (chart loading dot): 0.6 s loop, 9 s total for secondary spinners
+
+**Primary easing:** `cubic-bezier(.4,.6,.2,1)` — Fugle's signature curve, used on layout transitions, header animations, and most interactive state changes. It has a sharp initial acceleration (the `.6` control point) and a gentle deceleration that gives the UI a confident, purposeful feel.
+
+**Secondary easing:** `cubic-bezier(0,1,.5,1)` — used for panel reveal/collapse; starts slow and exits fast, creating a "snap open" character.
+
+**Loading animation:** `cubic-bezier(0,1,1,0)` — the bouncing dot easing; exaggerated overshoot gives the brand's only playful motion moment.
+
+**Rules:**
+- All data-row hover transitions use `0.2s` or less; never animate data values themselves
+- Layout changes (watchlist open/close, trading panel) use the `--layoutDuration` CSS variable with the primary cubic-bezier curve
+- No entrance animations on stock rows or chart data; they appear instantly
+- Opacity fades use 0.425 s for modals and overlays

package/web/references/gmarket/DESIGN.md

@@ -436,6 +436,25 @@ Motion tokens **partially captured** — the chrome relies on Swiper.js defaults
 - Layer / modal transitions should be 200–250ms with ease-out
 - Respect `prefers-reduced-motion: reduce` — disable swiper auto-advance, eliminate non-essential transitions
 
+
+## 16. Do's and Don'ts
+
+### Do
+- Reserve Gmarket Red #da120d (--Red-600) for numeric price-discount strings, percentage-off, and strike-through context — treat it as a semantic-price asset, not a generic CTA fill
+- Set section H2s in Gmarket Sans at 28px/700 for hero modules and 24px/700 for compact modules, keeping the body on the Apple SD Gothic Neo / Noto Sans CJK KR system stack
+- Stack 10+ category modules vertically with ~48-64px breaks and repeating thumbnail-price-chip card rhythm so users scan the grid, not headings
+- Convey depth through borders and Gray-ladder tints (--Gray-200 #eeeeee card edge, --Gray-100 #f5f5f5 row/section tint) instead of box-shadow, which is absent in production chrome
+- Map color to revenue programs via named sub-systems — Smile-Yellow #ffd200 for loyalty/SmilePay, StarDelivery-Purple #7130f3 for premium delivery, Club-Navy-Main #002041 for Smile Club rails
+- Render Korean service-names exactly as-is (스마일배송 / 안전결제 / 도착보장 / 쿠폰적용가) and lead card copy with the price, letting the number do the work
+
+### Don't
+- Flood Gmarket Red #da120d as a primary button fill across large surfaces — in 272 sampled chrome elements it appears on price text, not as a button background
+- Place Smile-Yellow #ffd200 as a foreground on white (1.6:1 contrast, fails WCAG AA) — use it only as a background fill behind #222222 dark text
+- Add box-shadow or elevation to product cards; separation comes from the 8-16px gutter and color tints, never drop shadows
+- Pad sections to 'breathe' or introduce hierarchy that breaks the dense scan rhythm at the expense of card count per fold
+- Translate or rebrand Korean service-names (e.g. 스마일배송 to 'Smile Delivery') in Korean chrome, and avoid emotional adjectives or hero-tagline gestures inside card chrome
+- Collapse the type scale onto Medium 500 — production leans on the 400/700 binary, with 500 reserved mainly for the rendered logotype and banner overlays
+
 ---
 
 **Verified:** 2026-05-15