{ "designSystem": { "name": "RoseUI", "version": "1.2", "description": "A delightful design system for restaurants", "colors": { "rose": { "50": "#fff1f2", "100": "#ffe4e6", "200": "#fecdd3", "300": "#fda4af", "400": "#fb7185", "500": "#f43f5e", "600": "#e11d48", "700": "#be123c", "800": "#9f1239", "900": "#881337" }, "zinc": { "50": "#fafafa", "100": "#f4f4f5", "200": "#e4e4e7", "300": "#d4d4d8", "400": "#a1a1aa", "500": "#71717a", "600": "#52525b", "700": "#3f3f46", "800": "#27272a", "900": "#18181b" } }, "typography": { "fontFamily": { "sans": "Nunito, sans-serif", "pretty": "Pacifico, cursive" }, "fontSize": { "xs": "0.75rem", "sm": "0.875rem", "base": "1rem", "lg": "1.125rem", "xl": "1.25rem", "2xl": "1.5rem", "3xl": "1.875rem", "4xl": "2.25rem", "5xl": "3rem", "6xl": "3.75rem" }, "fontWeight": { "normal": "400", "semibold": "600", "bold": "700" }, "letterSpacing": { "tighter": "-0.25em" } }, "spacing": { "0": "0px", "1": "0.25rem", "2": "0.5rem", "3": "0.75rem", "4": "1rem", "5": "1.25rem", "6": "1.5rem", "8": "2rem", "10": "2.5rem", "12": "3rem", "16": "4rem", "20": "5rem", "24": "6rem", "32": "8rem" }, "borderRadius": { "sm": "0.1875rem", "DEFAULT": "0.375rem", "md": "0.5625rem", "lg": "0.75rem", "xl": "1.125rem", "2xl": "1.5rem", "3xl": "2.25rem" }, "boxShadow": { "sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)", "DEFAULT": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)", "md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", "lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", "xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)" }, "components": { "button": { "base": "inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-300", "primary": "text-white bg-rose-600 hover:bg-rose-700 focus:ring-rose-500", "secondary": "text-rose-700 bg-rose-100 hover:bg-rose-200 focus:ring-rose-500" }, "input": { "base": "block w-full px-3 py-2 border border-zinc-300 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 sm:text-sm" } }, "componentStructure": { "guidelines": [ "Each component should have a clear hierarchy of elements", "The root element of the component contains the main styles", "Nested elements have their specific styles" ] }, "classOrder": [ "layout", "boxModel", "typography", "visual", "interactiveStates" ], "responsivePrefixes": [ "sm:", "md:", "lg:", "xl:", "2xl:" ], "aiPromptTemplate": "Design a {COMPONENT_NAME} using only Tailwind CSS classes for the RoseUI design system. Follow these guidelines:\n\n1. Structure the component with a clear hierarchy of elements.\n2. Use only Tailwind CSS classes, avoiding custom class names.\n3. Order Tailwind classes as follows:\n - Layout (display, position)\n - Box model (width, height, padding, margin)\n - Typography\n - Visual (background, border)\n - Interactive states (hover, focus)\n\n4. Use only colors from the RoseUI color palette (rose and zinc)\n5. Apply typography styles consistent with RoseUI font specifications\n6. Use spacing and sizing values from the RoseUI spacing scale\n7. Implement border-radius and box-shadow values as defined in RoseUI\n8. Include responsive design considerations using Tailwind's responsive prefixes\n9. Use 'font-pretty' for decorative headings where appropriate\n10. Apply 'tracking-tighter' to 'font-pretty' headings for tighter letter spacing\n\nComponent requirements:\n{SPECIFIC_REQUIREMENTS_FOR_THE_COMPONENT}\n\nPlease provide the HTML structure with Tailwind CSS classes, and explain your design decisions.", "additionalConfigurations": { "iconSet": { "name": "Lucide Icons", "cdn": "https://unpkg.com/lucide@latest" }, "placeholderImages": { "type": "Base64 PNG Pixel", "lightMode": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "darkMode": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" }, "darkMode": { "class": "dark", "mediaQuery": "@media (prefers-color-scheme: dark)" }, "customClasses": { "fontPretty": "font-pretty", "trackingTighter": "tracking-tighter" }, "backgroundPatterns": { "useInlineSVG": true, "applyToSections": true } } } }