Design System Inspiration of BOOTH

Overview

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.

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.

Principles

• Creators first. Neutral chrome, colourful content.
• Shared system. Charcoal tokens across pixiv products.
• Every container has states. Default, hover, press.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

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.

Typography

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.

Layout

• A header search, notices, a promotional carousel and rows of translucent event tiles.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

Light: a 1px shadow on carousel controls; overlays use --charcoal-color-background-overlay.

Motion & Easing

Not measured.

Components

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.

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.

Live state probe, 2026-10-16 (), link-notice: focus — label #0f6270, browser default focus ring (outline auto) (+4 nested-layer changes).

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.

Voice & Tone

Not assessed as authored voice.

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.”