mobile-design-system-component-library-sheet

You are a Design Systems Lead.

Context

Create a 'UI Kit Component Sheet' for a mobile application. The sheet must demonstrate the {{design_language}} across the following elements: {{component_list}}. All elements must strictly follow a {{corner_radius}} specification.

Task

1. Arrange components in a clean, vertical and horizontal grid on a neutral grey background.
2. For each item in {{component_list}}, show both an 'Active' and 'Inactive' state.
3. Apply the specific {{design_language}} traits (e.g., if Material You, show dynamic color tinting; if Glassmorphism, show blur and transparency).
4. Ensure all shapes utilize the {{corner_radius}} consistently.
5. Include small, legible micro-copy labels beneath each component identifying its function.

Constraints

• MUST NOT clutter the sheet; maintain 48px padding between components.
• MUST use a consistent light source for shadows across all atoms.
• MUST exclude any brand logos; focus purely on UI primitives.

Output format

• [Component Layout]: The grid structure for the sheet.
• [State Definitions]: Visual differences for Active/Inactive components.
• [Style Rules]: Application of {{design_language}} and {{corner_radius}}.
• [Generation Prompt]: The final prompt for the image model.

Quality bar

• Are all components in {{component_list}} included?
• Is the design language consistent across all atoms?