oh-my-design-cli 1.6.0 → 1.6.2

package/web/references/payco/DESIGN.md

@@ -0,0 +1,227 @@
+---
+id: payco
+name: "PAYCO"
+country: KR
+category: fintech
+homepage: "https://www.payco.com"
+primary_color: "#FF2233"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=payco.com&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# PAYCO
+
+South Korea's everyday fintech super-app — combining payment, points, financial services, and document storage in one red-branded platform operated by NHN PAYCO.
+
+## 1. Visual Theme & Atmosphere
+
+PAYCO's digital product language is built on a high-contrast red-and-white foundation that projects urgency, confidence, and accessibility. The vivid brand red (#FF2233) anchors every primary action — sidebar headers, CTA buttons, active navigation underlines — against a clean white canvas, creating an energetic rhythm without visual clutter. Dark charcoal (#2a303a) carries all body copy, keeping legibility sharp on white surfaces. Secondary UI chrome falls into neutral greys and off-whites, so the brand red always reads as a call to action. The overall atmosphere is functional and trustworthy: nothing extraneous competes with the moment of payment or redemption, yet the red signals that speed and benefit are always one tap away.
+
+## 2. Color Palette & Roles
+
+- **Brand Red:** `#FF2233` — primary brand color; buttons, active nav, sidebar headers, emphasis text (CSS custom property `--brand-color`)
+- **Legacy Red:** `#ff1414` — GNB bottom border, hover states, point figures; retained alongside brand red for legacy components
+- **Body Dark:** `#2a303a` — primary text, body copy, nav link default
+- **Off-Black:** `#2d2d2d` — secondary headings, dense data text
+- **Mid Grey:** `#666666` — secondary body text, input value text
+- **Placeholder Grey:** `#999999` — input placeholder, tertiary labels
+- **Light Neutral:** `#f4f6fa` — surface background for cards and section washes
+- **Divider:** `#ededed` — table borders, section dividers
+- **Input Border:** `#d4d4d4` — form field outlines at rest
+- **Disabled Surface:** `#dadada` — disabled button background
+- **Disabled Text:** `#aaacae` — disabled button label
+- **White:** `#ffffff` — page background, card fill, button fill (ghost/secondary)
+
+## 3. Typography Rules
+
+- **Korean primary:** `NotoSans` (NotoSans KR), weights 100–700; used in service sections, navigation, and promotional copy
+- **Newer flows:** `'Pretendard Variable'`, weights 400/500/700; used in modern refund and transaction screens
+- **Base stack (legacy):** `'Apple SD Gothic Neo', NanumGothic, ng, dotum, Helvetica, sans-serif`; applies to body, inputs, buttons
+- **Base size:** 16px; line-height 1.27; letter-spacing −1px (body)
+- **Hero heading:** 52px / 700 / color `#fff` / letter-spacing −0.56px (`.kv_heading`)
+- **Hero subtext:** 24px / 300 / color `#fff` / line-height 32px (`.kv_text`)
+- **Section title:** 52px / 700 / color `#000` (`.main_title`)
+- **Section subtitle:** 32px / 400 / color `#000` / line-height 50px (`.sub_title`)
+- **Nav links:** 24px / 300 / NotoSans / color `#191919`
+- **Large button label:** 18px / 700 / line-height 48px (`.bn_big *`)
+- **Medium button label:** 13px / 700 / line-height 39px (`.bn_l *`)
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Brand Button (bn_big + brand color)**
+- Background: `#FF2233`
+- Text: `#ffffff`
+- Border: 1px solid `#FF2233`
+- Height: 48px
+- Font: 18px / 700
+
+**Dark Secondary Button (bn_bk)**
+- Background: `#565960`
+- Text: `#ffffff`
+- Border: 1px solid `#4a4f56`
+- Height: 48px
+- Font: 18px / 700
+
+**Ghost Button (bn_gy)**
+- Background: `#ffffff`
+- Text: `#191a1c`
+- Border: 1px solid `#bfbfbf`
+
+**Disabled Button (bn_disabled)**
+- Background: `#dadada`
+- Text: `#aaacae`
+- Border: 1px solid `#d2d2d2`
+
+**Modern CTA Link Button (halt_apply)**
+- Background: `#FF2233`
+- Text: `#ffffff`
+- Radius: 8px
+- Height: 51px
+- Padding: 16px 10px
+- Font: 14px / 400
+
+### Form Inputs
+
+**Standard Input (inp)**
+- Background: `#ffffff`
+- Text: `#666666`
+- Border: 1px solid `#d4d4d4`
+- Height: 32px
+- Padding: 0 0 0 20px
+- Font: 12px
+
+**Placeholder**
+- Text: `#999999`
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.payco.com (homepage HTML), https://www.payco.com/share/css/common.css?1778564615926 (full CSS bundle, 398 KB)
+**Tier 2 sources:** getdesign.md/payco — NOT LISTED (no data). refero ?q=PAYCO — no KR result.
+**Conflicts unresolved:** #FF2233 (CSS :root --brand-color) and #ff1414 (legacy GNB border) coexist; #FF2233 is the canonical brand red per the custom property declaration.
+
+## 5. Layout Principles
+
+- Desktop content width: 1026px centered (`.wrap { width: 1026px; margin: 0 auto }`)
+- Full-width hero image with centred overlay text at 1600px minimum width for large screens
+- Sidebar navigation (`.snb_header_wrap`) uses brand red background at 184px height
+- Service sections stack vertically with generous vertical padding (159px top on first section, 115px on subsequent)
+- Service tab navigation is inline with 25px spacing between items
+- Footer uses narrower 760px content width with 180px left padding for address block
+
+## 6. Depth & Elevation
+
+- Flat surfaces dominate: cards and panels use 1px border or background colour shift rather than drop shadows
+- Panel dropdowns use subtle shadow: `box-shadow: 0 1px 0 rgba(0,0,0,.1)` (`.ly_panel_cont`)
+- Modal overlay uses full-screen dimmed layer: `background: #000; opacity: .7` (`.dimmed`)
+- z-index layering: skip link 120, sticky nav 99, date picker 100, modal 100+
+- Active GNB bottom underline: 4px solid `#ff1414` — the heaviest border accent in the system
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#FF2233` exclusively for primary CTAs, active states, and brand emphasis to maintain hierarchy
+- Set body text in `#2a303a` on white for maximum legibility
+- Use NotoSans (KR) for promotional and section heading copy; use Pretendard Variable for newer transactional screens
+- Apply the 1px solid `#d4d4d4` border on all inputs at rest state
+- Use the `bn_big` sizing (198×48px, 18px/700) for primary page-level call-to-action buttons
+- Keep content within the 1026px centred wrapper on desktop
+
+### Don't
+- Don't introduce additional brand colours outside the measured palette without alignment
+- Don't use the brand red `#FF2233` for body text or non-actionable elements — it triggers urgency
+- Don't omit the disabled state styling (`#dadada` / `#aaacae`) when rendering inactive buttons
+- Don't mix Pretendard Variable and legacy `'Apple SD Gothic Neo'` stacks in the same component context
+- Don't override the 4px GNB bottom border or the sidebar red header — these are structural brand anchors
+
+## 8. Responsive Behavior
+
+- Desktop first layout; breakpoints defined at max-width 1280px and max-width 1100px (narrow content adjustments)
+- At min-width 1600px: full-width hero image scales to cover with absolute centred positioning
+- Hero image uses `transform: translate(-50%, -50%)` for centred cover on all viewport sizes
+- Sticky navigation (`fp_nav`) transitions from absolute to fixed at 69px from top of viewport when user scrolls
+- Footer and sidebar widths do not adapt below 1100px; mobile experience served by native apps
+
+## 9. Agent Prompt Guide
+
+Use these conventions when generating PAYCO-branded UI:
+
+- Primary brand hex is `#FF2233`; use it for primary buttons, active nav items, and emphasis spans
+- Body text hex is `#2a303a`; secondary text is `#666`; placeholder is `#999`
+- Surface backgrounds: `#fff` (cards, page), `#f4f6fa` (section wash), `#f4f4f4` (info panels)
+- Button large: 198×48px, border 1px solid matching background, text 18px/700, white text on brand red
+- Input: height 32px, padding-left 20px, border 1px solid `#d4d4d4`, font 12px, text `#666`
+- Disabled: background `#dadada`, border `#d2d2d2`, text `#aaacae`
+- Corner radius: 8px for modern CTAs; 20px–100px for pill badges/tags; flat (0) for legacy button variants
+- Font: NotoSans KR for headings/promo; Pretendard Variable for transactional screens; fall back to Apple SD Gothic Neo
+- Transitions on nav indicator: `width 0.5s` ease
+
+## 10. Voice & Tone
+
+**Adjectives:** Practical, reassuring, familiar
+
+| Dimension | Do | Don't |
+|-----------|-----|-------|
+| Register | Friendly and direct; speak like a trusted neighbour | Formal or distant — avoid corporate stiffness |
+| Sentences | Short to mid-length; action-led | Long conditional clauses that delay the point |
+| Vocabulary | Everyday Korean consumer language; minimal jargon | Finance-heavy terminology without explanation |
+
+Voice samples (illustrative):
+- "결제가 필요한 모든 순간, PAYCO 하세요." (Every moment you need to pay, PAYCO it.) — short, verb-forward, brand name as a verb
+- "실속있는 포인트, 편리한 결제, 간편한 금융." (Practical points, convenient payment, simple finance.) — three-beat rhythm, benefit-first
+- "일상의 빈틈을 채우다" (Fill the gaps in your daily life.) — poetic but grounded, positions PAYCO as an everyday companion
+
+## 11. Brand Narrative
+
+PAYCO launched in 2015 under NHN (formerly NHN Entertainment, the company behind Hangame and NAVER's early gaming arm), aiming to consolidate the fragmented Korean payment landscape into a single mobile wallet. Rather than targeting power users, the service centred on the mass consumer's everyday inconveniences — small purchases, loyalty point management, transit payments — and built trust by linking to users' existing bank accounts without requiring a new card.
+
+The brand's current mission is captured in the homepage OG description: "실속있는 포인트, 편리한 결제, 간편한 금융, 안전한 전자문서함" — practical points, convenient payment, simple finance, secure digital document storage. This four-part mission reflects PAYCO's evolution from a pure payments app into a life-services super-app: the 페이코 라이프 (PAYCO Life) positioning introduced on the homepage signals that the brand sees itself as a utility layer across employment (office meal vouchers, campus IDs), commerce, and government-facing document exchange.
+
+NHN PAYCO operates the service as a subsidiary of NHN, and the product's visual language — dominated by the vivid brand red, clean white surfaces, and tight typographic scale — deliberately contrasts with the clutter of legacy Korean fintech apps. The tagline "일상의 빈틈을 채우다" (Fill the gaps in your daily life) positions PAYCO as a background enabler: always available, never intrusive, and genuinely useful in the uncovered corners of everyday life.
+
+## 12. Principles
+
+1. **Simplicity over completeness.** Every flow should reduce friction to its minimum. *UI implication:* Prefer single-action screens; hide advanced options behind progressive disclosure rather than exposing all settings upfront.
+
+2. **Trust through transparency.** Users are handling money and documents; every state must be communicated clearly. *UI implication:* Show explicit confirmation dialogs, unambiguous success screens, and honest error messages with recovery paths.
+
+3. **Reliability at every touchpoint.** PAYCO must work first time, every time, for every demographic. *UI implication:* Design for the lowest-common-denominator device; never depend on hover states for critical information.
+
+4. **Everyday relevance.** Benefits and points should feel attainable, not aspirational. *UI implication:* Surface accumulated points and savings prominently in personalised dashboards; use concrete numbers rather than percentages.
+
+5. **Brand clarity under load.** In dense data screens (transaction lists, coupon grids), brand red must remain a signal, not decoration. *UI implication:* Reserve `#FF2233` for primary CTAs and alert states only; use neutral greys for all listing chrome.
+
+## 13. Personas
+
+*Illustrative — these are representative archetypes synthesised from PAYCO's stated service areas and public product positioning.*
+
+*Illustrative Office Worker (지민, 28):* Uses PAYCO daily for the company meal-voucher (식권) at the office canteen, accumulates points on convenience-store runs, and occasionally pays transit fares. Values speed over discovery — expects the payment barcode to appear in under two taps.
+
+*Illustrative University Student (소연, 22):* Relies on the campus PAYCO card (캠퍼스) for student ID and library access, uses the app to send small remittances to family, and redeems coupon notifications between lectures. Sensitive to data charges; expects the app to be fast on mid-range Android.
+
+*Illustrative Self-Employed Merchant (영호, 45):* Accepts PAYCO at his neighbourhood bakery via QR code terminal; checks settlement summaries weekly. Values clear revenue totals and simple dispute resolution over any loyalty features.
+
+*Illustrative Document-Conscious Parent (혜진, 38):* Stores electronic documents (전자문서) — insurance policies, government notices — in PAYCO's digital wallet. Cares about security assurances and needs to find documents quickly when contacted by an insurer.
+
+## 14. States
+
+- **Empty:** Grey centre-aligned text `#999` with a descriptive label; no brand-red elements to avoid false urgency in zero-data screens
+- **Loading (spinner):** 22×22px animated sprite (`.sp_load`) absolutely centred on the container; background image from CDN; grey tones to avoid distraction
+- **Loading (image):** 30×30px animated gif (`.img_loading`) centred in column headers or card panels; separate assets for dark and light panel backgrounds
+- **Error (page-level):** Full-width white overlay with centred error illustration, 24px `#565960` heading, 13px `#666` body text, and a single recovery CTA button; brand-red used only in the recovery link (`.error .desc a`)
+- **Error (inline):** `#FF2233` caution text (`.caution`, `.confirm`) at 12px directly below the affected field
+- **Success:** Implicit via forward navigation; no dedicated success-screen pattern found in CSS — completion is signalled by routing to next step
+- **Skeleton:** No explicit skeleton-loading CSS found; loading spinners serve this role
+- **Disabled:** Background `#dadada`, border `#d2d2d2`, text `#aaacae`; cursor:default implied; interactive events suppressed
+
+## 15. Motion & Easing
+
+- **Navigation indicator:** `transition: width 0.5s` — the `fp_nav` active underline expands from 0 to 100% width; easing unspecified (browser default ease)
+- **Transform usage:** `transform: translate(-50%, -50%)` for absolute centring of hero image and modals; `transform: translateY(-50%)` for vertically centred inline elements — all used for layout, not animation
+- **Page scroll:** `fp_nav` transitions between absolute and fixed positioning on scroll; no explicit scroll-animation timing defined
+- **General rule:** Transitions are minimal and functional; the brand does not use decorative motion. Duration scale: 0.5s for page-level indicator; shorter interactions implied by browser defaults
+- **Easing intent:** Flat ease (browser default) for all measured transitions; no cubic-bezier custom curves found in the CSS bundle

package/web/references/piccollage/DESIGN.md

@@ -0,0 +1,277 @@
+---
+id: piccollage
+name: "PicCollage"
+country: US
+category: consumer-tech
+homepage: "https://piccollage.com"
+primary_color: "#4FC3C4"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=piccollage.com&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# PicCollage
+
+A Taiwan-born photo-collage and greeting-card app that turns everyday photos and videos into shareable celebrations — serving 270 million users worldwide with joyful, AI-assisted creative tools.
+
+## 1. Visual Theme & Atmosphere
+
+PicCollage wraps creativity in warmth. The homepage opens with a soft cream canvas (`#FBF2EB`) that feels like textured scrapbook paper — unhurried, tactile, inviting touch. Against that warm ground, a signature teal (`#4FC3C4`) pops as the primary call-to-action, energetic without being aggressive. Typography mixes a serif display face (Zilla Slab) for expressive headlines with Poppins for clear, friendly body copy, signalling that the product is both crafted and accessible. Feature sections use a vivid purple-to-coral gradient (`#8235B8 → #EE604D`) as a typographic highlight, nodding to the brand's celebratory, multicolour spirit. Elevations are kept light — diffused shadows (`0px 0px 8px rgba(0,0,0,0.15)`) rather than hard drops — so collage content stays the visual hero. The overall register is: "a creative friend's studio, tidied up just enough to feel welcoming."
+
+## 2. Color Palette & Roles
+
+- **Teal / Primary CTA:** `#4FC3C4` — main download and action button background
+- **Teal 200 / Nav Button:** `#b7e1da` — nav "Download the App" button fill
+- **Teal 300 / Footer:** `#7ad2c3` — footer section background
+- **Teal 500 / Border Accent:** `#2db59e` — interactive border on nav and teal buttons
+- **Warm Cream / Hero BG:** `#FBF2EB` — hero section page background
+- **Beige 50 / Nav BG:** `#f5f4ef` — navigation bar background
+- **Beige 100 / Surface:** `#ece9df` — icon button fill, hover surface
+- **Beige 300 / Divider:** `#d9d2bf` — subtle borders and dividers
+- **Gray 850 / Body Text:** `#292929` — primary text on light surfaces
+- **Gray 700 / Secondary Text:** `#4d4d4d` — secondary body and nav labels
+- **Pink 500 / Accent:** `#f85482` — highlight sticker/badge accent
+- **Yellow 400 / Celebration:** `#ffcf3d` — festive highlight, feature icon fill
+- **Feature Gradient:** `#8235B8 → #974DCB → #EF4967 → #EE604D` — display heading gradient
+
+## 3. Typography Rules
+
+- **Display / Hero headline:** Zilla Slab, 60px / line-height 67px, weight 600, color white with text-shadow `0px 0px 10px #AB7624`
+- **Section headline (desktop):** Poppins, 36px / weight bold — feature card titles
+- **Section headline (mobile):** Poppins, 25px / weight bold — responsive scale
+- **Sub-headline / hero tagline:** Poppins, 25px / line-height 35px, weight 500, white
+- **Body copy:** Poppins, 18px / weight 400 — feature descriptions
+- **UI label / nav button:** Poppins, 14px / weight medium (500), tracking -0.28px
+- **Hierarchy:** Display → Section H1 → Body → UI Label; always Poppins below the hero; Zilla Slab reserved for marketing hero only
+- **Base scale:** 10 / 12 / 14 / 16 / 18 / 20 / 24 / 28 / 32 / 36 / 40 / 44 / 48 / 72px
+
+## 4. Component Stylings
+
+### Primary CTA Button (App Download)
+
+**Mobile Sticky Download**
+- Background: `#4FC3C4`
+- Text: `#ffffff`
+- Border: none
+- Radius: 30px
+- Width: 294px
+- Height: 44px
+- Font: 14px / 700
+- Shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10)
+
+**Nav Download Button**
+- Background: `#b7e1da`
+- Text: `#292929`
+- Border: 1.5px solid `#2db59e`
+- Radius: 9999px
+- Height: 32px
+- Padding: 8px 12px
+- Font: 14px / 500
+
+### Icon Button (Toolbar / Nav Icon)
+
+**Beige Icon Button**
+- Background: `#ece9df`
+- Border: 1.5px solid `#d9d2bf`
+- Radius: 9999px
+- Width: 44px
+- Height: 44px
+
+**Hover State**
+- Background: `#e8e4d9`
+
+### Navigation Bar
+
+**Top Nav**
+- Background: `#f5f4ef`
+- Height: 70px
+- Shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08)
+- Padding: 8px 44px
+
+**Nav Menu Item**
+- Text: `#4d4d4d`
+- Font: 14px / 500
+- Radius: 9999px
+- Padding: 8px 12px
+
+### Card / Feature Panel
+
+**Feature Card**
+- Background: `#ffffff`
+- Radius: 16px
+- Border: 2px solid `#e8e4d9`
+- Shadow: 0px 0px 12px 0px `#E8E8E8`
+
+**Collage Thumbnail**
+- Radius: 16px
+- Shadow: 0px 0px 8px rgba(0, 0, 0, 0.15)
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://piccollage.com (homepage HTML + inline styles), https://pic-collage-mczsmo7tt-piccollage.vercel.app/_next/static/chunks/0w52i878~_fa~.css (main CSS bundle with full --color-pic-* token scale), https://piccollage.com/company (company page HTML with brand mission copy), https://play.google.com/store/apps/details?id=com.cardinalblue.piccollage.google (Google Play listing — Cardinal Blue Software, Inc.)
+**Tier 2 sources:** getdesign.md/piccollage — 0 DESIGN.md files (no data). refero ?q=PicCollage — JS-only SPA, no results returned.
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+- **Max content width:** ~1221px on hero (capped via `max-width:1221px`); 690px for editor panels; standard Tailwind spacing scale (4px base unit)
+- **Navigation:** Sticky top bar, full-width, 70px tall; collapses to hamburger below `sm` breakpoint (640px); content inset `44px` on sm+
+- **Hero:** Full-bleed background image/video with centred text column (622px wide on desktop); app-store badges and CTA stack below tagline
+- **Section grid:** Single-column on mobile; 2-column grid on `md` (768px+) for feature cards; horizontal marquee for testimonials
+- **Footer:** Full-bleed teal-300 (`#7ad2c3`), 550px tall on lg / 900px tall on mobile; centred QR code + app badge layout
+- **Spacing rhythm:** 8, 12, 16, 24, 32, 48, 64, 96px; section vertical padding is `32px 0 96px` on desktop
+
+## 6. Depth & Elevation
+
+- **Level 0 — Flat surface:** Hero cream background `#FBF2EB`, no shadow; page-level canvas
+- **Level 1 — Card:** `box-shadow: 0px 0px 12px 0px #E8E8E8` — feature panels and template tiles
+- **Level 2 — Thumbnail / floating element:** `box-shadow: 0px 0px 8px rgba(0,0,0,0.15)` — collage preview cards
+- **Level 3 — Navigation:** `box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.08)` — sticky top bar lifts above content
+- **Level 4 — Modal / overlay:** `box-shadow: 0px 16px 22px 0px rgba(0,0,0,0.07)` — slide-out drawer
+- **Overlay tint:** `rgba(0,0,0,0.40)` for scrim behind full-screen modals
+- **Principle:** Elevation is soft and diffused (large blur, low opacity) rather than hard; keeps collage imagery as the primary visual anchor
+
+## 7. Do's and Don'ts
+
+### Do
+- Use teal (`#4FC3C4` / `#b7e1da` family) as the action colour; reserve it for CTAs and interactive states
+- Use the warm cream (`#FBF2EB`, beige family) for page backgrounds to keep the scrapbook warmth
+- Apply Zilla Slab only for marketing hero headlines; use Poppins for all product and body text
+- Use fully rounded pill buttons (radius 9999px / 30px+) for all primary and secondary actions
+- Apply the purple-to-coral gradient (`#8235B8 → #EE604D`) exclusively on display text for celebratory emphasis
+- Keep diffuse, low-opacity shadows to let collage content remain the visual star
+- Transition color changes at 200ms ease-in-out for interactive elements
+
+### Don't
+- Don't use hard, deep shadows — they conflict with the airy scrapbook aesthetic
+- Don't mix Zilla Slab with body-copy contexts; it is display-only
+- Don't use pink (`#f85482`) or yellow (`#ffcf3d`) as primary backgrounds — accent use only
+- Don't use sharp corners (radius < 8px) on interactive elements; the brand is round and soft
+- Don't crowd layouts; template cards and collage thumbnails need generous white/cream space
+- Don't place coloured text directly on the purple-to-coral gradient without white fill or contrast check
+
+## 8. Responsive Behavior
+
+- **< 640px (mobile):** Single-column layout; sticky bottom CTA bar appears (`bottom: 24px`, width `294px`, radius `30px`); hero headline scales to 32px; feature cards stack vertically; footer 900px tall
+- **640px – 767px (sm):** Hero text column narrows; app-store badges side-by-side; nav stays horizontal but collapses secondary items; footer 650px tall
+- **768px – 1023px (md):** Feature grid becomes 2-column; editor panel up to 690px; section padding expands to 80px block
+- **1024px+ (lg):** Full hero layout (622px text column + phone mockup); max-content 1221px; footer 550px tall; all nav items visible with 44px horizontal inset
+- **Breakpoints:** xs 480px, sm 640px, md 768px, lg 1024px (Tailwind standard); custom `sm:px-[44px]`, `md:px-[71px]`
+
+## 9. Agent Prompt Guide
+
+When generating PicCollage-style UI:
+
+```
+Visual system: warm cream (#FBF2EB) page canvas, teal (#4FC3C4) primary CTA, beige-family surfaces.
+Typography: Zilla Slab 600 for hero headline only; Poppins 500/400 for all other text.
+Buttons: fully rounded pills (radius 30px–9999px); primary = #4FC3C4 bg + white text; secondary = #b7e1da bg + 1.5px #2db59e border + #292929 text.
+Cards: radius 16px, soft shadow (0px 0px 12px #E8E8E8), 2px beige border (#e8e4d9).
+Shadows: diffuse only — blur-heavy, low-opacity; no hard drop shadows.
+Gradient (display text only): linear-gradient(87.36deg, #8235B8 -9.23%, #974DCB 16.56%, #EF4967 73.21%, #EE604D 91.93%).
+Tone: warm, celebratory, encouraging; short sentences with exclamation energy; never clinical.
+Avoid: sharp corners, dark overlays, hard shadows, serif body text.
+```
+
+## 10. Voice & Tone
+
+**Register:** Warm, celebratory, encouraging — like a creative best friend cheering you on.
+
+**Adjectives:** Joyful · Approachable · Empowering
+
+| Do | Don't |
+|---|---|
+| Use short, punchy verbs: "Create," "Celebrate," "Share" | Use passive or corporate phrasing ("leverage your assets") |
+| Address the user directly: "your memories," "your camera roll" | Be abstract or category-generic |
+| Celebrate small moments, not just big milestones | Overpromise technical perfection |
+| Use light exclamation energy — one `!` per sentence max | Pile on emojis or CAPS LOCK for emphasis |
+| Invite, not instruct: "Try PicCollage now!" | Command coldly: "Enter your photos." |
+
+**Voice samples (illustrative):**
+- *"The easiest photo and video editing app to add magic to your treasured memories."* — tagline on homepage hero
+- *"Our promise to you — our AI tools will always act as an assistant to super-charge your creative ideas. They blend in seamlessly and never take the creative process out of your hands."* — feature copy
+- *"We love a holiday! But we also believe every moment is worth romanticizing."* — feature section headline
+- *"Create & Celebrate."* — brand tagline, blog subtitle
+- *"Give it a try. Have some fun."* — user review echoing brand voice register
+
+## 11. Brand Narrative
+
+PicCollage was created by Cardinal Blue Software, Inc., a Taipei-based studio that believed photo sharing could be more than a stream of single images. Founded in 2011, the app launched as a simple drag-and-drop collage tool for iOS and quickly spread virally among users who wanted to tell stories with multiple photos in a single frame. Within a few years it had grown to tens of millions of downloads, establishing itself as a staple creative tool across Asia and North America.
+
+Today PicCollage serves over 270 million people worldwide, operating under the mission "Create, Celebrate, Connect." The company has expanded into a suite of creative apps — OnBeat for music-driven video, BEAM, Noodle, and MemeMe — anchored by a shared philosophy of "Creative AI": AI that acts as a creative assistant, never a creative replacement. The company tagline captures this spirit in three words: "Make the World Fun & Creative."
+
+The product's design language mirrors this mission. Warm, scrapbook-inspired surfaces and rounded, inviting controls signal that creativity here is for everyone — not just designers. Every template update, sticker pack, and holiday campaign is an act of celebration: an invitation to document life's small moments with the same ceremony reserved for big milestones.
+
+## 12. Principles
+
+1. **Creativity is for everyone.**
+   Everyone can be creative with the right tools. PicCollage designs for first-time creators, not expert designers.
+   *UI implication:* Use familiar, forgiving affordances — pill buttons, clear iconography, visible undo — so users never feel punished for experimenting.
+
+2. **AI assists; people create.**
+   AI tools are positioned as magic helpers that expand ideas, never as robots that replace personal expression.
+   *UI implication:* AI features sit alongside manual tools, not above them; show the user's photo or input front-and-centre, AI output as an overlay or suggestion layer.
+
+3. **Every moment deserves celebration.**
+   The brand refuses to reserve ceremony for only the big milestones; ordinary days are worth commemorating.
+   *UI implication:* Offer templates and stickers for everyday occasions (Tuesday photo dumps, random lunch photos) alongside birthdays and holidays; avoid a hierarchy that only surfaces "important" event categories.
+
+4. **Designs should feel fresh, always.**
+   The design library is updated weekly; users should never run out of inspiration.
+   *UI implication:* Prominently surface "New" and "Trending" badges in template grids; use motion cues (subtle shimmer or marquee scroll) to signal freshness without overwhelming the canvas.
+
+5. **Warmth over polish.**
+   Craft is valued, but approachability trumps perfection. The aesthetic is intentionally hand-made feeling.
+   *UI implication:* Prefer soft, diffuse shadows and beige/cream surfaces over stark white; allow collage imperfection (overlapping elements, slight rotations) in template previews.
+
+## 13. Personas
+
+*Illustrative — these are representative archetypes inferred from brand copy, user reviews, and app-store description, not from first-party research.*
+
+**The Celebration Architect — Mia, 32**
+Parents, birthdays, holidays: Mia runs the family memory archive. She uses PicCollage weekly to create invitation cards, countdown collages, and holiday cards. She wants beautiful output fast — she doesn't have time to learn Photoshop, but she cares deeply that the result looks personal and thoughtful. She gets frustrated if she can't find a template for exactly her occasion.
+
+**The Social Storyteller — Jake, 22**
+Jake uses PicCollage for Instagram photo dumps and Snapchat year-in-reviews. He cares more about vibe and aesthetic than occasion. He explores template libraries the way other people scroll TikTok — browsing for inspiration he didn't know he needed. He loves new sticker drops and will switch to a competing app if PicCollage feels stale.
+
+**The Occasional Sender — Lin, 48**
+Lin only opens PicCollage a few times a year — around major holidays and her children's birthdays. She needs the app to be so intuitive that she doesn't have to remember how it works between sessions. Error states and confusing flows make her abandon the task. Success for Lin is finishing and sending in under five minutes, feeling proud of the result.
+
+**The Young Creator — Sam, 14**
+Sam uses the app for school projects, creative memes, and friend-group collages. Sam is the fastest user in the room and will find every edge of the canvas. She wants maximum customisation and loves AI magic features. She shares her creations immediately and watches for reactions; the share flow must be frictionless.
+
+## 14. States
+
+- **Empty (no photos):** Warm cream canvas with a dashed-border drop zone, illustrated collage placeholder icons, and an approachable prompt: "Tap to add your first photo" — never a plain error icon
+- **Loading / skeleton:** Rounded rectangles (radius 16px) in `#e2ddcf` (beige-200) pulse softly at 1.5s timing; matches card shape exactly to prevent layout shift
+- **Error — network:** Inline banner at top of canvas with coral tint (`#f19daf`, pink-300 family); icon + short friendly message ("Couldn't load — tap to retry"); never modal unless blocking
+- **Error — upload failed:** Toast notification at bottom of screen, `rgba(0,0,0,0.80)` dark pill, white text; auto-dismisses after 4s; offers "Try again" action
+- **Success — save/share:** Brief confetti burst animation (0.7s, `cubic-bezier(.22,1,.36,1)`) centred on canvas, then green-tinted toast; shares to OS share sheet immediately after
+- **Skeleton — template grid:** Grid of 16px-radius beige cards animate in with staggered 50ms delay per card; grid layout preserved so items don't reflow when real templates load
+- **Disabled state:** `opacity: 0.5`; `cursor: not-allowed`; no border change on teal buttons; applied via `data-disabled` attribute
+- **Focus visible:** `outline: 1px solid #298e7d` (teal-600), `outline-offset: 2px` — keyboard-accessible, matches teal brand family
+
+## 15. Motion & Easing
+
+**Duration scale:**
+- Micro (hover, color change): 150ms
+- Standard (color transition on interactive elements): 200ms
+- Expand / accordion: 200ms (`ease-out`)
+- Reveal / entry animation: 700ms (`cubic-bezier(.22, 1, .36, 1)` — spring-like)
+- Marquee scroll (testimonials): 40s linear infinite
+- Loader spin: 3s linear infinite
+
+**Easing tokens:**
+- `ease-in-out` — primary transition easing for color and border changes
+- `ease-out` — accordion expand, slide-in panels
+- `cubic-bezier(.22, 1, .36, 1)` — reveal-from-rect entry animation (bouncy spring)
+- `linear` — infinite scroll marquees and spinner
+
+**Motion rules:**
+- All color/background transitions on interactive elements use 200ms ease-in-out
+- Modals and drawers use 200ms ease-in-out translate; entry from left for drawers (`translateX(-100%)` to 0)
+- Hover on collage thumbnails may apply a subtle scale (not measured explicitly; follow standard `scale(1.02)` at 200ms)
+- Reduced-motion: `@media (prefers-reduced-motion)` in CSS sets `animation: none` for marquee and loader; all entry animations should respect this
+- Never animate content that is the user's creation (the collage canvas itself should not move spontaneously)

