# DESIGN.md · Phosphor Icons (IC-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: Icon Library · Category: D. Icons and Visual Assets
- Platforms: Web, React, Vue, Flutter, Swift
- Color theme: Warm neutral · Layout pattern: Split hero · Mood: Playful, crafted, warm
- License / terms: MIT
- Industry: Open-source design assets
- Patterns: Split hero with artwork

Flexible icon family: Thin, Light, Regular, Bold, Fill, Duotone.

### Analysis (ours)
phosphoricons.com (our capture) is the most art-directed icon site in this library: a warm off-white canvas (#EEEAE3, ESTIMATED), lime-yellow notice banners in monospace text, and tactile props (paper clips, a mixer-style control panel) around the headline. The large, light-weight headline is left-aligned above two outlined buttons (‘Get started’, ‘Explore icons’) and a two-column list of arrow links (Download all (9,072 at capture), Figma plugin, Sketch plugin, GitHub, Request an icon, Donate). The site credits its own type: Manrope and IBM Plex Mono (OFFICIAL, stated on phosphoricons.com). The family spans six weights (Thin, Light, Regular, Bold, Fill, Duotone), so the same icon can match light body text or bold UI chrome. Lesson: choose the icon weight that matches your text weight rather than one weight everywhere. Pitfall: the two stacked banners push the hero down and compete with the headline on first view.

### Best practices (ours)
- Match icon weight to type weight (Light with light text, Bold with bold labels).
- Use Fill or Duotone only for selected or emphasized states, and Regular elsewhere.
- Use one weight per component so a toolbar never mixes Thin and Bold.
- Keep site-wide notices to one dismissible banner.

## 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:

- `#EEEAE3` ~62%
- `#ABA193` ~9%
- `#BDDA58` ~7%
- `#3E3D3A` ~7%
- `#827C71` ~2%
- `#D4DCA6` ~2%

## 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: **Split hero** (from our captures).

## Do’s and don’ts
- Do: Use off-white/cream surfaces and warm grays; keep accents sparse.
- Don’t: Don’t switch to cold pure-white/blue-gray surfaces.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://phosphoricons.com
- Library entry: https://design-library-byt.pages.dev/entry/IC-003