Design System Inspiration of pixiv (ピクシブ)

1. Visual Theme & Atmosphere

pixiv is Japan's largest illustration and creative-work community — a place where millions of artists upload, tag, browse, and bookmark original and fan art. The interface exists to do one thing extraordinarily well: get vivid, full-bleed artwork in front of the viewer's eyes with as little chrome as possible. The product feels like a gallery wall, not a dashboard. The canvas is a near-white surface (#ffffff to #f5f5f5) with the artwork itself supplying nearly all the saturation; pixiv's own UI recedes into neutral greys so that nothing competes with a creator's color choices.

The brand anchor is pixiv blue (#0096fa) — a bright, friendly cyan-leaning blue that sits on the "approachable" end of the blue spectrum rather than the corporate-indigo end. It's the color of every link, every primary button, every active tab, and the "i" stylization of the wordmark. Against the neutral chrome it reads as cheerful and energetic, matching a community built on amateur and professional creativity rather than enterprise software. The logo wordmark is a lowercase geometric sans where the dot of the "i" is rendered in pixiv blue — a small but consistent brand signature.

What defines pixiv visually is content-first restraint with bursts of system color. The grid of thumbnails is the hero; UI is quiet and grey until you reach an interactive element, at which point pixiv blue (for navigation/CTAs) or pixiv red (#ff4060, for the signature "like"/bookmark heart) appears. The atmosphere is light, dense, and tag-driven — a high-information, scroll-forever experience optimized for discovery, with Japanese as the primary language and a heavy reliance on system fonts for fast rendering across an enormous, device-diverse user base.

Key Characteristics:

• pixiv Blue (#0096fa) as the universal interactive/navigation accent — bright, friendly, cyan-leaning
• pixiv Red/Pink (#ff4060) reserved for the bookmark "heart" and engagement signals
• Content-first: artwork supplies saturation, UI stays neutral grey
• System-font stack (Hiragino, Yu Gothic, Meiryo, Noto Sans JP) for fast multi-device rendering
• Dense thumbnail grids — discovery and tagging are the core interaction
• Soft 4–8px corner radii, minimal shadows, flat-but-warm surfaces
• Light theme default with a true dark theme (#1f1f1f surfaces) for long browsing sessions

2. Color Palette & Roles

Primary

• pixiv Blue (#0096fa): Primary interactive color — links, primary CTAs, active tabs, focus rings, the wordmark dot. The single most recognizable brand token.
• pixiv Blue Dark (#0086e0): Hover/pressed state for blue elements.
• pixiv Blue Light (#e3f3ff): Tinted informational backgrounds, selected chips, subtle blue surfaces.
• Pure White (#ffffff): Page background, card/thumbnail surface in light theme.
• Near-Black Text (#1a1a1a): Primary heading and body text on light surfaces.

Engagement (Brand Signature)

• pixiv Red (#ff4060): The bookmark/like heart, engagement counts, "新着" (new) accents. pixiv's second iconic color — energetic coral-red used sparingly but recognizably.
• Heart Outline (#cccccc): Un-bookmarked heart resting state.

Semantic

• Success Green (#4caf50): Upload success, confirmations, positive system messages.
• Error Red (#e3413f): Form errors, destructive actions, validation failures. Distinct from the warmer engagement red.
• Warning Amber (#ff9800): Pending states, R-18 content gates, attention banners.
• Premium Gold (#ffb300): pixiv Premium membership accents, badges, upsell surfaces.

Neutral Scale (Light Theme)

• Grey 50 (#fafafa): Lightest surface, page wash behind cards.
• Grey 100 (#f5f5f5): Secondary background, hover fills, input backgrounds.
• Grey 200 (#eeeeee): Card fills, disabled surfaces.
• Grey 300 (#dddddd): Default borders, dividers.
• Grey 400 (#cccccc): Strong borders, icon outlines, inactive hearts.
• Grey 500 (#999999): Placeholder text, disabled labels.
• Grey 600 (#858585): Caption text, secondary metadata, tag counts.
• Grey 700 (#666666): Body text on light surfaces, secondary labels.
• Grey 800 (#333333): Strong labels, navigation text, sub-headings.
• Grey 900 (#1a1a1a): Primary text, headings.

Dark Theme

• Surface Base (#1f1f1f): Dark-theme page background.
• Surface Raised (#2b2b2b): Cards, headers, raised panels in dark mode.
• Surface Border (#3a3a3a): Dividers and borders in dark mode.
• Text Primary Dark (#f0f0f0): Primary text on dark surfaces.
• Text Secondary Dark (#aaaaaa): Secondary text on dark surfaces.
• pixiv Blue stays #0096fa in dark mode — the accent does not shift.

Surface & Borders

• Border Default: #dddddd. Card edges, input borders, list dividers.
• Border Strong: #cccccc. Active inputs, emphasized separators.
• Overlay Scrim: rgba(0,0,0,0.6). Modal/lightbox backdrops — darker than typical to let illustrations pop in the viewer.
• Tag Chip: #f5f5f5 bg / #0096fa text. The ubiquitous tag pill.

3. Typography Rules

Font Family

• Primary (JP): -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Meiryo", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif
• Latin/Numerals: Falls through to -apple-system/Helvetica Neue/Arial ahead of the JP faces so Latin glyphs render cleanly.
• Monospace: "SF Mono", Consolas, "Courier New", monospace — used only in dev/embed contexts.
• pixiv ships no custom brand typeface; it relies on the platform system stack for speed and broad device coverage. Brand personality lives in color and layout, not a proprietary font.

Hierarchy

Principles

• System-stack first: Speed over custom type. The font must already be on the device so a thumbnail grid paints instantly.
• Three weights: 400 (body), 600 (emphasis), 700 (headings/titles). Bold is for titles, never long body.
• JP line-height runs generous: Japanese text uses 1.5–1.6 line-height for legibility of dense kanji at small sizes.
• Numbers are metadata, not heroes: View/like counts render small (12px) and grey — the art is the hero, not the stats.
• Tags are typographic UI: Tag pills use 13px text and are themselves a primary navigation surface, colored pixiv blue.

4. Component Stylings

Buttons

Primary (Fill)

• Background: #0096fa
• Text: #ffffff
• Border: none
• Radius: 6px
• Padding: 10px 20px
• Font: 14px / 700
• Hover: #0086e0
• Disabled: #cccccc bg, #ffffff text
• Use: Primary CTA — フォロー (Follow), 投稿 (Post), ログイン (Login). ~40px tall.

Secondary (Outline)

• Background: #ffffff
• Text: #0096fa
• Border: 1px solid #0096fa
• Radius: 6px
• Padding: 10px 20px
• Font: 14px / 700
• Hover: #e3f3ff bg
• Use: Secondary action paired with a primary (キャンセル alt, フォロー中 toggled state).

Neutral (Grey)

• Background: #f5f5f5
• Text: #666666
• Border: 1px solid #dddddd
• Radius: 6px
• Padding: 10px 20px
• Font: 14px / 600
• Hover: #eeeeee
• Use: Low-emphasis actions (もっと見る / "show more", filters, cancel).

Follow (Toggle)

• Unfollowed: #0096fa fill, white text, "+ フォロー"
• Following: #ffffff bg, #999999 text, 1px #dddddd border, "フォロー中"
• Radius: 6px
• Use: The signature follow toggle — the most-pressed button on the site.

Premium (Gold)

• Background: #ffb300
• Text: #ffffff
• Border: none
• Radius: 6px
• Padding: 10px 20px
• Font: 14px / 700
• Use: pixiv Premium upsell CTAs.

Size scale (height · font · radius): small 32px · 13px / 600 · 4px; medium (default) 40px · 14px / 700 · 6px; large 48px · 15px / 700 · 8px.

Bookmark / Like

Bookmark Heart

• Default (un-bookmarked): outline heart, stroke #cccccc, 24px
• Active (bookmarked): filled heart #ff4060, 24px
• Count label: 12px / 400 / #858585 to the right
• Animation: 200ms scale-pop (1.0 → 1.25 → 1.0) on toggle
• Use: The core engagement action — appears on every thumbnail hover and the artwork detail page.

Inputs

Text Field (default)

• Background: #ffffff
• Text: #333333
• Border: 1px solid #dddddd
• Radius: 4px
• Padding: 10px 12px
• Font: 14px / 400
• Placeholder: #999999
• Focus: border #0096fa, subtle 0 0 0 2px rgba(0,150,250,0.15) ring
• Use: Search bar, form fields, comment box.

Search Bar

• Background: #f5f5f5
• Text: #333333
• Border: 1px solid transparent
• Radius: 20px (pill)
• Padding: 8px 16px 8px 36px (leading search icon)
• Focus: white bg, #0096fa border
• Use: Global tag/keyword search — the primary discovery entry point. Pill-shaped.

Error

• Border: 1px solid #e3413f
• Help text: #e3413f 12px below the field.

Cards (Artwork Thumbnail)

Thumbnail Card

• Background: #ffffff
• Border: none
• Radius: 8px (image corners clipped to match)
• Image: square or aspect-preserved, object-fit cover
• Overlay badges: top-right page-count pill (rgba(0,0,0,0.6) bg, white 11px text), top-left R-18/manga tag
• Title: 13px / 700 / #1a1a1a, single-line ellipsis below image
• Author: 12px / 400 / #666666 with 20px avatar
• Hover: bookmark heart fades in top-right; slight 0 2px 8px rgba(0,0,0,0.12) lift
• Use: The atomic unit of the entire site — the discovery grid.

Content Card (panel)

• Background: #ffffff
• Border: 1px solid #eeeeee
• Radius: 8px
• Padding: 16px
• Shadow: none (border-defined)
• Use: Ranking blocks, recommendation sections, profile panels.

Tags / Chips

Tag Pill

• Background: #f5f5f5
• Text: #0096fa
• Border: none
• Radius: 4px
• Padding: 4px 8px
• Font: 13px / 400
• Prefix: "#" rendered in #999999
• Hover: #e3f3ff bg
• Use: Ubiquitous — tags are primary navigation. Every artwork has 5–20.

Badges

Page Count (on thumbnail)

• Background: rgba(0,0,0,0.6)
• Text: #ffffff
• Radius: 10px
• Padding: 2px 6px
• Font: 11px / 700
• Use: Multi-page artwork indicator (e.g. "12P").

R-18 / Content Gate

• Background: #ff4060
• Text: #ffffff
• Radius: 4px
• Font: 11px / 700
• Use: Age-restricted content marker.

Premium Badge

• Background: #ffb300
• Text: #ffffff
• Radius: 4px
• Use: Premium member / premium feature marker.

Tabs

Underline Tab

• Background: transparent
• Inactive text: #858585
• Active text: #0096fa
• Active indicator: 2px #0096fa bottom border
• Font: 14px / 700
• Padding: 12px 16px
• Use: Section switching (イラスト / 漫画 / 小説, ranking periods).

Toasts

Default

• Background: #333333
• Text: #ffffff
• Radius: 4px
• Padding: 12px 16px
• Shadow: 0 4px 12px rgba(0,0,0,0.2)
• Font: 14px / 400
• Use: "ブックマークしました" (Bookmarked), auto-dismiss ~2.5s, bottom-center.

Dialogs

Centered Modal

• Background: #ffffff
• Radius: 8px
• Padding: 24px
• Shadow: 0 8px 28px rgba(0,0,0,0.25)
• Backdrop: rgba(0,0,0,0.6)
• Use: Login prompts, settings, confirmation dialogs.

Lightbox (Artwork Viewer)

• Background: rgba(0,0,0,0.9) — near-black to maximize illustration contrast
• Image: centered, max viewport, zoom/pan enabled
• Controls: white icons, page counter top-center
• Use: Full-screen artwork viewing — the signature consumption mode.

Toggles

Switch

• On: #0096fa track, white thumb
• Off: #cccccc track, white thumb
• Radius: 9999px
• Thumb shadow: 0 1px 2px rgba(0,0,0,0.2)
• Use: Settings (R-18 display, notifications, dark mode).

Tier 1 sources: https://www.pixiv.net (live production site, verified via live DOM getComputedStyle).

5. Layout Principles

Spacing System

• Base unit: 4px
• Common values: 4px, 8px, 12px, 16px, 24px, 32px, 48px
• Grid gutters: 12px–16px between thumbnails
• Section spacing: 32px between discovery blocks

Grid & Container

• Max content width: ~1224px centered on desktop
• Thumbnail grid: responsive auto-fill, ~184px–200px min column width, flowing to 6 columns at full desktop width
• Sidebar (where present): ~240px fixed, content fluid
• Mobile: 2-column thumbnail grid, full-bleed

Whitespace Philosophy

• Let the art breathe, pack the chrome: Generous gutters around thumbnails so each illustration reads as its own object, but UI chrome (header, tags, metadata) is dense and efficient.
• Edge-to-edge imagery: Thumbnails and the viewer push to container edges; padding is for text, not images.
• Scroll is infinite: Discovery feeds are designed for endless vertical scroll — there is no "bottom" to optimize toward.

Border Radius Scale

• Sharp (4px): Inputs, tag pills, small badges
• Standard (6px): Buttons
• Comfortable (8px): Cards, thumbnails, modals
• Pill (20px): Search bar
• Round (9999px): Avatars, toggle tracks

6. Depth & Elevation

Shadow Philosophy: pixiv uses shadows sparingly and prefers 1px borders to define surfaces. Because the content is already visually rich, heavy elevation would add noise and compete with artwork. Shadows appear mainly on hover (to signal interactivity) and on true overlays (toasts, modals). Pure neutral black at low opacity — no colored shadows.

Blur Effects

• The sticky header may apply a light backdrop blur over scrolling content.
• The lightbox viewer uses no blur — just a near-opaque dark scrim so the illustration is the only thing in focus.

7. Do's and Don'ts

Do

• Use pixiv Blue (#0096fa) for all navigation, links, and primary CTAs
• Reserve pixiv Red (#ff4060) for the bookmark heart and engagement signals
• Keep UI chrome neutral grey so artwork supplies the color
• Use the system-font stack with JP faces (Hiragino, Yu Gothic, Noto Sans JP)
• Make thumbnails edge-to-edge with 12–16px gutters
• Show metadata (views, likes) small and grey — never let stats outshine art
• Treat tags as primary navigation, colored pixiv blue
• Provide a true dark theme (#1f1f1f) for long browsing sessions

Don't

• Don't saturate the chrome — the artwork is the only thing allowed to be loud
• Don't use pixiv Red for non-engagement UI (it means "like/bookmark")
• Don't add heavy or colored shadows — prefer 1px borders
• Don't use bold weight for long body text — 700 is for titles only
• Don't enlarge view/like counts; they are quiet metadata
• Don't crop or letterbox the lightbox image with blur — use a clean dark scrim
• Don't introduce a custom display font; the system stack is intentional for speed
• Don't use radius > 8px except for the search pill, avatars, and toggles

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons: medium ~40px, large ~48px
• Bookmark heart: 44px tap area (24px glyph + padding)
• Thumbnail tap: entire card is the tap target
• Tag pills: minimum 32px height for touch

Collapsing Strategy

• Sidebar collapses to a hamburger/drawer on mobile
• Multi-column grid reflows to 2 columns on phones
• Inline metadata rows stack vertically on narrow screens
• Sticky bottom action bar (bookmark/follow) on mobile artwork detail
• Search bar collapses to an icon that expands on tap

Image Behavior

• Thumbnails: object-fit cover, lazy-loaded, square or aspect-preserved
• Avatars: 20–48px, circular
• Full artwork: responsive max-width in the lightbox, pinch-zoom on mobile
• Multi-page works: horizontal swipe carousel on mobile, vertical stack on desktop

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA / links: pixiv Blue (#0096fa)
• CTA Hover: Blue Dark (#0086e0)
• Blue tint surface: (#e3f3ff)
• Bookmark / engagement: pixiv Red (#ff4060)
• Background: White (#ffffff) / Grey 50 (#fafafa)
• Surface fill: Grey 100 (#f5f5f5)
• Heading text: Near-Black (#1a1a1a)
• Body text: Grey 700 (#666666)
• Caption / metadata: Grey 600 (#858585)
• Placeholder: Grey 500 (#999999)
• Border: Grey 300 (#dddddd)
• Success: Green (#4caf50)
• Error: Red (#e3413f)
• Premium: Gold (#ffb300)
• Dark surface: (#1f1f1f) / raised (#2b2b2b)

Example Component Prompts

• "Create an artwork thumbnail card: 8px radius, white bg, square cover image. Title 13px weight 700 #1a1a1a single-line ellipsis below image. Author row: 20px circular avatar + 12px weight 400 #666666. Top-right page-count badge rgba(0,0,0,0.6) white 11px weight 700. On hover: bookmark heart fades in top-right + shadow 0 2px 8px rgba(0,0,0,0.12)."
• "Build a bookmark heart toggle: default outline heart stroke #cccccc 24px; active filled #ff4060; 200ms scale-pop 1.0→1.25→1.0; count label 12px #858585 to the right."
• "Design a follow button: default #0096fa fill, white text 14px weight 700, 6px radius, 40px tall, '+ フォロー'. Following state: white bg, #999999 text, 1px #dddddd border, 'フォロー中'."
• "Create the global search bar: pill shape 20px radius, #f5f5f5 bg, leading search icon, 14px text #333333, placeholder #999999. Focus: white bg, #0096fa border."
• "Design a tag pill: #f5f5f5 bg, #0096fa text 13px, 4px radius, 4px 8px padding, '#' prefix in #999999. Hover #e3f3ff bg."
• "Build an underline tab bar: inactive #858585 14px weight 700; active #0096fa with 2px #0096fa bottom border."

Iteration Guide

1. Use the system-font stack with JP faces — no custom display font
2. pixiv Blue (#0096fa) is navigation + CTAs; pixiv Red (#ff4060) is bookmark/engagement only
3. Keep all chrome neutral grey so artwork supplies the color
4. Thumbnails are 8px radius, edge-to-edge, 12–16px gutters, lazy-loaded
5. Metadata (views/likes) stays small (12px) and grey
6. Prefer 1px #dddddd borders over shadows; reserve shadows for hover + overlays
7. Support a dark theme: #1f1f1f base, #2b2b2b raised, accent stays #0096fa

10. Voice & Tone

pixiv speaks to creators and fans as peers in a shared hobby — warm, encouraging, and casual, never corporate. Japanese is the primary voice; English and other localizations are translations layered on top. The tone celebrates making and sharing: prompts nudge ("作品を投稿してみよう" / "try posting a work") rather than command. It avoids the gamified hype of growth-startup copy and the dryness of enterprise tools — it sounds like a generous community manager.

Forbidden moves. No artificial urgency ("Hurry!"), no shaming low-engagement creators, no condescension toward amateurs. The platform's whole premise is that anyone can post; copy never gatekeeps skill level. Stats are presented, never weaponized.

11. Brand Narrative

pixiv launched in September 2007, created by Takahiro Kataoka, as a social-networking and contest service where illustrators could post work and receive feedback through bookmarks, comments, and rankings. It is operated by pixiv Inc. (ピクシブ株式会社), headquartered in Sendagaya, Tokyo. The name "pixiv" blends "pixel" with the idea of a living, interactive (-iv) creative space. From a niche illustrator board it grew into the dominant hub of Japanese online art culture, hosting tens of millions of registered users and hundreds of millions of works spanning original illustration, manga, novels, and fan art.

The design's job is precise: disappear behind the art. Unlike Western social platforms that brand every pixel, pixiv keeps its own surfaces neutral grey so the only saturated color on screen is what a creator made. pixiv blue (#0096fa) is the friendly thread that ties navigation together; pixiv red (#ff4060) is the heartbeat of community appreciation. Together they form a two-note system that never overpowers the gallery.

pixiv anchors a broader ecosystem — pixiv FANBOX (creator subscriptions), BOOTH (creator marketplace), pixiv Sketch (live drawing), pixivision (editorial), and pixiv FACTORY (print-on-demand) — all sharing the same blue accent and content-first restraint. The brand promise across all of them is the same: lower the friction between making something and finding the people who'll love it.

What pixiv refuses: the algorithmic opacity and engagement-maximizing dark patterns of large Western social networks, the sterile minimalism of enterprise SaaS, and any visual language that would compete with the artwork. The aesthetic is amateur-friendly, dense, tag-driven, and proudly Japanese — a community gallery, not a feed engine.

12. Principles

1. The art is the only thing allowed to be loud. Every UI decision asks: does this add color/contrast that competes with the thumbnail grid? If yes, mute it. Chrome stays grey.
2. Two-note color system. Blue (#0096fa) is navigation and action; Red (#ff4060) is bookmark and appreciation. No third brand hue. Semantic colors exist but stay quiet.
3. Discovery is infinite. Feeds have no bottom. Design for endless scroll, lazy-load aggressively, and make every thumbnail a doorway.
4. Tags are navigation, not decoration. A tag is a tappable, blue, first-class way to move through the site. Treat tag pills as primary UI.
5. Metadata whispers. View counts, likes, and timestamps are 12px grey. Stats inform; they never dominate or shame.
6. System fonts for speed. No custom display face. The grid must paint instantly on any device, in any of dozens of locales.
7. Borders over shadows. Define surfaces with 1px #dddddd borders. Reserve elevation for hover affordances and true overlays.
8. Respect the creator and the viewer equally. Content gates are neutral and clear; engagement is celebrated quietly; nothing gatekeeps skill or shames participation.

13. Personas

Personas below are fictional archetypes informed by publicly described pixiv user segments, not individual people.

さくら (Sakura), 19, Osaka. Art student who posts original illustrations 2–3 times a week. Lives in the upload flow and her notification feed — every new bookmark is dopamine. Cares about tags being exactly right so the correct audience finds her work. Browses the daily ranking every morning for inspiration and to gauge trends. Uses dark mode at night while drawing. Would be devastated if the bookmark count moved or grew louder — it's perfect as a quiet number.

ケンジ (Kenji), 34, Tokyo. Office worker and lifelong fan, never posts. Bookmarks dozens of works a day, follows ~400 artists, and supports a handful through FANBOX. Browses primarily on mobile during his commute, swiping through multi-page manga works. Wants the heart always within thumb reach and the lightbox to load full-resolution fast. Trusts pixiv blue as "the art-site color" — sees it and knows he's home.

Mei, 27, Singapore. International fan who uses the English UI but searches with Japanese tags she's learned. Relies on the tag system and ranking to discover artists across the language barrier. Sensitive to content-gate clarity — wants R-18 settings obvious and respected. Values that the interface looks identical to the JP version; the universal grey-and-blue chrome makes the language gap feel small.

14. States

15. Motion & Easing

Durations (named):

Easings:

Signature motions.

1. Heart pop. On bookmark, the heart fills #ff4060 and scales 1.0 → 1.25 → 1.0 over motion-pop with ease-pop. The overshoot is the brand's single moment of playfulness — it celebrates appreciation. Used nowhere else.
2. Thumbnail hover lift. On hover, a card raises with 0 2px 8px rgba(0,0,0,0.12) over motion-fast / ease-standard and the bookmark heart fades in top-right. Signals "this is interactive" without disturbing the grid.
3. Lightbox open. The viewer fades the dark scrim in over motion-slow / ease-enter while the image scales from 0.96 → 1.0. Dismissal reverses faster with ease-exit — exiting feels lighter than entering.
4. Reduce motion. Under prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant and the heart pop becomes a simple color fill. The site stays fully usable, just static.