Design System Inspiration of BOOTH
1. Visual Theme & Atmosphere
BOOTH is pixiv's marketplace where creators sell illustrations, doujinshi, goods and digital items;
its footer reads "© pixiv". pixiv Inc. (ピクシブ株式会社), founded on 25 July 2005, is based in
Sendagaya, Shibuya, Tokyo, with an office in Fukuoka. The home page is full of creator events — Comic
Market, COMITIA, Vket, VRChat — each with its own coloured tile.
The site is light and busy in a good way: white ground, cool greys #f1f5f8 and #dee4e9,
dark ink #171d26, teal links #1b7f8c, and BOOTH's red #fc4d50 for promotion and
discovery. Its interface tokens come from Charcoal, pixiv's public design system.
What makes it worth reading:
- A public design system in production. Charcoal is published as "Design system library by
pixiv", and booth.pm carries 691 of its tokens.
- Container roles with three steps each. Primary, discovery, positive, negative, notice,
neutral, HUD and on-image containers all have default, hover and press values.
- Two-colour focus.
--charcoal-color-border-focus-1 #067a87 and -focus-2 #94dee2.
Primary tasks
- Search for items; browse events and categories.
- Open the cart; read notices.
2. Color Palette & Roles
Measured with getComputedStyle on booth.pm/ja: 782 root custom properties — --charcoal-* 691,
plus Tailwind's --tw-* 51 and --tailwind-* 40 (excluded).
Red (discovery)
- Brand (
#fc4d50) — --charcoal-color-container-discovery-default.
- Brand hover (
#ce2f36) · press (#9b1e25).
Teal (primary and links)
- Primary (
#2c9ba6) — --charcoal-color-container-primary-default.
- Primary hover (
#067a87) · press (#145c69).
- Link (
#1b7f8c) — rendered link colour; Link press (#0f6270).
- Focus soft (
#94dee2) — --charcoal-color-border-focus-2.
Ink and surfaces
- Foreground (
#171d26) — the search text; Text body (#252f3d).
- Canvas (
#ffffff) · Background secondary (#f1f5f8) · Background tertiary (#dee4e9).
- Input (
#ebedf2) · Input border (#d5d9de).
Status
Notice #fed63d · Positive #2f92db · Negative #ce2f36.
3. Typography Rules
Font family
Body text uses the system stack (-apple-system, …, Hiragino Kaku Gothic ProN, Meiryo). BOOTH's own
faces — booth heavy (English and Japanese, 700) and booth_font — load (document.fonts) for
headings and logotype-style text.
Scale
The search field and links are 16px/400; the notices button 14px/600.
4. Component Stylings
Measured on the home page, focus read under a real Tab key, and a hover counted only when :hover
matched; background-image, text-decoration and pseudo-elements were compared too.
- Notices link — お知らせ一覧: white, teal
#1b7f8c 14px/600, 32px, with a hairline inset bottom.
Hover changes nothing; press and focus darken the label to #0f6270.
- Search field — キーワードを入力:
#ebedf2 fill, #d5d9de border, 5px left corners, 32px. No
hover change; focus turns it #ffffff with a #171d26 border.
Radius
5px on the search field and event tiles.
5. Layout Principles
- A header search, notices, a promotional carousel and rows of translucent event tiles.
6. Depth & Elevation
Light: a 1px shadow on carousel controls; overlays use --charcoal-color-background-overlay.
7. Do's and Don'ts
Do
- Use Charcoal's container roles with their hover and press steps.
- Keep BOOTH red
#fc4d50 for discovery and promotion; teal for links and primary actions.
- Use the two-colour focus border (
#067a87, #94dee2).
Don't
- Don't count Tailwind's variables as Charcoal tokens.
- Don't use the red for body links; links are teal.
- Don't flatten the focus to a single colour.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. Agent Prompt Guide
Quick Color Reference
#fc4d50 BOOTH red · #ce2f36 red hover · #2c9ba6 teal · #067a87 teal hover · #1b7f8c link ·
#171d26 ink · #f1f5f8 / #dee4e9 greys · #ebedf2 input
Example Component Prompts
- "A 32px search field,
#ebedf2 fill with a #d5d9de border; on focus white with a #171d26
border."
- "A teal
#1b7f8c text button that darkens to #0f6270 when pressed."
10. Voice & Tone
Not assessed as authored voice.
11. Brand Narrative
BOOTH is where pixiv's creator culture becomes commerce — event tiles, goods and downloads — and it
runs on Charcoal, the design system pixiv shares publicly. The interface stays cool and neutral so
creators' work and event colours can be loud.
12. Principles
- Creators first. Neutral chrome, colourful content.
- Shared system. Charcoal tokens across pixiv products.
- Every container has states. Default, hover, press.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. States
Hover: no change on the measured link and field. Press and focus: the link darkens to #0f6270; the
field turns white with a dark border.
15. Motion & Easing
Not measured.
Tier 1 sources: https://booth.pm/ja (live homepage — 782 root custom properties read via getComputedStyle, Tailwind excluded; BOOTH faces loaded; two components measured at rest, hover, pressed and focus; footer "© pixiv", captured 2026-09-26); https://booth.pm/ja/zz-this-does-not-exist (nonsense-path control — HTTP 404, read 2026-09-26); https://github.com/pixiv/charcoal (Charcoal — "Design system library by pixiv"; a nonsense repository path returns 404, read 2026-09-26); https://www.pixiv.co.jp/company/ (ピクシブ株式会社 会社概要 — founded 2005-07-25, Tokyo office in Sendagaya, Shibuya, read 2026-09-26)
