p1-frontend-design-system

Deeply analyse the design of the attached screenshot to create a design.json (JSONC) file in this project that describes the style and design of every Ul component needed in a design system at a high level like a creative director. Capture high level guidelines for structure, spacing, fonts, colours, design style and design principles so I can use this file as the design guidelines for my app. The goal with this file is to instruct AI to be able to replicate this look easily in this project.

p2-frontend-design-system

This is a design system of a modern <DESCRIPTION> app called <PROJECT NAME>.

Throughly analyze the UI in this screenshot and describe this in as much detail as you can to hand over from a UI designer to developer. The brief should be both for light and dark mode and contain response breakpoints matching Tailswind CSS' defaults.

Output characteristics as a structured JSONC.

For colors, extract a rough palette and only detail accents and complex media. The goal is to use the only 2 palettes: primary and secondary similar to Tailwind colors. Alongside these 2, you can define any number of grays and accept colors for more complex UI (gradients, shadows, svg, etc.).

End with a prompt explaining how to implement the UI for a developer, but do not mention any tech specs; only a  brief of the UI to be implemented and the token rules + usage. Output the prompt as  markdown code.