Pixiv Design System Deep Dive

1. Brand Overview

Pixiv has been around long enough to feel familiar, but their design refresh in early 2025 tightened the visual language. This isn’t a hyper-minimalist Silicon Valley product. It’s a platform for creatives — illustrators, manga artists, digital painters — and the interface reflects that. There’s a clear priority on content: the UI is there to support the artwork, not fight for attention.

The vibe is utilitarian with a few friendly touches. The brand blue (#0096fa) is unapologetically digital. It’s bright, confident, and instantly recognizable against the mostly neutral backgrounds. They use system fonts — no fancy custom typefaces — which keeps everything lightweight and familiar across OSes. Buttons are pill-shaped more often than not, with generous radii like 20px and 22px that feel approachable without going full “bubble.”

Color usage leans on contrast: white text on blue for CTAs, medium-gray text (#464a4d) for body copy, and subdued link colors like #669fc2. Hover states are high-contrast — often flipping to white text — which makes interactive elements obvious even without underlines. The palette avoids pure black for text; instead, they use deep grays (#1f1f1f, #3c3c3c) that read softer on screen.

Spacing sticks to an 8px base grid, with occasional odd values like 5px sneaking in. Layout breakpoints at 1130px and 1300px suggest a desktop-first approach, with scaling containers rather than a fluid grid. Borders are subtle (rgba(0,0,0,0.08)), shadows are non-existent — this is flat design territory.

Overall: Pixiv’s design system is about staying out of the way. Let the art shine, keep the UI consistent, make actions obvious. There’s no motion-heavy gimmicks or ornamental textures — just a clear, functional skin that respects the content it’s framing.

2. Color System

2.1 Primary Colors

The main brand color is #0096fa — bright, saturated blue. It’s used for primary buttons, brand accents, and interactive elements that need to stand out. Psychologically, this blue leans toward trust and creativity. Compared to competitors in the creative space (DeviantArt’s darker green, ArtStation’s teal), Pixiv’s blue is more energetic and less moody. It’s closer to Twitter’s vibe but with more saturation.

They also define hover and press variations:

• Hover: #0090f0 — slightly darker, keeps the energy but signals interaction
• Press: #007ed2 — deeper still, reinforcing the click state

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid: brand blue on white easily passes WCAG AA for normal text (>4.5:1). White text on brand blue is high contrast (>7:1). Gray text on white (#464a4d) is around 7:1 — safe for readability. The lighter link blue (#669fc2) on white is borderline (~3.5:1), so they rely on underlines or hover flips to white-on-dark for clarity.

Dark mode isn’t part of this extracted set — everything here is light-mode friendly. Transparency is used sparingly for hover overlays.

2.4 Usage Guide

• Use #0096fa for primary buttons and key interactive elements.
• Hover states should be one step darker (#0090f0 or #007ed2).
• Body text should stick to deep grays (#464a4d, #1f1f1f).
• Avoid pure black for text — they don't use it for body copy.
• Link colors can be #669fc2 or #3d7699, but always change on hover.
• The transparent black overlays are for subtle interaction feedback, not for large surfaces.

3. Typography

3.1 Font Families

Pixiv uses system-ui for most elements, with a full OS-aware stack:

system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Hiragino Kaku Gothic ProN, Meiryo

Buttons sometimes use Arial — probably for tighter metrics and consistent bold rendering.

No Google Fonts or Adobe Fonts. This keeps page loads fast and text rendering native.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is subtle. Most text sits at 14px, with small variants at 12px for captions or compact UI. Bold weight (700) is reserved for buttons and emphasized links. The tall line height (2.86) for bold links is unusual — likely for vertical alignment in nav bars.

This system is functional, not decorative. Readability is good, but the lack of larger headline sizes suggests headings are handled differently or with CSS scaling outside this dataset.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Common values:

4.2 Layout

Breakpoints: 1130px and 1300px. Suggests fixed-width containers that adapt at these widths rather than fluid scaling. Desktop-first with adjustments for wider screens.

5. Visual Elements

Border Radius System:

Shadows: None. Completely flat design.

Borders: Thin 1px solid rgba(0,0,0,0.08) for dividers. Occasionally rgb(51,51,51) for elements like dropdown carets.

6. Components

6.1 Buttons

Primary CTA Button (notify-button agree):

• Default:

  • Background: #0096fa
  • Text: #ffffff
  • Padding: 0px 24px
  • Border-radius: 20px
  • Font: Arial, 14px, bold (700)
  • Border: none

• Hover:

  • Background: #a6a6a6 (light gray)
  • Text: #ffffff

No active/focus states defined in this dataset.

Compact App Button (btn-item):

• Default:

  • Background: rgba(0,0,0,0.04)
  • Text: fully transparent (rgba(0,0,0,0)) — icon-only?
  • Padding: 1px 6px
  • Border-radius: 20px
  • Font: Arial, 0px font size (weird, likely icon button)

• Hover:

  • Background: #a6a6a6
  • Text: #ffffff

6.2 Links

Five variants, all no underline:

1. #669fc2 → hover white
2. #ffffff → hover white
3. #65c7e9 → hover white
4. #5c5c5c bold → hover white
5. #3d7699 → hover white

6.3 Forms

Text input:

• Default:

  • Bg: #ffffff
  • Text: #666666
  • Border: none
  • Border-radius: 4px
  • Padding: 0px 8px 0px 26px

• Focus:

  • Bg: #ffffff
  • Outline: none
  • Text: #ffffff (odd — possibly inverted style in search bars)

6.4 Cards

No explicit card component in dataset. Divs with 8px or 24px radius, thin borders.

7. Design Tokens

:root {
  /* Colors */
  --white: #ffffff;
  --charcoal-gray: #464a4d;
  --black: #000000;
  --link-blue-light: #669fc2;
  --link-blue-deep: #3d7699;
  --light-gray: #b3b3b3;
  --dark-gray: #333333;
  --mid-gray: #858585;
  --brand-blue-press: #005fcc;
  --sky-blue: #6dcaea;
  --deep-sky-blue: #0082d9;
  --transparent-black-7: rgba(0,0,0,0.07);

  --charcoal-brand: #0096fa;
  --charcoal-brand-hover: #0090f0;
  --charcoal-brand-press: #007ed2;
  --charcoal-text1: #1f1f1f;
  --charcoal-text1-hover: #1e1e1e;
  --charcoal-text1-press: #1a1a1a;
  --charcoal-text2-hover: #444444;
  --charcoal-text2-press: #3c3c3c;
  --charcoal-text3-press: #707070;
  --charcoal-text4-hover: #a6a6a6;
  --charcoal-text4-press: #919191;
  --charcoal-text5-hover: #f5f5f5;
  --charcoal-text5-press: #d6d6d6;

  /* Typography */
  --font-system: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Hiragino Kaku Gothic ProN, Meiryo;
  --font-arial: Arial;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-136: 136px;
  --space-216: 216px;

  /* Border Radius */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-20: 20px;
  --radius-22: 22px;
  --radius-24: 24px;
  --radius-full: 50%;

  /* Borders */
  --border-light: 1px solid rgba(0,0,0,0.08);
}

8. AI Coding Assistant Prompt

# Pixiv Design System Specification

You are a Pixiv design expert. Build UIs matching their visual language exactly.

## Brand Context
Pixiv is a creative community platform. The UI is functional and flat, with a bright brand blue for CTAs. Typography relies on native system fonts for speed and familiarity. Spacing follows an 8px grid with occasional small deviations.

## Color Palette
- White: #ffffff — Page backgrounds, text on dark
- Charcoal Gray: #464a4d — Primary body text
- Black: #000000 — Icons, rare text
- Link Blue Light: #669fc2 — Inline links
- Link Blue Deep: #3d7699 — Secondary links
- Light Gray: #b3b3b3 — Dividers, disabled states
- Dark Gray: #333333 — GDPR header text
- Mid Gray: #858585 — Secondary text
- Brand Blue Press: #005fcc — Active state for brand elements
- Sky Blue: #6dcaea — Hover/focus alt
- Deep Sky Blue: #0082d9 — Hover/focus alt
- Transparent Black 7%: rgba(0,0,0,0.07) — Hover overlays
- Brand Blue: #0096fa — Primary buttons, CTAs
- Brand Blue Hover: #0090f0 — Hover on brand elements
- Brand Blue Press: #007ed2 — Pressed buttons
- Charcoal Text1: #1f1f1f — Headlines
- Charcoal Text1 Hover: #1e1e1e — Hover text
- Charcoal Text1 Press: #1a1a1a — Press text
- Charcoal Text2 Hover: #444444 — Hover subtext
- Charcoal Text2 Press: #3c3c3c — Active subtext
- Charcoal Text3 Press: #707070 — Disabled/pressed tertiary
- Charcoal Text4 Hover: #a6a6a6 — Hover quaternary
- Charcoal Text4 Press: #919191 — Press quaternary
- Charcoal Text5 Hover: #f5f5f5 — Light hover bg/text
- Charcoal Text5 Press: #d6d6d6 — Light pressed bg/text

## Typography
- Font families: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Hiragino Kaku Gothic ProN, Meiryo; Arial for buttons
- Sizes:
  - Caption: 14px, 400, LH 1.57
  - Link: 14px, 400, LH 1.57
  - Button: 14px, 700, LH 1.57
  - Link Bold: 14px, 700, LH 2.86
  - Caption Arial: 14px, 400, LH 1.57
  - Link Small: 12px, 400, LH 1.50
  - Caption Bold Small: 12px, 700, LH 1.67
  - Link Bold Small: 12px, 700, LH 1.67
  - Caption Tall: 12px, 400, LH 2.50

## Spacing & Grid
Base: 8px grid.
Values: 1px, 4px, 5px, 8px, 12px, 16px, 32px, 36px, 40px, 136px, 216px.
Use multiples for padding/margin.

## Border Radius
- sm: 4px — inputs
- xs: 6px — small divs
- md: 8px — cards, lists
- pill: 20px — buttons
- pill-lg: 22px — links
- block-lg: 24px — large blocks
- full: 50% — avatars

## Shadows & Depth
Flat design—no shadows. Use thin borders (1px rgba(0,0,0,0.08)) for separation.

## Components

### Primary Button
Default:
- Background: #0096fa
- Text: #ffffff
- Padding: 0px 24px
- Border-radius: 20px
- Font: Arial, 14px, 700
Hover:
- Background: #a6a6a6
- Text: #ffffff

### Secondary Icon Button
Default:
- Background: rgba(0,0,0,0.04)
- Text: transparent
- Padding: 1px 6px
- Border-radius: 20px
Hover:
- Background: #a6a6a6
- Text: #ffffff

### Links
Default colors: see palette. No underline. Hover flips to white.

### Inputs
Default:
- Bg: #ffffff
- Text: #666666
- Border-radius: 4px
- Padding: 0px 8px 0px 26px
Focus:
- Bg: #ffffff
- Outline: none
- Text: #ffffff

## Layout & Responsive Rules
Breakpoints: 1130px, 1300px. Fixed-width containers with section padding from spacing scale.

## Interaction Rules
- Transition timing: 150ms ease for hover/active changes
- No shadows—feedback via color change
- Focus indicators: none or minimal outline

## DO List
- Use only colors from palette
- Maintain 8px grid
- Use Arial for buttons
- Keep links without underline
- Use pill radii for buttons

## DON'T List
- Don't add shadows
- Don't mix sharp and rounded corners
- Don't use custom colors
- Don't underline links unless accessibility requires

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #0096fa;
  color: #ffffff;
  padding: 0 24px;
  border-radius: 20px;
  font-family: Arial;
  font-size: 14px;
  font-weight: 700;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #a6a6a6;
}
```

Input Field:
```css
.input-text {
  background: #ffffff;
  color: #666666;
  border-radius: 4px;
  padding: 0 8px 0 26px;
  border: none;
}
.input-text:focus {
  outline: none;
  color: #ffffff;
}
```

Link:
```css
.link {
  color: #669fc2;
  text-decoration: none;
}
.link:hover {
  color: #ffffff;
}
```

9. Summary

TL;DR: Pixiv’s UI is flat, functional, and content-first. Bright brand blue drives interaction, neutral grays handle the rest. System fonts keep it fast. Rounded pills for buttons add friendliness. No shadows, just subtle borders.

Brand Keywords: art-focused-functional, flat-contrast, blue-accent, content-first