oh-my-design-cli 1.8.1 → 1.8.2

package/web/references/cybozu/DESIGN.md

@@ -0,0 +1,453 @@
+---
+id: cybozu
+name: Cybozu
+country: JP
+category: saas
+homepage: "https://cybozu.co.jp/"
+primary_color: "#139cb7"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=cybozu.co.jp&sz=128"
+verified: "2026-06-17"
+added: "2026-06-17"
+omd: "0.1"
+tokens:
+  source: live-extract
+  extracted: "2026-06-17"
+  note: "Two brand-owned surfaces. Corporate identity (cybozu.co.jp) = teal accent #139cb7 on #333333 ink — the canonical company color (primary). Design-led flagship product kintone (kintone.cybozu.co.jp) = yellow #ffbf00 on warm-brown ink #231200 — documented as a distinct product system (Stripe-style split), not a conflict."
+  colors:
+    primary: "#139cb7"
+    primary-light: "#64bdd4"
+    ink: "#333333"
+    ink-pure: "#000000"
+    muted: "#aaaaaa"
+    muted-slate: "#838d94"
+    slate-dark: "#31424e"
+    slate-darker: "#465560"
+    canvas: "#ffffff"
+    surface: "#f6f6f6"
+    hairline: "#e6e6e6"
+    on-primary: "#ffffff"
+    kintone-yellow: "#ffbf00"
+    kintone-amber: "#ffdb4f"
+    kintone-amber-deep: "#ff8f00"
+    kintone-ink: "#231200"
+    kintone-surface: "#f3f3f3"
+    kintone-tint: "#fff5e1"
+    kintone-card-border: "#d6d5d5"
+    kintone-dark: "#333333"
+  typography:
+    family: { corporate: "Hiragino Kaku Gothic Pro", product: "Roboto / Noto Sans JP", fallback: "Meiryo" }
+    corp-body:    { size: 16, weight: 400, lineHeight: 2.0, use: "Corporate body text, Hiragino, 32px line-height" }
+    corp-nav:     { size: 14, weight: 700, use: "Corporate nav links, bold Hiragino" }
+    corp-en-label: { size: 16, weight: 400, use: "English section labels in muted grey #aaaaaa" }
+    kintone-h2:   { size: 52, weight: 700, lineHeight: 1.45, tracking: 2.6, use: "kintone section heads, Roboto + Noto Sans JP, positive tracking" }
+    kintone-h2-alt: { size: 48, weight: 700, lineHeight: 1.40, tracking: 0.96, use: "kintone secondary heads" }
+    kintone-body: { size: 16, weight: 400, lineHeight: 1.69, use: "kintone body text, 27px line-height" }
+    chip:         { size: 12, weight: 700, use: "kintone yellow badge chips" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 62 }
+  rounded: { sm: 4, md: 8, lg: 10, full: 9999 }
+  shadow:
+    soft: "rgba(0,0,0,0.1) 0px 0px 6px 0px"
+    pickup: "rgba(0,0,0,0.17) 0px 1px 10px 0px"
+    none: "none"
+  components:
+    corp-nav-link: { type: tab, fg: "#333333", font: "14px / 700 Hiragino", active: "teal #139cb7 text on hover/active", use: "Corporate top-nav item" }
+    corp-text-link: { type: button, fg: "#139cb7", font: "16px / 400 Hiragino", use: "Corporate inline / list text link — the single teal action color" }
+    corp-icon-button: { type: button, bg: "#ffffff", fg: "#139cb7", radius: "9999px", shadow: "rgba(0,0,0,0.1) 0 0 6px", use: "Circular icon button, soft shadow, 40px" }
+    corp-card: { type: card, bg: "#ffffff", border: "1px solid #e6e6e6", use: "Corporate content card, hairline-separated on #f6f6f6 surface" }
+    kintone-cta-dark: { type: button, bg: "#333333", fg: "#ffffff", radius: "8px", padding: "5px 5px 5px 20px", height: "64px", font: "16px / 400 Roboto", use: "kintone primary CTA (30日間無料お試し) — dark fill with yellow accent" }
+    kintone-outline-button: { type: button, bg: "#ffffff", fg: "#231200", border: "1px solid #d6d5d5", radius: "8px", padding: "5px 5px 5px 20px", height: "66px", use: "kintone secondary outlined button" }
+    kintone-card: { type: card, bg: "#ffffff", fg: "#231200", border: "1px solid #d6d5d5", radius: "10px", padding: "24px", use: "kintone feature card, flat (no shadow)" }
+    kintone-badge: { type: badge, bg: "#ffbf00", fg: "#231200", radius: "8px", padding: "5px 8px 10px", font: "12px / 700", use: "kintone yellow tab/banner chip (さわってみよう！, 30日間無料！)" }
+  components_harvested: true
+---
+
+# Design System Inspiration of Cybozu
+
+## 1. Visual Theme & Atmosphere
+
+Cybozu (サイボウズ) is Japan's leading teamwork-software maker — the company behind kintone, Garoon, and Cybozu Office — and its design language splits cleanly into two brand-owned worlds that share one philosophy: clarity in service of teamwork. The corporate face at cybozu.co.jp is calm, editorial, and almost civic in tone: a pure white (`#ffffff`) canvas, dark grey body ink (`#333333`) set in the classic Japanese Hiragino Kaku Gothic Pro stack at a generous 16px / 32px line-height, and a single confident teal accent (`#139cb7`) that does almost all of the interactive work. On the homepage that teal appears 446 times as the link and call-to-action color, training the eye to read teal as "the next step." Light teal (`#64bdd4`) appears as a softer fill and border companion, and a muted grey (`#aaaaaa`) carries the bilingual English section labels ("News", "Products", "Seminar・Event") that sit quietly above each Japanese block.
+
+The flagship product, kintone (kintone.cybozu.co.jp), runs a deliberately different, design-led identity — Cybozu's open product-design org (the kintone Design System, the `kintone-ui-component` library, and the long-running Cybozu Product Design Magazine) lives here. kintone's signature is a warm, friendly amber-yellow (`#ffbf00`) paired with a soft brown-black ink (`#231200`) instead of pure black, set in a Roboto + Noto Sans JP stack. Its section headlines run large and bold (52px / weight 700) with an unusual *positive* letter-spacing (`+2.6px`) — a deliberate airy, approachable cadence that says "anyone can build this," very different from the tight tracking of Western SaaS. Yellow badge chips (`#ffbf00`) and amber decorative circles (`#ffdb4f`) punctuate the page with optimism.
+
+What unites both worlds is restraint with depth and a hairline-first separation strategy. The corporate site uses only the softest circular-button shadows (`rgba(0,0,0,0.1) 0px 0px 6px 0px`); kintone is essentially flat — feature cards are white with a thin `#d6d5d5` border at 8–10px radius and `box-shadow: none`. Sections separate by tint (`#f6f6f6` corporate, `#f3f3f3` / `#fff5e1` kintone) and `#e6e6e6` hairlines rather than elevation. The result is a system that reads as trustworthy and unintimidating — Japanese B2B software that takes accessibility and teamwork seriously enough to feel human.
+
+**Key Characteristics:**
+- Corporate teal (`#139cb7`) as the single canonical accent — links, CTAs, the "action" color
+- Hiragino Kaku Gothic Pro stack on the corporate site; Roboto + Noto Sans JP on kintone — real Japanese CJK font stacks captured live
+- Dark grey body ink (`#333333`) corporate / warm brown-black ink (`#231200`) on kintone — never harsh pure black for reading
+- kintone's friendly amber-yellow (`#ffbf00`) brand with amber-light (`#ffdb4f`) and deep amber (`#ff8f00`) accents
+- Positive letter-spacing on kintone headlines (`+2.6px` at 52px) — an approachable, airy cadence
+- Flat, hairline-separated cards (`1px solid #d6d5d5`, 8–10px radius, no shadow) on the product surface
+- Bilingual JP/EN section labels with muted-grey (`#aaaaaa`) English headers over Japanese content
+- Soft circular icon buttons with a faint `rgba(0,0,0,0.1)` shadow as the corporate site's only elevation
+
+## 2. Color Palette & Roles
+
+### Primary (Corporate Cybozu)
+- **Cybozu Teal** (`#139cb7`): The canonical company accent and `primary_color`. Link color, text-link CTAs, circular-icon-button glyphs — the single saturated "action" color across cybozu.co.jp (446 occurrences live).
+- **Teal Light** (`#64bdd4`): Softer companion teal used for fills, accent borders, and decorative blocks.
+- **Ink Grey** (`#333333`): Primary body and heading text on the corporate site. A dark neutral grey, never pure black for reading.
+- **Pure White** (`#ffffff`): Page background, card surfaces, text on teal/dark.
+
+### Neutral & Surface (Corporate)
+- **Surface Grey** (`#f6f6f6`): Tinted section background for alternating content bands.
+- **Hairline** (`#e6e6e6`): Thin borders, dividers, and card outlines — the primary separation device.
+- **Muted Grey** (`#aaaaaa`): Bilingual English section labels ("News", "Products"), low-emphasis captions.
+- **Muted Slate** (`#838d94`): Tertiary text and fine print.
+- **Slate Dark** (`#31424e`): Dark accent blocks and footer-adjacent panels.
+- **Slate Darker** (`#465560`): Darkest neutral for accent borders and dark surfaces.
+- **Pure Black** (`#000000`): Occasional maximum-contrast text.
+
+### Product Identity (kintone)
+- **kintone Yellow** (`#ffbf00`): kintone's flagship brand color — yellow badge chips, banners, decorative circles, the optimistic product signature.
+- **kintone Amber** (`#ffdb4f`): Lighter amber for decorative circles and soft highlights.
+- **kintone Amber Deep** (`#ff8f00`): Deeper amber accent for emphasis moments.
+- **kintone Ink** (`#231200`): Warm brown-black — kintone's body and heading text instead of pure black, giving the product a friendly warmth.
+- **kintone Surface** (`#f3f3f3`): Neutral grey product section background.
+- **kintone Tint** (`#fff5e1`): Pale warm-cream tint band — the amber brand softened to a surface.
+- **kintone Card Border** (`#d6d5d5`): Hairline border for kintone's flat outlined cards and buttons.
+- **kintone Dark** (`#333333`): Dark fill for kintone's primary CTA buttons (yellow/white label sits on this dark surface).
+
+## 3. Typography Rules
+
+### Font Family
+- **Corporate**: `Hiragino Kaku Gothic Pro` (`"ヒラギノ角ゴ Pro W3"`, `"Hiragino Kaku Gothic Pro"`) with `Meiryo` / `メイリオ` / `"ＭＳ Ｐゴシック"` fallbacks — the classic Japanese corporate gothic stack, used across cybozu.co.jp.
+- **Product (kintone)**: `Roboto`, `"Noto Sans JP"`, `"Helvetica Neue"`, `Arial`, `"Hiragino Kaku Gothic ProN"`, `"Hiragino Sans"`, `Meiryo` — a Latin-first/CJK-paired stack used across kintone.cybozu.co.jp.
+
+### Hierarchy
+
+| Surface | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|---------|------|------|------|--------|-------------|----------------|-------|
+| Corporate | Body | Hiragino | 16px | 400 | 32px (2.0) | normal | Generous reading rhythm |
+| Corporate | Nav link | Hiragino | 14px | 700 | — | normal | Bold top-nav items |
+| Corporate | EN section label | Hiragino | 16px | 400 | 32px | normal | Muted grey `#aaaaaa` |
+| kintone | Section heading | Roboto + Noto Sans JP | 52px | 700 | 75.4px (1.45) | +2.6px | Positive tracking, airy |
+| kintone | Secondary heading | Roboto + Noto Sans JP | 48px | 700 | 67.2px (1.40) | +0.96px | Approachable cadence |
+| kintone | Body | Roboto + Noto Sans JP | 16px | 400 | 27px (1.69) | normal | Standard reading text |
+| kintone | Badge chip | Roboto + Noto Sans JP | 12px | 700 | — | normal | Yellow chip label |
+
+### Principles
+- **Two stacks, two jobs**: Hiragino Kaku Gothic Pro is the corporate/institutional voice; Roboto + Noto Sans JP is the product/approachable voice. They never swap surfaces.
+- **Positive tracking as friendliness**: kintone's headlines use *positive* letter-spacing (`+2.6px` at 52px) — the opposite of tight Western SaaS tracking — to feel open and unintimidating.
+- **Bold where it labels, regular where it reads**: corporate nav is weight 700, body is weight 400; kintone heads are 700, body is 400. Weight, not color, carries most hierarchy.
+- **Warm ink over black**: corporate uses `#333333`, kintone uses `#231200` — never pure black for sustained reading.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Corporate Text Link (Primary action)**
+- Text: `#139cb7`
+- Font: 16px Hiragino weight 400
+- Use: Corporate inline / list text link ("ニュース 一覧", news items) — the single teal action color
+
+**Corporate Circular Icon Button**
+- Background: `#ffffff`
+- Text: `#139cb7`
+- Radius: 9999px (50%)
+- Height: 40px
+- Shadow: `rgba(0,0,0,0.1) 0px 0px 6px 0px`
+- Use: Circular icon/navigation buttons on the corporate hero
+
+**kintone Primary CTA (Dark)**
+- Background: `#333333`
+- Text: `#ffffff`
+- Radius: 8px
+- Padding: 5px 5px 5px 20px
+- Height: 64px
+- Font: 16px Roboto weight 400
+- Use: kintone primary call-to-action ("30日間無料お試し", "アプリ作成体験") — dark fill carrying a yellow/white accent
+
+**kintone Secondary (Outlined)**
+- Background: `#ffffff`
+- Text: `#231200`
+- Border: 1px solid `#d6d5d5`
+- Radius: 8px
+- Padding: 5px 5px 5px 20px
+- Height: 66px
+- Font: 16px Roboto weight 400
+- Use: kintone secondary buttons ("セミナー", "kintoneを知る")
+
+**kintone Compact Outlined**
+- Background: `#ffffff`
+- Text: `#231200`
+- Border: 1px solid `#d6d5d5`
+- Radius: 4px
+- Padding: 2px 2px 2px 12px
+- Height: 42px
+- Use: kintone compact link buttons ("動画をみる", "資料をみる")
+
+### Cards & Containers
+
+**Corporate Content Card**
+- Background: `#ffffff`
+- Border: 1px solid `#e6e6e6`
+- Use: Corporate content card, hairline-separated on the `#f6f6f6` surface
+
+**kintone Feature Card**
+- Background: `#ffffff`
+- Text: `#231200`
+- Border: 1px solid `#d6d5d5`
+- Radius: 10px
+- Padding: 24px
+- Use: kintone feature/use-case card — flat, no shadow ("顧客・案件管理", "脱エクセル")
+
+### Badges
+
+**kintone Yellow Chip**
+- Background: `#ffbf00`
+- Text: `#231200`
+- Radius: 8px
+- Padding: 5px 8px 10px
+- Font: 12px weight 700
+- Use: kintone tab/banner badge chips ("さわってみよう！", "30日間無料！", "個人情報不要！")
+
+### Navigation
+- Background: `#ffffff`
+- Text: `#333333`
+- Font: 14px Hiragino weight 700
+- Height: 56px header
+- Padding: 18px 0px per item
+- Active/Hover: teal `#139cb7` text
+- Use: Corporate top horizontal nav ("製品情報", "ニュース", "セミナー・イベント", "企業・IR")
+
+### Inputs
+- Background: `#ffffff`
+- Border: 1px solid `#d6d5d5`
+- Radius: 8px
+- Text: `#231200`
+- Use: kintone form fields (search, trial signup) — flat outlined input
+
+---
+
+**Verified:** 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect, two brand-owned surfaces)
+**Tier 1 sources:** https://cybozu.co.jp/ (corporate, teal identity, live DOM) ; https://kintone.cybozu.co.jp/ (kintone product, yellow identity, second surface, live DOM) ; https://ui-component.kintone.dev/ (kintone UI Component docs) ; https://github.com/kintone-labs/kintone-ui-component (open component library)
+**Tier 2 sources:** getdesign.md/cybozu — not listed (JP B2B under-covered) ; styles.refero.design/?q=cybozu — no canonical style page surfaced
+**Conflicts unresolved:** none — corporate teal `#139cb7` vs kintone yellow `#ffbf00` documented as an intentional two-system split (corporate identity vs design-led product), not a conflict
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4px / 8px
+- Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 62px
+- Notable: kintone feature cards use a generous 24px internal padding; corporate sections breathe with ~62px top padding on each block
+
+### Grid & Container
+- Corporate: centered single-column news/products portal with bilingual section labels; content bands alternate white and `#f6f6f6`
+- kintone: large bold section headings anchor each band; feature/use-case cards arranged in multi-column grids (顧客・案件管理, 脱エクセル, ワークフロー, etc.)
+- Cards use 8–10px radius and group related services/use-cases
+
+### Whitespace Philosophy
+- **Editorial calm**: the corporate site reads like a civic publication — generous vertical rhythm, quiet bilingual labels, never a hard sell
+- **Flat segmentation**: sections separate by tint (`#f6f6f6`, `#f3f3f3`, `#fff5e1`) and `#e6e6e6` / `#d6d5d5` hairlines, not by elevation
+- **Approachable density**: kintone's airy headlines + positive tracking keep an information-rich B2B product feeling welcoming
+
+### Border Radius Scale
+- Small (4px): compact kintone link buttons
+- Medium (8px): kintone cards, primary/secondary buttons, yellow chips
+- Large (10px): kintone feature cards — the workhorse
+- Full (9999px / 50%): corporate circular icon buttons
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | kintone cards/buttons, corporate body, most surfaces |
+| Tint (Level 1) | `#f6f6f6` / `#f3f3f3` / `#fff5e1` background shift | Section separation without elevation |
+| Hairline (Level 2) | `1px solid #e6e6e6` (corp) / `1px solid #d6d5d5` (kintone) | Card outlines, dividers |
+| Soft (Level 3) | `rgba(0,0,0,0.1) 0px 0px 6px 0px` | Corporate circular icon buttons only |
+| Pickup (Level 3b) | `rgba(0,0,0,0.17) 0px 1px 10px 0px` | Featured circular "PickUp" button |
+
+**Shadow Philosophy**: Cybozu is a near-flat system. Live inspection found `box-shadow: none` across kintone's hero, feature cards, and outlined buttons; the corporate site uses elevation only on small circular icon buttons (`rgba(0,0,0,0.1) 0px 0px 6px 0px`) and one featured "PickUp" button (`rgba(0,0,0,0.17) 0px 1px 10px 0px`). Depth and grouping come from flat tinted surfaces and thin hairlines (`#e6e6e6`, `#d6d5d5`). When emphasis is needed, the system reaches for color — corporate teal (`#139cb7`) or kintone yellow (`#ffbf00`) — never a heavy card stack. This keeps Japanese B2B software feeling clean, fast, and approachable rather than institutionally heavy.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use corporate teal (`#139cb7`) as the single action color on Cybozu-corporate surfaces — keep it the link/CTA signal
+- Use the Hiragino Kaku Gothic Pro stack for corporate surfaces and Roboto + Noto Sans JP for kintone
+- Use kintone yellow (`#ffbf00`) for the product's brand chips, banners, and decorative accents
+- Use warm ink (`#333333` corporate, `#231200` kintone) instead of pure black for reading text
+- Separate sections with flat tints (`#f6f6f6`, `#f3f3f3`, `#fff5e1`) and `#e6e6e6` / `#d6d5d5` hairlines, not shadows
+- Keep kintone cards flat with a 10px radius and a thin `#d6d5d5` border
+- Use positive letter-spacing on kintone headlines (`+2.6px` at 52px) for an approachable cadence
+- Pair English section labels in muted grey (`#aaaaaa`) above Japanese content on corporate pages
+
+### Don't
+- Mix the corporate teal and the kintone yellow on the same surface — they are two distinct brand identities
+- Use heavy drop shadows for elevation — Cybozu is near-flat; reserve the soft `rgba(0,0,0,0.1)` shadow for circular icon buttons
+- Use pure black (`#000000`) for body text — use `#333333` (corporate) or `#231200` (kintone)
+- Use tight negative tracking on kintone headlines — kintone tracks *positive* for friendliness
+- Set corporate nav links in a light weight — corporate nav is weight 700
+- Spread teal across many corporate elements — it dilutes the single-action signal
+- Use Hiragino on kintone or Roboto/Noto on the corporate site — the two stacks stay on their own surfaces
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, headings compress, feature cards stack |
+| Tablet | 640-1024px | 2-column feature grids, moderate padding |
+| Desktop | 1024-1440px | Full layout, multi-column kintone use-case grids, centered corporate portal |
+
+### Touch Targets
+- kintone primary CTA at 64px height — an unmistakable target
+- kintone secondary outlined buttons at 66px height with generous left padding
+- Corporate nav items within the 56px header; circular icon buttons at 40px
+
+### Collapsing Strategy
+- Corporate: bilingual section bands maintain full-width treatment; news/products lists stack
+- kintone: 52px headlines scale down on mobile, weight 700 and positive tracking maintained
+- kintone feature-card grids collapse multi-column → 2-up → single stacked
+- Tinted/white alternating sections keep full-width treatment
+
+### Image Behavior
+- kintone product screenshots and illustrations carry no shadow at any size, consistent with the flat system
+- Cards maintain 8–10px radius across breakpoints
+- Corporate circular buttons keep their soft `rgba(0,0,0,0.1)` shadow
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Corporate primary action: Cybozu Teal (`#139cb7`)
+- Corporate teal light: (`#64bdd4`)
+- Corporate body text: Ink Grey (`#333333`)
+- Corporate surface: (`#f6f6f6`); hairline (`#e6e6e6`)
+- Corporate muted label: (`#aaaaaa`)
+- Background: Pure White (`#ffffff`)
+- kintone brand: Yellow (`#ffbf00`), amber (`#ffdb4f`), deep amber (`#ff8f00`)
+- kintone ink: warm brown-black (`#231200`)
+- kintone surface/tint: (`#f3f3f3`) / (`#fff5e1`); card border (`#d6d5d5`)
+
+### Example Component Prompts
+- "Create a Cybozu corporate section on white. Body 16px Hiragino Kaku Gothic Pro, color #333333, line-height 32px. English label 'News' in muted grey #aaaaaa above the Japanese block. Inline text links and CTAs in teal #139cb7. A circular icon button: white bg, #139cb7 glyph, 50% radius, 40px, box-shadow rgba(0,0,0,0.1) 0px 0px 6px 0px."
+- "Design a kintone hero. Section heading 52px Roboto + Noto Sans JP weight 700, line-height 75.4px, letter-spacing +2.6px, color #231200. Primary CTA: #333333 background, white text, 8px radius, 5px 5px 5px 20px padding, 64px height — '30日間無料お試し'. A yellow badge chip above it: #ffbf00 background, #231200 text, 8px radius, 12px weight 700."
+- "Build a kintone feature card: white background, 1px solid #d6d5d5 border, 10px radius, 24px padding, no shadow. Title in #231200. Arrange in a multi-column use-case grid."
+- "Create a tinted band: #fff5e1 (kintone) or #f6f6f6 (corporate) full-width. Cards inside use white #ffffff with hairline borders (#d6d5d5 kintone / #e6e6e6 corporate)."
+
+### Iteration Guide
+1. Pick the surface first: corporate (teal #139cb7 + Hiragino + #333333) vs kintone product (yellow #ffbf00 + Roboto/Noto + #231200) — never mix them
+2. Teal is the single corporate action color; don't spread it
+3. kintone headlines track *positive* (+2.6px), weight 700 — approachable, not tight
+4. Near-flat: separate with #f6f6f6/#f3f3f3/#fff5e1 tints and #e6e6e6/#d6d5d5 hairlines
+5. Reserve soft shadow (rgba(0,0,0,0.1) 0 0 6px) for corporate circular icon buttons only
+6. Warm ink everywhere — #333333 (corporate) / #231200 (kintone), never #000000 for reading
+7. kintone cards: 10px radius, 1px #d6d5d5 border, no shadow
+
+---
+
+## 10. Voice & Tone
+
+Cybozu's voice is **calm, civic, and teamwork-first** — a Japanese B2B software maker that frames technology as a way to build "チームワークあふれる社会" (a society overflowing with teamwork) rather than as a competitive weapon. The corporate site reads like a thoughtful public-facing publication: bilingual section labels, measured news entries, no hype. kintone shifts register toward warm and democratizing — its tagline "みんな、つくれる。" ("Everyone can build.") and chips like "さわってみよう！" ("Give it a try!") invite the non-engineer to participate, decoding "no-code / low-code" into something friendly.
+
+| Context | Tone |
+|---|---|
+| Corporate headlines | Civic, mission-framed. Teamwork and social contribution over product features. |
+| Corporate news / IR | Measured, factual, dated. Reads like a public record. |
+| kintone product copy | Warm, democratizing. "みんな、つくれる。" — anyone can build. |
+| kintone CTAs | Low-pressure, concrete. "30日間無料お試し", "さくっと体験", "個人情報不要！". |
+| Badge chips | Encouraging, exclamation-friendly (kintone only). "さわってみよう！", "30日間無料！". |
+| Product Design Magazine | Reflective, transparent — designers narrating their process in the open. |
+
+**Voice samples (verbatim from live surfaces):**
+- "サイボウズ株式会社" — corporate page title (institutional register). *(verified live 2026-06-17)*
+- "kintone（キントーン） | みんな、つくれる。業務アプリがつくれるサイボウズのノーコード・ローコードツール" — kintone page title (democratizing promise). *(verified live 2026-06-17)*
+- "30日間無料お試し" / "個人情報不要！" — kintone trial CTAs (low-pressure, concrete). *(verified live 2026-06-17)*
+
+**Forbidden register**: aggressive sales urgency, fear-based B2B FUD, undefined enterprise jargon, anything that makes "no-code" sound exclusive or intimidating.
+
+## 11. Brand Narrative
+
+Cybozu (サイボウズ) was founded in **1997 in Matsuyama, Ehime** by Yoshihisa Aono and co-founders, and grew into one of Japan's most influential groupware companies — the maker of Cybozu Office, Garoon, and, since 2011, kintone. Its corporate mission, stated plainly across cybozu.co.jp, is to build "チームワークあふれる社会を創る" (to create a society overflowing with teamwork). That mission is unusually load-bearing: Cybozu is also well known in Japan for pioneering flexible work styles ("働き方改革"), and it frames its software not as productivity tooling but as social infrastructure for collaboration.
+
+kintone is where Cybozu's design-led culture is most visible. The product reframes business-application building — historically the domain of engineers and consultants — as something "みんな、つくれる" (everyone can build). Around it sits an open product-design organization: the kintone Design System (Figma + the `kintone-ui-component` npm library + Storybook docs at ui-component.kintone.dev), and the long-running Cybozu Product Design Magazine on note.com/cybozu_design, where designers publish their process, organization changes, and research in the open.
+
+What Cybozu's design refuses, visible on the surface: the heavy, intimidating chrome of legacy enterprise software (no shadow-stacked dashboards, no corporate navy-and-grey severity) and the hard-sell urgency of Western SaaS marketing. What it embraces: a calm civic corporate voice in teal (`#139cb7`), a warm and democratizing product voice in yellow (`#ffbf00`), bilingual accessibility, flat hairline-separated layouts, and a transparent, published design practice.
+
+## 12. Principles
+
+1. **Teamwork is the product.** Cybozu's stated mission is a society overflowing with teamwork; software is the means. *UI implication:* favor clarity and collaboration cues over feature density; the interface should never feel like a competition.
+2. **Everyone can build.** kintone's "みんな、つくれる" democratizes app-building beyond engineers. *UI implication:* decode jargon into friendly tools; positive headline tracking and warm yellow make the product feel inviting, not technical.
+3. **Two voices, one philosophy.** A civic corporate teal and a warm product yellow are kept distinct. *UI implication:* never mix the teal and yellow systems on one surface — each carries its own register.
+4. **Flat and human.** Near-shadowless, hairline-separated layouts keep B2B software approachable. *UI implication:* separate with tint and hairlines; reserve shadow for the smallest interactive accents.
+5. **Design in the open.** The kintone Design System and Product Design Magazine make the practice transparent. *UI implication:* components are documented, reusable, and consistent — the system is a shared, published artifact, not tribal knowledge.
+
+## 13. Personas
+
+*Personas below are fictional archetypes informed by publicly observable Cybozu / kintone user segments (Japanese SMB operations staff, non-engineer "citizen developers", enterprise IT, and Cybozu's own product designers), not individual people.*
+
+**田中美咲, 38, 松山.** Operations lead at a regional manufacturer. Not an engineer, but builds her own 案件管理 (case-management) apps in kintone because "みんな、つくれる" turned out to be literally true. Values that the cards and forms feel friendly rather than technical.
+
+**佐藤健, 45, 東京.** Corporate IT manager evaluating Garoon and kintone for a 300-person company. Reads cybozu.co.jp's calm, factual IR and news pages and trusts the civic, non-hype tone. Cares that the design feels stable and accessible, not flashy.
+
+**鈴木あみ, 29, 大阪.** A product designer at Cybozu contributing to the kintone Design System and writing for the Product Design Magazine. Believes design should be published and shared; cares about the `kintone-ui-component` library staying consistent across the product.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no apps / no records yet)** | White canvas. Single warm-ink line (`#231200` kintone / `#333333` corporate) explaining nothing exists yet, with one friendly CTA to create or try. No intimidating illustration clutter. |
+| **Empty (search no results)** | Muted grey (`#aaaaaa`) single line: nothing matched, plus a path to adjust criteria. Calm and honest. |
+| **Loading (records/cards fetch)** | Skeleton cards on the tinted surface (`#f3f3f3` / `#f6f6f6`) at final 10px-radius dimensions. Flat pulse — no shadow shimmer, consistent with the near-flat system. |
+| **Loading (in-place refresh)** | Subtle progress within the affected area; previous content stays visible. Never block the page. |
+| **Error (action failed)** | Inline message in warm ink with a plain-language explanation and a retry. No generic "エラーが発生しました" alone — states what to do next. |
+| **Error (form validation)** | Field-level message below the input (1px `#d6d5d5` outlined field); describes what's valid, not just "必須". |
+| **Success (saved / submitted)** | Brief inline confirmation in a calm tone; next-step detail linked immediately below. kintone may use a yellow (`#ffbf00`) accent chip; no celebratory excess. |
+| **Skeleton** | Tinted blocks (`#f3f3f3`) at final dimensions, 10px radius, flat pulse. |
+| **Disabled** | Reduced-opacity surface with muted grey (`#aaaaaa`) text; teal/yellow actions fade rather than turn grey to preserve brand read. |
+
+## 15. Motion & Easing
+
+**Durations**:
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-fast` | 120ms | Hover, link/button press, focus |
+| `motion-standard` | 200ms | Card/section reveal, dropdown, sheet |
+| `motion-slow` | 320ms | Page-level transitions, hero reveal |
+
+**Easings**:
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — cards, dropdowns, sheets |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
+| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions |
+
+**Motion rules**: Motion is functional and quiet — consistent with the calm, flat aesthetic. Corporate teal links and kintone buttons respond to press with a subtle color/opacity shift; cards fade-in from below at `motion-standard / ease-enter`. No bounce or spring — Japanese B2B teamwork software signals steadiness and trust, not playfulness. Under `prefers-reduced-motion: reduce`, all transitions collapse to instant; the product remains fully functional.
+
+<!--
+OmD v0.1 Sources — Philosophy Layer (sections 10–15)
+
+Tier 1 live inspect (2026-06-17) via playwright getComputedStyle on two brand-owned surfaces:
+- https://cybozu.co.jp/ — corporate: teal #139cb7 accent (446× link color), #333333 ink,
+  Hiragino Kaku Gothic Pro stack, bilingual EN labels in #aaaaaa, circular icon buttons
+  with rgba(0,0,0,0.1) 0 0 6px shadow, #e6e6e6 hairlines, #f6f6f6 surface.
+- https://kintone.cybozu.co.jp/ — kintone product: yellow #ffbf00 / amber #ffdb4f / deep
+  amber #ff8f00, warm ink #231200, Roboto + Noto Sans JP, H2 52px/700 letter-spacing +2.6px,
+  dark #333333 CTA at 8px radius, flat #d6d5d5 outlined cards at 10px radius, box-shadow none.
+- https://ui-component.kintone.dev/ + https://github.com/kintone-labs/kintone-ui-component —
+  confirm the open kintone UI Component library (`kintone-ui-component`, MIT, v1.25.0). The
+  docs-site chrome is generic Docusaurus and is NOT cited for tokens.
+
+Token-level claims (§1-9) are sourced from this live inspection. Full raw computed-style
+samples are recorded in web/references/cybozu/.verification.md (Proof block).
+
+Voice samples (§10) are verbatim page titles / CTA labels from the live surfaces.
+
+Brand narrative (§11): Cybozu founded 1997 in Matsuyama, Ehime (Yoshihisa Aono); mission
+"チームワークあふれる社会を創る"; kintone since 2011; open product-design org (kintone Design
+System, kintone-ui-component, Cybozu Product Design Magazine on note.com/cybozu_design).
+Founding-year/location and mission phrasing are widely documented public facts about the
+company; the mission and product taglines ("みんな、つくれる") are confirmed on the live surfaces.
+
+Personas (§13) are fictional archetypes informed by publicly observable Cybozu/kintone user
+segments (Japanese SMB operations staff, non-engineer citizen developers, enterprise IT,
+Cybozu's own product designers). Names are illustrative; they do not refer to real people.
+
+Interpretive claims (e.g., "two voices, one philosophy", "flat and human as a rejection of
+legacy enterprise chrome", "positive tracking as friendliness") are editorial readings
+connecting Cybozu's observed design to its stated mission, not directly sourced statements.
+-->