Spindle (CyberAgent Ameba) DESIGN.md

Design System Inspiration of Spindle (CyberAgent Ameba)

Overview

Visual Theme & Atmosphere

Spindle is CyberAgent's open design system for Ameba (アメーバ) — the 20-year-old Japanese blogging and media platform — and it reads as one of Japan's most disciplined, accessibility-first systems. The canvas is pure white (#ffffff) over a soft warm-grey app background (#f5f6f6), and text sits in a near-black navy ink (#08121a) rather than pure black, lending a calm, editorial weight. The single saturated brand anchor is Ameba green (#298737) — a confident, slightly forest-leaning green that functions as both the brand mark color and the primary action color. This green is not decorative; live inspection shows it driving the contained CTA, the text-link, the icon button, and the accent surfaces, so the eye is trained to read green as "Ameba" and "do this."

The typographic personality is deliberately system-native: there is no custom webfont. Spindle's docs run on Meiryo, "Yu Gothic Medium", system-ui and the Ameba product runs on "Hiragino Sans", Meiryo, "Yu Gothic" — the platform CJK stack — set bold (700) at display sizes (32px section headings, 24px sub-heads) and a quiet 400 weight at 14–16px for body and dense UI. This is a system that spends its design budget on tokens, contrast, and component rigor rather than on a signature display face. Every UI color is documented against WCAG 2.1 contrast ratios (4.5:1 text, 3:1 objects), which is the system's defining obsession.

What distinguishes Spindle from flashier peers is its near-total restraint with depth and its pill-forward action geometry. Live inspection found box-shadow: none across the docs chrome; separation comes from flat tinted surfaces (#f5f6f6), thin hairlines (rgba(8,18,26,0.08)), and the green accent — never elevation. Action buttons are fully rounded pills: the contained CTA on ameba.jp measures a 48px-radius green pill, and lighted/outlined variants follow the same rounded language. The result is warm, legible, and engineered — a media platform that feels welcoming and trustworthy without shouting.

Key Characteristics:

• Ameba green (#298737) as the single brand + action color — contained CTA, links, icon buttons, accents
• System CJK font stack (Hiragino Sans / Meiryo / Yu Gothic) — no custom webfont, bold 700 for display
• Near-black navy ink (#08121a) for text instead of pure black — warm, editorial
• Accessibility-first: every UI color documented against WCAG 2.1 contrast (4.5:1 / 3:1)
• Flat depth — box-shadow: none; tinted #f5f6f6 surfaces + rgba(8,18,26,0.08) hairlines separate
• Pill-forward actions — 48px contained CTA, rounded outlined/lighted variants
• Lighted accent surfaces in soft green (#e7f5e9) with hover #c6e5c9
• Caution red (#d91c0b) and focus blue (#0091ff) as the documented semantic accents

Primary tasks

• Write and publish a blog post on Ameba
• Register for an account or log in from the header
• Read Ameba blogs on a phone at a larger text size

Brand Narrative

Spindle was created by CyberAgent to serve Ameba (アメーバ), the company's blogging and media platform launched in 2004. By the late 2010s Ameba — then ~17 years old — had accumulated significant design and technical debt, and CyberAgent set an ambition for it to become a "100年愛されるメディア" (a media service loved for 100 years) (CyberAgent Developers Blog). Around 2019 the team began a year-long brand-definition process to articulate Ameba's previously implicit identity, and Spindle was built to operationalize and scale that brand vision across every product surface.

The name Spindle (紡錘体) references both a spinning tool and the cellular spindle structure — symbolizing continuous evolution and the brand's core concept of "生きたコンテンツをつむぐ" ("weaving living content together"): the idea that users, stories, and connections interweave organically over time (CyberAgent Developers Blog). The system is built on four design principles — 敬意 (Respect), 軽快 (Lightness), 情緒 (Emotion), 歓迎 (Welcome) — that reflect a commitment to accessibility, performance, and emotional resonance.

What Spindle refuses, visible in its design: the heavy, decorative chrome of legacy portals (no shadow stacks, no ornamental gradients) and the cold, exclusionary precision of enterprise tooling. What it embraces: a flat, fast, high-contrast interface; a single warm Ameba green; system-native CJK typography that works for everyone; and a rigorous, openly-published token system (Spindle is open source at openameba/spindle, with design tokens, React components, icons, syntax themes, and an MCP server). Accessibility is not a feature here — it is the first principle, with every UI color documented against WCAG 2.1 contrast ratios.

Principles

The four principles below are Spindle's officially stated design principles (敬意 / 軽快 / 情緒 / 歓迎), with UI implications drawn from the live system.

1. 敬意 — Respect. Respect every user, including those using assistive technology. UI implication: every UI color is documented against WCAG 2.1 contrast (4.5:1 text, 3:1 objects); every interactive element carries a visible #0091ff focus ring.
2. 軽快 — Lightness / Agility. The experience should feel light and fast. UI implication: a flat, shadow-free system; separation via tint and hairline, not heavy elevation; system-native fonts for fast paint.
3. 情緒 — Emotion. Convey Ameba's warmth and personality. UI implication: a warm Ameba green rather than a cold corporate blue; conversational, inviting copy; near-black navy ink over harsh pure black.
4. 歓迎 — Welcome / Inclusivity. Everyone, anytime, without getting lost. UI implication: generous tap targets (48px CTA), plain labels, predictable pill geometry, and an accessibility-first color/contrast contract.
5. One color, one action. Ameba green (#298737) means "do this." UI implication: reserve the saturated green for primary actions and links so the next step is never ambiguous; lime/pink/yellow stay decorative.

Personas

Personas below are fictional archetypes informed by publicly observable Ameba/Spindle user segments (Japanese bloggers, media readers, and the in-house designers/engineers who consume the design system), not individual people.

佐藤 美咲, 34, 東京. A lifestyle blogger who has posted on Ameba for nearly a decade. Values that the interface stays warm and familiar through redesigns; appreciates large, obvious buttons and copy that invites rather than instructs. Would be put off by a cold, enterprise-looking refresh.

田中 健太, 41, 大阪. A frontend engineer at a CyberAgent product team who consumes Spindle as a dependency (openameba/spindle). Reads the docs for token names and the MCP server, and trusts the system because every color ships with a documented WCAG contrast ratio. Notices immediately when a component drifts from the accessibility contract.

山本 由香, 28, 福岡. A reader who browses Ameba blogs daily on mobile, sometimes using larger text and high-contrast settings. Relies on the system's contrast guarantees and visible focus rings. Chose to keep using Ameba because it never feels cluttered or hard to read.

Colors

Primary / Accent

• Ameba Green (#298737): --color-surface-accent-primary / --LinkButton--contained-backgroundColor / --color-object-accent-primary. The primary brand and action color — contained CTA background, icon-button fill, accent surface.
• Green Hover/Active (#0f5c1f): --LinkButton--contained-onHover-backgroundColor. Deepened green for contained-button hover and active (pressed) states.
• Link Green (#237b31): --TextLink-color / --LinkButton--outlined-color / --color-text-accent-primary. The text-link and outlined-button green — a touch darker than the surface green for text contrast.
• Register Green (#2d8c3c): the compact header register pill on ameba.jp (a slightly lighter production tint of the accent).

Accent Light & Secondary

• Accent Light (#e7f5e9): --LinkButton--lighted-backgroundColor / --color-surface-accent-primary-light. Soft green fill for lighted (low-emphasis) buttons and highlighted rows.
• Accent Light Active (#c6e5c9): --LinkButton--lighted-onHover-backgroundColor. Hover/active for lighted surfaces.
• Accent Secondary (Lime) (#82be28): --color-surface-accent-secondary. A brighter lime secondary accent for decorative/secondary surfaces.
• Accent Secondary Object (#5e9b15): --color-object-accent-secondary. Object-level lime (icons, indicators).
• Accent Secondary Text (#477d00): --color-text-accent-secondary. Darkest lime for accessible secondary-accent text.
• Accent Secondary Light (#f0f7e6): --color-surface-accent-secondary-light. Tinted lime surface.

Ink & Neutral Surfaces

• Ink Navy (#08121a): --color-text-high-emphasis / --color-object-high-emphasis. Primary text, headings, nav, table cells — a near-black navy used instead of pure black.
• Pure White (#ffffff): --color-surface-primary. Page and card surface, text on green/dark.
• Background Grey (#f5f6f6): --color-background / --Table-row-striped-backgroundColor. Warm app background and striped table rows.
• Mid/low/disabled ink are alpha overlays of the ink navy: medium-emphasis rgba(8,18,26,0.74), low-emphasis rgba(8,18,26,0.61), disabled rgba(8,18,26,0.3). Surfaces use rgba(8,18,26,0.04/0.08/0.16) for secondary/tertiary/quaternary fills; borders use rgba(8,18,26,0.08) (low) and rgba(8,18,26,0.3) (medium).

Semantic

• Caution Red (#d91c0b): --color-surface-caution / --color-text-caution / --color-border-caution. Danger/destructive actions, error text and borders.
• Focus Blue (#0091ff): --color-focus-clarity / outline color. The keyboard-focus ring color across all interactive elements.
• Highlight Yellow (#f5e100): --color-highlight-yellow. Selection/marker highlight.
• Expressive Pink (#e6456a): --color-object-expressive-pink. Expressive/decorative object accent.

Typography

Font Family

• Docs surface: Meiryo, "Yu Gothic Medium", system-ui, -apple-system, "system-ui", sans-serif (live-read from spindle.ameba.design body and headings).
• Product surface (ameba.jp): "Hiragino Sans", Meiryo, "Yu Gothic", sans-serif.
• No custom webfont: Spindle relies on the platform CJK system stack on both surfaces. Display weight is bold (700); body is regular (400).

Hierarchy

Principles

• Bold display, regular body: every heading and nav item runs bold (700); body and dense UI text drop to 400. The weight contrast is the primary hierarchy signal, since there is no type-design contrast (system font).
• System-native CJK: legibility for hangul/kana/kanji comes from the platform font, not a custom face. The system invests in tokens and contrast instead of a signature typeface.
• Accessibility-bounded sizing: body sits at 14–16px with generous line-height (1.3–1.5) for dense Japanese text; table/caption text steps to 0.875em / 0.75em.
• Bold links: text links are font-weight: bold green (#237b31) — links read as actions, not just colored text.

Layout

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px
• Notable: Table head/cell padding lands at 12px (measured token); contained CTA padding 8px 16px

Grid & Container

• Centered single-column docs layout with a 114px global header (--global-header-height)
• Section bands alternate white (#ffffff) and warm grey (#f5f6f6) backgrounds
• Cards and tables use 16px radius and group related content/principles
• Component docs are organized into Brand / Principles / Styles / Components / About / Updates

Whitespace Philosophy

• Breathing, editorial rhythm: generous vertical spacing between principle cards and content sections.
• Flat segmentation: sections separate by background tint (#f5f6f6 vs #ffffff) and hairlines, not shadow.
• Accent restraint: green appears only on actions and accents, keeping the neutral canvas calm.

Border Radius Scale

• Small (8px): inner elements, small containers
• Medium (15–16px): cards, tables, inputs, compact buttons — the workhorse
• Pill (48px): contained CTA and lighted action buttons
• Full (9999px): badges, fully-round pills

Responsive Behavior

Breakpoints

Touch Targets

• Contained CTA at 48px height, full pill — an unmistakable tap target
• Compact header pills at 30px height for dense top-bar density
• Nav links bold within the 114px global header for clear hit areas

Collapsing Strategy

• Global nav: horizontal links → hamburger toggle on mobile
• Principle cards: multi-column → stacked single column
• Tinted/white alternating bands maintain full-width treatment
• Tables: horizontal scroll on narrow viewports, 16px radius maintained

Image Behavior

• Illustrations and screenshots carry no shadow at any size, consistent with the flat system
• Cards maintain 16px radius across breakpoints

Elevation & Depth

Shadow Philosophy: Spindle is a near-shadowless system. Live inspection found box-shadow: none across the docs chrome, headings, nav, and content cards. Depth and grouping are communicated through flat tinted surfaces (#f5f6f6, rgba(8,18,26,0.04)) and thin hairlines (rgba(8,18,26,0.08)). This is a deliberate accessibility-and-performance choice — it keeps the media UI fast, clean, and high-contrast. When emphasis is needed, the system reaches for the green accent (#298737) or a lighted green surface (#e7f5e9), never elevation. The keyboard-focus ring (#0091ff) is the one consistently "raised" visual signal, present on every interactive element.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none

Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet — consistent with the flat, fast, accessibility-first system (軽快 / Lightness). Buttons respond to press with a subtle background-color shift (green deepening to #0f5c1f) rather than scale gymnastics; content reveals fade in from below at motion-standard / ease-enter. No bounce or spring — a 20-year media platform signals steadiness and welcome, not novelty. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the product remains fully functional, in keeping with the Respect (敬意) principle.

Components

Buttons

Contained (Primary CTA)

• Background: #298737
• Text: #ffffff
• Radius: 48px
• Padding: 8px 16px
• Height: 48px
• Font: 16px Hiragino Sans weight 700
• Hover: #0f5c1f background
• Use: Primary contained call-to-action ("新規登録"), full pill — the system's single primary action

Register Pill (Compact)

• Background: #2d8c3c
• Text: #ffffff
• Radius: 15px
• Height: 30px
• Font: 12px Hiragino Sans weight 700
• Use: Compact header register pill on ameba.jp

Outlined (Secondary)

• Background: #ffffff
• Text: #237b31
• Border: 1px solid #237b31
• Radius: 15px
• Height: 30px
• Font: 12px Hiragino Sans weight 700
• Hover: #e7f5e9 background
• Use: Outlined secondary action ("ログイン")

Lighted (Soft)

• Background: #e7f5e9
• Text: #237b31
• Radius: 48px
• Font: 16px Hiragino Sans weight 700
• Hover: #c6e5c9 background
• Use: Low-emphasis green action button

Inputs & Forms

Search Field

• Background: #f6f8fa
• Text: #08121a
• Border: 1px solid rgba(8,18,26,0.08)
• Radius: 16px
• Padding: 7px 32px
• Height: 32px
• Font: 14px Hiragino Sans
• Focus: #0091ff outline ring
• Use: Header search field — low-emphasis surface fill

Cards & Containers

Lighted Accent Card

• Background: #e7f5e9
• Text: #08121a
• Radius: 16px
• Use: Highlighted/accent surface card (e.g. featured blog row)

Data Table

• Background: #ffffff
• Border: 1px solid rgba(8,18,26,0.08)
• Radius: 16px
• Use: Table container; striped rows use #f5f6f6, head/cell padding 12px

Badges

Caution Pill

• Background: #d91c0b
• Text: #ffffff
• Radius: 9999px
• Font: 12px Hiragino Sans weight 700
• Use: Caution / danger status pill

Navigation

• Background: #ffffff
• Text: #08121a
• Font: 14px weight 700
• Height: 114px global header (--global-header-height)
• Active: green #237b31 text on active item
• Use: Global nav ("ブランド", "原則", "スタイル", "コンポーネント", "Spindleについて", "更新情報")

Text Links

• Color: #237b31 (bold)
• Icon color: #298737
• Focus: #0091ff outline
• Use: Inline links and "もっと見る" more-links — bold green

---

Verified: 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect, 2 first-party surfaces) Tier 1 sources: https://spindle.ameba.design/ (Spindle DS — :root design-token CSS custom properties, live computed style); https://www.ameba.jp/ (Ameba product — live component grounding: 新規登録 CTA, search input, lighted rows); https://spindle.ameba.design/styles/color/ (official color taxonomy) Tier 2 sources: getdesign.md/spindle — NOT FOUND (no entry); styles.refero.design/?q=spindle — no Spindle/Ameba entry (only fuzzy unrelated matches: Spline, Spacelab, Shuttle) Conflicts unresolved: none

States

Do's and Don'ts

Do

• Use Ameba green (#298737) as the single brand + primary action color — CTA, links, icon buttons, accents
• Deepen to #0f5c1f on contained-button hover/active
• Use the bold green (#237b31) for text links — links are bold and read as actions
• Use the system CJK font stack (Hiragino Sans / Meiryo / Yu Gothic) — no custom webfont
• Set display headings bold (700); keep body at weight 400
• Use near-black navy (#08121a) for text instead of pure black
• Separate sections with flat tints (#f5f6f6) and hairlines (rgba(8,18,26,0.08)), not shadows
• Use pill geometry for actions — 48px contained CTA, 9999px badges
• Honor WCAG 2.1 contrast on every color pairing (4.5:1 text, 3:1 objects)
• Use the focus blue (#0091ff) outline on every interactive element

Don't

• Use drop shadows for elevation — Spindle is a flat, shadow-free system
• Spread green across decorative elements — reserve it for actions and accents
• Use pure black (#000000) for body text — use near-black navy #08121a
• Set display headings in a light weight — display is always bold (700)
• Introduce a custom display webfont — the system is intentionally system-native
• Use a second saturated action color — green is the single action hue (lime/pink are decorative only)
• Skip the focus ring — keyboard focus (#0091ff) is mandatory for accessibility
• Pair colors that fail WCAG 2.1 contrast — contrast is the system's first principle

Voice & Tone

Spindle (and the Ameba brand it serves) speaks with a voice that is warm, welcoming, and unpretentious — the verbal expression of the system's four design principles: 敬意 (Respect), 軽快 (Lightness), 情緒 (Emotion), and 歓迎 (Welcome). Copy is plain, friendly Japanese that invites participation rather than instructing: register and login CTAs are simple ("新規登録", "ログイン"), section headings are conversational invitations ("Amebaでブログを書こう" / "Let's write a blog on Ameba"; "Amebaってどんなサービス？" / "What kind of service is Ameba?"). The tone never hard-sells; it welcomes everyone in, consistent with the stated brand vision that "誰もがいつでも、迷わず" (anyone, anytime, without getting lost) can use the service.

Voice samples (verbatim from live surfaces):

• "Amebaらしさを体現するために" — Spindle homepage section heading ("To embody Ameba-ness"). (verified live 2026-06-17, spindle.ameba.design)
• "Amebaを始めよう！こちらから無料で登録" — ameba.jp CTA section ("Let's start Ameba! Register free here"). (verified live 2026-06-17, ameba.jp)
• "デザイン原則" / "アクセシビリティ" / "パフォーマンス" — Spindle principle card headings. (verified live 2026-06-17, spindle.ameba.design)

Forbidden register: aggressive sales urgency, exclusionary jargon, hype superlatives, or anything that violates the "welcome / accessible to everyone" principle. The system's accessibility mandate extends to language — clear over clever.

Agent Prompt Guide

Quick Color Reference

• Primary CTA / brand: Ameba Green (#298737)
• CTA Hover: Deep Green (#0f5c1f)
• Text link: Link Green (#237b31, bold)
• Lighted action surface: Accent Light (#e7f5e9)
• Background: Pure White (#ffffff)
• App background / striped rows: Background Grey (#f5f6f6)
• Heading / body text: Ink Navy (#08121a)
• Caution / danger: Caution Red (#d91c0b)
• Focus ring: Focus Blue (#0091ff)
• Decorative accents: Lime (#82be28), Expressive Pink (#e6456a), Highlight Yellow (#f5e100)

Example Component Prompts

• "Create a hero on white background. Headline at 32px Hiragino Sans weight 700, color #08121a. Below it a contained CTA: #298737 background, white text, 48px radius (full pill), 8px 16px padding, 16px weight 700 — '新規登録'. Hover deepens to #0f5c1f."
• "Design a feature card: white background, 1px solid rgba(8,18,26,0.08) hairline, 16px radius, no shadow. Title 24px Hiragino Sans weight 700, #08121a. Body 16px weight 400, #08121a at line-height 1.3."
• "Build a lighted action button: #e7f5e9 background, #237b31 bold text, 48px radius. Hover #c6e5c9. And a text link: #237b31 bold, with #0091ff focus outline."
• "Create top nav: white 114px header, bold 14px links #08121a, green #237b31 on active. Green contained CTA right-aligned, 48px pill."
• "Build a data table: white #ffffff background, 16px radius, 1px solid rgba(8,18,26,0.08) borders, striped rows #f5f6f6, 12px cell padding, #08121a text."

Iteration Guide

1. Ameba green (#298737) is the single action color — don't spread it to decoration
2. System CJK font stack throughout; bold 700 for display, 400 for body
3. No shadows — separate with #f5f6f6 tint and rgba(8,18,26,0.08) hairlines
4. Pill actions — 48px contained CTA, 9999px badges; 16px cards/inputs/tables
5. Text color is #08121a navy, never pure black for body
6. Every interactive element gets a #0091ff focus ring
7. Honor WCAG 2.1 contrast (4.5:1 text, 3:1 objects) — the system's first principle

---

Governance

Known Gaps

• Contrast, button-register-sm. Text #ffffff on #2d8c3c measures 4.26:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.