PixelDiary
PixelDiary is a design system for personal photo blogs and visual journals that captures the tactile warmth of a handmade scrapbook. Playful handwritten headings, pastel accent colors, and rounded corners create an approachable, diary-like atmosphere. The spacious density ensures photos remain the star while subtle layered shadows give elements a pasted-onto-the-page quality. It is joyful, intimate, and unapologetically personal.
Color Palette
Brand Palette
Surface Palette
Content Palette
Border Palette
Semantic Colors
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 8pxPixelDiary is a design system for personal photo blogs and visual journals that captures the tactile warmth of a handmade scrapbook. Playful handwritten headings, pastel accent colors, and rounded corners create an approachable, diary-like atmosphere. The spacious density ensures photos remain the star while subtle layered shadows give elements a pasted-onto-the-page quality. It is joyful, intimate, and unapologetically personal.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Chips
List
Default
Checkbox
Default
RadioButton
Default
Tooltip
Default
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here