# DESIGN.md · DiceBear · Notionists (Notion-style avatars) (AV-003)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Avatar Style · Category: J. Avatars and Illustrations
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Documentation · Mood: Notion-like, sketchy
- License / terms: CC0 1.0 (remix of Notionists by Zoish, per dicebear.com/licenses)
- Industry: Open-source design assets
- Patterns: Docs with code tabs

Hand-drawn, Notion-like black-and-white heads. The neutral variant (notionists-neutral) is also CC0. Works well in docs and collaboration UIs.

### Analysis (ours)
The Notionists page (our capture) follows the same DiceBear template as Lorelei (style sidebar, preview strip, LICENSE box crediting Zoish under CC0 1.0, code tabs, options rail), with a sponsored CDN card in the right rail. The style differs: half-body characters drawn in black hand-drawn lines, often posing with a small prop (a phone or a coffee cup), and options that include Gesture, Clothes Graphic, Ink Color and Paper Color. The sketchy, black-and-white look matches the illustration style many docs and workspace tools use, which is why it fits collaboration UIs. Lesson: the Ink Color and Paper Color options let you tint the whole set to your brand while keeping the hand-drawn feel. Pitfall: half-body poses with props are busy at small sizes, so crop to the head for 24–32px avatars.

### Best practices (ours)
- Use Notionists for larger placements (profile headers, comment threads), not tiny 24px chips.
- Tint with Paper Color to a soft brand tone and keep Ink Color dark for contrast.
- Pair with a matching illustration style elsewhere so avatars and empty states feel like one family.
- Use notionists-neutral when you want faces without varied skin tones and props.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Yes
- Attribution: Not required (CC0)
- Redistribution: Allowed (CC0)
- How you get it: DiceBear API / libraries

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FAFAF9` ~46%
- `#CBCBCC` ~8%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Documentation** (from our captures).

## Usage
```
https://api.dicebear.com/10.x/notionists/svg?seed=Kenji
```

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.dicebear.com/styles/notionists/
- Library entry: https://design-library-byt.pages.dev/entry/AV-003