# DESIGN.md · DiceBear · Lorelei (AV-002)

> 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: Line-art, friendly
- License / terms: CC0 1.0 (remix of Lorelei by Lisa Wischofsky, per dicebear.com/licenses)
- Industry: Open-source design assets
- Patterns: Docs with code tabs

Clean black line-art portrait avatars; a neutral variant (lorelei-neutral) is also CC0. Good default for profile placeholders in minimal UIs.

### Analysis (ours)
The Lorelei page (our capture) uses DiceBear’s documentation template: a left sidebar listing every style (with ‘New’ badges on recent ones), a breadcrumb and ‘View as Markdown’ link, a short description, a preview strip of eight avatars on a checkerboard that shows the transparent background, a LICENSE box crediting the original artist (Lisa Wischofsky, CC0 1.0), and code tabs for HTTP-API, JS, PHP, Python, Rust, Go, Dart, C# and CLI. A right-hand ‘On this page’ rail lists every option (earrings, eyebrows, freckles, glasses, hair, mouth and their colors). The style itself is fine black ink line art of heads with detailed hair and expressive eyes. Lesson: line art reads well on any background color, so Lorelei suits both light and dark UIs and pairs with a single tinted circle behind it. Pitfall: thin strokes get muddy below about 32px; at small sizes use a bolder style or show initials.

### Best practices (ours)
- Place Lorelei on a solid tinted circle or rounded square; the transparent default can vanish on busy backgrounds.
- Use it at 40px and above; switch to initials or a simpler style for 24–32px lists.
- Keep the same backgroundColor set across the product so lists look consistent.
- Use the neutral variant (lorelei-neutral) for a calmer, less expressive set.

### 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` ~51%
- `#CCCCCC` ~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/lorelei/svg?seed=Ada&backgroundColor=f3f0e8
```

## 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/lorelei/
- Library entry: https://design-library-byt.pages.dev/entry/AV-002