puccha.ai Platform UI Kit

Packaged assets: 15 PNG source assets + @512 variants + SVG UI icons.

Folders

• brand/ — wordmark and chat icon
• mascot/ — standalone mascot poses
• ui/ — product UI state illustrations
• icons/ — simple SVG UI icons

UI Usage Map

Asset	Use
ui/empty-chat.png	Empty chat screen / start conversation
ui/upload-files.png	Knowledge base upload / file ingestion
ui/processing.png	AI thinking / file indexing / workflow running
ui/success.png	Completed task / save success
ui/error-oops.png	Failed request / invalid file / API error
ui/no-results.png	Search found nothing
ui/security-permission.png	Private workspace / permission / PDPA notice
ui/maintenance.png	Maintenance / system update
ui/upgrade-premium.png	Pricing / premium feature / upgrade modal

Mascot Usage

Asset	Use
mascot/mascot-hero.png	Website hero / pitch deck
mascot/mascot-waving.png	Welcome / onboarding
mascot/mascot-thinking.png	AI generating / loading
mascot/mascot-happy.png	Positive feedback

CSS Tokens

:root {
  --puccha-navy: #100A3A;
  --puccha-teal: #00B8B0;
  --puccha-cyan: #37F2E5;
  --puccha-purple: #7C4DFF;
  --puccha-bg: #F7FFFF;
}

Transparency

See transparency_report.json. The PNGs were generated as transparent-background style assets; this report checks actual alpha-channel presence.