HeyAlpha AI Kiosk Design System v1.1

This design system is built for AI-driven, touchless, and conversational food ordering interfaces where UI dynamically adapts based on user intent and context.

Typography

DisplayInter · 32--36px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SectionInter · 24px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyInter · 16--18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionInter · 12--14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

This design system is built for AI-driven, touchless, and conversational food ordering interfaces where UI dynamically adapts based on user intent and context.

0. System Intent

This design system is built for AI-driven, touchless, and conversational

food ordering interfaces where UI dynamically adapts based on user

intent and context.

1. Core Principles

• Intent-driven UI → Interface adapts to user input\

• Zero hesitation design → Reduce decision time\

• Touchless-first interaction → Voice + minimal taps\

• Instant feedback loops → Every action is visible\

• Progressive disclosure → Show only relevant options

2. Visual Foundations

### Colors

• Primary: #8B5E3C (Brand)

• Interaction: #2BA8A2 (Active / Highlight)

• Accent: #FFD23F (CTA emphasis)

• Background: #F7F5F2 (Surface)

### Typography

• Display: 32--36px

• Section: 24px

• Body: 16--18px

• Caption: 12--14px

3. Interaction Primitives

### AI Trigger Button (Mic)

States: Idle, Listening, Processing, Error

### Dynamic Action Button

States: Default, Loading, Disabled

6. Dynamic UI Rules

• UI assembled from reusable components

• Based on intent and context

7. Navigation Model

Discover → Select → Customize → Confirm

8. Accessibility

• Minimum 48px touch targets

• High contrast

• Voice-first

9. Data Contracts

### FoodCard

• id

• name

• price

• image

• tags

• availability

10. System Philosophy

UI adapts to conversation, not fixed flows.
Download .md
mahimaalphadroid015-eng mahimaalphadroid015-eng @mahimaalphadroid015-eng
License MIT
Uploaded 3 weeks ago
Version v1
File size 1.6 KB
Downloads 16
Copies 2
conversational dynamic-ui food-ordering saas touchless

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/mahimaalphadroid015-eng/heyalpha-ai-kiosk-design-system-v1-1 and implement it in my code

Don't have the MCP? Install it here