package/web/references/rayark/DESIGN.md

@@ -0,0 +1,132 @@
+---
+id: "rayark"
+name: "Rayark"
+country: TW
+category: entertainment
+homepage: "https://rayark.com"
+primary_color: "#5FE0EE"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=rayark.com&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+---
+# Design System Inspiration of Rayark
+
+## 1. Visual Theme & Atmosphere
+
+Rayark presents the cool, premium mood of a rhythm-game interface: a near-black canvas lit by a single shard of electric cyan. The Taipei indie studio behind Cytus, Deemo, VOEZ and the RPG Sdorica carries that gameplay aesthetic straight into its brand surface, where almost everything recedes into darkness so that one accent color can carry all the energy. White display type sits crisply on the black ground, corners stay sharp rather than soft, and the cyan reads like a neon line glowing on a dark stage. The atmosphere is restrained but charged — calm, confident, and unmistakably built by people who design for the screen. Nothing is decorative for its own sake; the contrast between deep black, bright white, and one luminous accent is the entire personality.
+
+## 2. Color Palette & Roles
+The palette is deliberately tight: a single near-black ground, one electric-cyan accent, and white for text. This three-value discipline is what makes the cyan feel like light rather than paint.
+
+| Role | Value | Notes |
+| --- | --- | --- |
+| Ground / page background | `#1A1C1D` | Near-black canvas (rgb 26,28,29); the base everything sits on |
+| Accent / signature | `#5FE0EE` | Electric cyan (rgb 95,224,238); hero and accent text, primary CTA fill |
+| Text on dark | `#FFFFFF` | White display and navigation type |
+| Text on accent | `#000000` | Black label inside the cyan CTA for maximum contrast |
+
+Use the cyan sparingly — as the single point of emphasis against the dark field. White carries legibility; black is the stage.
+
+## 3. Typography Rules
+Typography is set in Noto Sans, a clean humanist sans that keeps the dark UI readable and modern.
+
+- **Family:** Noto Sans across the interface.
+- **Navigation:** 20px, weight 400 — confident but not heavy, white on the dark ground.
+- **Body:** 16px for running text.
+- **CTA label:** 16px, weight 700 — the bold weight gives the button its punch.
+
+Keep the type white on the dark canvas and reserve weight (700) for the moments that must act, like the primary button.
+
+## 4. Component Stylings
+
+### Primary Button — "Play Now"
+
+**Default**
+- Background: #5FE0EE
+- Text: #000000
+- Border: 2px solid #FFFFFF
+- Radius: 3px
+- Height: 40px
+- Font: 16px / 700
+- Use: Primary call-to-action — the cyan CTA with sharp corners and a white outline that pops off the black ground
+
+### Top Navigation
+
+**Default**
+- Background: transparent
+- Text: #FFFFFF
+- Border: none
+- Height: 70px
+- Font: 20px / 400
+- Use: Transparent header with white nav links floating over the dark hero
+
+### Page Surface
+
+**Default**
+- Background: #1A1C1D
+- Text: #FFFFFF
+- Border: none
+- Height: full viewport
+- Font: 16px / 400
+- Use: The near-black canvas that grounds every screen and lets the cyan accent read as light
+
+## 5. Layout Principles
+The layout leans on a transparent header that lets the hero artwork run edge to edge beneath it, with the navigation (70px tall) floating over the dark canvas rather than sitting in a separate bar. Content is staged against the near-black ground so that bright accents define the eye path. Keep the structure clean and full-bleed; let the darkness provide the negative space rather than crowding the frame with boxes.
+
+## 6. Depth & Elevation
+Depth here comes from contrast, not shadow. The near-black ground (`#1A1C1D`) recedes while white text and the cyan accent advance, and the primary button earns its prominence through a bright fill plus a 2px white outline rather than a drop shadow. The transparent navigation reinforces the sense of layers — UI floating above artwork — without any heavy elevation effect. Treat luminosity as the elevation system: brighter means closer.
+
+## 7. Do's and Don'ts
+
+### Do
+- Build on the near-black ground `#1A1C1D` and let it carry most of the screen.
+- Reserve the cyan `#5FE0EE` as a single point of emphasis so it reads as light.
+- Keep corners sharp (radius 3px on the CTA) for the game-UI edge.
+- Outline the primary button with a 2px white border so it pops off the dark.
+
+### Don't
+- Dilute the palette with extra accent colors — the power is in the single cyan.
+- Soften the CTA into a pill; the sharp 3px radius is part of the character.
+- Drop white text onto the cyan fill — labels on the accent are black `#000000`.
+- Add heavy drop shadows; depth comes from contrast and luminosity.
+
+## 8. Responsive Behavior
+The transparent header and full-bleed dark canvas adapt gracefully across viewports, with the 70px navigation bar anchoring the top of the screen. Maintain the dark ground and the single cyan accent at every breakpoint, and keep the CTA's height (40px) and weight (700) intact so the call-to-action stays tappable and legible on smaller screens. Let hero artwork scale behind the floating navigation rather than reflowing into separate panels.
+
+## 9. Agent Prompt Guide
+When generating UI in Rayark's spirit: start from a near-black ground `#1A1C1D`, set type in Noto Sans (nav 20px/400, body 16px) in white `#FFFFFF`, and introduce exactly one accent — electric cyan `#5FE0EE`. Make the primary action a cyan button with black `#000000` label text, a 2px solid white border, a sharp 3px radius, and a 40px height with a 16px/700 label. Keep the header transparent at 70px so artwork runs beneath it. Favor contrast and luminosity over shadows, and keep the whole palette to three values so the cyan always reads as glowing light.
+
+## 10. Voice & Tone
+Cool, confident, and screen-native — the tone of a studio that designs for play. The voice is economical and assured rather than chatty, matching an interface that says everything with one accent color. It carries the quiet swagger of a rhythm-game UI: precise, modern, and a little electric.
+
+## 11. Brand Narrative
+Rayark is a Taipei indie game studio known for the rhythm games Cytus, Deemo and VOEZ and the RPG Sdorica. Its brand surface translates that catalog into a dark, premium gaming aesthetic — a near-black stage where a single shard of electric cyan does the work of a spotlight. The identity reads as the cool, neon-on-black mood of a rhythm-game screen carried into the studio's own front door.
+
+## 12. Principles
+- **One accent, maximum charge.** A single electric cyan against black does more than a full palette ever could.
+- **Darkness as the stage.** The near-black ground is the foundation that lets light read as light.
+- **Sharp over soft.** Crisp corners (3px) keep the game-UI edge.
+- **Contrast is the depth system.** Luminosity, not shadow, signals hierarchy.
+
+## 13. Personas
+- **The rhythm-game player** who expects a sleek, neon-lit interface and reads the dark canvas as native territory.
+- **The fan of the studio's titles** (Cytus, Deemo, VOEZ, Sdorica) arriving to learn more, who recognizes the premium, screen-first mood.
+
+## 14. States
+- **Default CTA:** cyan `#5FE0EE` fill, black `#000000` label, 2px solid white border, 3px radius, 40px height.
+- **Navigation default:** white `#FFFFFF` links at 20px/400 on a transparent 70px header.
+- **Surface default:** near-black `#1A1C1D` ground with white body text.
+
+(Hover, pressed, and focus values are not present in the verified source and are intentionally left to qualitative judgment rather than invented.)
+
+## 15. Motion & Easing
+No motion or easing values were captured in the verified source. In keeping with the brand's character, any motion should feel as crisp and precise as the visual language — quick, clean transitions that match a rhythm-game cadence, with the cyan accent used to draw the eye rather than elaborate animation. Specific timing and easing curves are intentionally left unspecified rather than fabricated.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://rayark.com (live DOM: body bg #1A1C1D, accent cyan #5FE0EE, transparent header, white nav 20px/400, 70px height, 'Play Now' CTA values), https://rayark.com/en/about/ (English studio identity / brand narrative), https://github.com/rayark (studio org / catalog cross-reference)
+**Tier 2 sources:** getdesign.md/rayark — NOT LISTED. refero — not listed (game studio absent).
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)