← Back to Skills / Marketplace / cozy
SKL · 17PRO

Cozy.

Early 2000s computer nostalgia meets cottagecore warmth. Hand-illustrated OS elements, thick warm outlines, and a soft peach palette — for apps that feel as good as they look.

UNLOCK WITH PRO →
● Live preview · Cozy demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

Cozy UI is what happens when early 2000s computer nostalgia gets filtered through the warmth of a cottagecore aesthetic — browser windows, dialog boxes, folder icons, and file tabs, all drawn with thick hand-illustrated outlines and filled in with the softest peach-and-warm-orange palette you've ever seen on a screen. It looks like someone took Windows XP, made it deeply comforting, and turned it into stickers. The people who love this aesthetic build their entire digital life around it, from their Notion templates to their desktop wallpaper to the apps they choose to use daily.

● Looks Like
Animal Crossing's UIStardew Valley menusLo-fi aesthetic Notion templatesCozy game interfacesThe most-saved posts in Tumblr and Pinterest 'digital cottage' communitiesBear app if it had a much warmer personalityThe kind of desktop setup people screenshot and post with 50,000 likes
02 · Best For / Avoid If
＋ Best For
+Personal productivity apps — journaling, habit tracking, to-do lists, daily planners
+Note-taking and personal knowledge tools
+Apps targeting people who care about how their digital workspace feels, not just how it functions
+Community and social tools for creative, lifestyle, or wellness audiences
+Any product where the experience of using it is as important as what it does
+Consumer apps targeting women and younger audiences who grew up with cozy game aesthetics
× Avoid If
×Your product is professional or B2B in any way — this aesthetic signals 'personal and playful,' not 'serious tool'
×Your interface has complex data, tables, or dense information — the illustrated style can't carry high information density without breaking down
×Your audience needs the product to feel credible or authoritative — Cozy OS trades credibility for warmth, intentionally
×You're building for users who prefer dark mode — this aesthetic is warm light surfaces only, always
03 · Design Philosophy
01

Everything is illustrated

The defining rule of the Cozy aesthetic is that UI elements look hand-drawn. Thick warm outlines — like a felt-tip pen traced over everything — give buttons, windows, icons, and containers a sticker-like quality that makes every element feel made by hand. The illustration style is the aesthetic; without it, the aesthetic collapses.

02

Nostalgia is the emotional engine

The specific OS elements — browser tabs, dialog boxes with YES/NO buttons, folder icons, scrollbars — exist to trigger a specific memory of when computers felt new and exciting and personal. Cozy OS uses that nostalgia deliberately, wrapping familiar old-internet shapes in colors warm enough to make them feel safe and warm.

03

Warmth over precision

Cozy UI rewards organic looseness — elements that feel placed by hand, slightly imperfect spacing that reads as intentional, dotted lines and small corner squares that reference selection handles from old software. The slight imperfection is the point; it's what makes it feel made by hand.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — mention the skill name to invoke it automatically
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Losing the outlines
The thick warm brown outlines on every element are what makes this aesthetic work — without them it collapses into generic pastel. Make sure Claude applies a consistent stroke to every UI element, not just the illustrative ones.
! WARNING
Wrong shade of brown for outlines
Outlines should use a specific warm brown — like #8B4A2B or similar. That specific warmth is what makes the aesthetic feel cozy and considered.
! WARNING
Too many colors at once
Cozy UI has a tight palette: warm peach background, one warm orange, one dusty pink, one muted sky blue, and white. Adding more colors breaks the cohesion fast. Name the exact palette and tell Claude to stay inside it.
! WARNING
Functional icons instead of illustrated ones
Standard Lucide or Heroicons completely destroy this aesthetic. Every icon needs to match the hand-drawn illustration style — ask Claude to describe icons in illustrated terms, or use the outlined drawing style consistently across every icon and symbol.
● 07 · Download

Beautiful designs in minutes.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →