Yoonet Design System

Modal Composite Prompt

Prompt intent

Generate a Modal composite component that follows Yoonet AU & NZ tokens, typography, spacing, and interaction conventions.

Centered dialog overlay with header, body, and footer slots.

Output target

Composite layout + usage-ready code

modal-composite-component-prompt.txtComposite Component Prompt

# Modal - Yoonet AU & NZ Composite Component Prompt

You are building a composite component named Modal for Yoonet AU & NZ.
Use the composite patterns in @/components/composite and primitives in @/components/ui.

## Active Brand Tokens
--primary: hsl(231 100% 77%);         /* #8A9EFF */
--primary-foreground: hsl(0 0% 100%); /* #fff */
--secondary: hsl(183 70% 76%);     /* #98E9ED */
--secondary-foreground: hsl(235 22% 12%);
--destructive: hsl(341 100% 70%); /* #FF6495 */
--radius: 0.5rem;
--font-heading: var(--font-heading);  /* Manrope */
--font-body: var(--font-body);        /* Inter */

## Composition Rules
- Build from shadcn/ui primitives and existing composite patterns
- Use cn() from @/lib/utils for conditional classes
- No inline hex values. Use CSS variables only
- Keep layout responsive with sm, md, lg breakpoints
- Use accessible roles and aria attributes where needed

## Output
- Return a React component with a small props interface
- Include a short usage example below the component
- Keep copy concise and data realistic

Recommended workflow

- Start from the composite pattern and refine content before styling.

- Validate spacing and color contrast with brand tokens.

- Check responsive behavior at mobile, tablet, and desktop sizes.