CyberAgent — Japan's most agent-ready design system, and almost nobody outside Japan has heard of it.
Fit guidance has no recorded field-level check date. No readiness audit recorded.
Spindle is the design system for Ameba, CyberAgent's blogging and media platform. It is developed in the open at github.com/openameba/spindle as a monorepo — tokens, React components, icons, hooks and an illustration tool as separate packages — with documentation published in Japanese.
Maintained by CyberAgent's Ameba organisation on GitHub. Tokens are authored as the source of truth in DTCG JSON and transformed downstream, rather than being hand-written per platform.
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system’s official tokens reference for the canonical, current set.
Brand/Ameba Green
Brand primitive
Surface/Accent Primary
Accent surface, aliased to Primary Green 70
Background/Base
Page background, aliased to Gray 5
Surface/Primary
Card and sheet surface
Relative Spacing/Lv1
Smallest spacing step
Relative Spacing/Lv4
Default control padding step
Exactly what ships in cyberagent-spindle-design.md — plus the same token snapshot restated as CSS custom properties. Copy either, or feed the Markdown straight to an AI coding tool as styling context.
Restated from spindle.ameba.design and openameba/spindle, links last checked 2026-09-16. The file lists its sources and method in a provenance block at the top.
# Spindle — Design Style Reference ```yaml # How this file was made. Sources are first-party; nothing here is # read from a rendered page. Full breakdown at source_page below. method: partial confidence: low verified_at: 2026-09-16 source_page: https://www.designsystems.one/design-systems/cyberagent-spindle sources: - https://spindle.ameba.design/ - https://github.com/openameba/spindle ``` > **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by CyberAgent. "Spindle" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values. **System:** Spindle **Owner:** CyberAgent **Official documentation:** https://spindle.ameba.design/ --- ## Summary Japan's most agent-ready design system, and almost nobody outside Japan has heard of it. ## Design tokens (illustrative) | Token | Value | Role | | --- | --- | --- | | `Brand/Ameba Green` | `#2d8c3c` | Brand primitive | | `Surface/Accent Primary` | `#298737` | Accent surface, aliased to Primary Green 70 | | `Background/Base` | `#f5f6f6` | Page background, aliased to Gray 5 | | `Surface/Primary` | `#ffffff` | Card and sheet surface | | `Relative Spacing/Lv1` | `0.25rem` | Smallest spacing step | | `Relative Spacing/Lv4` | `0.75rem` | Default control padding step | ## Origin Spindle is the design system for Ameba, CyberAgent's blogging and media platform. It is developed in the open at github.com/openameba/spindle as a monorepo — tokens, React components, icons, hooks and an illustration tool as separate packages — with documentation published in Japanese. ## Governance Maintained by CyberAgent's Ameba organisation on GitHub. Tokens are authored as the source of truth in DTCG JSON and transformed downstream, rather than being hand-written per platform. ## Known for - A token layer that is genuinely spec-compliant: eight DTCG files under packages/spindle-tokens/tokens, using $type and $value, with 194 primitive colours aliased into 105 semantic light-theme roles. - Figma Code Connect actually shipped — ten .figma.ts files and a figma.config.json in the component package, at a time when three of the 37 systems in our Index manage it. - Separate desktop, tablet and mobile spacing scales, each a real token file rather than a breakpoint afterthought. ## Underrated - It is arguably the strongest agent-readiness story in the catalogue on first-party evidence, and it is invisible in English-language design-system discourse. - The illustration tooling (spindle-illust-maker) is a category of design-system asset almost nobody ships. ## Watch out for - Documentation is Japanese-only. If your team does not read Japanese, the repository is more usable to you than the docs site. - The component set is scoped to Ameba's media surfaces — 24 components including HeroCarousel and BottomButton. It is not a general-purpose enterprise kit. ## Components worth studying - **HeroCarousel** — A media-platform primitive most enterprise systems have no equivalent for. - **BottomButton** — Mobile-first fixed action bar, treated as a first-class component. - **InlineNotification** — Ships with a Code Connect mapping, so Figma and code agree by construction. ## When to choose Spindle Read Spindle if you want a worked example of DTCG tokens plus Code Connect in one repository — it is a better reference for that than most systems with ten times its profile. Don't adopt it wholesale unless you are building consumer media surfaces and read Japanese. ## Apply this style with an AI tool Paste this into your AI coding assistant as a direction, then iterate: > Design in the spirit of Spindle by CyberAgent — Japan's most agent-ready design system, and almost nobody outside Japan has heard of it. Lean into what it's known for: A token layer that is genuinely spec-compliant: eight DTCG files under packages/spindle-tokens/tokens, using $type and $value, with 194 primitive colours aliased into 105 semantic light-theme roles. Match the intent, not the pixels; adapt it to my product rather than cloning it. ## Official references - [Spindle docs (Japanese)](https://spindle.ameba.design/) - [openameba/spindle on GitHub](https://github.com/openameba/spindle) --- _Generated by [designsystems.one](https://www.designsystems.one/design-systems/cyberagent-spindle) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._
If you’re evaluating this system
Read Spindle if you want a worked example of DTCG tokens plus Code Connect in one repository — it is a better reference for that than most systems with ten times its profile. Don't adopt it wholesale unless you are building consumer media surfaces and read Japanese.
Where next
