oh-my-design-cli 1.5.1 → 1.6.1

package/web/references/melon/DESIGN.md

@@ -0,0 +1,153 @@
+---
+id: melon
+name: "Melon"
+country: KR
+category: entertainment
+homepage: "https://www.melon.com"
+primary_color: "#00CD3C"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=melon.com&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+---
+
+# Design System Inspiration of Melon
+
+## 1. Visual Theme & Atmosphere
+
+Melon is Korea's dominant music-streaming service, operated by Kakao Entertainment, and its interface wears that scale on its sleeve: a dense, white, content-first surface where charts, lists, and player controls are packed tightly together and the music is always the point. The atmosphere is utilitarian and high-density — small type at 12px for body and 13-14px for controls, near-black #1A1A1A headings, and sharp 0px corners everywhere — so the screen reads like a tightly ruled spreadsheet of songs rather than a soft consumer app. Against that white #FFFFFF ground, the signature Melon green (#00CD3C in the source CSS, rendering as a near-twin #00D344 on the live login button) is rationed carefully, lighting up only active navigation, selected tabs, player buttons, and primary actions. Everything else is a quiet grayscale hierarchy — #666666 for muted text, #999999 for the lightest labels and placeholders — that lets the green do all the signaling. The result is unmistakably brand-green-on-white: grid-like, efficient, and built for browsing thousands of tracks without visual fatigue. It is the look of a tool that expects you to scan, tap, and keep listening.
+
+## 2. Color Palette & Roles
+
+- **Signature green #00CD3C** — the brand-defining Melon green; primary actions, active nav, selected tabs, player buttons (appears ~11x in the live CSS).
+- **Darker green #00B523** — a deeper green variant used as a companion to the signature green.
+- **Login button green #00D344** — the live-rendered green on the primary login button; a near-twin of #00CD3C.
+- **Near-black #1A1A1A** — heading and primary text color against the white ground.
+- **Muted gray #666666** — default body text color (live body renders rgb(102,102,102)).
+- **Light gray #999999** — the lightest text tier; secondary labels and input placeholder text.
+- **Red accent #DF2607** — a sharp red accent used sparingly.
+- **Ground #FFFFFF** — the white canvas the entire dense layout sits on.
+
+The green is the only saturated color allowed to carry meaning; the reds appear as rare accents, and the rest of the palette is a disciplined grayscale ladder from #1A1A1A down through #666666 to #999999 on white.
+
+## 3. Typography Rules
+
+- **Typeface:** Pretendard, with 맑은 고딕 (Malgun Gothic) as the fallback.
+- **Body text:** 12px — the dense default for list rows and metadata; renders in muted gray #666666.
+- **Controls:** 13-14px — interactive controls and inputs sit slightly larger than body for tap targets.
+- **Headings / primary text:** near-black #1A1A1A.
+- **Weights observed:** 400 (regular) on buttons and inputs.
+
+The type system is deliberately small and dense, suiting a content-first streaming UI that must show many rows at once. Color, not size, does most of the hierarchy work — near-black #1A1A1A for what matters, #666666 for supporting text, #999999 for the quietest labels.
+
+## 4. Component Stylings
+
+### Login Button
+
+**Primary (live-rendered green)**
+- Background: #00D344
+- Text: #FFFFFF
+- Border: none
+- Radius: 0px
+- Height: 42px
+- Font: 14px / 400
+- Use: primary login / sign-in action; the sharp-cornered green button that anchors account entry
+
+### Search Input
+
+**Default**
+- Background: transparent
+- Text: #999999
+- Radius: 0px
+- Height: 40px
+- Font: 13px / 400
+- Use: search field; placeholder and text both render in light gray #999999
+
+### Body / List Text
+
+**Default row text**
+- Background: #FFFFFF
+- Text: #666666
+- Border: none
+- Radius: 0px
+- Font: 12px / 400
+- Use: dense chart and list rows; the workhorse text style across the streaming grid
+
+Across components the corners are uniformly square (0px radius), reinforcing the dense, grid-like streaming layout rather than a soft, rounded consumer feel.
+
+## 5. Layout Principles
+
+Melon is built around density. The layout is a content-first grid of packed charts and lists where many rows are visible at once, and the square 0px corners on buttons and inputs make the whole surface read like ruled cells rather than floating cards. White #FFFFFF is the dominant ground, giving the small 12px body text and #666666 metadata room to breathe inside an otherwise tightly packed screen. The green is placed structurally — on active nav, selected tabs, and primary actions — so wayfinding rides on color, not on heavy chrome. The overall principle is utilitarian: maximize the number of songs and controls in view, keep the framing minimal, and let the brand green mark the live, actionable elements.
+
+## 6. Depth & Elevation
+
+Melon's surface is flat by design. With 0px radius on its buttons and inputs and a uniform white #FFFFFF ground, the UI avoids rounded cards and soft floating layers in favor of a dense, grid-like plane. There is no measured shadow or elevation token in the verified data, so depth here is communicated through color and contrast — near-black #1A1A1A and the signature green #00CD3C advancing against the white field — rather than through drop shadows or layered surfaces. The aesthetic is sharp, square, and screen-efficient, treating the page as a single tightly organized sheet.
+
+## 7. Do's and Don'ts
+
+### Do
+- Keep the ground white (#FFFFFF) and let dense lists and charts fill the screen.
+- Ration the signature green (#00CD3C / live #00D344) for active states and primary actions only.
+- Use square 0px corners on buttons and inputs to preserve the grid-like, streaming-tool feel.
+- Build the text hierarchy from color — #1A1A1A for primary, #666666 for body, #999999 for the quietest labels.
+- Use Pretendard (with 맑은 고딕 fallback) and keep type small: 12px body, 13-14px controls.
+
+### Don't
+- Invent rounded corners or soft cards — the corners are sharp (0px) throughout.
+- Spread the green across large surfaces; it loses its signaling power if it stops being rare.
+- Inflate type sizes; the density depends on small 12-14px text.
+- Introduce the red accent (#DF2607) broadly — keep it as a sparing accent.
+
+## 8. Responsive Behavior
+
+The verified inspection covers the desktop web surface of melon.com, where the design is a dense, multi-column grid of charts and lists with small 12px body text and 40-42px control heights. No mobile breakpoint measurements are present in the verified data, so responsive specifics are described qualitatively: the density-first philosophy — many rows visible, square corners, color-driven wayfinding — is the constant, and any narrower layout would be expected to preserve the small type scale and the rationed green rather than redesign around them. Control heights in the 40-42px range (search input 40px, login button 42px) suggest comfortable tap targets even within the dense frame.
+
+## 9. Agent Prompt Guide
+
+When generating UI in the Melon style, instruct the agent: build on a white #FFFFFF ground with a dense, content-first grid of lists and charts. Use Pretendard (fallback 맑은 고딕) at small sizes — 12px body, 13-14px controls. Set text color by tier: #1A1A1A for headings and primary text, #666666 for body, #999999 for placeholders and the quietest labels. Make all buttons and inputs square (border-radius 0px). Use the signature Melon green only for primary actions and active states — primary button background #00D344 (or source green #00CD3C), white #FFFFFF text, 42px height, 14px/400 font. Search inputs: transparent background, #999999 text and placeholder, 40px height, 13px/400. Keep the red #DF2607 as a rare accent. Avoid rounded cards, drop shadows, and large type — the whole point is a sharp, high-density, green-on-white streaming tool.
+
+## 10. Voice & Tone
+
+Melon's voice is utilitarian and unfussy, matching a tool that exists to get you to the music fast. It is content-first: the product trusts the charts, lists, and track metadata to carry the experience, so the surrounding language stays brief, functional, and direct. Where the brand asserts itself, it does so through the green, not through chatty copy — the tone is efficient and confident, the voice of Korea's dominant streaming service that assumes you came to listen, not to read.
+
+## 11. Brand Narrative
+
+Melon is Korea's dominant music-streaming service, operated by Kakao Entertainment. Its identity is anchored by the signature Melon green — #00CD3C in the source CSS, rendering as a near-twin #00D344 on the live login button — set against an almost entirely white, high-density interface. The narrative is one of utility at scale: thousands of tracks, packed charts, and player controls organized into a sharp, square, grid-like surface where the brand green is rationed to mark the live and actionable. It is a design that says streaming is a daily utility, and that the brand's job is to be fast, dense, and unmistakably green-on-white.
+
+## 12. Principles
+
+- **Density over decoration** — pack charts and lists; show many rows; keep framing minimal.
+- **Green is precious** — reserve the signature green (#00CD3C / #00D344) for active states and primary actions.
+- **Sharp corners** — square 0px radius across components; no soft, rounded consumer look.
+- **Color-driven hierarchy** — #1A1A1A / #666666 / #999999 do the structural work; type stays small.
+- **White ground always** — #FFFFFF is the canvas that makes the green and the dense lists legible.
+- **Content first** — the music and its metadata are the interface; chrome stays out of the way.
+
+## 13. Personas
+
+- **The daily listener** — opens Melon to scan charts and queue tracks; rewarded by density, fast browsing, and clear green active states that show where they are.
+- **The chart watcher** — comes for the rankings and lists; the small 12px rows and #666666 metadata let many entries sit on screen at once.
+- **The quick searcher** — taps the search input (40px, #999999 placeholder) to jump straight to a song; the utilitarian, square UI gets out of the way.
+
+## 14. States
+
+- **Default text:** #666666 body at 12px on white #FFFFFF.
+- **Primary text / headings:** near-black #1A1A1A.
+- **Placeholder / quiet label:** #999999 (search input text and placeholder).
+- **Active / selected (nav, tabs, player):** signature green #00CD3C.
+- **Primary action (login button):** background #00D344, white #FFFFFF text, 42px height.
+- **Accent:** red #DF2607, used sparingly.
+
+Hover, pressed, focus, and disabled state values were not captured in the verified data and are intentionally left undocumented rather than invented.
+
+## 15. Motion & Easing
+
+No motion, transition, or easing values were captured in the verified inspection of melon.com, so none are specified here. Qualitatively, the design's character is static and efficiency-driven — a dense, square, grid-like streaming surface — which implies restrained, functional motion (if any) rather than expressive animation. Any motion added in this style should stay subtle and quick, in keeping with the utilitarian, content-first feel, but no specific durations or curves are claimed because none were measured.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.melon.com (official Melon service homepage, live CSS source), https://tech.kakaoent.com (Kakao Entertainment tech, Melon's operator), https://www.kakaocorp.com/page/service/service/Melon (Kakao Corp official Melon service page)
+**Tier 2 sources:** getdesign.md/melon — NOT LISTED. refero — not listed. Note: live login button renders #00D344, a near-twin of the CSS signature green #00CD3C.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)

package/web/references/nhncloud/DESIGN.md

@@ -0,0 +1,174 @@
+---
+id: "nhncloud"
+name: "NHN Cloud"
+country: KR
+category: backend-devops
+homepage: "https://www.nhncloud.com"
+primary_color: "#125DE6"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=nhncloud.com&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+ds:
+  name: TOAST UI
+  url: "https://ui.toast.com"
+  type: system
+  description: NHN's official open-source component library (TUI Grid/Editor/Calendar/Chart/Image-Editor), MIT-licensed under the nhn GitHub org and documented at ui.toast.com.
+---
+# Design System Inspiration of NHN Cloud
+
+## 1. Visual Theme & Atmosphere
+
+NHN Cloud presents two distinct but related faces, and the brand's character lives in the gap between them. The corporate marketing site is confident and saturated — a vivid #125DE6 blue carried on large, fully-rounded pill CTAs that feel approachable and modern, anchored by clean near-black text on Pretendard Variable. The TOAST UI open-source widget library is the engineering counterpart: tighter, more functional, and a touch cooler in hue, leaning on a lighter accent blue (#00a9ff) and small 4px corner radii built for dense data interfaces like grids and editors. Where the corporate site sells trust and scale, the component library optimizes for legibility and information density. Together they read as one company speaking two registers — the marketing voice for executives evaluating an enterprise cloud, and the practitioner voice for developers embedding NHN's tools. The consistent thread is a blue-forward, clean, no-nonsense Korean enterprise aesthetic that never feels playful for its own sake.
+
+## 2. Color Palette & Roles
+The brand operates across two surfaces, each with its own blue.
+
+**Corporate site (live nhncloud.com)**
+- Brand primary blue: #125DE6 (rgb 18,93,230) — every primary CTA
+- Dark CTA: #111111 — high-contrast alternate action
+- Newsletter input border: #51565F
+- Muted text: #727781
+- Body text: near-black
+
+**TOAST UI (source-verified CSS)**
+- Accent blue: #00a9ff — primary interactive accent
+- Hover / active blue: #0088d9
+- Light tint: #e5f6ff
+- Secondary blue: #009bf2
+- Error red: #fa2828
+- Neutral background: #f7f9fc
+
+Roles: on the corporate surface, #125DE6 is reserved for the single most important action on a section, with #111111 serving as a dark high-contrast alternate. On TOAST UI, #00a9ff drives interactive accents with #0088d9 as the hover/active darkening and #e5f6ff as a soft selection/tint fill; #fa2828 is the dedicated error signal and #f7f9fc the calm neutral canvas behind widgets.
+
+## 3. Typography Rules
+The corporate site uses Pretendard Variable throughout. Body copy is set at 16px; primary CTAs render at 15px / 400; a secondary heading-style CTA steps up to 17px / 500 for slightly more presence. The TOAST UI library defaults to a compact 13px body, appropriate for the data-dense grids and editors it powers. The hierarchy is restrained: weight moves between 400 and 500 rather than relying on heavy display weights, and size differences are modest, keeping the overall feel even and professional. Use Pretendard Variable for any corporate-aligned interface and the smaller 13px scale when matching the embedded TOAST UI surface.
+
+## 4. Component Stylings
+
+### Primary CTA (Corporate)
+
+**Vivid-blue pill**
+- Background: #125DE6
+- Text: #FFFFFF
+- Border: none
+- Radius: 30px
+- Padding: 8px 19px
+- Height: 40px
+- Font: 15px / 400
+- Use: the primary call-to-action on corporate marketing sections
+
+### Dark CTA (Corporate)
+
+**Near-black pill**
+- Background: #111111
+- Text: #FFFFFF
+- Border: none
+- Radius: 30px
+- Height: 40px
+- Font: 15px / 400
+- Use: high-contrast alternate primary action
+
+### Outline CTA on Dark (Corporate)
+
+**Ghost pill**
+- Background: transparent
+- Text: #FFFFFF
+- Border: 1px solid #FFFFFF
+- Radius: 30px
+- Height: 50px
+- Font: 17px / 500
+- Use: larger secondary action placed over a dark section
+
+### Newsletter Input (Corporate)
+
+**Transparent field**
+- Background: transparent
+- Text: #727781
+- Border: 1px solid #51565F
+- Radius: 6px
+- Height: 42px
+- Font: 14px / 400
+- Use: email capture field in the newsletter/footer area
+
+### TOAST UI Widget Element (Source)
+
+**Compact surface**
+- Background: #f7f9fc
+- Text: near-black
+- Border: derived from accent #00a9ff on interactive states
+- Radius: 4px
+- Font: 13px / 400
+- Use: base styling for TOAST UI grid/editor widgets
+
+**Interactive (accent)**
+- Background: #e5f6ff
+- Border: #00a9ff
+- Use: selected / accented state within the widget
+
+**Hover / active**
+- Border: #0088d9
+- Use: hover and active darkening of the accent
+
+## 5. Layout Principles
+The corporate site favors generous, breathing layouts where a single saturated CTA anchors each section against ample whitespace, letting the vivid blue do the work of directing attention. Fully-rounded 30px pills are placed as clear focal points rather than crowded clusters. The TOAST UI surface inverts this priority: it is built for density, with the calm #f7f9fc neutral background framing tight, legible grids and editors at the 13px scale and small 4px radii that keep many adjacent cells visually quiet. Match the corporate layout when designing marketing or top-of-funnel pages, and the TOAST UI layout when designing functional, data-heavy application screens.
+
+## 6. Depth & Elevation
+NHN Cloud reads as a fundamentally flat, modern system on both surfaces — depth is expressed through color contrast and crisp 1px borders rather than heavy shadow. On the corporate site, separation comes from the saturated #125DE6 (or #111111) fill standing out against light backgrounds, and from thin 1px outlines such as the #51565F input border and the #FFFFFF ghost-button stroke. On TOAST UI, the #f7f9fc neutral canvas and small 4px-radius elements establish quiet layering, with the #00a9ff accent and #e5f6ff tint lifting interactive elements forward through hue rather than elevation. Keep elevation subtle: prefer contrast and hairline borders over drop shadows.
+
+## 7. Do's and Don'ts
+
+### Do
+- Reserve #125DE6 for the single primary action on a corporate section.
+- Use Pretendard Variable for corporate-aligned interfaces.
+- Use fully-rounded 30px pills for corporate CTAs and the compact 4px radius for TOAST UI elements.
+- Keep the two surfaces visually distinct: vivid #125DE6 for corporate, lighter #00a9ff for TOAST UI.
+
+### Don't
+- Blur the two blues — #125DE6 (corporate) and #00a9ff (TOAST UI) are not interchangeable.
+- Introduce heavy drop shadows; rely on color contrast and 1px borders.
+- Crowd multiple saturated pills together; let one CTA lead.
+- Use the dense 13px scale on marketing pages or the large pills inside data grids.
+
+## 8. Responsive Behavior
+Component sizing in the blob points to comfortable, finger-friendly targets: corporate CTAs stand at 40px high (50px for the larger ghost button) and the newsletter input at 42px, with rounded 30px pills that stay legible at small widths. The Pretendard Variable type scale — 16px body, 15px and 17px CTAs — remains readable across breakpoints without restyling. The TOAST UI surface, designed for embedding, holds its compact 13px scale and 4px radii so that grids and editors retain density on whatever container they sit in. Preserve these heights and radii across viewports; scale layout and spacing rather than re-theming the components.
+
+## 9. Agent Prompt Guide
+When generating UI in the NHN Cloud style, first decide which surface you are matching. For corporate/marketing work, use Pretendard Variable, set body at 16px, and render the primary CTA as a fully-rounded 30px pill with background #125DE6, white text, 15px / 400, 40px tall, padding 8px 19px; offer #111111 as a dark alternate and a transparent ghost button with a 1px #FFFFFF border (50px, 17px / 500) over dark sections; style inputs as transparent fields with a 1px #51565F border, 6px radius, 42px height, #727781 text at 14px / 400. For TOAST UI / application work, use the 13px scale, 4px radii, an #f7f9fc neutral background, the #00a9ff accent with #0088d9 hover and #e5f6ff tint, #009bf2 as a secondary blue, and #fa2828 for errors. Never mix the two blues, and never invent shadows the system doesn't use.
+
+## 10. Voice & Tone
+NHN Cloud speaks in two registers tied to its two surfaces. The corporate voice is confident, trust-building, and enterprise-minded — selling scale, reliability, and partnership to decision-makers, with bold blue CTAs that invite a clear next step. The TOAST UI voice is the practitioner's: precise, functional, and documentation-driven, addressing developers who want their widgets to work predictably. Keep corporate copy assured and outcome-focused; keep TOAST UI copy exact and utilitarian.
+
+## 11. Brand Narrative
+NHN Cloud is the enterprise cloud arm of NHN Corp, headquartered in Pangyo, Korea. Its identity is built on two complementary pillars: a polished corporate presence that markets cloud infrastructure to enterprises, and TOAST UI — NHN's open-source component library (TUI Grid, Editor, Calendar, Chart, Image-Editor) released MIT-licensed under the nhn GitHub organization and documented at ui.toast.com. This pairing mirrors how strong product companies maintain a marketing surface and a developer surface side by side: the corporate site earns trust at the buying level, while TOAST UI earns credibility at the building level. The brand's story is one of a Korean enterprise that both sells the cloud and contributes the tools developers use on top of it.
+
+## 12. Principles
+- Two surfaces, one brand: corporate marketing and TOAST UI are parallel systems, each internally consistent.
+- Blue-forward clarity: a single saturated blue leads attention on each surface.
+- Flat and clean: contrast and hairline borders over shadow.
+- Density where it counts: marketing breathes; application widgets pack tight at 13px / 4px.
+- Restraint in type: weights stay between 400 and 500.
+
+## 13. Personas
+- Enterprise buyer: evaluating NHN Cloud for infrastructure; meets the confident corporate site, vivid #125DE6 CTAs, and Pretendard Variable copy.
+- Developer / integrator: embedding TOAST UI widgets; works in the compact 13px, 4px-radius surface with the #00a9ff accent system.
+- Korean enterprise team: expecting a clean, professional, blue-forward Korean cloud aesthetic across both touchpoints.
+
+## 14. States
+- Default (corporate CTA): #125DE6 background, white text, 30px pill.
+- Default (TOAST UI accent): #00a9ff accent on #f7f9fc neutral background.
+- Hover / active (TOAST UI): accent darkens to #0088d9.
+- Selected / tinted (TOAST UI): #e5f6ff light tint fill with #00a9ff edge.
+- Error (TOAST UI): #fa2828 red.
+- Input resting (corporate): transparent field, 1px #51565F border, #727781 text.
+
+## 15. Motion & Easing
+No motion or easing values were captured in live inspection, so specifics are not asserted here. In keeping with the system's flat, clean, contrast-driven character, treat motion as restrained and functional: brief, confident transitions on the corporate CTAs and the lightest possible state feedback on TOAST UI's dense widgets, where the #00a9ff → #0088d9 darkening communicates interaction without distracting from data. Favor subtle, purposeful movement over decorative animation.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.nhncloud.com (live corporate DOM — #125DE6 primary CTAs, #111111 dark CTA, #51565F input border, #727781 muted text, Pretendard Variable 16/15/17px), https://ui.toast.com (TOAST UI system entry point — open-source widget library), https://github.com/nhn (nhn org source CSS — tui.grid grid.css #00a9ff/#0088d9/#e5f6ff 13px, tui.editor editor.css #00a9ff/#009bf2/#fa2828/#f7f9fc radius 4px)
+**Tier 2 sources:** getdesign.md/nhncloud — NOT LISTED. refero — not listed. Note: corporate brand blue #125DE6 differs from TOAST UI accent #00a9ff (two surfaces).
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)

package/web/references/oliveyoung/DESIGN.md

@@ -208,6 +208,25 @@ Olive Young presents as a **dense, scan-first H&B catalog**: a near-monochrome g
 - Border: 0 (separated by `#EBEBEB` grid gap)
 - Use: Search result / category list / best list
 
+
+## 16. Do's and Don'ts
+
+### Do
+- Keep all chrome — nav, header, footer, buttons, search input, headings — on the `#131518`–`#888` grayscale neutrals and reserve every hue for status payload
+- Confine the five flag hues (`#F65C60` sale, `#F374B7` 오늘드림, `#9BCE26` coupon, `#6FCFF7` gift, `#F05A5E` best) to inside the thumbnail rectangle as 9px-radius status pills
+- Map each flag color 1:1 to a single service fact (sale / same-day / coupon / gift / best) rather than to a marketing mood
+- Encode interactive state with ink-darkening plus shape change — e.g. flip active pagination from transparent/`#888` radius-0 to `#2F3030`/`#FFF` 50% circle — not with hue
+- Keep the Korean fallback chain ending at `dotum / 돋움` to preserve rendering for older Windows/macOS Korean readers
+- Write CTAs as factual `하기`-verb labels like "장바구니 담기" and "찜하기" in casual-polite declarative tone, not imperative urgency copy
+
+### Don't
+- Put any flag color or hue on a primary CTA or chrome surface — the filled CTA stays `#000000` background with `#FFFFFF` text
+- Introduce a sixth status color for a "new" or extra badge — reuse one of the existing five flag roles or skip the chrome
+- Add hover lift, shadow gain, or drop shadows to tiles, chips, or pills — depth in this system stays line-only and state is static-encoded
+- Spread Olive Green or the coupon lime `#9BCE26` across chrome or large backgrounds — corporate olive is absent from the storefront and the lime lives only in the coupon flag
+- Prune the Korean fallback chain down to system-ui only, dropping the deliberate `돋움` legacy-OS support floor
+- Reproduce verbatim Olive Young marketing taglines or write hard-sell copy like "지금 안 사면 손해예요" — copy works as neutral labels and offers
+
 ---
 
 **Verified:** 2026-05-15

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)