pixiv DESIGN.md

Design System Inspiration of pixiv (ピクシブ)

Overview

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

Primary tasks

• Scroll a dense grid of artwork and open one full screen.
• Bookmark a work from its thumbnail or its detail page.
• Follow an artist whose new work you want to keep seeing.
• Search by tag to find artists across a language barrier.
• Post an illustration and collect bookmarks, comments, and ranking feedback.

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.

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.

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.

Colors

Every value below is a live computed reading of pixiv's own production surface (pixiv.net, 2026-09-21) or of a Charcoal component story. pixiv publishes its design system, Charcoal, as CSS custom properties on the product itself — 328 --charcoal-* tokens resolve on the logged-out home page — so the palette is measured, not transcribed. Charcoal's own token name is given for each role.

Primary

• pixiv Blue (#0096fa) — --charcoal-brand, also --pixiv-brand-color. Primary interactive colour: links, primary CTAs, active tabs, focus rings. The single most recognisable brand token, and identical in light and dark themes.
• Brand Highlight (#0086e0) — --pixiv-brand-color-highlight. pixiv's own hover token for brand-blue surfaces.
• Button Hover (#0090f0) — --charcoal-brand-hover. Charcoal's component-level hover, measured on the primary button. It is a different value from the brand highlight above: the site keeps one, the component library the other.
• Button Pressed (#007ed2) — --charcoal-brand-press.
• Brand Faded (#99d7ff) — --pixiv-brand-color-faded. Tinted brand surface.

Engagement (Brand Signature)

• pixiv Red (#ff4060) — --charcoal-like and --charcoal-r18. The bookmark/like heart and the age-restricted marker share one token. pixiv's second iconic colour.

Semantic

Charcoal's semantic ramp is not a conventional green/amber/red set:

• Success (#b1cc29) — --charcoal-success. A yellow-green, not a conventional green.
• Warning (#ffaf0f) — --charcoal-warning.
• Assertive / Error (#ff2b00) — --charcoal-assertive. A pure orange-red, distinctly hotter than the engagement red.
• Link (#3d7699) — --charcoal-link1; hover #336481 (--pixiv-spa-link-hover). Note that in-body links are not brand blue — a deliberate separation.

Neutral Scale (Light Theme)

Charcoal names its neutrals by role, not by numeric weight:

• Canvas (#ffffff) — --charcoal-background1, --charcoal-surface1. Page background.
• Surface (#f5f5f5) — --charcoal-background2. Secondary background and hover fill.
• Surface Pressed (#d6d6d6) — --charcoal-background1-press.
• Foreground (#1f1f1f) — --charcoal-text1. Primary text on light surfaces.
• Text Muted (#474747) — --charcoal-text2. Secondary text.
• Text Tertiary (#858585) — --charcoal-text3. Captions, metadata, counts.
• Text Disabled (#adadad) — --charcoal-text4.
• On Primary (#ffffff) — measured as the primary button's computed text colour.
• Border Default — --charcoal-border-default, rgba(0,0,0,0.08). Charcoal builds its separators from translucent black rather than a solid grey, so borders composite over whatever surface they sit on.

Dark Theme

pixiv honours prefers-color-scheme; 223 of 394 custom properties change value between the two themes. Measured on the same page with the dark scheme forced:

• Canvas (#1f1f1f) — dark --charcoal-background1 / --charcoal-surface1.
• Elevated (#3a3a3a) — dark --charcoal-surface1-hover.
• Text (#f5f5f5) — dark --charcoal-text1.
• Text Muted (#d6d6d6) — dark --charcoal-text2.
• Text Tertiary stays #858585 and pixiv Blue stays #0096fa — neither shifts between themes.

Typography

Font Family

Three distinct facts, on three distinct surfaces — they are not interchangeable:

• Charcoal's declared token: --charcoal-text-v1-font-family-sans resolves to Noto Sans CJK JP. This is the design system's own declaration, read from the token live on pixiv.net.
• Charcoal components as rendered: component stories compute Noto Sans JP on buttons, fields and tags.
• The product's body stack, computed on pixiv.net, is not the token. It is verbatim: win-bug-omega, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif. The leading win-bug-omega is a deliberately non-existent family — a known sentinel used to work around a Windows font-matching bug — so body text resolves to the OS UI font.

pixiv ships no proprietary brand typeface. Brand personality lives in colour and layout. The system stack is a deliberate choice for paint speed on a thumbnail grid, not a fallback; it is recorded here as an observation of the product, and is not promoted to a brand face.

Hierarchy

Charcoal publishes size and line-height as paired pixel tokens (--charcoal-text-font-size-* / --charcoal-text-line-height-*). Read live:

Charcoal also publishes caption-s-10 (10px) and a text-v1-* compatibility scale (12 / 14 / 16 / 20 / 32px). Only two weights are tokenised: 400 and 700.

Principles

• System-stack first: the face must already be on the device so a thumbnail grid paints instantly.
• Two tokenised weights: 400 for body, 700 for headings. Charcoal publishes no 600.
• JP line-height runs generous: 22px on 14px body (≈1.57) for dense kanji legibility.
• Numbers are metadata, not heroes: counts render at 12px in #858585 — the art is the hero, not the stats.
• Tags are typographic UI: tag pills are a primary navigation surface.

Brand face, substitute, safe default

• Brand face: none proprietary. Charcoal's sans token names Noto Sans CJK JP, an open-licence face (SIL Open Font License 1.1, github.com/notofonts/noto-cjk); Charcoal component stories compute Noto Sans JP, and pixiv.net body text resolves to the OS UI font.
• Substitute: none needed; the token's face is installable and the product body uses the OS font.
• Safe default (not the brand face): none listed; the product body already uses an operating-system stack.

Layout

Spacing System

• Base unit: 4px
• Published scale (--charcoal-space-*): 4px, 8px, 12px, 16px, 24px, 32px, 64px. Charcoal publishes no 48px step; the earlier prose listed one.
• 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

Measured: Charcoal publishes --charcoal-radius-oval (999999px) and the component readings give the rest.

• Sharp (4px): checkboxes, tag pills
• Comfortable (16px): segmented control
• Oval (999999px): buttons, icon buttons, switch tracks — Charcoal's dominant shape

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

Elevation & Depth

Not measured. Charcoal publishes no shadow or elevation token — the only shadow custom properties resolving on pixiv.net belong to Tailwind (--tw-shadow), not to pixiv. The table below is retained as the earlier prose pass's description of observed practice; its specific shadow recipes are not verified values and are not tokenised.

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.

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.

Components

Buttons

Measured on Charcoal component stories (charcoal-web.pixiv.design), pointer parked between readings. Charcoal buttons are fully oval (border-radius: 999999px, --charcoal-radius-oval) — not the 6px rectangle an earlier pass of this reference declared.

Primary (Fill)

• Background: #0096fa · Text: #ffffff · Border: none
• Radius: oval (999999px) · Padding: 0 24px · Height: 40px · Font: 14px / 700
• Hover: bg #0090f0, text #f5f5f5 · Pressed: bg #007ed2, text #d6d6d6
• Focus: box-shadow: rgba(0, 150, 250, 0.32) 0 0 0 4px — a 4px halo of the brand blue at 32%, measured 2026-09-22 with each state read on its own page load so no mouse press precedes the focus reading. The earlier pass abstained here; the abstention is resolved. The same value appears on the Default button and the icon button, which is Charcoal's published FocusRing observed rather than inferred: one ring for the library, not a style per button. It is a box-shadow, so it is unmistakably authored — the browser's own ring is an outline.
• Use: Primary CTA — フォロー (Follow), 投稿 (Post), ログイン (Login).

Default (Neutral)

• Background: translucent black — 4% at rest, 8% hover, 19% pressed · Text: #474747
• Radius: oval · Padding: 0 24px · Height: 40px · Font: 14px / 700
• Use: low-emphasis actions. Composites over its surface instead of using a solid grey.

Icon Button

• Transparent at rest, icon #858585 · 40px square · oval · Font: 16px / 400
• Hover: fill #f5f5f5 · Pressed: fill #d6d6d6

Not measured: secondary/outline, follow-toggle and premium variants were declared by an earlier prose pass but have no matching published story, and no disabled state was captured for any button. The segmented control (32px tall, 16px radius on a 4% black fill) and text field (40px row) were read at their container only — the inner control was not isolated — so they are described here but not tokenised as components. All are omitted rather than inferred.

Switch, Checkbox and Controls

• Switch — 16px track, fully round, #858585 off. Hover and pressed darken the track; focus turns it #0096fa. A rare case of focus carrying the state change.
• Checkbox — 20px box, 4px radius, 2px solid #858585. Focus fills #0096fa and drops the border. Hover and pressed are unchanged from rest.
• Tag Item — 40px tall, 4px radius, 0 24px-class padding, text #ffffff. The fill varies by tag category, so no single tag background is recorded.

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, light and dark); https://charcoal-web.pixiv.design (Charcoal's published component stories — 38 components / 215 stories — measured for component geometry and state); https://github.com/pixiv/charcoal (Charcoal — pixiv's own design-system library, Apache-2.0 on the official pixiv GitHub org; foundation package defines color, typography, spacing and border-radius token modules).

States

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

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.

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

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #0096fa measures 3.11:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.