npm - zugzbot - Versions diffs - 1.0.21 → 1.0.22 - Mend

zugzbot 1.0.21 → 1.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1271) hide show

package/.opencode/oh-my-design/web/references/intercom/preview.html DELETED Viewed

@@ -1,184 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Design System Inspired by Intercom</title>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
-<style>
-  :root { --cream:#faf9f6; --black:#111111; --white:#ffffff; --orange:#ff5600; --oat:#dedbd6; --gray50:#7b7b78; --gray60:#626260; --gray80:#313130; --sand:#d3cec6; --font:'Inter',ui-sans-serif,system-ui,sans-serif; }
-  * { margin:0; padding:0; box-sizing:border-box; }
-  body { background:var(--cream); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
-  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--oat); }
-  .nav-brand { font-size:14px; font-weight:400; color:var(--black); text-decoration:none; }
-  .nav-links { display:flex; gap:20px; list-style:none; }
-  .nav-links a { font-size:14px; color:var(--gray60); text-decoration:none; }
-  .nav-links a:hover { color:var(--black); }
-  .nav-cta { display:inline-block; background:var(--black); color:var(--white); padding:8px 14px; border-radius:4px; font-size:14px; text-decoration:none; transition:transform 0.2s; }
-  .nav-cta:hover { transform:scale(1.05); }
-  .hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }
-  .hero h1 { font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px; margin-bottom:20px; }
-  .hero h1 span { color:var(--orange); }
-  .hero p { font-size:16px; color:var(--gray60); max-width:480px; margin-bottom:32px; }
-  .hero-buttons { display:flex; gap:12px; }
-  .btn-dark { display:inline-block; background:var(--black); color:var(--white); padding:12px 20px; border-radius:4px; font-family:var(--font); font-size:16px; text-decoration:none; border:none; cursor:pointer; transition:all 0.2s; }
-  .btn-dark:hover { background:var(--white); color:var(--black); transform:scale(1.1); }
-  .btn-dark:active { transform:scale(0.85); }
-  .btn-outline { display:inline-block; background:transparent; color:var(--black); padding:12px 20px; border-radius:4px; border:1px solid var(--black); font-family:var(--font); font-size:16px; text-decoration:none; cursor:pointer; transition:all 0.2s; }
-  .btn-outline:hover { transform:scale(1.1); }
-  .btn-cream { display:inline-block; background:var(--cream); color:var(--black); padding:12px 16px; border-radius:4px; border:1px solid var(--oat); font-family:var(--font); font-size:14px; text-decoration:none; }
-  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
-  .section-label { font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50); margin-bottom:8px; }
-  .section-title { font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px; margin-bottom:24px; }
-  .section-divider { border:none; border-top:1px solid var(--oat); margin:0; }
-  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
-  .color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--oat); background:var(--white); }
-  .color-swatch-block { height:60px; }
-  .color-swatch-info { padding:8px 10px; }
-  .color-swatch-name { font-size:12px; font-weight:400; margin-bottom:2px; }
-  .color-swatch-hex { font-size:10px; color:var(--gray50); font-family:monospace; }
-  .color-swatch-role { font-size:9px; color:var(--gray50); margin-top:2px; }
-  .color-group-label { font-size:12px; color:var(--gray60); margin:20px 0 8px; }
-  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--oat); }
-  .type-sample:last-child { border-bottom:none; }
-  .type-meta { font-family:monospace; font-size:10px; color:var(--gray50); margin-top:4px; }
-  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
-  .button-item { text-align:center; }
-  .button-label { font-size:10px; color:var(--gray50); margin-top:6px; }
-  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
-  .card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:20px; }
-  .card h3 { font-size:24px; font-weight:400; letter-spacing:-0.48px; line-height:1.00; margin-bottom:8px; }
-  .card p { font-size:14px; color:var(--gray60); line-height:1.43; }
-  .form-group { margin-bottom:16px; max-width:400px; }
-  .form-label { display:block; font-size:14px; margin-bottom:4px; }
-  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--oat); padding:10px 14px; border-radius:4px; font-family:var(--font); font-size:16px; outline:none; }
-  .form-input:focus { border-color:var(--black); }
-  .form-input--focus { border-color:var(--black); }
-  .form-input--error { border-color:var(--orange); }
-  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--oat); padding:10px 14px; border-radius:4px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
-  .form-state-label { font-size:9px; color:var(--gray50); margin-top:4px; }
-  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
-  .spacing-item { text-align:center; }
-  .spacing-block { background:var(--black); border-radius:2px; margin-bottom:4px; height:24px; opacity:0.15; }
-  .spacing-value { font-family:monospace; font-size:9px; color:var(--gray50); }
-  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
-  .radius-item { text-align:center; }
-  .radius-box { width:52px; height:52px; background:var(--oat); margin-bottom:4px; }
-  .radius-label { font-family:monospace; font-size:9px; color:var(--gray50); }
-  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
-  .elevation-card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:16px; text-align:center; }
-  .elevation-label { font-size:13px; margin-bottom:4px; }
-  .elevation-desc { font-family:monospace; font-size:9px; color:var(--gray50); }
-  .footer { padding:32px; text-align:center; background:var(--black); color:var(--gray50); font-size:12px; }
-  .footer a { color:var(--orange); text-decoration:underline; }
-  @media (max-width:768px) { .hero h1 { font-size:44px; letter-spacing:-1.32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
-</style>
-</head>
-<body>
-<nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Start free trial</a></nav>
-<section class="hero"><h1>Design System<br>Inspired by <span>Intercom</span></h1><p>Every color, font, and component — visualized with warm precision.</p><div class="hero-buttons"><a class="btn-dark" href="#">Get a demo</a><a class="btn-outline" href="#">Start free trial</a></div></section>
-<hr class="section-divider">
-<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
-<div class="color-group-label">Primary</div>
-<div class="color-grid">
-<div class="color-swatch"><div class="color-swatch-block" style="background:#111111"></div><div class="color-swatch-info"><div class="color-swatch-name">Off Black</div><div class="color-swatch-hex">#111111</div><div class="color-swatch-role">Primary text, buttons</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#faf9f6"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Cream</div><div class="color-swatch-hex">#faf9f6</div><div class="color-swatch-role">Page background</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#ff5600"></div><div class="color-swatch-info"><div class="color-swatch-name">Fin Orange</div><div class="color-swatch-hex">#ff5600</div><div class="color-swatch-role">Brand accent</div></div></div>
-</div>
-<div class="color-group-label">Report Palette</div>
-<div class="color-grid">
-<div class="color-swatch"><div class="color-swatch-block" style="background:#65b5ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue</div><div class="color-swatch-hex">#65b5ff</div><div class="color-swatch-role">Report blue</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#0bdf50"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#0bdf50</div><div class="color-swatch-role">Report green</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#c41c1c"></div><div class="color-swatch-info"><div class="color-swatch-name">Red</div><div class="color-swatch-hex">#c41c1c</div><div class="color-swatch-role">Report red</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#ff2067"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#ff2067</div><div class="color-swatch-role">Report pink</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#b3e01c"></div><div class="color-swatch-info"><div class="color-swatch-name">Lime</div><div class="color-swatch-hex">#b3e01c</div><div class="color-swatch-role">Report lime</div></div></div>
-</div>
-<div class="color-group-label">Neutral</div>
-<div class="color-grid">
-<div class="color-swatch"><div class="color-swatch-block" style="background:#7b7b78"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 50</div><div class="color-swatch-hex">#7b7b78</div><div class="color-swatch-role">Muted text</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#626260"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 60</div><div class="color-swatch-hex">#626260</div><div class="color-swatch-role">Secondary text</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#dedbd6"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Border</div><div class="color-swatch-hex">#dedbd6</div><div class="color-swatch-role">Borders</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#d3cec6"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Sand</div><div class="color-swatch-hex">#d3cec6</div><div class="color-swatch-role">Light neutral</div></div></div>
-</div></section>
-<hr class="section-divider">
-<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
-<div class="type-sample"><div style="font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px;">Display Hero</div><div class="type-meta">Saans — 80px / 400 / 1.00 / -2.4px</div></div>
-<div class="type-sample"><div style="font-size:54px; font-weight:400; line-height:1.00; letter-spacing:-1.6px;">Section Heading</div><div class="type-meta">Saans — 54px / 400 / 1.00 / -1.6px</div></div>
-<div class="type-sample"><div style="font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px;">Sub-heading</div><div class="type-meta">Saans — 40px / 400 / 1.00 / -1.2px</div></div>
-<div class="type-sample"><div style="font-size:24px; font-weight:400; line-height:1.00; letter-spacing:-0.48px;">Feature Title</div><div class="type-meta">Saans — 24px / 400 / 1.00 / -0.48px</div></div>
-<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50; color:var(--gray60);">Body — The only AI-first customer service platform. Resolve issues instantly with Fin AI Agent.</div><div class="type-meta">Saans — 16px / 400 / 1.50</div></div>
-<div class="type-sample"><div style="font-size:14px; font-weight:300; line-height:1.40; color:var(--gray50);">Body Light — Updated 3 minutes ago</div><div class="type-meta">Saans — 14px / 300 / 1.40</div></div>
-<div class="type-sample"><div style="font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50);">MONO LABEL</div><div class="type-meta">SaansMono — 12px / 500 / uppercase / +1.2px</div></div>
-</section>
-<hr class="section-divider">
-<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
-<div class="button-row">
-<div class="button-item"><a class="btn-dark" href="#">Get a demo</a><div class="button-label">Primary Dark</div></div>
-<div class="button-item"><a class="btn-outline" href="#">Start free trial</a><div class="button-label">Outlined</div></div>
-<div class="button-item"><a class="btn-cream" href="#">Learn more</a><div class="button-label">Warm Cream</div></div>
-</div>
-<p style="font-size:12px; color:var(--gray50); margin-top:12px;">Hover to see scale(1.1). Click for scale(0.85). All buttons: 4px radius.</p>
-</section>
-<hr class="section-divider">
-<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
-<div class="card-grid">
-<div class="card"><h3>Fin AI Agent</h3><p>Resolve 50% of support questions instantly with AI. No training needed.</p></div>
-<div class="card"><h3>Help Center</h3><p>Help customers help themselves. Build a knowledge base with AI-powered search.</p></div>
-<div class="card"><h3>Workflows</h3><p>Automate repetitive tasks. Route, assign, and resolve at scale.</p></div>
-</div></section>
-<hr class="section-divider">
-<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
-<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default (oat border)</div></div>
-<div class="form-group"><label class="form-label">Company</label><input class="form-input form-input--focus" type="text" value="Acme Inc"><div class="form-state-label">Focus (black border)</div></div>
-<div class="form-group"><label class="form-label">Website</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error (orange border)</div></div>
-<div class="form-group"><label class="form-label">Message</label><textarea class="form-textarea" placeholder="How can we help?"></textarea></div>
-</section>
-<hr class="section-divider">
-<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
-<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div><div class="spacing-item"><div class="spacing-block" style="width:64px"></div><div class="spacing-value">64</div></div></div></section>
-<hr class="section-divider">
-<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
-<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div></div>
-<p style="font-size:11px; color:var(--gray50); margin-top:8px;">Sharp geometry: 4px for buttons, 6px for nav, 8px for cards.</p>
-</section>
-<hr class="section-divider">
-<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
-<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — warm borders</div></div><div class="elevation-card" style="border-color:var(--black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Black border</div></div></div></section>
-<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
-</body>
-</html>

package/.opencode/oh-my-design/web/references/jandi/.verification.md DELETED Viewed

@@ -1,26 +0,0 @@
-# JANDI — Verification Notes (2026-06-09)
-## Proof — Tier 1 live inspect
-**Inspected:** 2026-06-09
-**Method:** playwright getComputedStyle (live DOM)
-**Sources:**
-- https://www.jandi.com (homepage, live DOM)
-- https://www.tosslab.com (developer / brand-owner site)
-### Raw samples
-- Login CTA (`a/button`): `background-color: rgb(0, 196, 115)` (#00c473), `color: rgb(255,255,255)`, `border-radius: 6px`, `padding: 7px 14px`, font 14px / weight 500
-- Secondary button ("더 알아보기"): `background-color: rgb(51, 51, 51)` (#333333), `color: rgb(255,255,255)`, `border-radius: 6px`, `padding: 5px 14px`, 15px / 500
-- Signup/inquiry pill ("회원가입"/"도입문의"): `background-color: rgb(255, 255, 255)`, `color: rgb(4, 25, 17)` (#041911), `border-radius: 6px`, `padding: 12px 30px`, 15px / 500
-- h1 hero: `color: rgb(255, 255, 255)`, `font-size: 56px`, `font-weight: 700`, `line-height: 80px`, `font-family: "Noto Sans"`
-- h2 section: `color: rgb(0, 0, 0)`, `font-size: 42px`, `font-weight: 700`, `line-height: 60px`
-- Body `p`: `color: rgb(162, 162, 162)` (#a2a2a2), `font-size: 14px`, `line-height: 20px`
-- Green eyebrow label: `color: rgb(0, 196, 115)` (#00c473), `font-size: 13px`, `font-weight: 700`, `padding: 8px 16px`
-- Card shadow (sampled elements): `box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 16px 3px`
-- Footer: `background-color: rgb(24, 24, 24)` (#181818)
-- Sampled background colors: `rgb(255,255,255)`, `rgb(250,250,252)` (#fafafc), `rgb(0,196,115)`, `rgb(234,246,252)` (#eaf6fc)
-## Country sources
-- https://www.tosslab.com — TossLab (토스랩), the Korean company that develops JANDI (brand owner)
-- https://www.jandi.com/landing/kr — JANDI official Korean landing/marketing site (brand-owned)
-- https://apps.apple.com/kr/app/jandi/id733036870 — JANDI on the Korean App Store (brand-owned listing, KR region)

package/.opencode/oh-my-design/web/references/jandi/DESIGN.md DELETED Viewed

@@ -1,382 +0,0 @@
----
-id: jandi
-name: JANDI
-country: KR
-category: productivity
-homepage: "https://www.jandi.com"
-primary_color: "#00c473"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=www.jandi.com&sz=128"
-verified: "2026-06-09"
-added: "2026-06-09"
-omd: "0.1"
-tokens:
-  source: live-extract
-  extracted: "2026-06-09"
-  components_harvested: true
-  colors:
-    primary: "#00c473"
-    primary-border: "#00c473"
-    ink-dark: "#333333"
-    ink-deepest: "#041911"
-    heading: "#000000"
-    canvas: "#ffffff"
-    canvas-soft: "#fafafc"
-    tint-blue: "#eaf6fc"
-    body: "#a2a2a2"
-    subhead: "#c2c2c2"
-    footer-bg: "#181818"
-    on-primary: "#ffffff"
-  typography:
-    family: { sans: "Noto Sans" }
-    display-hero: { size: 56, weight: 700, lineHeight: 1.43, use: "Hero headline on dark/imagery, white text" }
-    section:      { size: 42, weight: 700, lineHeight: 1.43, use: "Feature section titles" }
-    subheading:   { size: 24, weight: 700, lineHeight: 1.58, use: "Card / sub-section heads" }
-    body:         { size: 16, weight: 400, lineHeight: 1.00, use: "Standard reading text" }
-    button:       { size: 15, weight: 500, lineHeight: 1.33, use: "Primary button label" }
-    nav:          { size: 14, weight: 400, lineHeight: 1.43, use: "Navigation links" }
-    caption:      { size: 14, weight: 400, lineHeight: 1.43, use: "Muted descriptions, metadata" }
-    eyebrow:      { size: 13, weight: 700, lineHeight: 1.54, use: "Green eyebrow labels above headings" }
-  spacing: { xs: 4, sm: 7, md: 14, base: 16, lg: 30, xl: 36, xxl: 48, section: 64 }
-  rounded: { sm: 4, md: 6, lg: 16, full: 9999 }
-  shadow:
-    card: "rgba(0,0,0,0.08) 0px 2px 16px 3px"
-  components:
-    button-login: { type: button, bg: "#00c473", fg: "#ffffff", radius: "6px", padding: "7px 14px", font: "14px / 500", use: "Top-nav green login CTA, 1px #00c473 border" }
-    button-cta-dark: { type: button, bg: "#333333", fg: "#ffffff", radius: "6px", padding: "5px 14px", font: "15px / 500", use: "Secondary dark action, 더 알아보기" }
-    button-signup: { type: button, bg: "#ffffff", fg: "#041911", radius: "6px", padding: "12px 30px", font: "15px / 500", use: "회원가입 / 도입문의 on dark hero, white pill on green" }
-    eyebrow-label: { type: badge, fg: "#00c473", radius: "4px", padding: "8px 16px", font: "13px / 700", use: "Green eyebrow above section headings" }
-    nav-link: { type: tab, fg: "#000000", font: "14px / 400", use: "Top-nav menu item", active: "green #00c473 text on hover/active" }
-    card: { type: card, bg: "#ffffff", radius: "16px", use: "Feature card, shadow rgba(0,0,0,0.08) 0px 2px 16px 3px" }
-    card-tint: { type: card, bg: "#eaf6fc", radius: "16px", use: "Tinted feature card on soft canvas" }
-    input-text: { type: input, fg: "#333333", radius: "6px", font: "15px / 400", use: "Form field, placeholder #a2a2a2" }
-    footer-link: { type: listItem, fg: "#a2a2a2", font: "14px / 400", use: "Footer nav link on #181818 background" }
----
-# Design System Inspiration of JANDI
-## 1. Visual Theme & Atmosphere
-JANDI (잔디) is the Korean business-collaboration messenger built by TossLab, and its website carries the calm, trustworthy confidence of a productivity tool that lives in offices all day. The page opens on a clean white canvas (`#ffffff`) — occasionally cooling into a near-white `#fafafc` — with pure black headings (`#000000`) and a single, decisive signature: JANDI Green (`#00c473`). That green is the brand's whole personality compressed into one hue. The name "잔디" literally means "grass/lawn", and the fresh, growth-coded green reads exactly that way: alive, approachable, optimistic, and unmistakably not the corporate-blue of legacy enterprise software. Everything else in the palette is deliberately quiet so the green can do the talking.
-The typographic voice is set in Noto Sans across the entire site, run at weight 700 for headlines and weight 400 for body. Hero headlines reach 56px and section titles 42px, both at bold 700 with relaxed line-heights (1.43), giving the page a friendly, legible, distinctly Korean-web rhythm rather than the tight, ultra-light tracking of Western design-foundry sites. Bold-but-warm is the register: the headlines are confident and large, the supporting copy recedes into soft grays (`#a2a2a2`, `#c2c2c2`), and the green eyebrow labels (13px, weight 700) act like small sprigs of color that orient the reader through each section.
-Depth is handled with extreme restraint. There is essentially one shadow in the system — a soft, evenly-spread `rgba(0,0,0,0.08) 0px 2px 16px 3px` — used to lift feature cards a few millimeters off the canvas. No multi-layer chromatic stacks, no dramatic elevation. Surfaces are rounded generously (16px on cards) while interactive controls stay tighter (6px on buttons), and the overall feel is of a product that wants to be calm, scannable, and immediately usable by a whole company, not just designers.
-**Key Characteristics:**
-- JANDI Green (`#00c473`) as the single decisive brand and CTA color — fresh, growth-coded, anti-corporate-blue
-- Noto Sans everywhere; weight 700 for headlines, 400 for body — friendly Korean-web legibility
-- Pure black (`#000000`) headings on white (`#ffffff`) / near-white (`#fafafc`) canvas
-- Soft gray supporting text (`#a2a2a2` body, `#c2c2c2` subheads) so green stays the only accent
-- One restrained card shadow (`rgba(0,0,0,0.08) 0px 2px 16px 3px`) — calm, flat-leaning depth
-- Generous 16px card radius, tighter 6px control radius — comfortable but not playful
-- Green eyebrow labels (13px / 700) as wayfinding sprigs above section headings
-- Deep near-black ink (`#041911`, `#333333`) for high-contrast text on light pill buttons
-## 2. Color Palette & Roles
-### Primary
-- **JANDI Green** (`#00c473`): Primary brand color, login CTA background, eyebrow labels, link/hover accent. A bright, slightly emerald growth-green that anchors the whole system.
-- **Pure White** (`#ffffff`): Page background, card surfaces, signup/inquiry button fills on dark hero, on-green text.
-- **Black** (`#000000`): Primary heading color, nav text. JANDI uses true black for headings rather than a tinted near-black.
-### Ink & Dark
-- **Ink Dark** (`#333333`): Secondary dark button background ("더 알아보기"), input text color.
-- **Deepest Ink** (`#041911`): Near-black green-tinted text used on white pill buttons over green/hero backgrounds.
-- **Footer Black** (`#181818`): Dark footer background section.
-### Surface & Tint
-- **Canvas** (`#ffffff`): Default surface.
-- **Canvas Soft** (`#fafafc`): Cool near-white section background for alternating bands.
-- **Tint Blue** (`#eaf6fc`): Light blue-tinted card/illustration surface for feature blocks.
-### Neutral Text Scale
-- **Body Gray** (`#a2a2a2`): Secondary descriptions, captions, footer links.
-- **Subhead Gray** (`#c2c2c2`): Muted sub-headings and supporting titles.
-- **Heading Black** (`#000000`): Primary headings and strong labels.
-- **On-Primary** (`#ffffff`): Text on green CTA fills.
-## 3. Typography Rules
-### Font Family
-- **Primary**: `Noto Sans`, with system sans fallback. Used for 100% of text — headings, body, UI, footer.
-- **Weights**: 400 (body / nav / captions), 500 (buttons), 700 (headings / eyebrows / sub-section titles).
-### Hierarchy
-| Role | Font | Size | Weight | Line Height | Notes |
-|------|------|------|--------|-------------|-------|
-| Display Hero | Noto Sans | 56px | 700 | 1.43 (80px) | Hero headline, white on dark/imagery |
-| Section Heading | Noto Sans | 42px | 700 | 1.43 (60px) | Feature section titles, black |
-| Sub-heading | Noto Sans | 24px | 700 | 1.58 (38px) | Card / sub-section heads |
-| Body | Noto Sans | 16px | 400 | 1.00 | Standard reading text |
-| Button | Noto Sans | 15px | 500 | 1.33 | Primary / secondary button labels |
-| Nav Link | Noto Sans | 14px | 400 | 1.43 | Top-nav menu items |
-| Caption | Noto Sans | 14px | 400 | 1.43 | Muted descriptions, metadata, footer links |
-| Eyebrow | Noto Sans | 13px | 700 | 1.54 | Green eyebrow labels above headings |
-### Principles
-- **Bold-warm, not light-luxe**: JANDI commits to weight 700 for all headlines. Where foundry-driven sites whisper at weight 300, JANDI speaks clearly at 700 — friendly authority for a tool used by entire companies.
-- **One typeface, three weights**: Noto Sans at 400 / 500 / 700 covers the whole site. No serif, no display face, no monospace.
-- **Relaxed line-height**: Headlines run at ~1.43 line-height (80px on 56px, 60px on 42px), generous spacing tuned for Korean + Latin mixed text legibility.
-- **Green eyebrows for wayfinding**: The 13px / 700 green eyebrow label is JANDI's signature small-type move — a colored orienting sprig above each section heading.
-- **Gray descends, never competes**: Supporting copy steps down into `#a2a2a2` and `#c2c2c2` so the green accent and black headings own the contrast.
-## 4. Component Stylings
-### Buttons
-**Login (Green Primary)**
-- Background: `#00c473`
-- Text: `#ffffff`
-- Padding: 7px 14px
-- Radius: 6px
-- Border: `1px solid #00c473`
-- Font: 14px Noto Sans weight 500
-- Use: Top-nav primary CTA ("로그인")
-**Secondary Dark**
-- Background: `#333333`
-- Text: `#ffffff`
-- Padding: 5px 14px
-- Radius: 6px
-- Font: 15px Noto Sans weight 500
-- Use: Secondary action ("더 알아보기")
-**Signup / Inquiry (Light Pill on Hero)**
-- Background: `#ffffff`
-- Text: `#041911`
-- Padding: 12px 30px
-- Radius: 6px
-- Font: 15px Noto Sans weight 500
-- Use: High-contrast white button over green / dark hero ("회원가입", "도입문의")
-### Cards & Containers
-- Background: `#ffffff` (standard) or `#eaf6fc` (tinted feature block)
-- Radius: 16px
-- Shadow: `rgba(0,0,0,0.08) 0px 2px 16px 3px`
-- Sit on `#fafafc` soft-canvas bands for gentle separation
-### Badges / Eyebrows
-- **Green Eyebrow**: `#00c473` text, transparent bg, 8px 16px padding, 4px radius, 13px weight 700 — orienting label above section headings
-### Inputs & Forms
-- Radius: 6px
-- Text: `#333333`
-- Placeholder: `#a2a2a2`
-- Comfortable touch padding consistent with button scale
-### Navigation
-- Clean horizontal nav on white, brand logotype left-aligned
-- Links: Noto Sans 14px weight 400, `#000000` text, green `#00c473` on hover/active
-- Container padding 0 36px
-- Green login CTA right-aligned
-### Footer
-- Background: `#181818` dark band
-- Links: `#a2a2a2`, 14px Noto Sans weight 400
-**Verified:** 2026-06-09 (live DOM inspect)
-**Tier 1 sources:** https://www.jandi.com, https://www.tosslab.com
-## 5. Layout Principles
-### Spacing System
-- Base unit: ~7-8px, scaling through 14px, 16px, 30px, 36px
-- Button padding clusters around 7px / 14px / 30px horizontal — comfortable, generous tap zones
-- Section rhythm built on large vertical bands alternating white and `#fafafc`
-### Grid & Container
-- Centered single-column hero with bold headline and a white pill CTA
-- Feature sections use multi-column card grids on white / soft-canvas bands
-- Tinted (`#eaf6fc`) illustration blocks break up the feature flow
-- Nav container padded 0 36px horizontal, full-width sticky header
-### Whitespace Philosophy
-- **Calm and scannable**: JANDI uses generous whitespace and large bold headings so a whole company — not just designers — can scan the page instantly.
-- **Alternating bands**: White and `#fafafc` sections create gentle rhythm without color noise.
-- **Green as punctuation**: The only saturated color is the green; it appears as small eyebrows and CTAs, never as large fills, keeping the page airy.
-### Border Radius Scale
-- Small (4px): Eyebrow labels
-- Control (6px): Buttons, inputs
-- Card (16px): Feature cards, illustration blocks
-## 6. Depth & Elevation
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Page background, bands, inline text |
-| Card (Level 1) | `rgba(0,0,0,0.08) 0px 2px 16px 3px` | Feature cards, floating panels |
-**Shadow Philosophy**: JANDI's elevation system is intentionally singular. One soft, low-opacity, evenly-spread shadow (`rgba(0,0,0,0.08) 0px 2px 16px 3px`) lifts cards a few millimeters off the canvas — no multi-layer stacks, no colored shadows, no dramatic depth. The result reads as calm and trustworthy: a productivity tool that prioritizes clarity over spectacle. Separation between sections is achieved primarily through the alternating white / `#fafafc` bands rather than shadow, reserving the single shadow for genuine card surfaces.
-## 7. Do's and Don'ts
-### Do
-- Use JANDI Green (`#00c473`) as the single accent — CTAs, eyebrows, hover states
-- Set all type in Noto Sans; weight 700 for headlines, 400 for body, 500 for buttons
-- Use pure black (`#000000`) headings on white (`#ffffff`) / soft-white (`#fafafc`)
-- Step supporting text down into grays (`#a2a2a2`, `#c2c2c2`) so green stays the accent
-- Use the green eyebrow label (13px / 700) above section headings for wayfinding
-- Use 16px radius on cards, 6px on buttons and inputs
-- Apply the one soft card shadow (`rgba(0,0,0,0.08) 0px 2px 16px 3px`) for elevation
-- Use white pill buttons (`#ffffff` bg, `#041911` text) on green / dark hero backgrounds
-### Don't
-- Don't introduce a second accent color — green is the only saturated hue
-- Don't use corporate blue as a brand color — that's exactly what JANDI rejects
-- Don't use light heading weights — JANDI headlines are bold (700), confident and friendly
-- Don't stack multi-layer or colored shadows — one soft gray shadow only
-- Don't use pill / fully-round buttons — controls stay at 6px radius
-- Don't let supporting text compete with headings — keep it gray and recessive
-- Don't mix multiple typefaces — Noto Sans carries the entire system
-- Don't fill large areas with green — keep it to CTAs, eyebrows, and small accents
-## 8. Responsive Behavior
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <640px | Single column, reduced heading sizes, stacked cards, hamburger nav |
-| Tablet | 640-1024px | 2-column card grids, moderate padding |
-| Desktop | 1024-1280px | Full layout, multi-column feature grids |
-| Large Desktop | >1280px | Centered content with generous margins |
-### Touch Targets
-- Buttons use comfortable padding (7-12px vertical, 14-30px horizontal)
-- Nav links at 14px with adequate spacing
-- Green login CTA sized for thumb tapping
-### Collapsing Strategy
-- Hero: 56px display compresses toward ~32-40px on mobile, weight 700 maintained
-- Navigation: horizontal links + green CTA collapse to hamburger toggle
-- Feature cards: multi-column to 2-column to single stacked
-- Soft-canvas bands maintain full-width treatment, reduce internal padding
-- Section spacing compresses on smaller viewports while preserving band rhythm
-### Image Behavior
-- Tinted (`#eaf6fc`) illustration blocks maintain 16px radius across sizes
-- Card shadows persist at all viewport widths
-- Product screenshots scale within their card containers
-## 9. Agent Prompt Guide
-### Quick Color Reference
-- Primary CTA: JANDI Green (`#00c473`)
-- CTA text: White (`#ffffff`)
-- Background: White (`#ffffff`) / Soft (`#fafafc`)
-- Heading text: Black (`#000000`)
-- Body text: Gray (`#a2a2a2`)
-- Subhead text: Light Gray (`#c2c2c2`)
-- Tinted surface: Light Blue (`#eaf6fc`)
-- Dark button: Ink (`#333333`)
-- Hero pill text: Deepest Ink (`#041911`)
-- Footer: Footer Black (`#181818`)
-### Example Component Prompts
-- "Create a hero on a green/dark imagery background. Headline at 56px Noto Sans weight 700, line-height 80px, white text. White pill CTA (#ffffff bg, #041911 text, 6px radius, 12px 30px padding, 15px weight 500) labeled '회원가입'."
-- "Design a feature card: white background, 16px radius, shadow rgba(0,0,0,0.08) 0px 2px 16px 3px. Green eyebrow label above (13px Noto Sans weight 700, #00c473). Title at 24px weight 700 black, body at 14px weight 400 #a2a2a2."
-- "Build a top nav: white sticky header, JANDI logo left, links in Noto Sans 14px weight 400 #000000 (green #00c473 on hover), green login button right (#00c473 bg, white text, 6px radius, 7px 14px padding)."
-- "Create a tinted feature block: #eaf6fc background, 16px radius, on a #fafafc soft-canvas band. Bold 42px weight 700 black section heading with a green eyebrow above."
-### Iteration Guide
-1. Green (`#00c473`) is the only accent — apply it sparingly to CTAs, eyebrows, hovers
-2. Noto Sans weight 700 for headings, 400 for body, 500 for buttons — no other faces
-3. Headings are pure black (`#000000`); supporting text is gray (`#a2a2a2` / `#c2c2c2`)
-4. Cards: 16px radius + the single soft shadow; buttons / inputs: 6px radius
-5. Alternate white and `#fafafc` bands for section rhythm; use `#eaf6fc` for tinted blocks
-6. On green/dark hero, use white pill buttons with `#041911` text for contrast
-7. Keep depth flat — one shadow only, no colored or stacked shadows
----
-## 10. Voice & Tone
-JANDI's voice is warm, practical, and reassuring — the tone of a Korean SaaS that wants every team member, technical or not, to feel that work will go smoothly ("일이 술술 풀리는"). Copy is benefit-first and plain-spoken: it describes what the tool does for your team rather than boasting about technology. Korean is the primary language, friendly-formal (해요/합니다 register), with English product terms (AI, messenger, knowledge base) woven in naturally. CTAs are direct and low-pressure: "도입문의" (inquire about adoption), "회원가입" (sign up), "더 알아보기" (learn more).
-| Context | Tone |
-|---|---|
-| Hero headlines | Warm, benefit-led. "AI로 일이 술술 풀리는 협업툴 잔디." Confident, never hyped. |
-| Feature descriptions | Concrete capability + team benefit. Plain, scannable. |
-| CTAs | Direct, low-pressure imperatives. "도입문의", "회원가입", "더 알아보기". |
-| Customer stories | Trust-building, evidence-led. Real companies, real outcomes. |
-| Pricing / inquiry | Clear, helpful, B2B-appropriate. Invites contact, never pushy. |
-**Forbidden register.** Over-hyped superlatives, fear-based urgency, jargon-for-its-own-sake. JANDI sells calm productivity, not disruption.
-## 11. Brand Narrative
-JANDI (잔디) is a business-collaboration messenger developed by **TossLab (토스랩)**, a Korean SaaS company. The name means "grass / lawn" in Korean — a deliberate metaphor for a workspace where teams grow together, captured in the fresh JANDI Green (`#00c473`) that defines the brand. Positioned as a 협업툴 (collaboration tool) for Korean and Asian businesses, JANDI combines team messaging, topic-based chat rooms, file sharing, and — increasingly — AI features (the "Sprinkler" AI assistant, conversation summaries, knowledge base) to help whole organizations work more smoothly.
-JANDI's design rejects the cold institutional blue of legacy enterprise software in favor of an approachable, growth-coded green and friendly bold typography. The brand's promise is right in the hero: "일이 술술 풀리는" — work that flows easily. Everything in the visual system serves that promise: calm whitespace, one decisive accent color, bold-but-warm Noto Sans headlines, and restrained flat depth that keeps the focus on getting work done.
-## 12. Principles
-1. **One green, used sparingly.** JANDI Green (`#00c473`) is the entire accent system. Restraint makes it powerful — it appears as CTAs and eyebrows, never as large fills.
-2. **Bold-but-warm typography.** Weight-700 Noto Sans headlines are friendly and confident, not aggressive. Approachability is a feature.
-3. **Calm over spectacle.** One soft shadow, flat bands, generous whitespace. A productivity tool earns trust by being clear, not flashy.
-4. **Everyone is the user.** The whole company uses JANDI, so the design optimizes for instant scannability by non-designers — large headings, plain copy, gray supporting text.
-5. **Growth as metaphor.** The "lawn" name and green color encode the brand's belief that good tools help teams grow together.
-## 13. Personas
-*Personas below are fictional archetypes informed by publicly observable JANDI user segments (Korean SMB teams, operations leads, non-technical office staff), not individual people.*
-**Ji-woo Kang, 34, Seoul.** Operations manager at a 60-person Korean manufacturing company. Chose JANDI because the whole team — including older staff uncomfortable with foreign tools — could pick it up in a day. Values the Korean-language support and the calm, uncluttered interface.
-**Min-seok Park, 41, Busan.** Team lead at a mid-market logistics firm. Uses JANDI's topic-based chat rooms to keep projects organized and the AI summaries to catch up after meetings. Trusts the brand's evidence-led customer stories.
-**Hye-jin Lee, 29, Seongnam.** Marketing coordinator at a B2B SaaS startup. Appreciates that JANDI feels friendly and approachable rather than corporate, and that its green-accented design is pleasant to look at all day.
-## 14. States
-| State | Treatment |
-|---|---|
-| **Empty** | White canvas, single plain-Korean line in black (`#000000`) at 16px Noto Sans, one green (`#00c473`) CTA. Honest, calm, no clutter. |
-| **Loading** | Soft skeleton blocks in light gray at final dimensions; gentle shimmer. No spinner spectacle. |
-| **Error** | Inline message in plain Korean explaining what happened and the next step. Calm tone, no alarm. |
-| **Success** | Brief green (`#00c473`) confirmation, sentence-case past tense. No exclamation, no emoji. |
-| **Disabled** | Reduced opacity on surface and text together; green actions fade rather than switch to gray, preserving brand read. |
-## 15. Motion & Easing
-**Durations**:
-| Token | Value | Use |
-|---|---|---|
-| `motion-fast` | 120ms | Hover, focus, button press |
-| `motion-standard` | 200ms | Dropdowns, card reveals, section transitions |
-| `motion-slow` | 320ms | Page-level transitions, hero reveals |
-**Easings**:
-| Token | Curve | Use |
-|---|---|---|
-| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions |
-| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving panels, dropdowns |
-**Signature motions.**
-1. **Card hover lift.** Feature cards raise gently via the single soft shadow on hover using `motion-fast / ease-standard` — calm, never bouncy.
-2. **Green CTA hover.** Login / inquiry buttons shift hue subtly on hover at `motion-fast`. No scale jump, no overshoot.
-3. **Section reveal.** Feature bands fade up softly on scroll with `motion-standard / ease-enter`, matching the calm, trustworthy register.
-4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, transitions collapse to instant. The product stays fully functional; calm clarity is the priority over delight.
-<!--
-OmD v0.1 Sources — JANDI
-Tier 1 live inspect (2026-06-09): https://www.jandi.com via playwright getComputedStyle (live DOM).
-Harvested: JANDI Green #00c473 (rgb 0,196,115) login CTA bg + eyebrow + border; #333333 dark
-secondary button; #041911 deepest ink on white hero pills; #000000 headings; #ffffff / #fafafc
-canvas; #eaf6fc tinted card; #a2a2a2 body gray; #c2c2c2 subhead gray; #181818 footer; Noto Sans
-700 headlines (56px hero / 42px section / 24px sub) and 400 body; card shadow
-rgba(0,0,0,0.08) 0px 2px 16px 3px; 16px card radius / 6px control radius.
-Brand context (잔디 / JANDI by TossLab — Korean business-collaboration messenger): publicly
-documented; TossLab is the developer (https://www.tosslab.com). Personas (§13) are fictional
-archetypes informed by publicly observable JANDI user segments, not real individuals.
-Interpretive claims (green-as-growth, calm-over-spectacle) are editorial readings connecting
-JANDI's stated positioning to its observed design system.
--->