Design System Inspiration of DMM.com (Turtle)

1. Visual Theme & Atmosphere

DMM.com is one of Japan's sprawling digital platforms — video, games, e-books, English conversation, FX trading, 3D printing, even an aquarium — over sixty services under one roof. In 2025 its Platform Development Division made its internal design system, Turtle, public, and that portal (turtle.dmm.com) is the brand's most coherent design surface. The defining choice is that Turtle is dark-first: the portal canvas is a deep charcoal (#323232) with raised cards one step lighter (#252525), and the whole color architecture is engineered so that dark mode is reached with a single mode switch rather than a parallel palette. Where most systems treat dark mode as an afterthought, Turtle treats it as a peer — the public-facing documentation literally ships in the dark theme.

On that charcoal field the text runs as a calm three-step grey ladder — pure white (#ffffff) for primary headings, a soft #e3e3e3 for section heads, and a muted #b9b9b9 for body — so hierarchy is carried by luminance rather than color. The accent palette is restrained and luminous: a periwinkle blue (#94bcff) is the link and action color, joined by a spring green (#98e467) and a soft pink (#f7b6e7) used sparingly for status and decorative highlights. Geometry is gentle and modern: documentation cards sit at a 12px radius, and pill controls go fully round (9999px). There are essentially no drop shadows — separation comes from the surface-step (#323232 → #252525), which is exactly how a one-switch dark system has to behave.

The consumer platform at dmm.com is a second, older register — a dense white directory whose brand DNA shows in a vivid crimson (#b42f5a, deepening to #8f0539) and a warm promotional amber (#ffc847). This is the legacy entertainment-portal energy: information-dense, link-heavy (classic browser-blue #0000ee and a refined #005fc0), built for breadth. The interesting tension of the DMM brand is exactly this split — a calm, engineered, dark-first design system (Turtle) being rolled across a loud, maximal, crimson consumer empire. Turtle is the future the company is migrating toward; as of August 2025 it covers over half of the division's front-end products.

Key Characteristics:

• Dark-first by design — Turtle canvas #323232, raised card #252525, engineered for one-switch dark mode
• Luminance hierarchy — white #ffffff → soft #e3e3e3 → muted #b9b9b9 text ladder on charcoal
• Periwinkle blue (#94bcff) as the link/action accent; green (#98e467) + pink (#f7b6e7) as sparing highlights
• Shadowless depth — separation via the #323232/#252525 surface step, never drop shadows
• Pill controls (9999px) + 12px documentation cards — gentle, modern geometry
• Legacy consumer brand-crimson (#b42f5a → #8f0539) + promo amber (#ffc847) on the white dmm.com platform
• Japanese-first stack — "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif

2. Color Palette & Roles

Turtle Accent (Primary)

• Periwinkle Blue (#94bcff): The Turtle link and action color — in-page doc links, active sidebar items, interactive accents on the dark canvas. The system's primary signal color.
• Spring Green (#98e467): Positive / success accent and decorative highlight on dark surfaces.
• Soft Pink (#f7b6e7): Secondary decorative / status accent, used sparingly alongside the green.

Dark Surfaces (Turtle)

• Canvas Charcoal (#323232): The Turtle portal body background — the base of the dark-first system.
• Raised Surface (#252525): One step lighter than canvas; documentation/navigation cards and panels. The surface-step that replaces shadows.

Text Ladder (on dark)

• On-Dark White (#ffffff): Primary headings, strong labels on the dark canvas.
• On-Dark Soft (#e3e3e3): Section headings and card text — a softened white.
• On-Dark Muted (#b9b9b9): Body copy, descriptions, lowest-emphasis text on dark.

Consumer Brand (dmm.com platform)

• Brand Crimson (#b42f5a): The DMM consumer platform brand color — section tags, promotional surfaces.
• Crimson Deep (#8f0539): Darker crimson for hover/emphasis on brand surfaces.
• Crimson Bright (#dc0000): Vivid red used for alerts and high-urgency promo labels.
• Amber (#ffc847): Warm promotional yellow for campaign chips and highlight banners.
• Amber Soft (#ffea80): Lighter amber for tinted promotional backgrounds.

Light Neutrals & Links (dmm.com platform)

• Light Canvas (#ffffff): The white consumer platform background.
• Light Surface (#f2f4f7): Cool-grey tinted panels and content blocks.
• Light Hairline (#e9ebef): Thin borders and dividers on the white platform.
• Ink (#242424): Darkest near-black text on the light platform.
• Ink Soft (#333333): Standard body text on white.
• Ink Muted (#6e6e6e): Secondary / metadata text on white.
• Link Blue (#005fc0): The refined navigation link blue on the consumer platform.

3. Typography Rules

Font Family

• Sans / CJK stack: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif — the Turtle portal stack, Latin-Helvetica fronting the Japanese Hiragino faces.
• Legacy CJK stack (dmm.com platform): "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", HiraginoSans-W3, メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif.
• No custom brand typeface — Turtle leans on system-available Japanese sans faces, which is consistent with its "do more with less" pragmatism.

Hierarchy

Principles

• Weight does the work, not color: headings sit at 600–700, body at 400; with a single accent blue, weight and luminance carry almost all hierarchy.
• Luminance ladder: #ffffff → #e3e3e3 → #b9b9b9 is the on-dark text scale — three deliberate steps, never pure-grey guesswork.
• System-font pragmatism: no proprietary face. Helvetica Neue fronts the Japanese Hiragino stack — fast, available, and "do more with less."
• CJK-first metrics: line-heights stay generous (1.3–1.75) so dense hangul-adjacent kanji/kana set comfortably.

4. Component Stylings

Buttons

Portal Pill (About / CTA)

• Text: #ffffff
• Radius: 9999px
• Padding: 12px 16px
• Font: 16px / weight 600
• Height: 40px
• Use: "Turtle について" and primary CTAs on the dark portal — full-round pill

Top-Nav Trigger

• Text: #ffffff
• Radius: 0px
• Padding: 8px 12px
• Font: 12.6px / weight 600
• Height: 35px
• Use: Top navigation menu triggers ("Turtle について", "プロダクト", "ガイドライン", "導入の手引き")

Top-Nav Active

• Text: #e3e3e3
• Font: 12.6px / weight 700
• Use: Active top-nav item ("トップ") — heavier weight marks the current section

Cards & Containers

Resource / Product Card

• Background: #252525
• Text: #e3e3e3
• Radius: 12px
• Padding: 24px 56px
• Font: 20px / weight 600
• Height: 100px
• Use: Large navigation cards on the dark canvas ("デザイントークン", "コンポーネント", "リソース", "AI-friendly デザインガイドライン")

Tabs

Sidebar Nav Item

• Text: #ffffff
• Font: 14px / weight 400
• Active: #94bcff text on the active section
• Use: Left documentation sidebar items ("はじめに", "プロダクトビジョン", "デザイン原則", "システム全体像")

Badges

Brand Crimson Tag

• Background: #b42f5a
• Text: #ffffff
• Radius: 0px
• Font: 12px / weight 400
• Use: Consumer dmm.com brand-crimson section tag / category label

Promo Amber Chip

• Background: #ffc847
• Text: #242424
• Radius: 9999px
• Font: 12px / weight 700
• Use: dmm.com campaign / promotional pill on the white platform

Links

In-Page Doc Link

• Text: #94bcff
• Font: 16px / weight 400
• Use: Documentation cross-links inside the body ("デザイントークン", "コンポーネント", "リソース", Figma community URL)

Legacy Platform Link

• Text: #005fc0
• Font: 12.5px / weight 400
• Use: dmm.com consumer directory navigation links

---

Verified: 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://turtle.dmm.com/ (Turtle DS portal — dark-first tokens, cards, nav, live DOM); https://turtle.dmm.com/products/resources/ (Turtle resources — Figma/GitHub/Storybook, headings); https://dmm.com/ (consumer platform — brand crimson + amber, live DOM) Tier 2 sources: getdesign.md/dmm — 404 (no entry); styles.refero.design/?q=dmm — no DMM match (fuzzy unrelated results only) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 8px (nav padding 8px 12px; card padding lands at the generous 24px 56px)
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 56px
• Notable: Turtle navigation cards use an asymmetric 24px vertical / 56px horizontal pad, giving the large dark cards an airy, document-like feel

Grid & Container

• Turtle portal: a left documentation sidebar + a centered content column, with large 100px-tall navigation cards laid out in a responsive grid
• Consumer dmm.com: a dense multi-column directory grid built for breadth across 60+ services
• Hero block centers the "Turtle Design System" title with the "発見と熱中を、創造する。" tagline beneath

Whitespace Philosophy

• Document calm: the Turtle portal is spacious and reading-oriented — generous card padding, clear vertical rhythm, nothing crowded.
• Surface-step over borders: panels separate by the #323232 → #252525 luminance step, not by lines or shadows.
• Consumer density: the dmm.com platform is the opposite — maximal link density, because its job is to expose an enormous service catalog.

Border Radius Scale

• Small (8px): inner elements, small controls
• Medium (12px): documentation/navigation cards — the workhorse on the portal
• Full (9999px): pill buttons, promo chips

6. Depth & Elevation

Shadow Philosophy: Turtle is a near-shadowless, dark-first system. Live inspection found box-shadow: none across the portal hero, nav, headings, and the large #252525 cards. Elevation is expressed purely as a surface luminance step — a raised card is simply one shade lighter than the canvas (#323232 → #252525). This is the correct discipline for a one-switch dark-mode system: a token-driven luminance step inverts cleanly between themes, whereas baked drop-shadows do not. When emphasis is needed the system reaches for the accent blue (#94bcff), never for elevation. The consumer dmm.com platform, being a light system, uses thin #e9ebef hairlines instead.

7. Do's and Don'ts

Do

• Build dark-first — canvas #323232, raised surface #252525, designed so dark mode is one mode switch
• Carry hierarchy with the luminance ladder: #ffffff → #e3e3e3 → #b9b9b9 on dark
• Reserve the periwinkle blue (#94bcff) for links and the active/action signal
• Separate panels with the surface step (#323232 → #252525), not drop shadows
• Use full-round pills (9999px) for buttons and 12px radius for documentation cards
• Use the spring green (#98e467) and soft pink (#f7b6e7) only as sparing accents
• Keep typography on the system Hiragino/Helvetica stack — "do more with less"
• On the consumer platform, use the brand crimson (#b42f5a) and amber (#ffc847) for promo/branding

Don't

• Bake drop shadows for elevation — Turtle separates by luminance so it survives the dark/light switch
• Spread the accent blue across decorative surfaces — it's the link/action signal
• Use pure-grey guesses for text — stick to the #ffffff/#e3e3e3/#b9b9b9 ladder
• Mix the dark Turtle palette and the light consumer crimson on one surface — they are two registers
• Use heavy weights below 600 for headings or 400 for body — weight is the hierarchy
• Introduce a custom display typeface — the system is deliberately font-pragmatic
• Treat dark mode as a bolt-on — it is the base theme, not a variant

8. Responsive Behavior

Breakpoints

Touch Targets

• Top-nav triggers at 35px height with 8px 12px padding
• Pill CTAs at 40px height, full-round for an unmistakable target
• Large navigation cards at 100px height — generous tap area

Collapsing Strategy

• Documentation sidebar: persistent on desktop → top toggle/drawer on mobile
• Navigation cards: multi-column grid → 2-up → single stacked column
• Hero title: 32px scales down on mobile, weight 700 maintained
• Consumer dmm.com directory: dense multi-column grid reflows to fewer columns on narrow viewports

Image Behavior

• Portal illustrations and product thumbnails carry no shadow, consistent with the shadowless dark system
• Cards maintain 12px radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary accent / link: Periwinkle Blue (#94bcff)
• Dark canvas: Charcoal (#323232)
• Raised surface: (#252525)
• Heading text (dark): White (#ffffff) / Soft (#e3e3e3)
• Body text (dark): Muted (#b9b9b9)
• Success accent: Spring Green (#98e467)
• Decorative accent: Soft Pink (#f7b6e7)
• Consumer brand: Crimson (#b42f5a), Amber (#ffc847)
• Consumer link: Link Blue (#005fc0)

Example Component Prompts

• "Create a dark-first portal hero: #323232 canvas. Title at 32px weight 700, color #ffffff, on the system stack ('Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif). Section head at 25px weight 600, #e3e3e3. Body at 16px weight 400, #b9b9b9. One periwinkle link (#94bcff)."
• "Design a navigation card: #252525 background on a #323232 canvas, 12px radius, no shadow, 24px 56px padding. Heading 20px weight 600, #e3e3e3. Separation comes from the surface step, not a border."
• "Build a full-round pill button: transparent on dark, #ffffff text, 9999px radius, 12px 16px padding, 16px weight 600."
• "Create a left documentation sidebar: items at 14px weight 400, #ffffff text, active item turns #94bcff. No shadows."
• "Design a consumer promo chip: #ffc847 amber background, #242424 text, 9999px radius, 12px weight 700; and a crimson section tag #b42f5a with white text."

Iteration Guide

1. Start dark — #323232 canvas, #252525 raised cards — and make sure dark mode is reached by a single mode switch
2. Carry hierarchy with luminance: #ffffff → #e3e3e3 → #b9b9b9
3. The accent blue #94bcff is the link/action color — don't spread it decoratively
4. No shadows — separate with the surface step; it survives the dark/light theme switch
5. Pills are 9999px, documentation cards are 12px
6. Stay on the system Hiragino/Helvetica stack — no custom face
7. Keep the consumer crimson (#b42f5a) + amber (#ffc847) on the light platform only

---

10. Voice & Tone

DMM's design-system voice — as written across the Turtle portal — is pragmatic, candid, and community-minded. It does not posture. The portal openly labels itself "ポータル β" (a beta), states adoption honestly ("プラットフォーム開発本部のフロントエンドプロダクトの50%以上で導入" — over 50% as of August 2025), and frames its own AI tooling with the plain motto "Do more with less." The register is that of an internal team writing for peers and then deciding to share the homework with the wider community, rather than a marketing department selling a product.

Voice samples (verbatim from live Turtle portal):

• "発見と熱中を、創造する。" — section heading / DMM Group tagline ("Create discovery and enthusiasm"). (verified live 2026-06-17)
• "Turtle Design System ポータル β" — portal brand title; the "β" candidly signals work-in-progress. (verified live 2026-06-17)
• "Do more with less" — Turtle MCP / AI tooling motto. (verified via turtle.dmm.com/about/introduction 2026-06-17)

Forbidden register: hype superlatives ("revolutionary", "業界最高"), false completeness (Turtle explicitly says it is "not a completed form"), and hiding work-in-progress status behind polish — the portal prefers honest "(準備中)" labels.

11. Brand Narrative

DMM.com traces to 1999, when 亀山敬司 (Keiji Kameyama) founded what was then 株式会社デジタルメディアマート — the seed of today's 合同会社DMM.com, headquartered in Roppongi, Tokyo. Kameyama's path is itself part of the brand's identity: he started at nineteen as a street-stall accessory vendor, ran cafes and a video-rental business, and built that into one of Japan's broadest digital conglomerates — video distribution, online games, e-books, FX trading, English conversation, 3D printing, solar, animation, even a football club and an aquarium, more than sixty services in all. The DMM Group tagline that appears on the Turtle portal — "発見と熱中を、創造する。" ("Create discovery and enthusiasm") — is the throughline across that sprawl: DMM's business is making people stumble into something and get absorbed in it.

Turtle is the design system that the Platform Development Division built to bring coherence to that breadth. Its stated motivation is concrete: inconsistent UX across dozens of services creates cognitive load for users; teams redundantly rebuild the same components; and research/learning costs stay high. Turtle answers with packaged design tokens, a React component library, page templates, a Figma community library, Storybook, and an AI bridge called Turtle MCP that can build UI from Figma data in minutes. As of August 2025 it runs in over half of the division's front-end products.

What makes the brand distinctive in the design-system world is the decision to go public. DMM released Turtle's portal, its Figma library, and its knowledge openly — explicitly to "contribute to the design-system community and share knowledge with others facing the same challenges." The system describes itself as "not a completed form" but "a system that changes appropriately in response to changing needs and environments" — the E (Evolve) of its own ABCDE principles. That posture — dark-first, font-pragmatic, candidly beta, openly shared — is the opposite of the loud, maximal crimson consumer platform it sits behind, and it is where DMM signals where its product craft is heading.

12. Principles

Turtle's published principles use the ABCDE framework — each posed as a question the team asks of any design decision. (verbatim from turtle.dmm.com/about/design-principle/, verified live 2026-06-17.)

1. A — Achieve Goals. "エンドユーザーが効率的に目的を達成できるか？" (Can end users efficiently accomplish their objectives?) UI implication: the shortest path to the user's goal wins over decoration; the dense consumer directory and the calm doc portal both optimize for "find it and act."
2. B — Bring out Abilities. "クリエイターの能力を最大限に引き出せているか？" (Does it maximize creator capabilities?) UI implication: ship tokens, components, templates, and Turtle MCP so designers/engineers spend effort on product value, not re-building primitives.
3. C — Consistency. "一貫性を担保できているか？" (Is consistency maintained?) UI implication: one token set drives every service; the luminance ladder and accent blue are reused everywhere rather than re-invented per team.
4. D — Design Intent. "設計の意図は明確になっているか？" (Are design decisions clearly documented?) UI implication: the public portal exists to make rationale legible — tokens, principles, and getting-started docs are first-class, not afterthoughts.
5. E — Evolve. "変化を恐れず進化を選択できているか？" (Can we choose to evolve without fearing change?) UI implication: the system is candidly "β" and "not a completed form"; treat versions and "(準備中)" states as honest, expected, and shippable.

13. Personas

Personas below are fictional archetypes informed by publicly observable Turtle/DMM user segments (front-end engineers and designers across DMM's platform division, plus the external community DMM opened the system to), not individual people.

佐藤 拓海 (Takumi Sato), 30, Tokyo. Front-end engineer in DMM's Platform Development Division. Adopts Turtle's npm package so his team stops re-implementing the same buttons across services. Values that dark mode is a single mode switch, not a second stylesheet to maintain. Reads the Storybook catalog and copies snippets.

石川 美咲 (Misaki Ishikawa), 34, Tokyo. Product designer maintaining several DMM services. Lives in the Turtle Figma community library — tokens, components, templates — to keep dozens of screens consistent without hand-syncing colors. Appreciates the ABCDE principles as a shared vocabulary in design reviews.

Daniel Okafor, 28, Berlin. An outside engineer who found the public Turtle portal looking for a real-world dark-first token architecture. Studies how DMM achieves one-switch dark mode and how it documents intent. Represents exactly the community DMM opened the system for.

川口 さやか (Sayaka Kawaguchi), 41, Osaka. PM coordinating designers and engineers on a platform product. Uses Turtle's documented intent (the D principle) to settle "why is it this way" debates by pointing at the portal rather than re-litigating.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet, matching the calm dark-first documentation register. The signature moment is the dark/light theme switch, which crossfades the canvas and surface tokens at motion-slow — because separation is luminance-based and shadowless, the transition stays clean with nothing to re-bake. Cards and the documentation sidebar reveal with motion-standard / ease-enter; pill controls respond to press with a subtle opacity/scale shift. No bounce or spring — a developer-facing design system signals steadiness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the theme switch becomes an immediate swap; the portal remains fully functional.