The official visual identity system for edamame — the Kintone partner in the Philippines. Codifies the layout grammar and pod-coherent patterns introduced in April 2026.
Our logo combines a pod icon with the "edamame" wordmark. The pod holds three beans — the center bean is gold, representing the core value we deliver. The sides are green, representing growth. The whole mark is the company's design grammar.
A grounded, natural palette anchored by forest green and warm gold. Kintone red is reserved exclusively for CTA buttons — never text, never decoration.
Two display/body faces for English, one for Japanese, one for data. DM Serif Display for editorial impact. DM Sans for body & UI. Noto Sans JP for Japanese. JetBrains Mono for numbers, labels, and technical specs.
Hero headlines, section titles, statistics, pull quotes. Italic variant for accent words inside a headline. Never for body text. Use sparingly for maximum editorial impact.
Paragraph body text. A small firm in Pasig serving 2,400+ users across fifty enterprise clients — including ORIX Metro, Daikin, and Quipper.
Paragraphs, navigation, buttons, labels, captions. Weights: 400 body, 500 emphasis, 600 labels/nav/buttons, 700 headings. Italic 400 reserved for voice moments.
日本語本文。パシグに拠点を置く小さな会社が、50社のエンタープライズ顧客で2,400名以上のユーザーを支えています。
All Japanese text, body & display. Line-height 1.8 for readability. Pairs with DM Sans for mixed EN/JP UI. Never use "type-sample type-sample--mono"> Data & labels · JetBrains Mono
№ 01 · DEPLOYMENT · 2026-04-20
New in v2.0. Stats, live data values, section numbers (№ 01/02/03), uppercase labels, timestamps, technical metadata. Sizes 10-14px for labels, 22-28px for hero data values. Weights 400-600.
| Use | Face | Size | Weight |
|---|---|---|---|
| Hero headline | DM Serif Display | clamp(44px, 7vw, 88px) | 400 |
| Section title | DM Serif Display | clamp(32px, 5vw, 54px) | 400 |
| Subsection / card title | DM Serif Display | 22-28px | 400 |
| Lede / sub-headline | DM Serif Display italic | 18-22px | 400 italic |
| Body paragraph | DM Sans | 15-17px | 400 |
| Nav links / buttons | DM Sans | 13-14px | 500-600 |
| Section number (№ 01) | JetBrains Mono | 11-12px | 500 |
| Uppercase label / tag | JetBrains Mono | 10-11px (0.18-0.24em tracking) | 500-600 |
| Data value — hero | DM Serif Display | 28-40px | 400 |
| Data value — inline | JetBrains Mono or Serif | 14-22px | 400-500 |
| JA body | Noto Sans JP | 15-17px (line-height 1.8) | 400 |
We write like a sharp consultant who respects your time — direct, specific, and grounded in Philippine business reality.
Direct. "Kintone starts from ₱1,000/user/month." Not "pricing varies based on your needs."
Specific. We name competitors, show real peso amounts, cite actual deployment timelines.
Honest. We say when Kintone isn't the right fit. We compare fairly.
Local. Philippine pesos, Philippine business context, Philippine internet reality.
Hedge. "We believe we can potentially help transform..." → Just say what we do.
Buzzword. "Synergize your digital ecosystem" → "Build the apps your team actually needs."
Oversell. We position Kintone as one strong option among many — more credible, converts better.
Ignore context. No generic SaaS copy. Everything connects to PH business reality.
| Context | Use |
|---|---|
| Brand name in copy | edamame (always lowercase) |
| Legal / contracts / copyright | Edamame Inc. (formal entity name) |
| Sentence-start brand mention | Restructure: "Our team provides…" not ". edamame provides…" |
| English body text | Conversational, PH-market specific. DM Sans. |
| Japanese body text | Native-level business Japanese. No unnecessary katakana. Noto Sans JP. |
| JA CTA text | Action-oriented: "無料で相談する" not "コンサルテーションを予約する" |
| Pricing | Always PHP: "₱1,000/user/month (5-user minimum)" |
| Stats in copy | JetBrains Mono inline for exact figures: 2,443 users, ₱1.87M/mo |
| Bylines | "By Tom Arai, edamame" |
| Section numbers | № 01, № 02, № 03 (not "Section 1" or "Part One") |
Every page on edamame-jp.com uses one of three sanctioned layout modes. Each expresses the brand differently. Pick the one that matches the content's purpose — never invent a fourth.
Within one page, stick to a single mode. Never blend. Exception: Data Atelier may borrow Pod & Bean's three-card pricing tier layout (pod-shaped radii) as its final section.
Design elements that echo the logo's geometry. Use these to make any page feel unmistakably edamame, regardless of which layout mode it's in.
The center-bean radius uses elliptical syntax (slash) for a pod shape. Use for primary/featured cards only. Side-bean radii for flanking elements. Gentle echo (40 12 40 12) as default for blog cards and generic tiles.
The pod-and-three-beans compressed into a 120×24 horizontal divider. Use between major sections in Field Notes mode, between hero and masthead, and as an end-of-article rule. Centered with 48px margin above/below.
When listing three services, products, pricing tiers, or practices, always map them to the logo's bean order:
| Position | Color | Role | Example |
|---|---|---|---|
| № 01 · Left | Sage green | Foundation / entry | Custom Apps · Starter tier · Discovery phase |
| № 02 · Center | Gold — premium | Core value / most-chosen | KinPlug Suite · Enterprise tier · Most-chosen plan |
| № 03 · Right | Sage green | Extension / scale | AI Integration · Retainer tier · Ongoing support |
The center position is always the premium/most-chosen. Never put a cheaper or less-flagship option in the center — it breaks the symbolism of the mark.
Large pod SVGs at 6% opacity, rotated 15-30°, positioned near section edges (top-right, mid-left). Adds depth without competing with content. Pod & Bean mode only.
Consistent components used across every page. Cream backgrounds, pill-shaped CTAs, generous whitespace, restrained color.
Primary CTA uses Kintone red gradient. Ghost button uses sage green border. Inline link variant uses sage green arrow. All pill-shaped (border-radius: 100px). Min padding: 12px 24px.
Sticky cream nav (rgba(250,250,248,0.95) with backdrop-filter: blur(12-14px)). Active link in sage green with optional gold dot indicator below. Same nav on every page. Book demo CTA always in the right slot.
Ink background, gold border, 2px top-gradient rule (sage→gold→sage). Labels in JetBrains Mono uppercase. Values in DM Serif Display. "● LIVE" pulses. Wire to real endpoints where possible.
Left: standard card (Field Notes / Data Atelier mode) — 16px radius, 1px border, white/cream bg, 3px hover lift. Right: pod-echo card (Pod & Bean mode) — asymmetric 40px 12px 40px 12px radius, dot marker in top-left corner. Tags in JetBrains Mono uppercase. Titles in DM Serif Display.
| Token | Value | Use |
|---|---|---|
| Section padding (Y) | clamp(48px, 8vw, 96px) | All major sections |
| Container max-width | 1180px | Content rows |
| Container (narrow) | 840px | Long-form prose, FAQ |
| Card grid gap | 20-24px | Standard grid spacing |
| Border radius — cards | 16px (standard) / 40 12 40 12 (pod) | Cards, sections |
| Border radius — buttons | 100px | All CTAs, pills, tags |
| Button padding | 12-14px 22-28px | Primary & ghost |
The mandatory structural elements of the homepage. Every version going forward must include all of these. Added after v2.0 stripped key SEO & conversion elements and organic traffic declined.
/blog/ — always full /kintone-philippines/{lang}/blog/{slug}/.Violating any of these during a redesign requires explicit approval in the commit message. No exceptions — the v1→v2 regression cost measurable organic traffic.
Rules for how blog articles, case studies, and editorial content surface across the site. Protects internal link graph and search discovery.
| Context | Correct path | Never |
|---|---|---|
| EN blog index | /kintone-philippines/en/blog/ | /blog/ · /en/blog/ |
| JA blog index | /kintone-philippines/ja/blog/ | /blog/ · /ja/blog/ |
| EN article | /kintone-philippines/en/blog/{slug}/ | Flattened paths |
| Calendly | https://calendly.com/kintoneph/freekintoneappconsultation | Short/redirected URLs |
Minimum 6 article links from homepage. At least 3 in a "Field Notes" / "Knowledge Base" section with card treatment. Additional 3+ contextually embedded in comparison table, FAQ answers, or as inline links in service descriptions.
| Element | Spec |
|---|---|
| Category tag | JetBrains Mono, 10-11px, uppercase, 0.18em tracking, sage green |
| Read time | Mono, same spec, appended with " · 12 MIN" after category |
| Title | DM Serif Display, 20-24px, 1.2 line-height, never italic |
| Deck | DM Sans, 14px, 1.55 line-height, muted color |
| Read CTA | "Read article →" or "Read the note →" — sage green, 500 weight |
| Hover state | 3px upward lift + shadow + border color transition to sage |
FAQPage JSON-LD required on homepage. BlogPosting JSON-LD required on every article. Organization schema in root sitemap. Never skip structured data — it's why our FAQ snippets rank.
Kintone itself starts at ₱1,000/user/month (5-user minimum — effectively ₱5,000/month floor). Our implementation services are priced per scope, no timesheets.
Single app. 10-25 users. CRM, tracker, or simple workflow.
Multi-app workflow. 50-500 users. Full AI layer + KinPlug bundle.
Ongoing build + optimization. Expanding deployments.
| Context | Exact phrasing |
|---|---|
| Top of funnel (homepage, nav) | "Starts at ₱1,000/user/month (5-user minimum)" — minimum subtle, 55% opacity |
| FAQ / buyer-ready | "₱1,000 per user per month. 5-user minimum, so ₱5,000/month floor." |
| Sales conversation | "Kintone pricing is ₱1,000 per user per month with a 5-user minimum — our implementation fee is on top." |
| Pricing page detail | Show full table: users × ₱1,000 = monthly, with 5-user floor highlighted. |
All brand assets live in the root of the website repository.
| File | Use | Format |
|---|---|---|
edamame-logo-light.svg | Full logo for light backgrounds | SVG |
edamame-logo-dark.svg | Full logo for dark backgrounds | SVG |
edamame-icon.svg | Pod icon only (no wordmark) | SVG |
edamame-app-icon.svg | 512×512 green square for social/apps | SVG |
og-image-kintone-philippines.png | Open Graph social sharing image | PNG 1200×630 |
brand-guidelines.html | This document | HTML |
_backups/brand-guidelines-v1-2026-04.html | v1.0 archive (April 2026) | HTML |
edamame-inc/edamame-website — Cloudflare Pages, auto-deploys on push to main. View this doc at /brand-guidelines.html.
1 design system, 3 layout modes, 82+ HTML pages. Same nav, footer, typography, palette, and homepage contract across every page.
| Version | Date | Summary |
|---|---|---|
| v2.0 | 2026-04-22 | Three layout modes codified. JetBrains Mono added. Pod-motif patterns. Homepage contract. Blog surfacing rules. Pricing 5-user min. |
| v1.0 | 2026-04 | Initial brand system: logo, color, type, voice, UI patterns. |