oh-my-design-cli 1.6.0 → 1.6.1

package/web/references/hahow/DESIGN.md

@@ -0,0 +1,158 @@
+---
+id: hahow
+name: "Hahow"
+country: TW
+category: education
+homepage: "https://hahow.in"
+primary_color: "#00CCB4"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=hahow.in&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+ds:
+  name: "hahow-design"
+  url: "https://github.com/hahow/hahow-design"
+  type: system
+  description: "Hahow's open-source design-system theme — Primary/Secondary token scales (Primary 500 #00ccb4)."
+---
+
+# Design System Inspiration of Hahow
+
+## 1. Visual Theme & Atmosphere
+
+Hahow (好學校) is Taiwan's leading EdTech course marketplace, and its interface carries the warmth of a place that wants you to keep learning rather than the polish of a place that wants to close a sale. The atmosphere is friendly, approachable, and unmistakably human: a soft gray-blue page canvas of #F5F7F9 lets bright content breathe, while a vivid brand teal of #00CCB4 — drawn directly from Hahow's own open-source design tokens — signals interactivity and energy without ever shouting. Cards and buttons settle on a gentle 8px radius that rounds every hard edge into something inviting, and text sits in calm near-black #262626 for comfortable, sustained reading. Warm promotional accents in orange #FA8C16 and coral #F65F55 punctuate the surface where excitement is earned — a sale, a featured course, a moment worth noticing. Set throughout in PingFang TC, the typography feels native and legible to a Traditional-Chinese audience. The overall effect is encouraging and personable, the opposite of corporate sterility — a learning surface that feels like a good teacher: clear, warm, and on your side.
+
+## 2. Color Palette & Roles
+
+Hahow's color system is anchored by a teal Primary scale published in its open-source `hahow-design` theme, layered over a quiet neutral canvas and lifted by warm promotional accents.
+
+- **Brand / Primary 500** — #00CCB4. The signature teal; interactive emphasis, brand identity, primary action text.
+- **Primary 100** — #A3FFE8. Lightest teal tint for subtle fills and soft backgrounds.
+- **Primary 400** — #23D9BD. A slightly deeper teal step for hover and gradient transitions.
+- **Primary 800** — #006166. Deep teal for high-contrast text or pressed states on teal surfaces.
+- **Primary 900** — #00444D. Darkest teal anchor for the scale.
+- **Secondary 500** — #FFB940. Warm amber accent; complementary highlight to the teal.
+- **Page background** — #F5F7F9. Soft gray-blue canvas behind all content.
+- **Body text** — #262626 (near-black), with secondary text at rgba(0,0,0,0.65).
+- **Promotional orange** — #FA8C16. Energetic accent for sales and featured callouts.
+- **Coral** — #F65F55. Warm secondary promotional accent.
+- **Chip fill** — rgba(0,0,0,0.04). Faint neutral wash for tags and metadata chips.
+
+## 3. Typography Rules
+
+- **Typeface:** PingFang TC across the interface — native, legible Traditional-Chinese rendering.
+- **Body:** 16px, primary text color #262626.
+- **Heading:** 24px at weight 600.
+- **Secondary text:** rgba(0,0,0,0.65) for de-emphasized labels and metadata.
+- **Hierarchy principle:** lean on size and the near-black body color for contrast; reserve teal #00CCB4 for interactive text rather than headings, keeping reading surfaces calm.
+
+## 4. Component Stylings
+
+### Button
+
+**Teal Outline (primary action)**
+- Background: transparent
+- Text: #00CCB4
+- Border: 2px solid #DCF9F3
+- Radius: 8px
+- Padding: not separately verified
+- Height: 42px
+- Font: 16px / 600
+- Use: primary call-to-action on the live hahow.in surface
+
+**White Card Button**
+- Background: #FFFFFF
+- Text: #595959
+- Border: not separately verified
+- Radius: 8px
+- Padding: not separately verified
+- Height: not separately verified
+- Font: not separately verified
+- Use: neutral card-level action sitting on the gray-blue canvas
+
+### Tag Chip
+
+**Default**
+- Background: rgba(0,0,0,0.04)
+- Text: rgba(0,0,0,0.65)
+- Border: none
+- Radius: 20px
+- Padding: not separately verified
+- Height: 33px
+- Font: 14px / 400
+- Use: metadata, category, and filter tags
+
+## 5. Layout Principles
+
+- Content sits on a soft gray-blue #F5F7F9 canvas, letting white cards and bright accents read as the foreground.
+- Rounded geometry is consistent: 8px on cards and buttons, 20px (fully rounded) on tag chips.
+- Generous, calm spacing keeps the marketplace browsable rather than dense — the surface invites scanning across many courses.
+- Teal is used sparingly as an interactive signal, never as a flood, preserving the quiet neutral base.
+
+## 6. Depth & Elevation
+
+Hahow's elevation language is restrained and soft rather than dramatic. White cards (#FFFFFF) lift off the gray-blue #F5F7F9 canvas largely through tonal contrast and rounded 8px corners rather than heavy shadow. The teal outline button uses a 2px solid #DCF9F3 border — a pale teal ring — to define its edge instead of a drop shadow, reinforcing a flat, friendly aesthetic. Depth here is implied by layering light surfaces over the muted background, keeping the interface airy and approachable. (Exact shadow values were not captured in the blob and are intentionally not specified.)
+
+## 7. Do's and Don'ts
+
+### Do
+- Anchor interactive emphasis in the brand teal #00CCB4 from the official tokens.
+- Keep body text in near-black #262626 and secondary text in rgba(0,0,0,0.65) for calm, readable hierarchy.
+- Use the soft #F5F7F9 canvas to let white cards and bright accents stand out.
+- Reserve warm orange #FA8C16 and coral #F65F55 for genuinely promotional moments.
+
+### Don't
+- Flood surfaces with teal — it is a signal, not a background.
+- Sharpen the corners; the 8px (and 20px chip) radii are core to the friendly feel.
+- Introduce a heavy, corporate shadow language that contradicts the flat, warm aesthetic.
+- Substitute a non-native typeface for PingFang TC in Traditional-Chinese contexts.
+
+## 8. Responsive Behavior
+
+The live hahow.in marketplace is a course-browsing surface built to scale from desktop grids to mobile stacks. Cards keep their 8px radius and white #FFFFFF fill across breakpoints, and tag chips stay fully rounded at 20px so metadata remains legible when reflowed. Touch targets hold comfortable heights — the teal outline button at 42px and tag chips at 33px — that translate naturally to mobile tapping. (Specific breakpoint widths were not captured in the blob and are not specified here; the verified pattern is consistent rounding, consistent color roles, and generous tap-friendly sizing across viewports.)
+
+## 9. Agent Prompt Guide
+
+When generating UI in Hahow's style, instruct the agent: "Use a soft gray-blue page background (#F5F7F9) with white (#FFFFFF) content cards at 8px radius. Make the primary action a teal outline button — transparent background, #00CCB4 text, 2px solid #DCF9F3 border, 8px radius, 42px height, 16px/600 PingFang TC. Render tags as fully-rounded chips (20px radius, 33px height) with a rgba(0,0,0,0.04) fill and rgba(0,0,0,0.65) text at 14px/400. Keep body text near-black (#262626) at 16px and headings at 24px/600. Use teal #00CCB4 only for interactive emphasis. Reserve orange #FA8C16 and coral #F65F55 strictly for promotional callouts. Aim for a warm, encouraging, human EdTech tone — friendly, never corporate."
+
+## 10. Voice & Tone
+
+Hahow's voice is encouraging and human — the tone of a supportive teacher and a welcoming community of learners (好學校 literally means "good school"). It is warm and approachable rather than corporate or transactional, celebrating curiosity and the act of learning itself. Microcopy should feel like gentle encouragement: inviting people to start, to keep going, to share what they know. Even promotional moments, signaled by the warm orange and coral accents, carry friendliness over hard-sell urgency.
+
+## 11. Brand Narrative
+
+Hahow built Taiwan's leading EdTech course marketplace on a simple, human premise: everyone has something to learn and something to teach. As 好學校 — "the good school" — it positions itself as an open, encouraging place where knowledge moves between people rather than being handed down from an institution. The visual identity reinforces that story: a bright, friendly teal pulled from its own open-source design system, a soft and unintimidating canvas, rounded approachable shapes, and native Traditional-Chinese typography. Every choice tells the same narrative — learning here is warm, accessible, and on your side.
+
+## 12. Principles
+
+- **Warmth over polish** — feel like a good teacher, not a sales funnel.
+- **Calm canvas, bright signals** — let the soft #F5F7F9 base carry quiet content while teal and warm accents earn attention.
+- **Rounded and approachable** — consistent 8px / 20px radii keep every surface inviting.
+- **Native and legible** — PingFang TC and near-black #262626 text serve a Traditional-Chinese audience comfortably.
+- **Restraint with the brand color** — teal #00CCB4 marks interaction; it is never wallpaper.
+
+## 13. Personas
+
+- **The Curious Learner** — browsing the marketplace for a new skill; needs a calm, scannable surface where featured courses (orange/coral accents) stand out and primary actions (teal outline button) are obvious and inviting.
+- **The Knowledge-Sharing Instructor** — creating and publishing courses; needs the platform to feel encouraging and credible, with friendly rounded components and warm tone that lower the barrier to teaching.
+- **The Returning Member** — coming back to continue learning; relies on consistent color roles and tap-friendly components across devices to pick up quickly.
+
+## 14. States
+
+- **Default action:** teal outline button — transparent background, #00CCB4 text, 2px solid #DCF9F3 border, 8px radius, 42px height.
+- **Neutral / card action:** white card button — #FFFFFF background, #595959 text, 8px radius.
+- **Metadata / tag:** chip — rgba(0,0,0,0.04) fill, rgba(0,0,0,0.65) text, 20px radius, 33px height, 14px/400.
+- **Promotional emphasis:** warm orange #FA8C16 and coral #F65F55 accents for sales and featured callouts.
+- (Hover, pressed, focus, and disabled state values were not captured in the blob and are intentionally not specified; the teal token scale — Primary 400 #23D9BD, Primary 800 #006166 — provides the natural darker steps for any hover/pressed treatment.)
+
+## 15. Motion & Easing
+
+Hahow's motion language was not captured with specific values in the blob, so no durations or easing curves are specified here. In keeping with the brand's warm, approachable, flat aesthetic, transitions should read as gentle and encouraging rather than abrupt — soft enough to match the rounded geometry and calm canvas, with the teal token scale (Primary 400 #23D9BD into Primary 500 #00CCB4) available for smooth interactive color transitions.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://hahow.in (live homepage live-DOM inspect), https://business.hahow.in (brand-owned regional business surface), https://github.com/hahow (brand-owned org hosting the open-source design tokens)
+**Tier 2 sources:** getdesign.md/hahow — NOT LISTED. refero — not listed.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)

package/web/references/hyundaicard/DESIGN.md

@@ -0,0 +1,172 @@
+---
+id: "hyundaicard"
+name: "Hyundai Card"
+country: KR
+category: fintech
+homepage: "https://www.hyundaicard.com"
+primary_color: "#000000"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=hyundaicard.com&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+---
+# Design System Inspiration of Hyundai Card
+
+## 1. Visual Theme & Atmosphere
+
+Hyundai Card is Korea's most design-celebrated credit-card brand, and its visual identity is an exercise in disciplined restraint: monochrome premium minimalism built almost entirely from ink black (#000000) on a clean white (#FFFFFF) ground. Color is not used as decoration here — it is withheld on purpose, treated as a luxury that the brand chooses not to spend, so that the absence of color becomes the statement. The signature element is typography itself: the proprietary "Youandi" (유앤아이) typeface carries the brand's voice, making letterforms the primary expressive medium rather than imagery or palette. The atmosphere is gallery-like and editorial — generous whitespace, high contrast, and a quiet confidence that reads as understated wealth rather than loud premium cues. Surfaces are flat and unadorned, headers are transparent, and every element earns its place. The result feels less like a banking product and more like a cultural design platform, which is exactly how the DIVE surface presents the brand. This is typography-as-identity, where the discipline of black, white, and a custom face does all the work.
+
+## 2. Color Palette & Roles
+The palette is deliberately monochrome. The ground is white (#FFFFFF) and the ink is black (#000000), and the brand color is essentially black itself — color is the thing that is held back, which is the entire point of the identity. The only chromatic accents appear as functional category tags on the DIVE content surface, never as primary brand expression.
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Ground | #FFFFFF | Page and surface background; the dominant field |
+| Ink | #000000 | Body text, headings, primary brand color; the monochrome anchor |
+| Accent — red (functional) | #F36464 | Content category tag on DIVE only |
+| Accent — green (functional) | #15A91F | Content category tag on DIVE only |
+
+The accents are strictly utilitarian. They classify content; they do not brand. Treat #F36464 and #15A91F as labeling tools confined to tags, and keep the rest of the experience in pure black-and-white.
+
+## 3. Typography Rules
+Typography is the brand. The display layer uses the proprietary "Youandi" typeface (confirmed in the DOM as YouandiNewKr, with HEB / TR / HB weights) for headings and branding — it is the signature element and should be reserved for moments that carry the brand's voice. Body text is set in Noto Sans KR for legibility across Korean and Latin content. The captured body size is 13px, and the heading size is 26px at weight 600, giving a clear two-step hierarchy: a confident editorial heading over a quiet, readable body.
+
+| Token | Value |
+| --- | --- |
+| Display / branding | Youandi (YouandiNewKr — HEB / TR / HB weights), proprietary |
+| Body | Noto Sans KR |
+| Body size | 13px |
+| Heading | 26px / 600 |
+
+Rule of thumb: let Youandi own the brand and headline moments; let Noto Sans KR carry running text at 13px; reserve the 26px/600 step for section-level headings.
+
+## 4. Component Stylings
+
+### Page Surface (DIVE)
+
+**Default**
+- Background: #FFFFFF
+- Text: #000000
+- Border: none
+- Padding: generous whitespace (editorial)
+- Height: full viewport
+- Font: 13px / 400 (Noto Sans KR)
+- Use: the base content canvas — white ground, black ink, maximal restraint
+
+### Heading
+
+**Section heading**
+- Background: transparent
+- Text: #000000
+- Border: none
+- Padding: editorial spacing above and below
+- Height: auto
+- Font: 26px / 600
+- Use: section-level titles; pair with Youandi for true brand moments
+
+### Button
+
+**Primary (minimal pill)**
+- Background: #FFFFFF
+- Text: #000000
+- Border: minimal outline (monochrome)
+- Radius: 24px
+- Padding: balanced for a 48px pill
+- Height: 48px
+- Font: body scale (Noto Sans KR)
+- Use: primary action; the rounded pill is the one soft gesture in an otherwise hard, flat system
+
+### Header
+
+**Transparent header**
+- Background: transparent
+- Text: #000000
+- Border: none
+- Padding: edge-aligned to the content grid
+- Height: auto
+- Font: Noto Sans KR
+- Use: lets the white ground read continuously from header into content; no chrome, no shadow
+
+### Content Tag
+
+**Category tag (red)**
+- Background: tag fill
+- Text: #F36464
+- Border: none
+- Radius: pill
+- Padding: compact
+- Height: compact label
+- Font: small body scale
+- Use: functional content classification on DIVE only — not brand color
+
+**Category tag (green)**
+- Background: tag fill
+- Text: #15A91F
+- Border: none
+- Radius: pill
+- Padding: compact
+- Height: compact label
+- Font: small body scale
+- Use: functional content classification on DIVE only — not brand color
+
+## 5. Layout Principles
+The layout is editorial and gallery-like, built on generous whitespace and a continuous white ground. The transparent header dissolves into the content so the page reads as one uninterrupted surface, and the absence of borders, fills, and chrome keeps attention on type and spacing. Black ink on white field creates the contrast that structures the page; there is no competing color to organize around. Hierarchy is established through the typographic step — 26px/600 headings over 13px body — and through the rhythm of negative space rather than through dividers or boxes. The pill button at 24px radius is the single soft moment in an otherwise crisp, rectilinear field. Treat layout as composition: align to a clean grid, let whitespace breathe, and resist the urge to add color or ornament.
+
+## 6. Depth & Elevation
+This is a flat system. There are no documented shadows, gradients, or elevation layers — the header is transparent and surfaces sit at a single plane on the white ground. Depth, to the extent it exists, comes from contrast (black ink against white) and from spacing, not from drop shadows or stacking. Keep elements coplanar; if separation is needed, use whitespace and the typographic hierarchy rather than introducing elevation. The only curvature in the system is the 24px button radius, which softens the action without implying lift. Restraint applies to depth exactly as it applies to color.
+
+## 7. Do's and Don'ts
+
+### Do
+- Keep the palette monochrome: #FFFFFF ground, #000000 ink.
+- Treat black (#000000) as the brand color — withholding color is the point.
+- Reserve Youandi (proprietary) for headings and branding moments.
+- Set body in Noto Sans KR at 13px; use 26px/600 for headings.
+- Use the 48px pill button with 24px radius as the soft action gesture.
+- Keep the header transparent and surfaces flat.
+
+### Don't
+- Introduce color as a brand element — the accents #F36464 and #15A91F are for functional content tags only.
+- Add shadows, gradients, or elevation; the system is flat.
+- Substitute a generic display face where Youandi carries the brand voice.
+- Crowd the layout — whitespace is structural.
+- Box content in borders or fills; let contrast and spacing do the work.
+
+## 8. Responsive Behavior
+The captured surface (DIVE) is a content/culture platform whose responsive logic follows its editorial, whitespace-driven layout: the continuous white ground and transparent header scale naturally from desktop to mobile, with the typographic hierarchy (26px/600 heading over 13px body) carrying structure at every width. The 48px pill button provides a comfortable touch target on mobile. Beyond these observed values, responsive specifics were not captured (the main banking site is security-plugin-walled), so adapt qualitatively: preserve generous whitespace, keep the monochrome contrast, maintain the flat single-plane surface, and let the type hierarchy — not added chrome — communicate structure as the viewport narrows.
+
+## 9. Agent Prompt Guide
+When generating UI in the Hyundai Card style, instruct the agent: "Design a monochrome, editorial interface — white (#FFFFFF) ground, black (#000000) ink, and treat black as the brand color. Withhold color entirely; the absence of color is the statement. Use a proprietary-feeling display typeface (Youandi, weights HEB/TR/HB) for headings and branding, and Noto Sans KR for body at 13px, with 26px/600 section headings. Keep everything flat — no shadows, no gradients, no elevation, transparent header. The only soft gesture is a 48px pill button with 24px radius, white fill, black text. Lean on generous whitespace and high black-on-white contrast for structure. If you must classify content, you may use red #F36464 or green #15A91F as small functional tag colors only — never as brand color." Emphasize restraint above all: when in doubt, remove rather than add.
+
+## 10. Voice & Tone
+The voice is quietly confident and editorial — the tone of a design gallery rather than a bank. It speaks with the assurance of a brand that has nothing to prove, letting restraint imply premium. There is no shouting, no urgency, no decorative flourish; the message lands through clarity and discipline. Like the monochrome palette, the language withholds: it says only what is needed, and it trusts the audience to read the sophistication in the negative space. The tone is cultured, deliberate, and self-assured.
+
+## 11. Brand Narrative
+Hyundai Card built its reputation as Korea's most design-celebrated credit-card brand by treating design as the product, not the packaging. The brand's central idea is that luxury is restraint: a monochrome world of black and white, anchored by a typeface it commissioned for itself — Youandi (유앤아이) — so that even the letters belong to the brand alone. Color is the resource it refuses to spend, turning absence into a signature. The DIVE platform extends this story from finance into culture and design, presenting the same monochrome, Youandi-led identity as a creative point of view rather than a transactional one. The narrative is consistent at every touchpoint: typography-as-identity, discipline-as-luxury, and the quiet confidence of a brand that lets what it leaves out speak as loudly as what it puts in.
+
+## 12. Principles
+- **Withhold color.** Black (#000000) on white (#FFFFFF) is the identity; color is deliberately held back.
+- **Typography is the brand.** Youandi (proprietary) carries the voice; let letterforms lead.
+- **Restraint as luxury.** Remove before you add; whitespace and contrast do the structural work.
+- **Flat and honest.** No shadows, no gradients, no chrome — a single clean plane.
+- **One soft gesture.** The 24px-radius, 48px pill button is the system's only concession to softness.
+- **Function over decoration.** The only accents (#F36464, #15A91F) exist to classify, never to brand.
+
+## 13. Personas
+- **The design-literate cardholder** — values craft and discretion over flash; reads the monochrome restraint as a marker of taste and expects the interface to feel like a curated space.
+- **The culture seeker on DIVE** — comes for design, art, and editorial content rather than banking, and responds to the gallery-like white-ground layout and Youandi typography.
+- **The premium minimalist** — wants the confidence of black-and-white sophistication, prefers whitespace to ornament, and trusts a brand that says less.
+
+## 14. States
+Observed component states are minimal by design — the system favors flat, high-contrast defaults over elaborate interactive feedback. From the captured values: the default surface is #FFFFFF ground with #000000 text; the primary button defaults to white fill, black text, 24px radius, 48px height; the header defaults to transparent. Hover, pressed, focus, disabled, and error states were not captured in the blob, so do not invent them — derive them qualitatively in keeping with the monochrome, flat philosophy (e.g., subtle black/white contrast shifts rather than colored state changes), and keep any feedback as restrained as the rest of the system. Functional content tags carry the red (#F36464) or green (#15A91F) accent to signal category, the closest thing to a "stateful" color in the system.
+
+## 15. Motion & Easing
+No motion or easing values were captured in the blob. In keeping with the brand's restraint, motion should be treated qualitatively: quiet, minimal, and unobtrusive — transitions that respect the gallery-like calm rather than drawing attention to themselves. The flat, monochrome system implies subtle, understated movement (gentle fades and clean transitions) over expressive or bouncy animation. Do not invent specific durations or curves; let any motion echo the same discipline as the visual identity — present only when it serves clarity, never as decoration.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.hyundaicard.com (homepage / brand context — main site security-plugin-walled), https://dive.hyundaicard.com (live DOM inspect — monochrome surface, Youandi display fonts, Noto Sans KR body, button + tag values), https://newsroom.hyundaicard.com (brand-owned regional source)
+**Tier 2 sources:** getdesign.md/hyundaicard — NOT LISTED. refero — not listed. Note: hyundaicard.com main site is security-plugin-walled; DIVE (dive.hyundaicard.com) is the accessible brand surface and carries the same Youandi/monochrome identity.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)

package/web/references/inflearn/DESIGN.md

@@ -309,6 +309,25 @@ Mantine's default transition timing function is `--mantine-transition-timing-fun
 - **Keyboard nav**: Mantine `focusRing="auto"` — visible 2px green ring on Tab navigation.
 - **Screen reader**: GNB icon-only buttons carry `aria-label` (`search-menu`, `service-menu` observed). Course tiles use semantic `<article>`.
 
+
+## 16. Do's and Don'ts
+
+### Do
+- Use the single mint-green #00C471 for all primary action — search submit, primary CTA, active pagination, free/starter tag fills — and swap to #00A760 only for hover/pressed states
+- Set type in the Pretendard-first stack with a binary-ish weight scale: 700 for headings (H1 34px, H2 20px), 600 for nav and labelled buttons, 400 for body and prices — there is no 500
+- Apply the two-family radius vocabulary: 8px for cards, inputs, and pagination; 32px for nav pills; and full-pill 999px only for the green search submit and tag chips
+- Render the GNB as a sticky 65px white bar with no shadow and no border, letting the green circular search button be the only visual accent
+- Keep course tiles borderless and transparent (~230x310px, 8px thumbnail radius) so the thumbnail does the visual work, with title in #212529, instructor in #868E96, and price in #212529 weight 400
+- Inherit the Mantine semantic palette for non-brand needs — red #FA5252 for errors, blue #228BE6 for info, cyan-teal #1098AD for category tags — and reach for it instead of inventing new hues
+
+### Don't
+- Introduce a second brand accent hue for a sub-product — tint the existing #00C471 (e.g. rgba(0,196,113,0.1)) or fall back to the Mantine red/blue/yellow/cyan scales instead
+- Use #00C471 for body-text links or small text — it scores only 2.45:1 on white and fails AA, so reserve it for white-on-green CTAs and >18pt headings
+- Embolden prices in red or add strikethrough discount callouts outside intentional sale rails — keep price in body weight 400 as a fact, not a flag
+- Add campaign drama like rotating banner carousels, parallax, or auto-advancing home rails — show ~24 calm catalog tiles above the fold and make card thumbnail scale (1.0 to 1.02) the only ambient motion
+- Use pressure or hype microcopy such as 지금 바로!, 놓치지 마세요, 최저가, 최고의 강의, Oops!, or 오류가 발생했습니다 — write agency-on-the-learner copy in casual-polite ~해요 instead
+- Call instructors 강사 or 교수 or pit them against each other with ranking labels — use the brand term 지식공유자님 and neutral counts like 수강생 12,400명
+
 ---
 
 ## 10. Voice & Tone

package/web/references/kbank/DESIGN.md

@@ -193,3 +193,21 @@ Overall: meaningful effort on focus order and language tagging; structural seman
 - Brand assets (logo, name, navy `#0114A7`) referenced for inspiration only — not redistributed.
 - No verbatim taglines or copy lifted from kbanknow.com. §9 voice paragraph is a fresh analyst paraphrase of register and structure, not transcription.
 - Token values are facts (CSS custom property values) and not protectable expression; they are reproduced here for engineering reference under fair-use analytical purpose.
+
+## 14. Do's and Don'ts
+
+### Do
+- Anchor the brand on the single signature navy #0114A7 as the sole positive primary across skip-link, CTAs, and key labels
+- Reserve the lime accent #B6F23D for sparing energetic activation states only, keeping it off body text and form chrome
+- Keep surfaces sharp and orthogonal at 0px radius and apply the 12px radius exclusively to the 56px CTA
+- Set CTAs in Pretendard K Edition at 18px / 500 medium weight with white text on navy fill, not the 600/700 most KR finance peers default to
+- Convey elevation through 1px borders and cool-tinted g200/g300 fills instead of drop-shadows, using the blue-leaning neutral ramp to stay coherent with the navy
+- Lead the page with dated notices (YYYY.MM.DD) above promotion and write formal ~합니다 noun-phrase headers with one supporting sentence
+
+### Don't
+- Spread the lime #B6F23D accent across large areas or place it on body text and form chrome
+- Round corners broadly the way K bank reads dated with 0px everywhere except CTA — adopt the sharpness only when deliberately signalling a regulated institution
+- Lock layouts to the fixed 1280px canvas, which blocks responsive zoom and is not viable for modern surfaces
+- Build chrome out of bare <div> elements — use real <header>, <nav>, <main>, and <footer> landmarks
+- Hide the logo with the font-size: 0 image-replacement trick on the H1 — use inline SVG with an explicit aria-label
+- Write chatty contractions, emoji, or second-person imperatives, or swap the formal ~합니다 register for colloquial ~해요

package/web/references/kdan/DESIGN.md

@@ -0,0 +1,160 @@
+---
+id: kdan
+name: "Kdan Mobile"
+country: TW
+category: productivity
+homepage: "https://www.kdan.com"
+primary_color: "#00DC87"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=kdan.com&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+ds:
+  name: "kdan-ui"
+  url: "https://github.com/kdan-mobile-software-ltd/kdan-ui-revamp"
+  type: system
+  description: "Kdan's open-source UI token library (kdanGreen brand token + neutral scale + semantic colors)."
+---
+
+# Design System Inspiration of Kdan Mobile
+
+## 1. Visual Theme & Atmosphere
+
+Kdan Mobile presents itself as bold, modern, and developer-credible document software, the kind of digital-workflow SaaS that signs contracts and ships SDKs without losing its sense of energy. The atmosphere is built on a structural deep teal-black base (#002D37) that grounds the interface like ink on a signed page, punctuated by an electric-lime pop (#CAFF00) reserved for the loudest hero moments and the brand's own kdanGreen token (#00DC87) carried over from its open-source UI library. Type is set in Clear Sans, a humanist sans that keeps long documents and dense product copy legible while reading clean and unfussy. Corners are crisp at 4px — tight enough to feel precise and technical, never soft or playful. The overall effect is confident and high-contrast: a serious productivity tool from Tainan, Taiwan that still wants you to feel the charge of getting work done fast. It reads as energetic document software that respects both the signer and the integrating engineer.
+
+## 2. Color Palette & Roles
+
+- **kdanGreen / Brand primary** `#00DC87` — the catalog primary, drawn directly from the kdan-ui-revamp brand token.
+- **Structural deep teal-black** `#002D37` — solid primary button surface and the grounding structural base on live kdan.com.
+- **Electric lime** `#CAFF00` — loud hero CTA accent, used sparingly for the highest-emphasis moment.
+- **Hyperlink blue** `#007AFF` — semantic link color from the token library.
+- **Error red** `#F25858` — semantic error state from the token library.
+- **Gray 1000** `#191919` — darkest neutral in the scale.
+- **Gray 100** `#FAFAFA` — lightest neutral in the scale.
+- **Hover layer** `rgba(0,0,0,0.2)` — semi-transparent overlay token applied on hover.
+- **Disabled surface** `#AFAFAF` with text `#4B4B4B` — muted neutral pairing for disabled controls.
+- **White** `#FFFFFF` — primary button text on the teal-black surface.
+- **Black** `#000000` — text on the electric-lime CTA, for maximum contrast.
+
+Roles: kdanGreen anchors the brand identity, deep teal-black does the structural and primary-action work, and electric lime is the single loud accent. The neutral gray scale (gray100 to gray1000) handles surfaces and text, while hyperlink, error, and hover-layer tokens cover semantic and interaction states.
+
+## 3. Typography Rules
+
+- **Typeface:** Clear Sans across the interface.
+- **Body:** 16px.
+- **Hero heading:** 56px at weight 700.
+- **Button label (standard):** 16px at weight 500.
+- **Hero CTA label:** 22px at weight 500.
+
+Clear Sans is a humanist sans-serif chosen for sustained legibility in document-heavy contexts. The hierarchy is steep — a 56px/700 hero headline sits far above 16px body — giving pages a confident, declarative top while keeping reading text calm. Button labels favor the medium 500 weight for a solid, tappable feel without shouting.
+
+## 4. Component Stylings
+
+### Button
+
+**Solid primary**
+- Background: #002D37
+- Text: #FFFFFF
+- Border: 1.5px solid #002D37
+- Radius: 4px
+- Height: 38px
+- Font: 16px / 500
+- Use: primary action on live kdan.com
+
+**Outline**
+- Background: transparent
+- Text: #002D37
+- Border: 1.5px solid #002D37
+- Radius: 4px
+- Height: 38px
+- Font: 16px / 500
+- Use: secondary action paired alongside the solid primary
+
+**Lime hero CTA**
+- Background: #CAFF00
+- Text: #000000
+- Border: none
+- Radius: 4px
+- Height: 53px
+- Font: 22px / 500
+- Use: single loud, high-emphasis hero call-to-action
+
+**Disabled**
+- Background: #AFAFAF
+- Text: #4B4B4B
+- Border: none
+- Radius: 4px
+- Use: non-interactive disabled state
+
+## 5. Layout Principles
+
+Kdan's layout reads as confident document software: a structural deep teal-black base anchors the page, with content set against the light neutral scale (gray100 #FAFAFA at the bright end). A steep type hierarchy — 56px/700 hero down to 16px body — establishes a clear declarative top and a calm reading body. Primary and outline actions share the same 38px height and 4px radius so action rows align cleanly, while the taller 53px lime hero CTA stands apart as the single loudest target. The crisp 4px corner radius is applied consistently across controls, reinforcing a precise, technical feel rather than a soft one.
+
+## 6. Depth & Elevation
+
+Depth is handled with restraint and high contrast rather than heavy shadow. The primary interaction-depth cue is the hover layer — a semi-transparent `rgba(0,0,0,0.2)` overlay token from the kdan-ui library — which darkens a surface on hover to signal interactivity. Borders do structural work too: solid controls carry a 1.5px solid border in their own surface color (#002D37), giving edges definition without relying on drop shadows. The visual stack is built primarily from solid color contrast — deep teal-black against light neutrals — so elevation is felt through tone and the hover overlay more than through layered shadow.
+
+## 7. Do's and Don'ts
+
+### Do
+- Anchor structure and primary actions with deep teal-black #002D37 and white #FFFFFF text.
+- Reserve electric lime #CAFF00 for a single loud hero CTA, with black #000000 text for contrast.
+- Keep the kdanGreen #00DC87 token as the brand identity color.
+- Use a consistent 4px radius and 1.5px borders across controls.
+- Set type in Clear Sans, with a steep 56px/700 hero over 16px body.
+
+### Don't
+- Scatter the electric lime across many elements — it loses its punch when overused.
+- Soften the 4px corners into large rounded shapes; the brand reads precise and technical.
+- Use error red #F25858 or hyperlink blue #007AFF for decoration — they are semantic.
+- Invent shadow-heavy elevation; lean on color contrast and the hover overlay.
+
+## 8. Responsive Behavior
+
+The blob does not capture explicit breakpoints, fluid grids, or per-viewport measurements for Kdan, so specific responsive numbers are not asserted here. Qualitatively, the fixed control heights (38px standard, 53px hero CTA) and the consistent 4px radius are designed to hold their proportions across viewports, while the steep Clear Sans hierarchy (56px/700 hero, 16px body) gives a reliable anchor for scaling text down on smaller screens. Action rows that pair the solid primary and outline buttons share a common 38px height, which keeps them aligned whether stacked or placed side by side.
+
+## 9. Agent Prompt Guide
+
+When generating UI in Kdan's style, instruct the agent: "Build bold, developer-credible productivity software from Taiwan. Ground the page in deep teal-black #002D37 with white #FFFFFF text and light neutral surfaces (up to gray100 #FAFAFA). Use kdanGreen #00DC87 as the brand identity color. Reserve electric lime #CAFF00 — with black #000000 text — for exactly one loud hero CTA at 53px height, 22px/500. Standard buttons are 38px tall, 16px/500, 4px radius, 1.5px solid border in #002D37 (solid: teal-black bg/white text; outline: transparent bg/teal-black text). Disabled controls use #AFAFAF on #4B4B4B. Set everything in Clear Sans, hero headings 56px/700, body 16px. Keep corners crisp at 4px, use the rgba(0,0,0,0.2) hover overlay for interactivity, and lean on color contrast over shadows. Use hyperlink blue #007AFF and error red #F25858 only for their semantic roles."
+
+## 10. Voice & Tone
+
+Kdan's voice is bold, modern, and confident — the tone of a document-software company that is sure of its product and credible to developers. It speaks plainly and energetically, matching the high-contrast structural base and the single electric-lime exclamation point. Copy should feel capable and direct: productivity language that respects the signer's time and the engineer's intelligence, never cute or padded.
+
+## 11. Brand Narrative
+
+Kdan Mobile is a Tainan, Taiwan digital-workflow SaaS built around PDF productivity, e-signature, and document SDKs. Its visual identity carries that dual story — the seriousness of signed documents and the credibility of developer tooling — through a deep teal-black structural base, an electric-lime pop accent, and the brand's own kdanGreen token surfaced from its open-source kdan-ui library. Setting everything in Clear Sans with crisp 4px corners, Kdan reads as energetic, modern, and confident: software that handles real contracts and real integrations while still feeling charged with momentum.
+
+## 12. Principles
+
+- **Confident and high-contrast:** ground in deep teal-black, let one electric-lime accent carry the energy.
+- **Developer-credible:** lean on Kdan's own open-source token library (kdanGreen, neutral scale, semantic colors) as the source of truth.
+- **Precise, not soft:** crisp 4px corners and 1.5px borders over rounded, shadow-heavy styling.
+- **Restraint with accent:** the loud lime is a single exclamation point, never a refrain.
+- **Legible by default:** Clear Sans and a steep hierarchy keep document-heavy work readable.
+
+## 13. Personas
+
+- **The signer / business user:** needs to move documents and signatures quickly; served by a clear hierarchy, calm 16px body text, and unambiguous primary actions in deep teal-black.
+- **The integrating developer:** evaluates Kdan's SDKs and trusts the open-source kdan-ui token library; served by a credible, technical, precisely-cornered visual language and documented tokens.
+- **The decision-maker scanning the hero:** drawn in by the bold 56px/700 headline and the single loud electric-lime CTA that signals where to act.
+
+## 14. States
+
+- **Default (solid primary):** background #002D37, text #FFFFFF, 1.5px solid #002D37 border, 4px radius, 38px height.
+- **Hover:** rgba(0,0,0,0.2) hover-layer overlay token darkens the surface to signal interactivity.
+- **Disabled:** background #AFAFAF, text #4B4B4B, 4px radius — clearly muted and non-interactive.
+- **Error (semantic):** error red #F25858 reserved for error messaging and validation.
+- **Link (semantic):** hyperlink blue #007AFF for inline links.
+
+## 15. Motion & Easing
+
+The blob does not capture explicit animation durations, easing curves, or transition timing for Kdan, so no specific motion values are asserted. Qualitatively, the documented interaction model is a hover state that applies the rgba(0,0,0,0.2) overlay token — implying a quick, subtle tonal shift on hover rather than elaborate motion. In keeping with the precise, high-contrast character (crisp 4px corners, solid color contrast), any motion should stay restrained and snappy, matching the confident, developer-credible tone rather than drawing attention to itself.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.kdan.com (live homepage — buttons, hero CTA, Clear Sans, hero 56px/700), https://github.com/kdan-mobile-software-ltd (brand-owned org), https://github.com/kdan-mobile-software-ltd/kdan-ui-revamp (open-source kdan-ui token library — kdanGreen + neutrals + semantic colors)
+**Tier 2 sources:** getdesign.md/kdan — NOT LISTED. refero — not listed. Note: brand token kdanGreen #00DC87 is the catalog primary; #002D37 is the structural surface and #CAFF00 the loud accent.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)